ZOMG MERGE. You HG Bastard.

This commit is contained in:
Dan Walkowski 2010-04-01 17:59:17 -07:00
commit 0e08d8be79
4 changed files with 241 additions and 189 deletions

View File

@ -31,7 +31,6 @@ window.Group = function(listOfEls, options) {
options = {};
this._children = []; // an array of Items
this._container = null;
this._padding = 30;
this.defaultSize = new Point(TabItems.tabWidth * 1.5, TabItems.tabHeight * 1.5);
@ -53,9 +52,20 @@ window.Group = function(listOfEls, options) {
})
.data("group", this)
.data('item', this)
.appendTo("body")
.dequeue();
this._init(container.get(0));
if(this.$debug)
this.$debug.css({zIndex: -1000});
/*
var contentEl = $('<div class="group-content"/>')
.appendTo(container);
*/
var resizer = $("<div class='resizer'/>")
.css({
position: "absolute",
@ -95,8 +105,6 @@ window.Group = function(listOfEls, options) {
titlebar.animate({opacity:0}).dequeue();
})*/
this._container = container;
$.each(listOfEls, function(index, el) {
self.add(el, null, options);
});
@ -127,94 +135,81 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
},
// ----------
_getContainerBox: function(){
var pos = $(this._container).position();
var w = $(this._container).width();
var h = $(this._container).height();
return {
top: pos.top,
left: pos.left,
bottom: pos.top + h,
right: pos.left + w,
height: h,
width: w
}
getContentBounds: function() {
var box = this.getBounds();
var $titlebar = $('.titlebar', this.container);
var titleHeight = $titlebar.height();
box.top += titleHeight;
box.height -= titleHeight;
return box;
},
// ----------
getContainer: function() {
return this._container;
},
// ----------
getBounds: function() {
var $titlebar = $('.titlebar', this._container);
var bb = Utils.getBounds(this._container);
reloadBounds: function() {
var $titlebar = $('.titlebar', this.container);
var bb = Utils.getBounds(this.container);
var titleHeight = $titlebar.height();
bb.top -= titleHeight;
bb.height += titleHeight;
return bb;
if(this.bounds)
this.setBounds(bb, true);
else {
this.bounds = bb;
this._updateDebugBounds();
}
},
// ----------
setBounds: function(rect, immediately) {
this.setPosition(rect.left, rect.top, immediately);
this.setSize(rect.width, rect.height, immediately, {dontArrange: true});
var $titlebar = $('.titlebar', this._container);
var $titlebar = $('.titlebar', this.container);
var titleHeight = $titlebar.height();
var box = new Rect(rect);
box.top += titleHeight;
box.height -= titleHeight;
this.arrange({animate: !immediately, bounds: box});
var css = {};
if(rect.left != this.bounds.left)
css.left = rect.left;
if(rect.top != this.bounds.top)
css.top = rect.top + titleHeight;
if(rect.width != this.bounds.width)
css.width = rect.width;
if(rect.height != this.bounds.height)
css.height = rect.height - titleHeight;
if($.isEmptyObject(css))
return;
var offset = new Point(rect.left - this.bounds.left, rect.top - this.bounds.top);
this.bounds = new Rect(rect);
if(css.width || css.height) {
this.arrange({animate: !immediately});
} else if(css.left || css.top) {
$.each(this._children, function(index, child) {
var box = child.getBounds();
child.setPosition(box.left + offset.x, box.top + offset.y, immediately);
});
}
if(immediately) {
$(this.container).css(css);
if(css.width)
$titlebar.css({width: css.width});
} else {
TabMirror.pausePainting();
$(this.container).animate(css, {complete: function() {
TabMirror.resumePainting();
}}).dequeue();
if(css.width)
$titlebar.animate({width: css.width}).dequeue();
}
this._updateDebugBounds();
},
// ----------
setPosition: function(left, top, immediately) {
var box = this.getBounds();
var offset = new Point(left - box.left, top - box.top);
$.each(this._children, function(index, child) {
box = child.getBounds();
child.setPosition(box.left + offset.x, box.top + offset.y, immediately);
});
box = Utils.getBounds(this._container);
var options = {left: box.left + offset.x, top: box.top + offset.y};
if(immediately)
$(this._container).css(options);
else
$(this._container).animate(options).dequeue();
},
// ----------
setSize: function(width, height, immediately, options) {
if(typeof(options) == 'undefined')
options = {};
var $titlebar = $('.titlebar', this._container);
var titleHeight = $titlebar.height();
var containerOptions = {width: width, height: height - titleHeight};
var titleOptions = {width: width};
if(immediately) {
$(this._container).css(containerOptions);
$titlebar.css(titleOptions);
} else {
$(this._container).animate(containerOptions).dequeue();
$titlebar.animate(titleOptions).dequeue();
}
if(!options.dontArrange) {
//TODO sort out the bounds and titlebar stuff for real
var box = this.getBounds();
box.width = width;
box.top += titleHeight;
box.height = height - titleHeight;
this.arrange({animate: !immediately, bounds: box});
}
},
// ----------
close: function() {
var toClose = $.merge([], this._children);
@ -295,7 +290,7 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
if(a.isAnItem) {
item = a;
$el = $(item.getContainer());
$el = $(item.container);
} else {
$el = $(a);
item = Items.item($el);
@ -315,7 +310,7 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
if(this._children.length == 0 ){
Groups.unregister(this);
this._container.fadeOut(function() {
$(this.container).fadeOut(function() {
$(this).remove();
});
} else if(!options.dontArrange) {
@ -344,7 +339,7 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
/*if( this._children.length < 2 ) return;*/
if( this._rectToBe ) var bb = this._rectToBe;
else var bb = (options.bounds ? options.bounds : this._getContainerBox());
else var bb = this.getContentBounds();
var count = this._children.length;
var bbAspect = bb.width/bb.height;
@ -397,47 +392,34 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
$(container).draggable({
start: function(){
$dragged = $(this);
$(container).data("origPosition", $(container).position());
$.each(self._children, function(index, child) {
child.dragData = {startBounds: child.getBounds()};
});
drag.info = new DragInfo(this);
},
drag: function(e, ui){
var origPos = $(container).data("origPosition");
dX = ui.offset.left - origPos.left;
dY = ui.offset.top - origPos.top;
$.each(self._children, function(index, child) {
child.setPosition(child.dragData.startBounds.left + dX,
child.dragData.startBounds.top + dY,
true);
});
drag.info.drag(e, ui);
/* $(this).css({zIndex: zIndex}); */
/* zIndex += 1; */
},
stop: function() {
if(!$dragged.hasClass('willGroup') && !$dragged.data('group'))
Items.item(this).pushAway();
$dragged = null;
drag.info.stop();
drag.info = null;
},
/* zIndex: 999 */
});
$(container).droppable({
over: function(){
$dragged.addClass("willGroup");
drag.info.$el.addClass("willGroup");
},
out: function(){
var $group = $dragged.data("group");
var $group = drag.info.$el.data("group");
if($group)
$group.remove($dragged);
$dragged.removeClass("willGroup");
$group.remove(drag.info.$el);
drag.info.$el.removeClass("willGroup");
},
drop: function(event){
$dragged.removeClass("willGroup");
self.add( $dragged, {left:event.pageX, top:event.pageY} )
drag.info.$el.removeClass("willGroup");
self.add( drag.info.$el, {left:event.pageX, top:event.pageY} );
},
accept: ".tab, .group",
});
@ -446,10 +428,10 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
handles: "se",
aspectRatio: false,
resize: function(){
self.arrange({animate: false});
self.reloadBounds();
},
stop: function(){
self.arrange();
self.reloadBounds();
self.pushAway();
}
});
@ -457,27 +439,52 @@ window.Group.prototype = $.extend(new Item(), new Subscribable(), {
});
// ##########
var zIndex = 100;
var $dragged = null;
var timeout = null;
var DragInfo = function(element) {
this.el = element;
this.$el = $(this.el);
this.item = Items.item(this.el);
this.$el.data('isDragging', true);
};
DragInfo.prototype = {
// ----------
drag: function(e, ui) {
this.item.reloadBounds();
},
// ----------
stop: function() {
this.$el.data('isDragging', false);
if(!this.$el.hasClass('willGroup') && !this.$el.data('group')) {
this.item.reloadBounds();
this.item.pushAway();
}
}
};
var drag = {
info: null,
zIndex: 100
};
// ##########
window.Groups = {
groups: [],
// ----------
dragOptions: {
start:function(){
$dragged = $(this);
$dragged.data('isDragging', true);
start: function() {
drag.info = new DragInfo(this);
},
stop: function(){
$dragged.data('isDragging', false);
$(this).css({zIndex: zIndex});
if(!$dragged.hasClass('willGroup') && !$dragged.data('group'))
Items.item(this).pushAway();
$dragged = null;
zIndex += 1;
drag: function(e, ui) {
drag.info.drag(e, ui);
},
stop: function() {
drag.info.$el.css({zIndex: drag.zIndex});
drag.info.stop();
drag.info = null;
drag.zIndex += 1;
},
zIndex: 999,
},
@ -485,17 +492,17 @@ window.Groups = {
// ----------
dropOptions: {
accept: ".tab",
tolerance: "intersect",
tolerance: "pointer",
greedy: true,
drop: function(e){
$target = $(e.target);
$dragged.removeClass("willGroup");
drag.info.$el.removeClass("willGroup")
var phantom = $target.data("phantomGroup")
var group = $target.data("group");
if( group == null ){
phantom.removeClass("phantom");
var group = new Group([$target, $dragged], {container:phantom});
var group = new Group([$target, drag.info.$el], {container:phantom});
$(group._container).css({
left: phantom.css("left"),
top: phantom.css("top"),
@ -503,23 +510,22 @@ window.Groups = {
height: phantom.height()
});
}
else group.add( $dragged );
else group.add( drag.info.$el );
},
over: function(e){
var $target = $(e.target);
function elToRect($el){
return new Rect( $el.position().left, $el.position().top, $el.width(), $el.height() );
}
var height = elToRect($target).height * 1.5 +10;
var width = elToRect($target).width * 1.5 + 10;
var unionRect = elToRect($target).union( elToRect($dragged) );
var height = elToRect($target).height * 1.5 + 20;
var width = elToRect($target).width * 1.5 + 20;
var unionRect = elToRect($target).union( elToRect(drag.info.$el) );
var newLeft = unionRect.left + unionRect.width/2 - width/2;
var newTop = unionRect.top + unionRect.height/2 - height/2;
$(".phantom").remove();
var phantom = $("<div class='group phantom'/>").css({
width: width,
@ -529,9 +535,7 @@ window.Groups = {
left: newLeft,
zIndex: -99
}).appendTo("body").hide().fadeIn();
$target.data("phantomGroup", phantom);
$target.data("phantomGroup", phantom);
},
out: function(e){
$(e.target).data("phantomGroup").fadeOut(function(){

View File

@ -1,6 +1,6 @@
// ##########
// An Item is an object that adheres to an interface consisting of these methods:
// getContainer: function()
// reloadBounds: function()
// getBounds: function()
// setBounds: function(rect, immediately)
// setPosition: function(left, top, immediately)
@ -12,14 +12,56 @@
// In addition, it must have these properties:
// isAnItem, set to true (set by Item)
// defaultSize, a Point
// bounds, a Rect (set by Item in _init() via reloadBounds())
// debug (set by Item)
// $debug (set by Item in _init())
// container, a DOM element (set by Item in _init())
//
// Its container must also have a jQuery data named 'item' that points to the item.
// Its container must also have a jQuery data named 'item' that points to the item.
// This is set by Item in _init().
window.Item = function() {
this.isAnItem = true;
this.bounds = null;
this.debug = false;
this.$debug = null;
this.container = null;
};
window.Item.prototype = {
// ----------
_init: function(container) {
this.container = container;
if(this.debug) {
this.$debug = $('<div />')
.css({
border: '2px solid green',
zIndex: -10,
position: 'absolute'
})
.appendTo($('body'));
}
this.reloadBounds();
$(this.container).data('item', this);
},
// ----------
getBounds: function() {
return new Rect(this.bounds);
},
// ----------
setPosition: function(left, top, immediately) {
this.setBounds(new Rect(left, top, this.bounds.width, this.bounds.height), immediately);
},
// ----------
setSize: function(width, height, immediately) {
this.setBounds(new Rect(this.bounds.left, this.bounds.top, width, height), immediately);
},
// ----------
pushAway: function() {
var buffer = 10;
@ -83,7 +125,19 @@ window.Item.prototype = {
if(!data.bounds.equals(data.startBounds))
item.setPosition(data.bounds.left, data.bounds.top);
});
}
},
// ----------
_updateDebugBounds: function() {
if(this.$debug) {
this.$debug.css({
left: this.bounds.left,
top: this.bounds.top,
width: this.bounds.width,
height: this.bounds.height
});
}
}
};
// ##########

View File

@ -1,44 +1,53 @@
// ##########
window.TabItem = function(container, tab) {
this.container = container;
this._init(container);
this.tab = tab;
this.defaultSize = new Point(TabItems.tabWidth, TabItems.tabHeight);
$(this.container).data('item', this);
};
window.TabItem.prototype = $.extend(new Item(), {
// ----------
getContainer: function() {
return this.container;
},
// ----------
getBounds: function() {
return Utils.getBounds(this.container);
// ----------
reloadBounds: function() {
this.bounds = Utils.getBounds(this.container);
this._updateDebugBounds();
},
// ----------
setBounds: function(rect, immediately) {
var css = $.extend(this._getSizeCSS(rect.width, rect.height), {
left: rect.left,
top: rect.top,
});
this._change(css, immediately);
var css = {};
if(rect.left != this.bounds.left)
css.left = rect.left;
if(rect.top != this.bounds.top)
css.top = rect.top;
if(rect.width != this.bounds.width) {
css.width = rect.width;
var scale = rect.width / TabItems.tabWidth;
css.fontSize = TabItems.fontSize * scale;
}
if(rect.height != this.bounds.height)
css.height = rect.height;
if($.isEmptyObject(css))
return;
this.bounds.copy(rect);
if(immediately)
$(this.container).css(css);
else {
TabMirror.pausePainting();
$(this.container).animate(css, {complete: function() {
TabMirror.resumePainting();
}}).dequeue();
}
this._updateDebugBounds();
},
// ----------
setPosition: function(left, top, immediately) {
this._change({left: left, top: top}, immediately);
},
// ----------
setSize: function(width, height, immediately) {
this._change(this._getSizeCSS(width, height), immediately);
},
// ----------
close: function() {
this.tab.close();
@ -52,29 +61,6 @@ window.TabItem.prototype = $.extend(new Item(), {
// ----------
removeOnClose: function(referenceObject) {
this.tab.mirror.removeOnClose(referenceObject);
},
// ----------
_getSizeCSS: function(width, height) {
var scale = width / TabItems.tabWidth;
return {
width: width,
height: height,
fontSize: TabItems.fontSize * scale
};
},
// ----------
_change: function(css, immediately) {
if(immediately)
$(this.container).css(css);
else {
TabMirror.pausePainting();
$(this.container).animate(css, {complete: function() {
TabMirror.resumePainting();
}}).dequeue();
}
}
});

View File

@ -113,6 +113,14 @@ window.Rect.prototype = {
var newRect = new Rect(newLeft, newTop, newWidth, newHeight);
return newRect;
},
// ----------
copy: function(a) {
this.left = a.left;
this.top = a.top;
this.width = a.width;
this.height = a.height;
}
};