mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
+ 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
This commit is contained in:
parent
cd6d84b400
commit
a78be22cf5
@ -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);
|
||||
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
Before Width: | Height: | Size: 320 B After Width: | Height: | Size: 320 B |
@ -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; }
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user