Effects.*: Updating Effect Method API to avoid duplicating the queue call - Fixes #7318 - Add the queue functions to $.fn.effect()

This commit is contained in:
gnarf 2011-06-21 00:23:52 -05:00
parent fb210ae1ec
commit 1c1a3b1a36
14 changed files with 774 additions and 803 deletions

View File

@ -12,13 +12,10 @@
*/
(function( $, undefined ) {
var rvertical = /up|down|vertical/;
var rpositivemotion = /up|left|vertical|horizontal/;
$.effects.effect.blind = function( o ) {
return this.queue( function() {
var rvertical = /up|down|vertical/,
rpositivemotion = /up|left|vertical|horizontal/;
$.effects.effect.blind = function( o, next ) {
// Create element
var el = $( this ),
props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
@ -29,6 +26,7 @@ $.effects.effect.blind = function( o ) {
ref2 = vertical ? "top" : "left",
motion = rpositivemotion.test( direction ),
animation = {},
show = mode === "show",
wrapper, distance;
// if already wrapped, the wrapper's properties are my property. #6245
@ -54,7 +52,7 @@ $.effects.effect.blind = function( o ) {
}
// start at 0 if we are showing
if ( mode == "show" ) {
if ( mode === "show" ) {
wrapper.css( ref, 0 );
if ( ! motion ) {
wrapper.css( ref2, distance );
@ -75,12 +73,10 @@ $.effects.effect.blind = function( o ) {
if ( $.isFunction( o.complete ) ) {
o.complete.apply( el[ 0 ], arguments );
}
el.dequeue();
next();
}
});
});
};
})(jQuery);

View File

@ -12,9 +12,7 @@
*/
(function( $, undefined ) {
$.effects.effect.bounce = function(o) {
return this.queue( function( next ) {
$.effects.effect.bounce = function( o, next ) {
var el = $( this ),
props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
@ -112,8 +110,6 @@ $.effects.effect.bounce = function(o) {
}
next();
});
};
})(jQuery);

View File

@ -12,10 +12,7 @@
*/
(function( $, undefined ) {
$.effects.effect.clip = function( o ) {
return this.queue( function() {
$.effects.effect.clip = function( o, next ) {
// Create element
var el = $( this ),
props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
@ -67,8 +64,6 @@ $.effects.effect.clip = function( o ) {
}
});
});
};
})(jQuery);

View File

@ -536,6 +536,7 @@ $.fn.extend({
effect: function( effect, options, speed, callback ) {
var args = _normalizeArguments.apply( this, arguments ),
mode = args.mode,
queue = args.queue,
effectMethod = $.effects.effect[ args.effect ],
// DEPRECATED: remove in 2.0 (#7115)
@ -554,9 +555,13 @@ $.fn.extend({
}
}
function run( next ) {
effectMethod.call( this, args, $.isFunction( next ) ? next : $.noop );
}
// TODO: remove this check in 2.0, effectMethod will always be true
if ( effectMethod ) {
return effectMethod.call( this, args );
return queue === false ? this.each( run ) : this.queue( queue || "fx", run );
} else {
// DEPRECATED: remove in 2.0 (#7115)
return oldEffectMethod.call(this, {

View File

@ -12,18 +12,16 @@
*/
(function( $, undefined ) {
$.effects.effect.drop = function( o ) {
return this.queue( function() {
$.effects.effect.drop = function( o, next ) {
var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right', 'opacity', "height", "width" ],
mode = $.effects.setMode( el, o.mode || 'hide' ),
direction = o.direction || 'left',
ref = ( direction == 'up' || direction == 'down' ) ? 'top' : 'left',
motion = ( direction == 'up' || direction == 'left' ) ? 'pos' : 'neg',
props = [ "position", "top", "bottom", "left", "right", "opacity", "height", "width" ],
mode = $.effects.setMode( el, o.mode || "hide" ),
direction = o.direction || "left",
ref = ( direction == "up" || direction == "down" ) ? "top" : "left",
motion = ( direction == "up" || direction == "left" ) ? "pos" : "neg",
animation = {
opacity: mode == 'show' ? 1 : 0
opacity: mode == "show" ? 1 : 0
},
distance;
@ -32,16 +30,16 @@ $.effects.effect.drop = function( o ) {
el.show();
$.effects.createWrapper( el );
distance = o.distance || el[ ref == 'top' ? 'outerHeight': 'outerWidth' ]({ margin: true }) / 2;
distance = o.distance || el[ ref == "top" ? "outerHeight": "outerWidth" ]({ margin: true }) / 2;
if ( mode == 'show' ) {
if ( mode == "show" ) {
el
.css( 'opacity', 0 )
.css( ref, motion == 'pos' ? -distance : distance );
.css( "opacity", 0 )
.css( ref, motion == "pos" ? -distance : distance );
}
// Animation
animation[ ref ] = ((mode == 'show') ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance;
animation[ ref ] = ((mode == "show") ? (motion == "pos" ? "+=" : "-=") : (motion == "pos" ? "-=" : "+=")) + distance;
// Animate
el.animate( animation, {
@ -49,16 +47,14 @@ $.effects.effect.drop = function( o ) {
duration: o.duration,
easing: o.easing,
complete: function() {
mode == 'hide' && el.hide();
mode == "hide" && el.hide();
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply(this, arguments);
el.dequeue();
next();
}
});
});
};
})(jQuery);

View File

@ -12,18 +12,16 @@
*/
(function( $, undefined ) {
$.effects.effect.explode = function( o ) {
return this.queue( function( next ) {
$.effects.effect.explode = function( o, next ) {
var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3,
cells = rows,
el = $( this ),
mode = $.effects.setMode( el, o.mode || 'hide' ),
show = ( mode == 'show' ),
mode = $.effects.setMode( el, o.mode || "hide" ),
show = ( mode == "show" ),
// show and then visibility:hidden the element before calculating offset
offset = el.show().css( 'visibility', 'hidden' ).offset(),
offset = el.show().css( "visibility", "hidden" ).offset(),
// width and height of a piece
width = Math.ceil( el.outerWidth() / cells ),
@ -46,11 +44,11 @@ $.effects.effect.explode = function( o ) {
// within a wrapper div off the -left and -top equal to size of our pieces
el
.clone()
.appendTo( 'body' )
.wrap( '<div></div>' )
.appendTo( "body" )
.wrap( "<div></div>" )
.css({
position: 'absolute',
visibility: 'visible',
position: "absolute",
visibility: "visible",
left: -j * width,
top: -i * height
})
@ -58,10 +56,10 @@ $.effects.effect.explode = function( o ) {
// select the wrapper - make it overflow: hidden and absolute positioned based on
// where the original was located +left and +top equal to the size of pieces
.parent()
.addClass( 'ui-effects-explode' )
.addClass( "ui-effects-explode" )
.css({
position: 'absolute',
overflow: 'hidden',
position: "absolute",
overflow: "hidden",
width: width,
height: height,
left: left + ( show ? mx * width : 0 ),
@ -85,7 +83,7 @@ $.effects.effect.explode = function( o ) {
function animComplete() {
el.css({
visibility: 'visible'
visibility: "visible"
});
$( pieces ).remove();
if ( !show ) {
@ -96,8 +94,6 @@ $.effects.effect.explode = function( o ) {
}
next();
}
});
};
})(jQuery);

View File

@ -12,10 +12,9 @@
*/
(function( $, undefined ) {
$.effects.effect.fade = function( o ) {
return this.queue( function( next ) {
$.effects.effect.fade = function( o, next ) {
var el = $( this ),
mode = $.effects.setMode( el, o.mode || 'toggle' ),
mode = $.effects.setMode( el, o.mode || "toggle" ),
hide = mode === "hide";
el.show();
@ -35,7 +34,6 @@ $.effects.effect.fade = function( o ) {
next();
}
});
});
};
})(jQuery);

View File

@ -12,19 +12,17 @@
*/
(function( $, undefined ) {
$.effects.effect.fold = function( o ) {
return this.queue( function() {
$.effects.effect.fold = function( o, next ) {
// Create element
var el = $( this ),
props = ['position','top','bottom','left','right','height','width'],
mode = $.effects.setMode(el, o.mode || 'hide'),
props = ["position","top","bottom","left","right","height","width"],
mode = $.effects.setMode(el, o.mode || "hide"),
size = o.size || 15,
percent = /([0-9]+)%/.exec(size),
horizFirst = !!o.horizFirst,
widthFirst = ((mode == 'show') != horizFirst),
ref = widthFirst ? ['width', 'height'] : ['height', 'width'],
widthFirst = ((mode == "show") != horizFirst),
ref = widthFirst ? ["width", "height"] : ["height", "width"],
duration = o.duration / 2,
wrapper, distance;
@ -33,16 +31,16 @@ $.effects.effect.fold = function( o ) {
// Create Wrapper
wrapper = $.effects.createWrapper( el ).css({
overflow: 'hidden'
overflow: "hidden"
});
distance = widthFirst ?
[ wrapper.width(), wrapper.height() ] :
[ wrapper.height(), wrapper.width() ];
if ( percent ) {
size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ ( mode == 'hide') ? 0 : 1 ];
size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ ( mode == "hide") ? 0 : 1 ];
}
mode == 'show' && wrapper.css( horizFirst ? {
mode == "show" && wrapper.css( horizFirst ? {
height: 0,
width: size
} : {
@ -52,20 +50,18 @@ $.effects.effect.fold = function( o ) {
// Animation
var animation1 = {}, animation2 = {};
animation1[ ref[ 0 ] ] = mode == 'show' ? distance[ 0 ] : size;
animation2[ ref[ 1 ] ] = mode == 'show' ? distance[ 1 ] : 0;
animation1[ ref[ 0 ] ] = mode == "show" ? distance[ 0 ] : size;
animation2[ ref[ 1 ] ] = mode == "show" ? distance[ 1 ] : 0;
// Animate
wrapper
.animate( animation1, duration, o.easing )
.animate( animation2, duration, o.easing, function() {
(mode == 'hide') && el.hide();
(mode == "hide") && el.hide();
$.effects.restore( el, props );
$.effects.removeWrapper( el );
jQuery.isFunction(o.complete) && o.complete.apply( el[ 0 ], arguments );
el.dequeue();
});
next();
});
};

View File

@ -12,16 +12,15 @@
*/
(function( $, undefined ) {
$.effects.effect.highlight = function( o ) {
return this.queue( function() {
$.effects.effect.highlight = function( o, next ) {
var elem = $( this ),
props = [ 'backgroundImage', 'backgroundColor', 'opacity' ],
mode = $.effects.setMode( elem, o.mode || 'show' ),
props = [ "backgroundImage", "backgroundColor", "opacity" ],
mode = $.effects.setMode( elem, o.mode || "show" ),
animation = {
backgroundColor: elem.css( 'backgroundColor' )
backgroundColor: elem.css( "backgroundColor" )
};
if (mode == 'hide') {
if (mode == "hide") {
animation.opacity = 0;
}
@ -30,22 +29,21 @@ $.effects.effect.highlight = function( o ) {
elem
.show()
.css({
backgroundImage: 'none',
backgroundColor: o.color || '#ffff99'
backgroundImage: "none",
backgroundColor: o.color || "#ffff99"
})
.animate( animation, {
queue: false,
duration: o.duration,
easing: o.easing,
complete: function() {
(mode == 'hide' && elem.hide());
(mode == "hide" && elem.hide());
$.effects.restore( elem, props );
(mode == 'show' && !$.support.opacity && this.style.removeAttribute( 'filter' ));
(mode == "show" && !$.support.opacity && this.style.removeAttribute( "filter" ));
jQuery.isFunction(o.complete) && o.complete.apply(this, arguments);
elem.dequeue();
next();
}
});
});
};
})(jQuery);

View File

@ -12,8 +12,7 @@
*/
(function( $, undefined ) {
$.effects.effect.pulsate = function( o ) {
return this.queue( function( next ) {
$.effects.effect.pulsate = function( o, next ) {
var elem = $( this ),
mode = $.effects.setMode( elem, o.mode || "show" ),
show = mode === "show",
@ -28,7 +27,7 @@ $.effects.effect.pulsate = function( o ) {
queuelen = queue.length,
i;
if ( show || !elem.is(':visible')) {
if ( show || !elem.is(":visible")) {
elem.css( "opacity", 0 ).show();
animateTo = 1;
}
@ -61,7 +60,6 @@ $.effects.effect.pulsate = function( o ) {
[ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) );
}
next();
});
};
})(jQuery);

View File

@ -12,10 +12,18 @@
*/
(function( $, undefined ) {
$.effects.effect.puff = function( o ) {
return this.queue( function() {
function compFunction( el, complete, next ) {
return function() {
if ( $.isFunction( complete ) ) {
complete.apply( el );
}
next();
};
};
$.effects.effect.puff = function( o, next ) {
var elem = $( this ),
mode = $.effects.setMode( elem, o.mode || 'hide' ),
mode = $.effects.setMode( elem, o.mode || "hide" ),
percent = parseInt( o.percent, 10 ) || 150,
factor = percent / 100,
original = {
@ -24,12 +32,13 @@ $.effects.effect.puff = function( o ) {
};
$.extend( o, {
effect: 'scale',
effect: "scale",
queue: false,
fade: true,
mode: mode,
percent: mode == 'hide' ? percent : 100,
from: mode == 'hide'
complete: compFunction( this, o.complete, next ),
percent: mode == "hide" ? percent : 100,
from: mode == "hide"
? original
: {
height: original.height * factor,
@ -38,19 +47,16 @@ $.effects.effect.puff = function( o ) {
});
elem.effect( o );
});
};
$.effects.effect.scale = function( o ) {
return this[ o.queue === false ? "each" : "queue" ]( function() {
$.effects.effect.scale = function( o, next ) {
// Create element
var el = $( this ),
options = $.extend( true, {}, o ),
mode = $.effects.setMode( el, o.mode || 'effect' ),
percent = parseInt( o.percent, 10 ) || ( parseInt( o.percent, 10 ) == 0 ? 0 : ( mode == 'hide' ? 0 : 100 ) ),
direction = o.direction || 'both',
mode = $.effects.setMode( el, o.mode || "effect" ),
percent = parseInt( o.percent, 10 ) || ( parseInt( o.percent, 10 ) == 0 ? 0 : ( mode == "hide" ? 0 : 100 ) ),
direction = o.direction || "both",
origin = o.origin,
original = {
height: el.height(),
@ -59,21 +65,22 @@ $.effects.effect.scale = function( o ) {
outerWidth: el.outerWidth()
},
factor = {
y: direction != 'horizontal' ? (percent / 100) : 1,
x: direction != 'vertical' ? (percent / 100) : 1
y: direction != "horizontal" ? (percent / 100) : 1,
x: direction != "vertical" ? (percent / 100) : 1
};
// We are going to pass this effect to the size effect:
options.effect = "size";
options.queue = false;
options.complete = compFunction( this, options.complete, next );
// Set default origin and restore for show/hide
if ( mode != 'effect' ) {
options.origin = origin || ['middle','center'];
if ( mode != "effect" ) {
options.origin = origin || ["middle","center"];
options.restore = true;
}
options.from = o.from || ( mode == 'show' ? { height: 0, width: 0 } : original );
options.from = o.from || ( mode == "show" ? { height: 0, width: 0 } : original );
options.to = {
height: original.height * factor.y,
width: original.width * factor.x,
@ -82,11 +89,11 @@ $.effects.effect.scale = function( o ) {
};
if ( options.fade ) { // Fade option to support puff
if ( mode == 'show' ) {
if ( mode == "show" ) {
options.from.opacity = 0;
options.to.opacity = 1;
}
if ( mode == 'hide' ) {
if ( mode == "hide" ) {
options.from.opacity = 1;
options.to.opacity = 0;
}
@ -94,30 +101,28 @@ $.effects.effect.scale = function( o ) {
// Animate
el.effect( options );
});
};
$.effects.effect.size = function( o ) {
$.effects.effect.size = function( o, next ) {
return this[ o.queue === false ? "each" : "queue" ]( function() {
// Create element
var el = $( this ),
props = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ],
props = [ "position", "top", "bottom", "left", "right", "width", "height", "overflow", "opacity" ],
// Always restore
props1 = [ 'position', 'top', 'bottom', 'left', 'right', 'overflow', 'opacity' ],
props1 = [ "position", "top", "bottom", "left", "right", "overflow", "opacity" ],
// Copy for children
props2 = [ 'width', 'height', 'overflow' ],
cProps = [ 'fontSize' ],
vProps = [ 'borderTopWidth', 'borderBottomWidth', 'paddingTop', 'paddingBottom' ],
hProps = [ 'borderLeftWidth', 'borderRightWidth', 'paddingLeft', 'paddingRight' ],
props2 = [ "width", "height", "overflow" ],
cProps = [ "fontSize" ],
vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ],
hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ],
// Set options
mode = $.effects.setMode( el, o.mode || 'effect' ),
mode = $.effects.setMode( el, o.mode || "effect" ),
restore = o.restore || mode !== "effect",
scale = o.scale || 'both',
scale = o.scale || "both",
origin = o.origin || [ "middle", "center" ],
original, baseline, factor,
position = el.css( "position" ),
@ -150,7 +155,7 @@ $.effects.effect.size = function( o ) {
};
// Scale the css box
if ( scale == 'box' || scale == 'both' ) {
if ( scale == "box" || scale == "both" ) {
// Vertical props scaling
if ( factor.from.y !== factor.to.y ) {
@ -168,7 +173,7 @@ $.effects.effect.size = function( o ) {
};
// Scale the content
if ( scale == 'content' || scale == 'both' ) {
if ( scale == "content" || scale == "both" ) {
// Vertical props scaling
if ( factor.from.y !== factor.to.y ) {
@ -181,7 +186,7 @@ $.effects.effect.size = function( o ) {
$.effects.save( el, restore ? props : props1 );
el.show();
$.effects.createWrapper( el );
el.css( 'overflow', 'hidden' ).css( el.from );
el.css( "overflow", "hidden" ).css( el.from );
// Adjust
if (origin) { // Calculate baseline shifts
@ -194,11 +199,11 @@ $.effects.effect.size = function( o ) {
el.css( el.from ); // set top & left
// Animate
if ( scale == 'content' || scale == 'both' ) { // Scale the children
if ( scale == "content" || scale == "both" ) { // Scale the children
// Add margins/font-size
vProps = vProps.concat([ 'marginTop', 'marginBottom' ]).concat(cProps);
hProps = hProps.concat([ 'marginLeft', 'marginRight' ]);
vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat(cProps);
hProps = hProps.concat([ "marginLeft", "marginRight" ]);
props2 = props.concat(vProps).concat(hProps);
el.find( "*[width]" ).each( function(){
@ -247,14 +252,15 @@ $.effects.effect.size = function( o ) {
easing: o.easing,
complete: function() {
if ( el.to.opacity === 0 ) {
el.css( 'opacity', el.from.opacity );
el.css( "opacity", el.from.opacity );
}
if( mode == 'hide' ) {
if( mode == "hide" ) {
el.hide();
}
$.effects.restore( el, restore ? props : props1 );
if ( !restore ) {
// we need to recalculate our positioning based on the new scaling
// we need to calculate our new positioning based on the scaling
if ( position === "static" ) {
el.css({
position: "relative",
@ -292,13 +298,14 @@ $.effects.effect.size = function( o ) {
});
});
}
}
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments ); // Callback
el.dequeue();
if ( $.isFunction( o.complete ) ) {
o.complete.apply( this, arguments );
}
next();
}
});
});
};

View File

@ -12,9 +12,7 @@
*/
(function( $, undefined ) {
$.effects.effect.shake = function( o ) {
return this.queue( function() {
$.effects.effect.shake = function( o, next ) {
var el = $( this ),
props = [ "position", "top", "bottom", "left", "right", "height", "width" ],
@ -70,8 +68,7 @@ $.effects.effect.shake = function( o ) {
queue.splice.apply( queue,
[ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) );
}
el.dequeue();
});
next();
};

View File

@ -12,17 +12,15 @@
*/
(function( $, undefined ) {
$.effects.effect.slide = function( o ) {
return this.queue( function() {
$.effects.effect.slide = function( o, next ) {
// Create element
var el = $( this ),
props = [ "position", "top", "bottom", "left", "right", "width", "height" ],
mode = $.effects.setMode( el, o.mode || 'show' ),
direction = o.direction || 'left',
ref = (direction == 'up' || direction == 'down') ? 'top' : 'left',
motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg',
mode = $.effects.setMode( el, o.mode || "show" ),
direction = o.direction || "left",
ref = (direction == "up" || direction == "down") ? "top" : "left",
motion = (direction == "up" || direction == "left") ? "pos" : "neg",
distance,
animation = {},
size;
@ -30,22 +28,22 @@ $.effects.effect.slide = function( o ) {
// Adjust
$.effects.save( el, props );
el.show();
distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({
distance = o.distance || el[ ref == "top" ? "outerHeight" : "outerWidth" ]({
margin: true
});
$.effects.createWrapper( el ).css({
overflow: 'hidden'
overflow: "hidden"
});
if (mode == 'show') {
el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance );
if (mode == "show") {
el.css( ref, motion == "pos" ? (isNaN(distance) ? "-" + distance : -distance) : distance );
}
// Animation
animation[ ref ] = ( mode == 'show' ?
(motion == 'pos' ? '+=' : '-=') :
(motion == 'pos' ? '-=' : '+='))
animation[ ref ] = ( mode == "show" ?
(motion == "pos" ? "+=" : "-=") :
(motion == "pos" ? "-=" : "+="))
+ distance;
// Animate
@ -54,18 +52,16 @@ $.effects.effect.slide = function( o ) {
duration: o.duration,
easing: o.easing,
complete: function() {
if ( mode == 'hide' ) {
if ( mode == "hide" ) {
el.hide();
}
$.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction(o.complete) && o.complete.apply( this, arguments );
el.dequeue();
next();
}
});
});
};
})(jQuery);

View File

@ -12,9 +12,7 @@
*/
(function( $, undefined ) {
$.effects.effect.transfer = function( o ) {
return this.queue( function() {
$.effects.effect.transfer = function( o, next ) {
var elem = $( this ),
target = $( o.to ),
targetFixed = target.css( "position" ) === "fixed",
@ -42,8 +40,7 @@ $.effects.effect.transfer = function( o ) {
.animate( animation, o.duration, o.easing, function() {
transfer.remove();
$.isFunction( o.complete ) && o.complete.apply(elem[0], arguments);
elem.dequeue();
});
next();
});
};