+ We are entirely jQuery-free in revision-a!
authorIan Gilman <ian@iangilman.com>
Wed, 09 Jun 2010 14:45:48 -0700
changeset 49456 2635bd76fa3d9673b3f62fc8c14ebd5448a86dfe
parent 49455 7e2075df54fc16c7291620c78b8b7ad544fb13c0
child 49457 6dfc3bf713aec2358ab10aad315e1d17dc0e8823
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
+ We are entirely jQuery-free in revision-a! + You can now drop tabs on tabs + Resize works once again, but with iQ
browser/base/content/tabview/iq.js
--- a/browser/base/content/tabview/iq.js
+++ b/browser/base/content/tabview/iq.js
@@ -39,17 +39,17 @@
  * and other provisions required by the GPL or the LGPL. If you do not delete
  * the provisions above, a recipient may use your version of this file under
  * the terms of any one of the MPL, the GPL or the LGPL.
  *
  * ***** END LICENSE BLOCK ***** */
 
 // ##########
 // Title: iq.js
-// jQuery, hacked down to just the bits we need.
+// jQuery, hacked down to just the bits we need, with a bunch of other stuff added.
 (function( window, undefined ) {
 
 var iQ = function(selector, context) {
 		// The iQ object is actually just the init constructor 'enhanced'
 		return new iQ.fn.init( selector, context );
 	},
 
 	// Map over iQ in case of overwrite
@@ -784,96 +784,103 @@ iQ.fn = iQ.prototype = {
         
       var startMouse;
       var startPos;
       var elem;
       var $elem;
       var startSent;
       var startEvent;
       var droppables;
-      var $dropTarget;
+      var dropTarget;
       
       // ___ mousemove
       var handleMouseMove = function(e) {
+        // positioning 
         var mouse = new Point(e.pageX, e.pageY);
         var newPos = {
           left: startPos.x + (mouse.x - startMouse.x), 
           top: startPos.y + (mouse.y - startMouse.y)
         };
 
         $elem.css(newPos);
-        var bounds = $elem.bounds();
-        var $newDropTarget = null;
-        iQ.each(droppables, function(index, droppable) {
-          if(bounds.intersects(droppable.bounds)) {
-            var $possibleDropTarget = iQ(droppable.element);
-            var accept = true;
-            if($possibleDropTarget != $dropTarget) {
-              var dropOptions = $possibleDropTarget.data('iq-droppable');
-              if(dropOptions && iQ.isFunction(dropOptions.accept))
-                accept = dropOptions.accept.apply($possibleDropTarget.get(0), [elem]);
-            }
-            
-            if(accept) {
-              $newDropTarget = $possibleDropTarget;
-              return false;
-            }
-          }
-        });
 
-        if($newDropTarget != $dropTarget) {
-          var dropOptions;
-          if($dropTarget) {
-            dropOptions = $dropTarget.data('iq-droppable');
-            if(dropOptions && iQ.isFunction(dropOptions.out))
-              dropOptions.out.apply($dropTarget.get(0), [e]);
-          }
-          
-          $dropTarget = $newDropTarget; 
-
-          if($dropTarget) {
-            dropOptions = $dropTarget.data('iq-droppable');
-            if(dropOptions && iQ.isFunction(dropOptions.over))
-              dropOptions.over.apply($dropTarget.get(0), [e]);
-          }
-        }
-          
+        // drag events
         if(!startSent) {
           if(iQ.isFunction(options.start))
             options.start.apply(elem, [startEvent, {position: {left: startPos.x, top: startPos.y}}]);
           
           startSent = true;
         }
 
         if(iQ.isFunction(options.drag))
           options.drag.apply(elem, [e, {position: newPos}]);
           
+        // drop events
+        var bounds = $elem.bounds();
+        var newDropTarget = null;
+        iQ.each(droppables, function(index, droppable) {
+          if(bounds.intersects(droppable.bounds)) {
+            var possibleDropTarget = droppable.element;
+            var accept = true;
+            if(possibleDropTarget != dropTarget) {
+              var dropOptions = iQ(possibleDropTarget).data('iq-droppable');
+              if(dropOptions && iQ.isFunction(dropOptions.accept))
+                accept = dropOptions.accept.apply(possibleDropTarget, [elem]);
+            }
+            
+            if(accept) {
+              newDropTarget = possibleDropTarget;
+              return false;
+            }
+          }
+        });
+
+        if(newDropTarget != dropTarget) {
+          var dropOptions;
+          if(dropTarget) {
+            dropOptions = iQ(dropTarget).data('iq-droppable');
+            if(dropOptions && iQ.isFunction(dropOptions.out))
+              dropOptions.out.apply(dropTarget, [e]);
+          }
+          
+          dropTarget = newDropTarget; 
+
+          if(dropTarget) {
+            dropOptions = iQ(dropTarget).data('iq-droppable');
+            if(dropOptions && iQ.isFunction(dropOptions.over))
+              dropOptions.over.apply(dropTarget, [e]);
+          }
+        }
+          
         e.preventDefault();
       };
         
       // ___ mouseup
       var handleMouseUp = function(e) {
         iQ(window)
           .unbind('mousemove', handleMouseMove)
           .unbind('mouseup', handleMouseUp);
           
-        if($dropTarget) {
-          var dropOptions = $dropTarget.data('iq-droppable');
+        if(dropTarget) {
+          var dropOptions = iQ(dropTarget).data('iq-droppable');
           if(dropOptions && iQ.isFunction(dropOptions.drop))
-            dropOptions.drop.apply($dropTarget.get(0), [e]);
+            dropOptions.drop.apply(dropTarget, [e]);
         }
 
         if(startSent && iQ.isFunction(options.stop))
           options.stop.apply(elem, [e]);
           
         e.preventDefault();    
       };
       
       // ___ mousedown
       this.mousedown(function(e) {
+        if(Utils.isRightClick(e))
+          return;
+        
         var cancel = false;
         var $target = iQ(e.target);
         iQ.each(cancelClasses, function(index, class) {
           if($target.hasClass(class)) {
             cancel = true;
             return false;
           }
         });
@@ -885,24 +892,26 @@ iQ.fn = iQ.prototype = {
           
         elem = this;
         $elem = iQ(this);
         var pos = $elem.position();
         startMouse = new Point(e.pageX, e.pageY);
         startPos = new Point(pos.left, pos.top);
         startEvent = e;
         startSent = false;
-        $dropTarget = null;
+        dropTarget = null;
         
         droppables = [];
         iQ('.iq-droppable').each(function() {
-          droppables.push({
-            element: this, 
-            bounds: iQ(this).bounds()
-          });
+          if(this != elem) {
+            droppables.push({
+              element: this, 
+              bounds: iQ(this).bounds()
+            });
+          }
         });
 
         iQ(window)
           .mousemove(handleMouseMove)
           .mouseup(handleMouseUp);          
                     
         e.preventDefault();
       });
@@ -916,21 +925,104 @@ iQ.fn = iQ.prototype = {
   droppable: function(options) {
     try {
       if(options == 'enable')
         this.addClass('iq-droppable');
       else if(options == 'disable')
         this.removeClass('iq-droppable');
       else {
         this.addClass('iq-droppable');
-        this.data('iq-droppable', options);
+        this.data('iq-droppable', options || {});
       }
     } catch(e) {
       Utils.log(e);
     }
+  },
+  
+  // ----------
+  // Function: resizable
+  resizable: function(options) {
+    try {
+      iQ('.iq-resizable-handle', this).remove();
+
+      if(options == 'destroy') {
+        this.removeClass('iq-resizable');
+      } else {
+        if(!options)
+          options = {};
+          
+        this.addClass('iq-resizable');
+
+        var startMouse;
+        var startSize;
+        var elem;
+        var $elem;
+        
+        // ___ mousemove
+        var handleMouseMove = function(e) {
+          var mouse = new Point(e.pageX, e.pageY);
+          var newSize = {
+            width: Math.max(options.minWidth || 0, startSize.x + (mouse.x - startMouse.x)), 
+            height: Math.max(options.minHeight || 0, startSize.y + (mouse.y - startMouse.y))
+          };
+
+          if(options.aspectRatio) {
+            if(startAspect < 1)
+              newSize.height = newSize.width * startAspect;
+            else
+              newSize.width = newSize.height / startAspect;
+          }
+                        
+          $elem.css(newSize);
+  
+          if(iQ.isFunction(options.resize))
+            options.resize.apply(elem, [e]);
+            
+          e.preventDefault();
+          e.stopPropagation();
+        };
+          
+        // ___ mouseup
+        var handleMouseUp = function(e) {
+          iQ(window)
+            .unbind('mousemove', handleMouseMove)
+            .unbind('mouseup', handleMouseUp);
+            
+          if(iQ.isFunction(options.stop))
+            options.stop.apply(elem, [e]);
+            
+          e.preventDefault();    
+          e.stopPropagation();
+        };
+        
+        // ___ handle + mousedown
+        iQ('<div>')
+          .addClass('iq-resizable-handle iq-resizable-se')
+          .appendTo(this)
+          .mousedown(function(e) {
+            if(Utils.isRightClick(e))
+              return;
+            
+            elem = this.parentNode;
+            $elem = iQ(elem);
+            startMouse = new Point(e.pageX, e.pageY);
+            startSize = new Point($elem.width(), $elem.height());
+            startAspect = startSize.y / startSize.x;
+            
+            iQ(window)
+              .mousemove(handleMouseMove)
+              .mouseup(handleMouseUp);          
+                        
+            e.preventDefault();
+            e.stopPropagation();
+          });
+        }
+    } catch(e) {
+      Utils.log(e);
+    }
   }
 };
 
 // ----------
 // Give the init function the iQ prototype for later instantiation
 iQ.fn.init.prototype = iQ.fn;
 
 // ----------