Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-01-12 06:52:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

+ We are entirely jQuery-free in revision-a!

Browse Source 
+ You can now drop tabs on tabs
+ Resize works once again, but with iQ
This commit is contained in:
Ian Gilman 2010-06-09 14:45:48 -07:00
parent 69fa2eabd9
commit 0c931296c2
5 changed files with 155 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
browser/base/content/tabcandy/app/groups.js
View File

@ -1028,7 +1028,8 @@ window.Group.prototype = iQ.extend(new Item(), new Subscribable(), {
var location = new Point(e.clientX, e.clientY);
if( location.distance(self._mouseDownLocation) > 1.0 ) return;
if( !self._mouseDownLocation || location.distance(self._mouseDownLocation) > 1.0 )
return;
// Don't zoom in to the last tab for the new tab group.
if( self.isNewTabsGroup() ) return;
var activeTab = self.getActiveTab();
@ -1036,10 +1037,11 @@ window.Group.prototype = iQ.extend(new Item(), new Subscribable(), {
// TODO: This should also accept TabItems
else if(self.getChild(0))
TabItems.zoomTo(self.getChild(0).tab.mirror.el);
self._mouseDownLocation = null;
});
iQ(container).droppable({
tolerance: "intersect",
over: function(){
if( !self.isNewTabsGroup() )
iQ(this).addClass("acceptsDrop");
@ -1062,13 +1064,11 @@ window.Group.prototype = iQ.extend(new Item(), new Subscribable(), {
// ----------
setResizable: function(value){
return;
var self = this;
if(value) {
this.$resizer.fadeIn();
$(this.container).resizable({
handles: "se",
iQ(this.container).resizable({
aspectRatio: false,
minWidth: 90,
minHeight: 90,
@ -1083,7 +1083,7 @@ window.Group.prototype = iQ.extend(new Item(), new Subscribable(), {
});
} else {
this.$resizer.fadeOut();
$(this.container).resizable('disable');
iQ(this.container).resizable('destroy');
}
},
@ -1387,10 +1387,8 @@ window.Groups = {
// ----------
dropOptions: {
accept: dropAcceptFunction,
tolerance: "intersect",
greedy: true,
drop: function(e){
$target = iQ(e.target);
$target = iQ(this);
iQ(this).removeClass("acceptsDrop");
var phantom = $target.data("phantomGroup")
@ -1403,7 +1401,7 @@ window.Groups = {
group.add( drag.info.$el );
},
over: function(e){
var $target = iQ(e.target);
var $target = iQ(this);
function elToRect($el){
return new Rect( $el.position().left, $el.position().top, $el.width(), $el.height() );
@ -1434,7 +1432,7 @@ window.Groups = {
$target.data("phantomGroup", phantom);
},
out: function(e){
var phantom = iQ(e.target).data("phantomGroup");
var phantom = iQ(this).data("phantomGroup");
if(phantom) {
phantom.fadeOut(function(){
iQ(this).remove();

11
browser/base/content/tabcandy/app/tabitems.js
View File

@ -222,14 +222,12 @@ window.TabItem.prototype = iQ.extend(new Item(), {
// ----------
setResizable: function(value){
return;
var self = this;
var $resizer = $('.expander', this.container);
var $resizer = iQ('.expander', this.container);
if(value) {
$resizer.fadeIn();
$(this.container).resizable({
handles: "se",
iQ(this.container).resizable({
aspectRatio: true,
minWidth: TabItems.minTabWidth,
minHeight: TabItems.minTabWidth * (TabItems.tabHeight / TabItems.tabWidth),
@ -244,7 +242,7 @@ window.TabItem.prototype = iQ.extend(new Item(), {
});
} else {
$resizer.fadeOut();
$(this.container).resizable('destroy');
iQ(this.container).resizable('destroy');
}
},
@ -283,13 +281,12 @@ window.TabItems = {
function mod(mirror) {
var $div = iQ(mirror.el);
var $$div = $(mirror.el);
var tab = mirror.tab;
if(window.Groups) {
$div.data('isDragging', false);
$div.draggable(window.Groups.dragOptions);
/* $div.droppable(window.Groups.dropOptions); */
$div.droppable(window.Groups.dropOptions);
}
$div.mousedown(function(e) {

184
browser/base/content/tabcandy/core/iq.js
View File

@ -44,7 +44,7 @@
// ##########
// Title: iq.js
// jQuery, hacked down to just the bits we need.
// jQuery, hacked down to just the bits we need, with a bunch of other stuff added.
(function( window, undefined ) {
var iQ = function(selector, context) {
@ -789,10 +789,11 @@ iQ.fn = iQ.prototype = {
var startSent;
var startEvent;
var droppables;
var $dropTarget;
var dropTarget;
// ___ mousemove
var handleMouseMove = function(e) {
// positioning
var mouse = new Point(e.pageX, e.pageY);
var newPos = {
left: startPos.x + (mouse.x - startMouse.x),
@ -800,42 +801,8 @@ iQ.fn = iQ.prototype = {
};
$elem.css(newPos);
var bounds = $elem.bounds();
var $newDropTarget = null;
iQ.each(droppables, function(index, droppable) {
if(bounds.intersects(droppable.bounds)) {
var $possibleDropTarget = iQ(droppable.element);
var accept = true;
if($possibleDropTarget != $dropTarget) {
var dropOptions = $possibleDropTarget.data('iq-droppable');
if(dropOptions && iQ.isFunction(dropOptions.accept))
accept = dropOptions.accept.apply($possibleDropTarget.get(0), [elem]);
}
if(accept) {
$newDropTarget = $possibleDropTarget;
return false;
}
}
});
if($newDropTarget != $dropTarget) {
var dropOptions;
if($dropTarget) {
dropOptions = $dropTarget.data('iq-droppable');
if(dropOptions && iQ.isFunction(dropOptions.out))
dropOptions.out.apply($dropTarget.get(0), [e]);
}
$dropTarget = $newDropTarget;
if($dropTarget) {
dropOptions = $dropTarget.data('iq-droppable');
if(dropOptions && iQ.isFunction(dropOptions.over))
dropOptions.over.apply($dropTarget.get(0), [e]);
}
}
// drag events
if(!startSent) {
if(iQ.isFunction(options.start))
options.start.apply(elem, [startEvent, {position: {left: startPos.x, top: startPos.y}}]);
@ -846,6 +813,43 @@ iQ.fn = iQ.prototype = {
if(iQ.isFunction(options.drag))
options.drag.apply(elem, [e, {position: newPos}]);
// drop events
var bounds = $elem.bounds();
var newDropTarget = null;
iQ.each(droppables, function(index, droppable) {
if(bounds.intersects(droppable.bounds)) {
var possibleDropTarget = droppable.element;
var accept = true;
if(possibleDropTarget != dropTarget) {
var dropOptions = iQ(possibleDropTarget).data('iq-droppable');
if(dropOptions && iQ.isFunction(dropOptions.accept))
accept = dropOptions.accept.apply(possibleDropTarget, [elem]);
}
if(accept) {
newDropTarget = possibleDropTarget;
return false;
}
}
});
if(newDropTarget != dropTarget) {
var dropOptions;
if(dropTarget) {
dropOptions = iQ(dropTarget).data('iq-droppable');
if(dropOptions && iQ.isFunction(dropOptions.out))
dropOptions.out.apply(dropTarget, [e]);
}
dropTarget = newDropTarget;
if(dropTarget) {
dropOptions = iQ(dropTarget).data('iq-droppable');
if(dropOptions && iQ.isFunction(dropOptions.over))
dropOptions.over.apply(dropTarget, [e]);
}
}
e.preventDefault();
};
@ -855,10 +859,10 @@ iQ.fn = iQ.prototype = {
.unbind('mousemove', handleMouseMove)
.unbind('mouseup', handleMouseUp);
if($dropTarget) {
var dropOptions = $dropTarget.data('iq-droppable');
if(dropTarget) {
var dropOptions = iQ(dropTarget).data('iq-droppable');
if(dropOptions && iQ.isFunction(dropOptions.drop))
dropOptions.drop.apply($dropTarget.get(0), [e]);
dropOptions.drop.apply(dropTarget, [e]);
}
if(startSent && iQ.isFunction(options.stop))
@ -869,6 +873,9 @@ iQ.fn = iQ.prototype = {
// ___ mousedown
this.mousedown(function(e) {
if(Utils.isRightClick(e))
return;
var cancel = false;
var $target = iQ(e.target);
iQ.each(cancelClasses, function(index, class) {
@ -890,14 +897,16 @@ iQ.fn = iQ.prototype = {
startPos = new Point(pos.left, pos.top);
startEvent = e;
startSent = false;
$dropTarget = null;
dropTarget = null;
droppables = [];
iQ('.iq-droppable').each(function() {
droppables.push({
element: this,
bounds: iQ(this).bounds()
});
if(this != elem) {
droppables.push({
element: this,
bounds: iQ(this).bounds()
});
}
});
iQ(window)
@ -921,11 +930,94 @@ iQ.fn = iQ.prototype = {
this.removeClass('iq-droppable');
else {
this.addClass('iq-droppable');
this.data('iq-droppable', options);
this.data('iq-droppable', options || {});
}
} catch(e) {
Utils.log(e);
}
},
// ----------
// Function: resizable
resizable: function(options) {
try {
iQ('.iq-resizable-handle', this).remove();
if(options == 'destroy') {
this.removeClass('iq-resizable');
} else {
if(!options)
options = {};
this.addClass('iq-resizable');
var startMouse;
var startSize;
var elem;
var $elem;
// ___ mousemove
var handleMouseMove = function(e) {
var mouse = new Point(e.pageX, e.pageY);
var newSize = {
width: Math.max(options.minWidth || 0, startSize.x + (mouse.x - startMouse.x)),
height: Math.max(options.minHeight || 0, startSize.y + (mouse.y - startMouse.y))
};
if(options.aspectRatio) {
if(startAspect < 1)
newSize.height = newSize.width * startAspect;
else
newSize.width = newSize.height / startAspect;
}
$elem.css(newSize);
if(iQ.isFunction(options.resize))
options.resize.apply(elem, [e]);
e.preventDefault();
e.stopPropagation();
};
// ___ mouseup
var handleMouseUp = function(e) {
iQ(window)
.unbind('mousemove', handleMouseMove)
.unbind('mouseup', handleMouseUp);
if(iQ.isFunction(options.stop))
options.stop.apply(elem, [e]);
e.preventDefault();
e.stopPropagation();
};
// ___ handle + mousedown
iQ('<div>')
.addClass('iq-resizable-handle iq-resizable-se')
.appendTo(this)
.mousedown(function(e) {
if(Utils.isRightClick(e))
return;
elem = this.parentNode;
$elem = iQ(elem);
startMouse = new Point(e.pageX, e.pageY);
startSize = new Point($elem.width(), $elem.height());
startAspect = startSize.y / startSize.x;
iQ(window)
.mousemove(handleMouseMove)
.mouseup(handleMouseUp);
e.preventDefault();
e.stopPropagation();
});
}
} catch(e) {
Utils.log(e);
}
}
};

8
browser/themes/pinstripe/browser/tabcandy/tabcandy.css
View File

@ -336,10 +336,10 @@ input.defaultName:hover{
opacity: .2;
}
.ui-resizable { }
.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; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.iq-resizable { }
.iq-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.iq-resizable-disabled .iq-resizable-handle, .iq-resizable-autohide .iq-resizable-handle { display: none; }
.iq-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
/* Utils
----------------------------------*/

3
content/candies/revision-a/index.html
View File

@ -18,10 +18,7 @@
<div id="bg" />
<script type="text/javascript;version=1.8" src="../../js/optional/stacktrace.js"></script>
<script type="text/javascript;version=1.8" src="../../js/core/jquery.js"></script>
<script type="text/javascript;version=1.8" src="../../js/core/iq.js"></script>
<script type="text/javascript;version=1.8" src="../../js/optional/jquery-tabcandy-easing.js"></script>
<script type="text/javascript;version=1.8" src="../../js/optional/jquery-ui.js"></script>
<script type="text/javascript;version=1.8" src="../../js/core/utils.js"></script>
<script type="text/javascript;version=1.8">
Utils.log('it begins! --------------------');