+ moved groups.js and resizer.png to shared locations

+ more work on groups pushing things out of the way
+ some steps toward having groups and tabs share an interface
+ more geometry: we now have a point class, and the rect class now has center and intersect routines

--HG--
rename : content/candies/zoomgroups/gfx/resizer.png => browser/themes/pinstripe/browser/tabcandy/shared/resizer.png

browser/base/content/tabcandy/app/groups.js

@@ -25,12 +25,14 @@ function isEventOverElement(event, el){
   return isOver;
 }
 
+// ##########
 function Group(){}
 Group.prototype = {
   _children: [],
   _container: null,
   _padding: 30,
   
+  // ----------  
   _getBoundingBox: function(){
     var els = this._children;
     var el;
@@ -45,6 +47,7 @@ Group.prototype = {
     return boundingBox;
   },
   
+  // ----------  
   _getContainerBox: function(){
     var pos = $(this._container).position();
     var w = $(this._container).width();
@@ -59,7 +62,9 @@ Group.prototype = {
     }
   },
   
-  create: function(listOfEls){
+  // ----------  
+  create: function(listOfEls, manager) {
+    this.manager = manager;
     var self = this;
     this._children = $(listOfEls).toArray();
 
@@ -79,6 +84,11 @@ Group.prototype = {
       .appendTo("body")
       .animate({opacity:1.0}).dequeue();
     
+/*
+    var contentEl = $('<div class="group-content"/>')
+      .appendTo(container);
+*/
+    
     var resizer = $("<div class='resizer'/>")
       .css({
         position: "absolute",
@@ -132,24 +142,81 @@ Group.prototype = {
     }
     
     // ___ Push other objects away
-/*
-    var bb = Utils.getBounds(this._container);
-    $('.tab').each(function() {
-      $el = $(this);
-      if($el.data('group') != self) {
-        var box = Utils.getBounds(this);
-        if(box.intersects(bb)) {
-          if(box.right < bb.right) {
-            $el.animate({
-              left: box.left - (box.right - bb.left),       
-            });
-          }
-        }
-      }
-    });            
-*/
+    this.pushAway();
   },
   
+  // ----------  
+  pushAway: function() {
+    return; // TODO: not ready yet.
+    
+    var buffer = 10;
+    
+    var items = this.manager.getTopLevelItems();
+    $.each(items, function(index, item) {
+      item.pushAwayData = {};
+    });
+    
+    var pushOne = function(baseItem) {
+      baseItem.pushAwayData.anchored = true; 
+      var bb = baseItem.getBounds();
+      bb.inset(-buffer, -buffer);
+      var bbc = bb.center();
+    
+      $.each(items, function(index, item) {
+        if(item.pushAwayData.anchored)
+          return;
+          
+        var box = item.getBounds();
+        box.inset(-buffer, -buffer);
+        if(box.intersects(bb)) {
+          var offset = new Point();
+          var center = box.center(); 
+          if(Math.abs(center.x - bbc.x) < Math.abs(center.y - bbc.y)) {
+            if(center.y > bbc.y)
+              offset.y = bb.bottom - box.top; 
+            else
+              offset.y = bb.top - box.bottom;
+          } else {
+            if(center.x > bbc.x)
+              offset.x = bb.right - box.left; 
+            else
+              offset.x = bb.left - box.right;
+          }
+
+/*           Utils.log(offset); */
+          item.setPosition(box.left + offset.x, box.top + offset.y);
+/*           pushOne(item); */
+        }
+      });
+    };            
+      
+    pushOne(this);
+  },
+  
+  // ----------  
+  getBounds: function() {
+    var $titlebar = $('.titlebar', this._container);
+    var bb = Utils.getBounds(this._container);
+    var titleHeight = $titlebar.height();
+    bb.top -= titleHeight;
+    bb.height += titleHeight;
+    return bb;
+  },
+  
+  // ----------  
+  setPosition: function(left, top) {
+    var box = this.getBounds();
+    var offset = new Point(left - box.left, top - box.top);
+    $.each(this._children, function(index, value) {
+      var $el = $(this);
+      box = Utils.getBounds(this);
+      $el.animate({left: box.left + offset.x, top: box.top + offset.y});
+    });
+        
+    $(this._container).animate({left: left, top: top});
+  },
+
+  // ----------  
   add: function($el, dropPos){
     Utils.assert('add expects jQuery objects', Utils.isJQuery($el));
     var el = $el.get(0);
@@ -202,6 +269,7 @@ Group.prototype = {
     this.arrange();
   },
   
+  // ----------  
   remove: function(el){
     var self = this;
     $(el).data("toRemove", true);
@@ -229,6 +297,7 @@ Group.prototype = {
     
   },
   
+  // ----------  
   _updateGroup: function(){
     var self = this;
     this._children.forEach(function(el){
@@ -236,6 +305,7 @@ Group.prototype = {
     });    
   },
   
+  // ----------  
   arrange: function(options){
     if( options && options.animate == false ) animate = false;
     else animate = true;
@@ -293,6 +363,7 @@ Group.prototype = {
     
   },
   
+  // ----------  
   _addHandlers: function(container){
     var self = this;
     
@@ -348,6 +419,7 @@ Group.prototype = {
     }
 }
 
+// ##########
 var zIndex = 100;
 var $dragged = null;
 var timeout = null;
@@ -355,6 +427,7 @@ var timeout = null;
 window.Groups = {
   Group: Group, 
   
+  // ----------  
   dragOptions: {
     start:function(){
       $dragged = $(this);
@@ -369,6 +442,7 @@ window.Groups = {
     zIndex: 999,
   },
   
+  // ----------  
   dropOptions: {
     accept: ".tab",
     tolerance: "pointer",
@@ -400,7 +474,7 @@ window.Groups = {
           var group = $(target).data("group");
           if( group == null ){
             var group = new Group();
-            group.create( [target, dragged] );            
+            group.create([target, dragged], Groups);            
           } else {
             group.add( dragged );
           }
@@ -421,6 +495,7 @@ window.Groups = {
     }
   }, 
   
+  // ----------  
   arrange: function() {
     var $groups = $('.group');
     var count = $groups.length;
@@ -447,9 +522,27 @@ window.Groups = {
         y += h + padding;
       }
     });
-  }  
+  }, 
+  
+  // ----------  
+  getTopLevelItems: function() {
+    var items = [];
+    
+    $('.tab').each(function() {
+      $this = $(this);
+      if(!$this.data('group'))
+        items.push($this.data('tabItem'));
+    });
+    
+    $('.group').each(function() {
+      items.push($(this).data('group'));
+    });
+    
+    return items;
+  }
 };
 
+// ##########
 function scaleTab( el, factor ){  
   var $el = $(el);
 

browser/base/content/tabcandy/app/ui.js

@@ -4,6 +4,7 @@ $.expr[':'].icontains = function(obj, index, meta, stack){
 return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
 };
 
+// ##########
 Navbar = {
   get el(){
     var win = Utils.activeWindow;
@@ -14,12 +15,32 @@ Navbar = {
   hide: function(){ this.el.collapsed = true;}
 }
 
+// ##########
 var Tabbar = {
   get el(){ return window.Tabs[0].raw.parentNode; },
   hide: function(){ this.el.collapsed = true },
   show: function(){ this.el.collapsed = false }
 }
 
+// ##########
+window.TabItem = function(container, tab) {
+  this.container = container;
+  this.tab = tab;
+}
+
+window.TabItem.prototype = {
+  // ----------
+  getBounds: function() {
+    return Utils.getBounds(this.container);
+  },
+  
+  // ----------
+  setPosition: function(left, top) {
+    $(this.container).animate({left: left, top: top});
+  },
+}
+
+// ##########
 var Page = {
   init: function() {
     var self = this;
@@ -109,6 +130,10 @@ var Page = {
         $div.css({left: p.x, top: p.y});
       }
       
+      $div.each(function() {
+        $(this).data('tabItem', new TabItem(this, Tabs.tab(this)));
+      });
+      
       // TODO: Figure out this really weird bug?
       // Why is that:
       //    $div.find("canvas").data("link").tab.url

browser/base/content/tabcandy/core/utils.js

@@ -18,14 +18,20 @@ var extensionManager = Cc["@mozilla.org/extensions/manager;1"]
     .getService(Ci.nsIExtensionManager);  
 
 // ----------
-function Rect(left, top, width, height) {
+window.Point = function(x, y) {
+  this.x = (typeof(x) == 'undefined' ? 0 : x);
+  this.y = (typeof(y) == 'undefined' ? 0 : y);
+}
+
+// ----------
+window.Rect = function(left, top, width, height) {
   this.left = left;
   this.top = top;
   this.width = width;
   this.height = height;
 }
 
-Rect.prototype = {
+window.Rect.prototype = {
   get right() {
     return this.left + this.width;
   },
@@ -47,6 +53,17 @@ Rect.prototype = {
         && rect.left < this.right
         && rect.bottom > this.top
         && rect.top < this.bottom);      
+  },
+  
+  center: function() {
+    return new Point(this.left + (this.width / 2), this.top + (this.height / 2));
+  },
+  
+  inset: function(x, y) {
+    this.left += x;
+    this.width -= x * 2;
+    this.top += y;
+    this.height -= y * 2;
   }
 };
 

browser/themes/pinstripe/browser/tabcandy/tabcandy.css

@@ -6,7 +6,7 @@
   -moz-box-shadow: 0px 0px 10px rgba(255,0,0,1);
 }
 
-.group{
+.group {
   border: 1px inset rgba(0,0,0,.3);
   background-color: white;
   cursor: move;
@@ -29,6 +29,10 @@ input.name{
 
 /* Resizable
 ----------------------------------*/
+.resizer{
+  background-image: url(../../img/shared/resizer.png);
+}
+
 .ui-resizable { position: relative;}
 .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
 .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }

content/candies/ian1/index.html

@@ -130,11 +130,6 @@
     -moz-transition-timing-function: cubic-bezier(1.0, 0.0, 1.0, 1.0);        
   }
 
-  /* In Firefox 3.7, this relative url doesn't seem to work if stored in groups.css */
-  .resizer{
-    background-image: url(../../candies/zoomgroups/gfx/resizer.png);
-  }
-
   </style>
   
 </head>
@@ -168,7 +163,7 @@
   <script type="text/javascript;version=1.8" src="js/jquery.select.js"></script>  
 -->
   
-  <script type="text/javascript;version=1.8" src="../zoomgroups/js/groups.js"></script>
+  <script type="text/javascript;version=1.8" src="../../js/shared/groups.js"></script>
 
   <!-- BEGIN Switch Control -->
   <script type="text/javascript;version=1.8" src="../../js/optional/switch.js"></script>  

content/candies/original/index.html

@@ -126,11 +126,6 @@
     -moz-transition-timing-function: ease-out;        
   }  
 
-  /* In Firefox 3.7, this relative url doesn't seem to work if stored in groups.css */
-  .resizer{
-    background-image: url(../../candies/zoomgroups/gfx/resizer.png);
-  }
-    
   </style>
   
 </head>
@@ -150,8 +145,7 @@
   <script type="text/javascript;version=1.8" src="../../js/core/mirror.js"></script>
   <script type="text/javascript;version=1.8" src="js/ui.js"></script>  
 
-  <script type="text/javascript;version=1.8"
-  src="../zoomgroups/js/groups.js"></script>
+  <script type="text/javascript;version=1.8" src="../../js/shared/groups.js"></script>
   
   <!-- BEGIN Switch Control -->
   <script type="text/javascript;version=1.8" src="../../js/optional/switch.js"></script>  

content/candies/revision-a/index.html

@@ -128,11 +128,6 @@
     -moz-transition-timing-function: ease-out;        
   }  
 
-  /* In Firefox 3.7, this relative url doesn't seem to work if stored in groups.css */
-  .resizer{
-    background-image: url(../../candies/zoomgroups/gfx/resizer.png);
-  }
-    
   </style>
   
 </head>
@@ -159,7 +154,7 @@
   <script type="text/javascript;version=1.8" src="../../js/core/mirror.js"></script>
   <script type="text/javascript;version=1.8" src="js/ui.js"></script>  
 
-  <script type="text/javascript;version=1.8" src="../zoomgroups/js/groups.js"></script>
+  <script type="text/javascript;version=1.8" src="../../js/shared/groups.js"></script>
   
   <!-- BEGIN Switch Control -->
   <script type="text/javascript;version=1.8" src="../../js/optional/switch.js"></script>  

content/candies/zoomgroups/index.html

@@ -38,11 +38,6 @@
         font-family: Helvetica;
       }
 
-      /* In Firefox 3.7, this relative url doesn't seem to work if stored in groups.css */
-      .resizer{
-        background-image: url(../../candies/zoomgroups/gfx/resizer.png);
-      }
-                
     </style>
   </head>
   
@@ -86,7 +81,7 @@
 
     <script type="text/javascript;version=1.8" src="../../js/optional/jquery-ui.js"></script>
 
-    <script src="js/groups.js"></script>
+    <script type="text/javascript;version=1.8" src="../../js/shared/groups.js"></script>
   
     <!-- BEGIN Switch Control -->
     <script type="text/javascript;version=1.8" src="../../js/optional/switch.js"></script>