" )
+ .css({
+ position: "absolute",
+ width: iframe.outerWidth(),
+ height: iframe.outerHeight(),
+ top: iframeOffset.top,
+ left: iframeOffset.left
+ })
+ .appendTo( body )[0];
});
-
},
_create: function() {
+ // TODO: move to drag start in case DOM changes
this.scrollParent = this.element.scrollParent();
// Static position elements can't be moved with top/left
@@ -128,10 +119,7 @@ $.widget( "ui.draggable", {
else if ( event.pageX < ( scrollLeft + this.options.scrollSensitivity ) ) {
this.scrollParent.scrollLeft( scrollLeft - this.options.scrollSpeed );
}
-
} else {
-
-
// Handle vertical scrolling
if ( ( event.pageY + this.options.scrollSensitivity ) > ( this.overflow.height + this.overflowOffset.top ) ) {
this.scrollParent.scrollTop( scrollTop + this.options.scrollSpeed );
@@ -147,14 +135,11 @@ $.widget( "ui.draggable", {
else if ( ( event.pageX - this.options.scrollSensitivity ) < this.overflowOffset.left ) {
this.scrollParent.scrollLeft( scrollLeft - this.options.scrollSpeed );
}
-
-
}
-
},
_mouseDown: function( event ) {
- var newLeft, newTop, allowed;
+ var newLeft, newTop;
// Prevent text selection, among other things
event.preventDefault();
@@ -162,10 +147,6 @@ $.widget( "ui.draggable", {
// The actual dragging element, should always be a jQuery object
this.dragEl = this.element;
- if ( this.options.iframeFix === true ) {
- this._blockFrames();
- }
-
// Helper required
if ( this.options.helper ) {
// clone
@@ -217,14 +198,13 @@ $.widget( "ui.draggable", {
this._preparePosition( event );
- allowed = this._trigger( "start", event, this._uiHash() );
-
// If user stops propagation, leave helper there ( if there's one ), disallow any CSS changes
- if ( allowed !== true ) {
+ if ( this._trigger( "start", event, this._uiHash() ) === false ) {
this.document.unbind( "." + this.widgetName );
return;
}
+ this._blockFrames();
this._setCss( event );
this._bind( this.document, {
@@ -234,15 +214,12 @@ $.widget( "ui.draggable", {
},
_mouseMove: function( event ) {
- var newLeft, newTop, allowed;
+ var newLeft, newTop;
this._preparePosition( event );
- allowed = this._trigger( "drag", event, this._uiHash() );
-
-
// If user stops propagation, leave helper there ( if there's one ), disallow any CSS changes
- if ( allowed !== true ) {
+ if ( this._trigger( "drag", event, this._uiHash() ) === false ) {
this.document.unbind( "." + this.widgetName );
return;
}
@@ -254,30 +231,18 @@ $.widget( "ui.draggable", {
},
_mouseUp: function( event ) {
-
- var allowed;
-
this._preparePosition( event );
- allowed = this._trigger( "stop", event, this._uiHash() );
-
// If user stops propagation, leave helper there, disallow any CSS changes
- if ( allowed === true ) {
-
+ if ( this._trigger( "stop", event, this._uiHash() ) === false ) {
this._setCss( event );
-
if ( this.options.helper ) {
this.dragEl.remove();
}
-
}
this.document.unbind( "." + this.widgetName );
-
- if ( this.options.iframeFix === true ) {
- this._unblockFrames();
- }
-
+ this._unblockFrames();
},
// Uses event to determine new position of draggable, before any override from callbacks
@@ -298,7 +263,7 @@ $.widget( "ui.draggable", {
left: newLeft,
top: newTop
};
-
+
// Refresh offset cache with new positions
this.offset.left = this.startOffset.left + leftDiff;
this.offset.top = this.startOffset.top + topDiff;
@@ -326,8 +291,8 @@ $.widget( "ui.draggable", {
}
this.dragEl.css({
- left: newLeft + "px",
- top: newTop + "px"
+ left: newLeft,
+ top: newTop
});
},
@@ -337,26 +302,19 @@ $.widget( "ui.draggable", {
offset: this.offset
};
+ // TODO: should we always set the helper?
if ( this.options.helper ) {
ret.helper = this.dragEl;
}
return ret;
-
},
_unblockFrames: function() {
-
- if ( !this.iframeBlocks || !this.iframeBlocks.length ) {
- return;
+ if ( this.iframeBlocks ) {
+ this.iframeBlocks.remove();
+ delete this.iframeBlocks;
}
-
- this.iframeBlocks.each( function() {
-
- $(this).remove();
-
- });
-
}
});
From e9f5c1857f9d70e69f08be158b2275736c02647f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?=
Date: Thu, 17 Nov 2011 19:48:09 -0500
Subject: [PATCH 027/190] Droppable: Cleanup.
---
ui/jquery.ui.droppable.js | 158 +++++++++++++++-----------------------
1 file changed, 60 insertions(+), 98 deletions(-)
diff --git a/ui/jquery.ui.droppable.js b/ui/jquery.ui.droppable.js
index a24bb14c26c..3555cb83707 100644
--- a/ui/jquery.ui.droppable.js
+++ b/ui/jquery.ui.droppable.js
@@ -5,7 +5,7 @@
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
- * http://docs.jquery.com/UI/Droppables
+ * http://docs.jquery.com/UI/Droppable
*
* Depends:
* jquery.ui.core.js
@@ -14,164 +14,126 @@
*/
(function( $, undefined ) {
-$.widget("ui.droppable", {
+$.widget( "ui.droppable", {
version: "@VERSION",
widgetEventPrefix: "drop",
- allowedTolerance: ["touch","intersect"],
options: {
- // accept: '*',
- // activeClass: false,
- // addClasses: true,
+ // accept: null,
// greedy: false,
- // hoverClass: false,
- // scope: 'default',
- tolerance: 'intersect'
+ tolerance: "intersect"
},
// draggableProportions: width and height of currently dragging draggable
// over: whether or not a draggable is currently over droppable
// proportions: width and height of droppable
-
+ // TODO: move below _create()
+ // TODO: rename to refresh()?
refreshPosition: function() {
-
// Store current location
this.offset = this.element.offset();
- //Store the droppable's proportions
- this.proportions = { width: this.element[0].offsetWidth, height: this.element[0].offsetHeight };
-
+ // Store the droppable's proportions
+ // TODO: should this delegate to core?
+ this.proportions = {
+ width: this.element[0].offsetWidth,
+ height: this.element[0].offsetHeight
+ };
},
_create: function() {
-
this.refreshPosition();
- // TODO: Use $.Callbacks or .on from 1.7
- $('*').live( "drag", $.proxy( this._drag, this ) );
- $('*').live( "dragstart", $.proxy( this._dragStart, this ) );
+ // TODO: make this much more efficient
+ // possibly just override draggable's methods
+ $( "*" ).live( "drag", $.proxy( this._drag, this ) );
+ $( "*" ).live( "dragstart", $.proxy( this._dragStart, this ) );
this._bind( this.document, {
mouseup: "_mouseUp"
});
-
},
_drag: function( event, ui ) {
+ var tolerance = this.options.tolerance,
+ handleFunc = "_handle" + tolerance.substr( 0, 1 ).toUpperCase() + tolerance.substr( 1 ),
+ edges = {
+ right: this.offset.left + this.proportions.width,
+ bottom: this.offset.top + this.proportions.height,
+ draggableRight: ui.offset.left + this.draggableProportions.width,
+ draggableBottom: ui.offset.top + this.draggableProportions.height
+ },
+ over = this[ handleFunc ]( edges, ui );
- var handleFunc, edges,
- tolerance = this.options.tolerance,
- over = false;
-
- switch ( tolerance ) {
-
- case "intersect":
- case "touch":
-
- edges = {
- right: ( this.offset.left + this.proportions.width ),
- bottom: ( this.offset.top + this.proportions.height ),
- draggableRight: ( ui.offset.left + this.draggableProportions.width ),
- draggableBottom: ( ui.offset.top + this.draggableProportions.height )
- };
-
-
- handleFunc = "_handle" + tolerance.substr(0, 1 ).toUpperCase() + tolerance.substr( 1 );
- over = this[ handleFunc ]( edges, ui );
-
- break;
-
- default:
- throw( "Invalid tolerance passed: " + this.options.tolerance + ". Allowed: " + this.allowedTolerance.join( ", " ) );
-
- }
-
// If there is sufficient overlap as deemed by tolerance
- if ( over === true ) {
-
+ if ( over ) {
this._trigger( "over", event, this._uiHash() );
this.over = true;
-
- }
-
// If there isn't enough overlap and droppable was previously flagged as over
- else if ( this.over === true ) {
-
+ } else if ( this.over ) {
this.over = false;
this._trigger( "out", event, this._uiHash() );
-
}
-
},
_dragStart: function( event, ui ) {
-
var draggable = $( event.target );
// TODO: Possibly move into draggable hash, so if there are multiple droppables, it's not recalculating all the time
- this.draggableProportions = { width: draggable[0].offsetWidth, height: draggable[0].offsetHeight };
-
-
-
+ this.draggableProportions = {
+ width: draggable[0].offsetWidth,
+ height: draggable[0].offsetHeight
+ };
},
// Determines if draggable is over droppable based on intersect tolerance
+ // TODO: move all tolerance methods into a hash
+ // $.ui.droppable.tolerance.intersect
_handleIntersect: function( edges, ui ) {
-
var xDiff = edges.draggableRight - this.offset.left,
yDiff = edges.draggableBottom - this.offset.top,
- xHalfway = Math.round( this.proportions.width / 2 ),
- yHalfway = Math.round( this.proportions.height / 2 ),
- xHalfOverlap = false;
- yHalfOverlap = false;
-
-
- // If Coming from left or right
- xHalfOverlap = ( ui.offset.left < this.offset.left ) ?
- ( xDiff >= xHalfway ) :
- ( xDiff <= xHalfway + this.proportions.width );
-
- // If Coming from top or bottom
- yHalfOverlap = ( ui.offset.top < this.offset.top ) ?
- ( yDiff >= yHalfway ) :
- ( yDiff <= yHalfway + this.proportions.height );
-
- return ( xHalfOverlap && yHalfOverlap );
-
-
+ // TODO: is there really any need to round here?
+ xHalfway = Math.round( this.proportions.width / 2 ),
+ yHalfway = Math.round( this.proportions.height / 2 ),
+ xOverlap = false,
+ yOverlap = false;
+
+ // If Coming from left or right
+ xOverlap = ui.offset.left < this.offset.left ?
+ xDiff >= xHalfway :
+ xDiff <= xHalfway + this.proportions.width;
+
+ // If Coming from top or bottom
+ yOverlap = ui.offset.top < this.offset.top ?
+ yDiff >= yHalfway :
+ yDiff <= yHalfway + this.proportions.height;
+
+ return xOverlap && yOverlap;
},
-
+
// Determines if draggable is over droppable based on touch tolerance
_handleTouch: function( edges, ui ) {
-
- var xOverlap = ( edges.draggableRight >= this.offset.left && ui.offset.left <= edges.right ),
- yOverlap = ( edges.draggableBottom >= this.offset.top && ui.offset.top <= edges.bottom );
-
- return ( xOverlap && yOverlap );
-
+ var xOverlap = edges.draggableRight >= this.offset.left &&
+ ui.offset.left <= edges.right,
+ yOverlap = edges.draggableBottom >= this.offset.top &&
+ ui.offset.top <= edges.bottom;
+
+ return xOverlap && yOverlap;
},
-
- _mouseUp: function( event ) {
+ // TODO: shouldn't this be dragStop?
+ _mouseUp: function( event ) {
if ( this.over ) {
this._trigger( "drop", event, this._uiHash() );
}
this.over = false;
-
},
// TODO: fill me out
_uiHash: function() {
-
return {};
-
}
-
-
-
});
-})(jQuery);
-
-
+})( jQuery );
From 51e1d576f61dd6e924c6120ded7446ab2903b7c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?=
Date: Wed, 23 Nov 2011 09:03:02 -0500
Subject: [PATCH 028/190] Draggable: Cleanup.
---
ui/jquery.ui.draggable.js | 47 ++++++++++++++++++---------------------
1 file changed, 22 insertions(+), 25 deletions(-)
diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js
index d4e98a6173a..15b5f873b90 100644
--- a/ui/jquery.ui.draggable.js
+++ b/ui/jquery.ui.draggable.js
@@ -34,30 +34,7 @@ $.widget( "ui.draggable", {
// overflowOffset: offset of scroll parent
// overflow: object containing width and height keys of scroll parent
- // TODO: move next to _unblockFrames()
- _blockFrames: function() {
- var body = this.document[0].body;
-
- this.iframeBlocks = this.document.find( "iframe" ).map(function() {
- var iframe = $( this ),
- iframeOffset = iframe.offset();
-
- return $( "" )
- .css({
- position: "absolute",
- width: iframe.outerWidth(),
- height: iframe.outerHeight(),
- top: iframeOffset.top,
- left: iframeOffset.left
- })
- .appendTo( body )[0];
- });
- },
-
_create: function() {
- // TODO: move to drag start in case DOM changes
- this.scrollParent = this.element.scrollParent();
-
// Static position elements can't be moved with top/left
if ( this.element.css( "position" ) === "static" ) {
this.element.css( "position", "relative" );
@@ -66,7 +43,6 @@ $.widget( "ui.draggable", {
this._bind({ mousedown: "_mouseDown" });
},
- // TODO: why is relative handled differently than fixed/absolute?
_getPosition: function() {
var left, top, position, offset,
scrollTop = this.scrollParent.scrollTop(),
@@ -84,10 +60,11 @@ $.widget( "ui.draggable", {
}
// When using relative, css values are checked
+ // Otherwise the position wouldn't account for padding on ancestors
left = this.dragEl.css( "left" );
top = this.dragEl.css( "top" );
- // Webkit will give back auto if there is nothing inline yet
+ // Webkit will give back auto if there is no explicit value
left = ( left === "auto" ) ? 0: parseInt( left, 10 );
top = ( top === "auto" ) ? 0: parseInt( top, 10 );
@@ -169,6 +146,7 @@ $.widget( "ui.draggable", {
}
this.cssPosition = this.dragEl.css( "position" );
+ this.scrollParent = this.element.scrollParent();
// Cache starting absolute and relative positions
this.startPosition = this._getPosition();
@@ -310,6 +288,25 @@ $.widget( "ui.draggable", {
return ret;
},
+ _blockFrames: function() {
+ var body = this.document[0].body;
+
+ this.iframeBlocks = this.document.find( "iframe" ).map(function() {
+ var iframe = $( this ),
+ iframeOffset = iframe.offset();
+
+ return $( "
" )
+ .css({
+ position: "absolute",
+ width: iframe.outerWidth(),
+ height: iframe.outerHeight(),
+ top: iframeOffset.top,
+ left: iframeOffset.left
+ })
+ .appendTo( body )[0];
+ });
+ },
+
_unblockFrames: function() {
if ( this.iframeBlocks ) {
this.iframeBlocks.remove();
From dbaa744f0c17f48336ca17259045b08ac11ef312 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?=
Date: Wed, 23 Nov 2011 12:03:09 -0500
Subject: [PATCH 029/190] Interaction: Initial implementation for base
interaction plugin.
---
demos/draggable/default.html | 2 +-
ui/jquery.ui.draggable.js | 24 ++++---------
ui/jquery.ui.interaction.js | 69 ++++++++++++++++++++++++++++++++++++
3 files changed, 76 insertions(+), 19 deletions(-)
create mode 100644 ui/jquery.ui.interaction.js
diff --git a/demos/draggable/default.html b/demos/draggable/default.html
index 3a334d4b692..6dff38d85ee 100644
--- a/demos/draggable/default.html
+++ b/demos/draggable/default.html
@@ -7,7 +7,7 @@
-
+
-
+
+
+
+
+
+
+
+
+
+
+ - Start:
+ - 0
+ - Move:
+ - 0
+ - Stop:
+ - 0
+
+
+
+
This demo shows a simple interaction built using the interaction utility (jquery.ui.interaction.js).
+
Make a down-move-up motion starting on the blue box above using the mouse or a touch input device to see the interaction events
+