mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
+ 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
This commit is contained in:
Ian Gilman
parent
f56556d9ec
commit
2f3def3f85
@ -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 = $("<div class='group'/>")
|
||||
.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 = $('<div class="group-content"/>')
|
||||
.appendTo(container);
|
||||
*/
|
||||
|
||||
var resizer = $("<div class='resizer'/>")
|
||||
.css({
|
||||
position: "absolute",
|
||||
width: 16, height: 16,
|
||||
bottom: 0, right: 0,
|
||||
}).appendTo(container);
|
||||
|
||||
var titlebar = $("<div class='titlebar'><input class='name' value=''/><div class='close'>x</div></div>")
|
||||
.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 = $("<div class='group'/>")
|
||||
.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 = $('<div class="group-content"/>')
|
||||
.appendTo(container);
|
||||
*/
|
||||
|
||||
var resizer = $("<div class='resizer'/>")
|
||||
.css({
|
||||
position: "absolute",
|
||||
width: 16, height: 16,
|
||||
bottom: 0, right: 0,
|
||||
}).appendTo(container);
|
||||
|
||||
var titlebar = $("<div class='titlebar'><input class='name' value=''/><div class='close'>x</div></div>")
|
||||
.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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("<div class='close'>x</div>").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();
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("<div class='close'>x</div>").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();
|
||||
|
||||
@ -153,9 +153,10 @@
|
||||
</script>
|
||||
<script type="text/javascript;version=1.8" src="../../js/core/tabs.js"></script>
|
||||
<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="js/items.js"></script>
|
||||
<script type="text/javascript;version=1.8" src="js/tabitems.js"></script>
|
||||
<script type="text/javascript;version=1.8" src="js/groups.js"></script>
|
||||
<script type="text/javascript;version=1.8" src="js/ui.js"></script>
|
||||
|
||||
<!-- BEGIN Switch Control -->
|
||||
<script type="text/javascript;version=1.8" src="../../js/optional/switch.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user