diff --git a/browser/base/content/tabcandy/app/groups.js b/browser/base/content/tabcandy/app/groups.js index 3f766f6418a..27ff85472d5 100644 --- a/browser/base/content/tabcandy/app/groups.js +++ b/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 = $('
') + .appendTo(container); +*/ + var 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); diff --git a/browser/base/content/tabcandy/app/ui.js b/browser/base/content/tabcandy/app/ui.js index 8eeee5456c9..4324df43fdd 100644 --- a/browser/base/content/tabcandy/app/ui.js +++ b/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 diff --git a/browser/base/content/tabcandy/core/utils.js b/browser/base/content/tabcandy/core/utils.js index 6571b5b2966..c4b205cee4e 100644 --- a/browser/base/content/tabcandy/core/utils.js +++ b/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; } }; diff --git a/content/candies/zoomgroups/gfx/resizer.png b/browser/themes/pinstripe/browser/tabcandy/shared/resizer.png similarity index 100% rename from content/candies/zoomgroups/gfx/resizer.png rename to browser/themes/pinstripe/browser/tabcandy/shared/resizer.png diff --git a/browser/themes/pinstripe/browser/tabcandy/tabcandy.css b/browser/themes/pinstripe/browser/tabcandy/tabcandy.css index 5b8db418051..e55841f745e 100644 --- a/browser/themes/pinstripe/browser/tabcandy/tabcandy.css +++ b/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; } diff --git a/content/candies/ian1/index.html b/content/candies/ian1/index.html index 6437dc1cb49..df2aa8a72e6 100644 --- a/content/candies/ian1/index.html +++ b/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); - } - @@ -168,7 +163,7 @@ --> - + diff --git a/content/candies/original/index.html b/content/candies/original/index.html index 52f50f34f40..c5fbf8d7bca 100644 --- a/content/candies/original/index.html +++ b/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); - } - @@ -150,8 +145,7 @@ - + diff --git a/content/candies/revision-a/index.html b/content/candies/revision-a/index.html index 975fc53eef0..bacd520226e 100644 --- a/content/candies/revision-a/index.html +++ b/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); - } - @@ -159,7 +154,7 @@ - + diff --git a/content/candies/zoomgroups/index.html b/content/candies/zoomgroups/index.html index 19ffe533ea7..8bbeb9908b0 100644 --- a/content/candies/zoomgroups/index.html +++ b/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); - } - @@ -86,7 +81,7 @@ - +