From 2f3def3f85a7322d34a0600a737a9c3c54a1a3fd Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Mon, 29 Mar 2010 11:55:13 -0700 Subject: [PATCH] + Removed Group.create() and made it the constructor instead + Added Group to window + Moved window.Items into items.js + Moved window.TabItem into tabitems.js and added a window.TabItems, which is largely the mod routine pulled from ui.js --- browser/base/content/tabcandy/app/groups.js | 197 ++++++++---------- browser/base/content/tabcandy/app/items.js | 20 ++ browser/base/content/tabcandy/app/tabitems.js | 108 ++++++++++ browser/base/content/tabcandy/app/ui.js | 110 +--------- content/candies/revision-a/index.html | 5 +- 5 files changed, 220 insertions(+), 220 deletions(-) diff --git a/browser/base/content/tabcandy/app/groups.js b/browser/base/content/tabcandy/app/groups.js index c6e73dc31fc..05cf7f6739c 100644 --- a/browser/base/content/tabcandy/app/groups.js +++ b/browser/base/content/tabcandy/app/groups.js @@ -26,8 +26,90 @@ function isEventOverElement(event, el){ } // ########## -function Group(){} -Group.prototype = { +window.Group = function(listOfEls, options) { + var self = this; + this._children = $(listOfEls).toArray(); + + var boundingBox = this._getBoundingBox(); + var padding = 30; + var container = $("
") + .css({ + position: "absolute", + top: boundingBox.top-padding, + left: boundingBox.left-padding, + width: boundingBox.width+padding*2, + height: boundingBox.height+padding*2, + zIndex: -100, + opacity: 0, + }) + .data("group", this) + .appendTo("body") + .animate({opacity:1.0}).dequeue(); + +/* + var contentEl = $('
') + .appendTo(container); +*/ + + var resizer = $("
") + .css({ + position: "absolute", + width: 16, height: 16, + bottom: 0, right: 0, + }).appendTo(container); + + var titlebar = $("
x
") + .appendTo(container) + + titlebar.css({ + width: container.width(), + position: "relative", + top: -(titlebar.height()+2), + left: -1, + }); + + $('.close', titlebar).click(function() { + $.each(self._children, function(index, child) { + var tab = Tabs.tab(child); + tab.close(); + }); + }); + + // On delay, show the title bar. + var shouldShow = false; + container.mouseover(function(){ + shouldShow = true; + setTimeout(function(){ + if( shouldShow == false ) return; + container.find("input").focus(); + titlebar + .css({width: container.width()}) + .animate({ opacity: 1}).dequeue(); + }, 500); + }).mouseout(function(e){ + shouldShow = false; + if( isEventOverElement(e, container.get(0) )) return; + titlebar.animate({opacity:0}).dequeue(); + }) + + this._container = container; + + this._addHandlers(container); + this._updateGroup(); + + var els = this._children; + this._children = []; + for(var i in els){ + this.add( els[i] ); + } + + // ___ Push other objects away + if(!options || !options.suppressPush) + this.pushAway(); +}; + +// ---------- +window.Group.prototype = { _children: [], _container: null, _padding: 30, @@ -62,92 +144,8 @@ Group.prototype = { } }, - // ---------- - create: function(listOfEls, options) { - var self = this; - this._children = $(listOfEls).toArray(); - - var boundingBox = this._getBoundingBox(); - var padding = 30; - var container = $("
") - .css({ - position: "absolute", - top: boundingBox.top-padding, - left: boundingBox.left-padding, - width: boundingBox.width+padding*2, - height: boundingBox.height+padding*2, - zIndex: -100, - opacity: 0, - }) - .data("group", this) - .appendTo("body") - .animate({opacity:1.0}).dequeue(); - -/* - var contentEl = $('
') - .appendTo(container); -*/ - - var resizer = $("
") - .css({ - position: "absolute", - width: 16, height: 16, - bottom: 0, right: 0, - }).appendTo(container); - - var titlebar = $("
x
") - .appendTo(container) - - titlebar.css({ - width: container.width(), - position: "relative", - top: -(titlebar.height()+2), - left: -1, - }); - - $('.close', titlebar).click(function() { - $.each(self._children, function(index, child) { - var tab = Tabs.tab(child); - tab.close(); - }); - }); - - // On delay, show the title bar. - var shouldShow = false; - container.mouseover(function(){ - shouldShow = true; - setTimeout(function(){ - if( shouldShow == false ) return; - container.find("input").focus(); - titlebar - .css({width: container.width()}) - .animate({ opacity: 1}).dequeue(); - }, 500); - }).mouseout(function(e){ - shouldShow = false; - if( isEventOverElement(e, container.get(0) )) return; - titlebar.animate({opacity:0}).dequeue(); - }) - - this._container = container; - - this._addHandlers(container); - this._updateGroup(); - - var els = this._children; - this._children = []; - for(var i in els){ - this.add( els[i] ); - } - - // ___ Push other objects away - if(!options || !options.suppressPush) - this.pushAway(); - }, - // ---------- pushAway: function() { - return; //doesn't work in this version of groups.js var buffer = 10; var items = Items.getTopLevelItems(); @@ -446,7 +444,7 @@ Group.prototype = { }) } -} +}; // ########## var zIndex = 100; @@ -454,8 +452,6 @@ var $dragged = null; var timeout = null; window.Groups = { - Group: Group, - // ---------- dragOptions: { start:function(){ @@ -502,8 +498,7 @@ window.Groups = { setTimeout( function(){ var group = $(target).data("group"); if( group == null ){ - var group = new Group(); - group.create([target, dragged]); + var group = new Group([target, dragged]); } else { group.add( dragged ); } @@ -563,26 +558,6 @@ window.Groups = { } }; -// ########## -window.Items = { - // ---------- - 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/items.js b/browser/base/content/tabcandy/app/items.js index e69de29bb2d..83281f2a064 100644 --- a/browser/base/content/tabcandy/app/items.js +++ b/browser/base/content/tabcandy/app/items.js @@ -0,0 +1,20 @@ +// ########## +window.Items = { + // ---------- + 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; + } +}; + diff --git a/browser/base/content/tabcandy/app/tabitems.js b/browser/base/content/tabcandy/app/tabitems.js index e69de29bb2d..a84debc1f9c 100644 --- a/browser/base/content/tabcandy/app/tabitems.js +++ b/browser/base/content/tabcandy/app/tabitems.js @@ -0,0 +1,108 @@ +// ########## +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}); + }, +}; + +// ########## +window.TabItems = { + init: function() { + var self = this; + + function mod($div){ + if(window.Groups) { + $div.draggable(window.Groups.dragOptions); + $div.droppable(window.Groups.dropOptions); + } + + $div.mousedown(function(e) { + if(!Utils.isRightClick(e)) + self.lastMouseDownTarget = e.target; + }); + + $div.mouseup(function(e) { + var same = (e.target == self.lastMouseDownTarget); + self.lastMouseDownTarget = null; + if(!same) + return; + + if(e.target.className == "close") { + $(this).find("canvas").data("link").tab.close(); } + else { + if(!$(this).data('isDragging')) { + var ffVersion = parseFloat(navigator.userAgent.match(/\d{8}.*(\d\.\d)/)[1]); + if( ffVersion < 3.7 ) Utils.error("css-transitions require Firefox 3.7+"); + + // ZOOM! + var [w,h,z] = [$(this).width(), $(this).height(), $(this).css("zIndex")]; + var origPos = $(this).position(); + var zIndex = $(this).css("zIndex"); + var scale = window.innerWidth/w; + + var tab = Tabs.tab(this); + var mirror = tab.mirror; + //mirror.forceCanvasSize(w * scale/3, h * scale); + + var overflow = $("body").css("overflow"); + $("body").css("overflow", "hidden"); + + $(this).css("zIndex",99999).animate({ + top: -10, left: 0, easing: "easein", + width:w*scale, height:h*scale}, 200, function(){ + $(this).find("canvas").data("link").tab.focus(); + $(this) + .css({top: origPos.top, left: origPos.left, width:w, height:h, zIndex:z}); + Navbar.show(); + $("body").css("overflow", overflow); + }); + + } else { + $(this).find("canvas").data("link").tab.raw.pos = $(this).position(); + } + } + }); + + $("
x
").appendTo($div); + + if($div.length == 1) { + var p = Page.findOpenSpaceFor($div); + $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 + // returns chrome://tabcandy/content/candies/original/index.html for + // every $div (which isn't right), but that + // $div.bind("test", function(){ + // var url = $(this).find("canvas").data("link").tab.url; + // }); + // $div.trigger("test") + // returns the right result (i.e., the per-tab URL)? + // I'm so confused... + // Although I can use the trigger trick, I was thinking about + // adding code in here which sorted the tabs into groups. + // -- Aza + } + + window.TabMirror.customize(mod); + } +}; + +TabItems.init(); \ No newline at end of file diff --git a/browser/base/content/tabcandy/app/ui.js b/browser/base/content/tabcandy/app/ui.js index 27a94e82d4f..2891a653fa2 100644 --- a/browser/base/content/tabcandy/app/ui.js +++ b/browser/base/content/tabcandy/app/ui.js @@ -18,111 +18,9 @@ var Tabbar = { 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; - - function mod($div, tab){ - if(window.Groups) { - $div.draggable(window.Groups.dragOptions); - $div.droppable(window.Groups.dropOptions); - } - - $div.mousedown(function(e) { - if(!Utils.isRightClick(e)) - self.lastMouseDownTarget = e.target; - }); - - $div.mouseup(function(e) { - var same = (e.target == self.lastMouseDownTarget); - self.lastMouseDownTarget = null; - if(!same) - return; - - if(e.target.className == "close") { - $(this).find("canvas").data("link").tab.close(); } - else { - if(!$(this).data('isDragging')) { - var ffVersion = parseFloat(navigator.userAgent.match(/\d{8}.*(\d\.\d)/)[1]); - if( ffVersion < 3.7 ) Utils.error("css-transitions require Firefox 3.7+"); - - // ZOOM! - var [w,h,z] = [$(this).width(), $(this).height(), $(this).css("zIndex")]; - var origPos = $(this).position(); - var zIndex = $(this).css("zIndex"); - var scale = window.innerWidth/w; - - var tab = Tabs.tab(this); - var mirror = tab.mirror; - //mirror.forceCanvasSize(w * scale/3, h * scale); - - var overflow = $("body").css("overflow"); - $("body").css("overflow", "hidden"); - - $(this).css("zIndex",99999).animate({ - top: -10, left: 0, easing: "easein", - width:w*scale, height:h*scale}, 200, function(){ - $(this).find("canvas").data("link").tab.focus(); - $(this) - .css({top: origPos.top, left: origPos.left, width:w, height:h, zIndex:z}); - Navbar.show(); - $("body").css("overflow", overflow); - }); - - } else { - $(this).find("canvas").data("link").tab.raw.pos = $(this).position(); - } - } - }); - - $("
x
").appendTo($div); - - if(Arrange.initialized) { - var p = Page.findOpenSpaceFor($div); - $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 - // returns chrome://tabcandy/content/candies/original/index.html for - // every $div (which isn't right), but that - // $div.bind("test", function(){ - // var url = $(this).find("canvas").data("link").tab.url; - // }); - // $div.trigger("test") - // returns the right result (i.e., the per-tab URL)? - // I'm so confused... - // Although I can use the trigger trick, I was thinking about - // adding code in here which sorted the tabs into groups. - // -- Aza - } - - window.TabMirror.customize(mod); - + init: function() { Utils.homeTab.raw.maxWidth = 60; Utils.homeTab.raw.minWidth = 60; @@ -334,15 +232,13 @@ var site = new ArrangeClass("Site", function() { for(key in groups) { var set = groups[key]; if(set.length > 1) { - group = new Groups.Group(); - group.create(set, createOptions); + group = new Group(set, createOptions); } else leftovers.push(set[0]); } /* if(leftovers.length > 1) { */ - group = new Groups.Group(); - group.create(leftovers, createOptions); + group = new Group(leftovers, createOptions); /* } */ Groups.arrange(); diff --git a/content/candies/revision-a/index.html b/content/candies/revision-a/index.html index 650942713a4..5fe3f2a5a13 100644 --- a/content/candies/revision-a/index.html +++ b/content/candies/revision-a/index.html @@ -153,9 +153,10 @@ - - + + +