X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=Roo%2FResizable.js;h=b0fb9f3b3f0435b26897c56cfb97d7d9820097a9;hb=75cbc4ce04c9c01ac47671cb01320ce699128d00;hp=46eebe8dfee650af4441ca0da7a507acec08996f;hpb=4d9cd83949f3c24871af08cebb30b1f8102ac4c9;p=roojs1

diff --git a/Roo/Resizable.js b/Roo/Resizable.js
index 46eebe8dfe..b0fb9f3b3f 100644
--- a/Roo/Resizable.js
+++ b/Roo/Resizable.js
@@ -28,6 +28,7 @@ Value   Description
  'sw'    southwest
  'se'    southeast
  'ne'    northeast
+ 'hd'    horizontal drag
  'all'   all
 </pre>
  * <p>Here's an example showing the creation of a typical Resizable:</p>
@@ -77,7 +78,8 @@ resizer.on("resize", myHandler);
  * @param {String/HTMLElement/Roo.Element} el The id or element to resize
  * @param {Object} config configuration options
   */
-Roo.Resizable = function(el, config){
+Roo.Resizable = function(el, config)
+{
     this.el = Roo.get(el);
 
     if(config && config.wrap){
@@ -130,8 +132,9 @@ Roo.Resizable = function(el, config){
     }
     // legacy
     this.corner = this.southeast;
-
-    if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1){
+    
+    // updateBox = the box can move..
+    if(this.handles.indexOf("n") != -1 || this.handles.indexOf("w") != -1 || this.handles.indexOf("hd") != -1) {
         this.updateBox = true;
     }
 
@@ -144,7 +147,7 @@ Roo.Resizable = function(el, config){
             this.resizeChild = Roo.get(this.resizeChild, true);
         }
     }
-
+    
     if(this.adjustments == "auto"){
         var rc = this.resizeChild;
         var hw = this.west, he = this.east, hn = this.north, hs = this.south;
@@ -174,6 +177,17 @@ Roo.Resizable = function(el, config){
          * @param {Roo.EventObject} e The mousedown event
          */
         "beforeresize" : true,
+        /**
+         * @event resizing
+         * Fired a resizing.
+         * @param {Roo.Resizable} this
+         * @param {Number} x The new x position
+         * @param {Number} y The new y position
+         * @param {Number} w The new w width
+         * @param {Number} h The new h hight
+         * @param {Roo.EventObject} e The mouseup event
+         */
+        "resizing" : true,
         /**
          * @event resize
          * Fired after a resize.
@@ -306,6 +320,7 @@ Roo.extend(Roo.Resizable, Roo.util.Observable, {
 
     // private
     updateChildSize : function(){
+        
         if(this.resizeChild){
             var el = this.el;
             var child = this.resizeChild;
@@ -331,7 +346,9 @@ Roo.extend(Roo.Resizable, Roo.util.Observable, {
 
     // private
     snap : function(value, inc, min){
-        if(!inc || !value) return value;
+        if(!inc || !value) {
+            return value;
+        }
         var newValue = value;
         var m = value % inc;
         if(m > 0){
@@ -371,6 +388,7 @@ Roo.extend(Roo.Resizable, Roo.util.Observable, {
 
     // private
     onMouseMove : function(e){
+        
         if(this.enabled){
             try{// try catch so if something goes wrong the user doesn't get hung
 
@@ -400,6 +418,7 @@ Roo.extend(Roo.Resizable, Roo.util.Observable, {
                     w += diffX;
                     w = Math.min(Math.max(mw, w), mxw);
                     break;
+             
                 case "south":
                     h += diffY;
                     h = Math.min(Math.max(mh, h), mxh);
@@ -415,6 +434,21 @@ Roo.extend(Roo.Resizable, Roo.util.Observable, {
                     y += diffY;
                     h -= diffY;
                     break;
+                case "hdrag":
+                    
+                    if (wi) {
+                        var adiffX = Math.abs(diffX);
+                        var sub = (adiffX % wi); // how much 
+                        if (sub > (wi/2)) { // far enough to snap
+                            diffX = (diffX > 0) ? diffX-sub + wi : diffX+sub - wi;
+                        } else {
+                            // remove difference.. 
+                            diffX = (diffX > 0) ? diffX-sub : diffX+sub;
+                        }
+                    }
+                    x += diffX;
+                    x = Math.max(this.minX, x);
+                    break;
                 case "west":
                     diffX = this.constrain(w, diffX, mw, mxw);
                     x += diffX;
@@ -517,17 +551,21 @@ Roo.extend(Roo.Resizable, Roo.util.Observable, {
                         h = Math.min(Math.max(mh, h), mxh);
                         w = ow * (h/oh);
                         y += th - h;
-                         x += tw - w;
+                        x += tw - w;
                        break;
 
                 }
             }
+            if (pos == 'hdrag') {
+                w = ow;
+            }
             this.proxy.setBounds(x, y, w, h);
             if(this.dynamic){
                 this.resizeElement();
             }
             }catch(e){}
         }
+        this.fireEvent("resizing", this, x, y, w, h, e);
     },
 
     // private
@@ -559,7 +597,10 @@ Roo.extend(Roo.Resizable, Roo.util.Observable, {
     getResizeChild : function(){
         return this.resizeChild;
     },
-
+    groupHandler : function()
+    {
+        
+    },
     /**
      * Destroys this resizable. If the element was wrapped and
      * removeEl is not true then the element remains.
@@ -589,7 +630,8 @@ Roo.extend(Roo.Resizable, Roo.util.Observable, {
 // private
 // hash to map config positions to true positions
 Roo.Resizable.positions = {
-    n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast"
+    n: "north", s: "south", e: "east", w: "west", se: "southeast", sw: "southwest", nw: "northwest", ne: "northeast", 
+    hd: "hdrag"
 };
 
 // private
@@ -604,7 +646,13 @@ Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
     }
     this.position = pos;
     this.rz = rz;
-    this.el = this.tpl.append(rz.el.dom, [this.position], true);
+    // show north drag fro topdra
+    var handlepos = pos == 'hdrag' ? 'north' : pos;
+    
+    this.el = this.tpl.append(rz.el.dom, [handlepos], true);
+    if (pos == 'hdrag') {
+        this.el.setStyle('cursor', 'pointer');
+    }
     this.el.unselectable();
     if(transparent){
         this.el.setOpacity(0);
@@ -619,6 +667,7 @@ Roo.Resizable.Handle = function(rz, pos, disableTrackOver, transparent){
 // private
 Roo.Resizable.Handle.prototype = {
     afterResize : function(rz){
+        Roo.log('after?');
         // do nothing
     },
     // private