2010-02-24 01:47:55 -08:00
|
|
|
(function(){
|
|
|
|
|
2010-03-25 17:22:45 -07:00
|
|
|
// ##########
|
2010-02-24 01:47:55 -08:00
|
|
|
Navbar = {
|
|
|
|
get el(){
|
|
|
|
var win = Utils.activeWindow;
|
|
|
|
var navbar = win.gBrowser.ownerDocument.getElementById("navigator-toolbox");
|
|
|
|
return navbar;
|
|
|
|
},
|
|
|
|
show: function(){ this.el.collapsed = false; },
|
|
|
|
hide: function(){ this.el.collapsed = true;}
|
|
|
|
}
|
|
|
|
|
2010-03-25 17:22:45 -07:00
|
|
|
// ##########
|
2010-02-24 01:47:55 -08:00
|
|
|
var Tabbar = {
|
|
|
|
get el(){ return window.Tabs[0].raw.parentNode; },
|
|
|
|
hide: function(){ this.el.collapsed = true },
|
|
|
|
show: function(){ this.el.collapsed = false }
|
|
|
|
}
|
|
|
|
|
2010-03-25 17:22:45 -07:00
|
|
|
// ##########
|
2010-03-29 17:23:35 -07:00
|
|
|
window.Page = {
|
|
|
|
startX: 30,
|
2010-03-31 17:24:16 -07:00
|
|
|
startY: 70,
|
|
|
|
|
2010-03-29 11:55:13 -07:00
|
|
|
init: function() {
|
2010-02-24 01:47:55 -08:00
|
|
|
Utils.homeTab.raw.maxWidth = 60;
|
|
|
|
Utils.homeTab.raw.minWidth = 60;
|
|
|
|
|
|
|
|
Tabs.onClose(function(){
|
|
|
|
Utils.homeTab.focus();
|
|
|
|
return false;
|
2010-03-19 15:21:12 -07:00
|
|
|
});
|
|
|
|
|
2010-03-19 16:10:43 -07:00
|
|
|
var lastTab = null;
|
|
|
|
Tabs.onFocus(function(){
|
|
|
|
// If we switched to TabCandy window...
|
2010-03-24 14:38:23 -07:00
|
|
|
if( this.contentWindow == window && lastTab != null && lastTab.mirror != null){
|
2010-03-19 16:10:43 -07:00
|
|
|
// If there was a lastTab we want to animate
|
|
|
|
// its mirror for the zoom out.
|
|
|
|
var $tab = $(lastTab.mirror.el);
|
|
|
|
|
2010-03-22 19:19:40 -07:00
|
|
|
var [w,h, pos, z] = [$tab.width(), $tab.height(), $tab.position(), $tab.css("zIndex")];
|
2010-03-22 17:12:32 -07:00
|
|
|
var scale = window.innerWidth / w;
|
2010-03-22 19:19:40 -07:00
|
|
|
|
|
|
|
var overflow = $("body").css("overflow");
|
|
|
|
$("body").css("overflow", "hidden");
|
|
|
|
|
2010-03-22 17:12:32 -07:00
|
|
|
var mirror = lastTab.mirror;
|
2010-03-19 16:10:43 -07:00
|
|
|
$tab.css({
|
|
|
|
top: 0, left: 0,
|
|
|
|
width: window.innerWidth,
|
|
|
|
height: h * (window.innerWidth/w),
|
|
|
|
zIndex: 999999,
|
2010-03-22 17:12:32 -07:00
|
|
|
}).animate({
|
2010-03-19 16:10:43 -07:00
|
|
|
top: pos.top, left: pos.left,
|
|
|
|
width: w, height: h
|
2010-03-22 17:12:32 -07:00
|
|
|
},250, '', function() {
|
2010-03-22 19:19:40 -07:00
|
|
|
$tab.css("zIndex",z);
|
|
|
|
$("body").css("overflow", overflow);
|
2010-03-22 17:12:32 -07:00
|
|
|
});
|
2010-03-19 16:10:43 -07:00
|
|
|
}
|
|
|
|
lastTab = this;
|
2010-03-19 15:21:12 -07:00
|
|
|
});
|
2010-02-24 01:47:55 -08:00
|
|
|
|
|
|
|
$("#tabbar").toggle(
|
|
|
|
function(){Tabbar.hide()},
|
|
|
|
function(){Tabbar.show()}
|
2010-03-22 19:19:40 -07:00
|
|
|
);
|
2010-03-24 10:34:25 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
findOpenSpaceFor: function($div) {
|
|
|
|
var w = window.innerWidth;
|
|
|
|
var h = 0;
|
|
|
|
var bufferX = 30;
|
|
|
|
var bufferY = 30;
|
|
|
|
var rects = [];
|
|
|
|
var r;
|
|
|
|
var $el;
|
|
|
|
$(".tab:visible").each(function(i) {
|
|
|
|
if(this == $div.get(0))
|
|
|
|
return;
|
|
|
|
|
|
|
|
$el = $(this);
|
|
|
|
r = {x: parseInt($el.css('left')),
|
|
|
|
y: parseInt($el.css('top')),
|
|
|
|
w: parseInt($el.css('width')) + bufferX,
|
|
|
|
h: parseInt($el.css('height')) + bufferY};
|
|
|
|
|
|
|
|
if(r.x + r.w > w)
|
|
|
|
w = r.x + r.w;
|
|
|
|
|
|
|
|
if(r.y + r.h > h)
|
|
|
|
h = r.y + r.h;
|
|
|
|
|
|
|
|
rects.push(r);
|
|
|
|
});
|
|
|
|
|
|
|
|
if(!h)
|
2010-03-29 17:23:35 -07:00
|
|
|
return { 'x': this.startX, 'y': this.startY };
|
2010-03-24 10:34:25 -07:00
|
|
|
|
|
|
|
var canvas = document.createElement('canvas');
|
|
|
|
$(canvas).attr({width:w,height:h});
|
|
|
|
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
ctx.fillStyle = 'rgb(255, 255, 255)';
|
|
|
|
ctx.fillRect(0, 0, w, h);
|
|
|
|
ctx.fillStyle = 'rgb(0, 0, 0)';
|
|
|
|
var count = rects.length;
|
|
|
|
var a;
|
|
|
|
for(a = 0; a < count; a++) {
|
|
|
|
r = rects[a];
|
|
|
|
ctx.fillRect(r.x, r.y, r.w, r.h);
|
|
|
|
}
|
|
|
|
|
|
|
|
var divWidth = parseInt($div.css('width')) + bufferX;
|
|
|
|
var divHeight = parseInt($div.css('height')) + bufferY;
|
|
|
|
var strideX = divWidth / 4;
|
|
|
|
var strideY = divHeight / 4;
|
|
|
|
var data = ctx.getImageData(0, 0, w, h).data;
|
|
|
|
|
|
|
|
function isEmpty(x1, y1) {
|
|
|
|
return (x1 >= 0 && y1 >= 0
|
|
|
|
&& x1 < w && y1 < h
|
|
|
|
&& data[(y1 * w + x1) * 4]);
|
|
|
|
}
|
|
|
|
|
|
|
|
function isEmptyBox(x1, y1) {
|
|
|
|
return (isEmpty(x1, y1)
|
|
|
|
&& isEmpty(x1 + (divWidth - 1), y1)
|
|
|
|
&& isEmpty(x1, y1 + (divHeight - 1))
|
|
|
|
&& isEmpty(x1 + (divWidth - 1), y1 + (divHeight - 1)));
|
|
|
|
}
|
|
|
|
|
2010-03-29 17:23:35 -07:00
|
|
|
for(var y = this.startY; y < h; y += strideY) {
|
|
|
|
for(var x = this.startX; x < w; x += strideX) {
|
2010-03-24 10:34:25 -07:00
|
|
|
if(isEmptyBox(x, y)) {
|
2010-03-29 17:23:35 -07:00
|
|
|
for(; y > this.startY + 1; y--) {
|
2010-03-24 10:34:25 -07:00
|
|
|
if(!isEmptyBox(x, y - 1))
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
2010-03-29 17:23:35 -07:00
|
|
|
for(; x > this.startX + 1; x--) {
|
2010-03-24 10:34:25 -07:00
|
|
|
if(!isEmptyBox(x - 1, y))
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
return { 'x': x, 'y': y };
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2010-03-29 17:23:35 -07:00
|
|
|
return { 'x': this.startX, 'y': h };
|
2010-02-24 01:47:55 -08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2010-03-24 10:34:25 -07:00
|
|
|
//----------------------------------------------------------
|
2010-02-24 01:47:55 -08:00
|
|
|
function ArrangeClass(name, func){ this.init(name, func); };
|
|
|
|
ArrangeClass.prototype = {
|
|
|
|
init: function(name, func){
|
|
|
|
this.$el = this._create(name);
|
|
|
|
this.arrange = func;
|
|
|
|
if(func) this.$el.click(func);
|
|
|
|
},
|
|
|
|
|
|
|
|
_create: function(name){
|
2010-03-24 10:34:25 -07:00
|
|
|
return $("<a class='action' href='#'/>").text(name).appendTo("#actions");
|
2010-02-24 01:47:55 -08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2010-03-24 10:34:25 -07:00
|
|
|
|
|
|
|
//----------------------------------------------------------
|
|
|
|
var grid = new ArrangeClass("Grid", function(value) {
|
2010-03-26 11:34:09 -07:00
|
|
|
if(typeof(Groups) != 'undefined')
|
|
|
|
Groups.removeAll();
|
|
|
|
|
2010-03-24 10:34:25 -07:00
|
|
|
var immediately = false;
|
|
|
|
if(typeof(value) == 'boolean')
|
|
|
|
immediately = value;
|
|
|
|
|
2010-03-31 17:24:16 -07:00
|
|
|
var box = new Rect(Page.startX, Page.startY, TabItems.tabWidth, TabItems.tabHeight);
|
2010-02-24 01:47:55 -08:00
|
|
|
$(".tab:visible").each(function(i){
|
2010-03-29 17:23:35 -07:00
|
|
|
var item = Items.item(this);
|
|
|
|
item.setBounds(box, immediately);
|
2010-02-24 01:47:55 -08:00
|
|
|
|
2010-03-29 17:23:35 -07:00
|
|
|
box.left += box.width + 30;
|
|
|
|
if( box.left > window.innerWidth - (box.width + Page.startX)){ // includes allowance for the box shadow
|
|
|
|
box.left = Page.startX;
|
|
|
|
box.top += box.height + 30;
|
2010-02-24 01:47:55 -08:00
|
|
|
}
|
2010-03-24 10:34:25 -07:00
|
|
|
});
|
|
|
|
});
|
2010-02-24 01:47:55 -08:00
|
|
|
|
2010-03-24 10:34:25 -07:00
|
|
|
//----------------------------------------------------------
|
|
|
|
var site = new ArrangeClass("Site", function() {
|
2010-03-26 11:34:09 -07:00
|
|
|
Groups.removeAll();
|
|
|
|
|
2010-03-24 10:34:25 -07:00
|
|
|
var groups = [];
|
|
|
|
$(".tab:visible").each(function(i) {
|
|
|
|
$el = $(this);
|
|
|
|
var tab = Tabs.tab(this);
|
2010-02-24 01:47:55 -08:00
|
|
|
|
2010-03-24 10:34:25 -07:00
|
|
|
var url = tab.url;
|
|
|
|
var domain = url.split('/')[2];
|
|
|
|
var domainParts = domain.split('.');
|
|
|
|
var mainDomain = domainParts[domainParts.length - 2];
|
|
|
|
if(groups[mainDomain])
|
2010-03-26 11:34:09 -07:00
|
|
|
groups[mainDomain].push($(this));
|
2010-03-24 10:34:25 -07:00
|
|
|
else
|
2010-03-26 11:34:09 -07:00
|
|
|
groups[mainDomain] = [$(this)];
|
2010-02-24 01:47:55 -08:00
|
|
|
});
|
2010-03-24 10:34:25 -07:00
|
|
|
|
2010-03-29 17:23:35 -07:00
|
|
|
var createOptions = {dontPush: true, dontArrange: true};
|
2010-03-26 11:34:09 -07:00
|
|
|
|
2010-03-24 10:34:25 -07:00
|
|
|
var leftovers = [];
|
|
|
|
for(key in groups) {
|
|
|
|
var set = groups[key];
|
|
|
|
if(set.length > 1) {
|
2010-03-29 11:55:13 -07:00
|
|
|
group = new Group(set, createOptions);
|
2010-03-24 10:34:25 -07:00
|
|
|
} else
|
|
|
|
leftovers.push(set[0]);
|
|
|
|
}
|
|
|
|
|
2010-03-26 11:34:09 -07:00
|
|
|
/* if(leftovers.length > 1) { */
|
2010-03-29 11:55:13 -07:00
|
|
|
group = new Group(leftovers, createOptions);
|
2010-03-26 11:34:09 -07:00
|
|
|
/* } */
|
2010-03-24 10:34:25 -07:00
|
|
|
|
|
|
|
Groups.arrange();
|
2010-02-24 01:47:55 -08:00
|
|
|
});
|
|
|
|
|
2010-03-24 10:34:25 -07:00
|
|
|
//----------------------------------------------------------
|
2010-02-24 01:47:55 -08:00
|
|
|
var Arrange = {
|
2010-03-24 10:34:25 -07:00
|
|
|
initialized: false,
|
|
|
|
|
2010-02-24 01:47:55 -08:00
|
|
|
init: function(){
|
2010-03-24 10:34:25 -07:00
|
|
|
this.initialized = true;
|
|
|
|
grid.arrange(true);
|
2010-02-24 01:47:55 -08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2010-03-24 10:34:25 -07:00
|
|
|
//----------------------------------------------------------
|
2010-02-24 01:47:55 -08:00
|
|
|
function UIClass(){ this.init(); };
|
|
|
|
UIClass.prototype = {
|
|
|
|
navbar: Navbar,
|
|
|
|
tabbar: Tabbar,
|
|
|
|
init: function(){
|
|
|
|
Page.init();
|
|
|
|
Arrange.init();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2010-03-24 10:34:25 -07:00
|
|
|
//----------------------------------------------------------
|
2010-02-24 01:47:55 -08:00
|
|
|
var UI = new UIClass();
|
|
|
|
window.UI = UI;
|
|
|
|
|
|
|
|
})();
|
|
|
|
|