From fea61ce5cba287e2fbd2dcf94ee0833c2b56a939 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Wed, 26 Dec 2012 08:35:42 -0500 Subject: [PATCH 01/40] Effects Rewrite --- tests/unit/effects/effects_core.js | 14 - tests/visual/effects/image.png | Bin 0 -> 3894 bytes ui/effect-blind.js | 77 ++---- ui/effect-bounce.js | 37 ++- ui/effect-drop.js | 24 +- ui/effect-explode.js | 14 +- ui/effect-fade.js | 11 +- ui/effect-fold.js | 70 ++--- ui/effect-highlight.js | 18 +- ui/effect-puff.js | 36 +-- ui/effect-pulsate.js | 13 +- ui/effect-scale.js | 75 +++--- ui/effect-shake.js | 28 +- ui/effect-size.js | 77 +++--- ui/effect-slide.js | 60 ++--- ui/effect-transfer.js | 10 +- ui/effect.js | 404 ++++++++++++++++++++--------- 17 files changed, 517 insertions(+), 451 deletions(-) create mode 100644 tests/visual/effects/image.png diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index 05db494e6af..7753f42c578 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -75,20 +75,6 @@ test( "removeClass", function() { equal( "", element[ 0 ].className ); }); - -/* TODO: Disabled - Can't figure out why this is failing in IE 6/7 -test( "createWrapper and removeWrapper retain focused elements (#7595)", function() { - expect( 2 ); - var test = $( "div.hidden" ).show(), - input = $( "" ).appendTo( test ).focus(); - - $.effects.createWrapper( test ); - equal( document.activeElement, input[ 0 ], "Active element is still input after createWrapper" ); - $.effects.removeWrapper( test ); - equal( document.activeElement, input[ 0 ], "Active element is still input after removeWrapper" ); -}); -*/ - module( "effects.core: animateClass" ); asyncTest( "animateClass works with borderStyle", function() { diff --git a/tests/visual/effects/image.png b/tests/visual/effects/image.png new file mode 100644 index 0000000000000000000000000000000000000000..4ec90439aa15b69d4c66074a9d17892bd8fa4fdf GIT binary patch literal 3894 zcmV-656SR}P)Z-Z*F#PSx_29hFx59{f`2Ns<+{qVG167gJdt=gq9V3Jge-3HcoGl%L(7|1>K8?aGm=zqTMYM zX#WIJh$40&3d<~;|L8M@*9>|t!S!UEYKsDcp*NuJykgB$xGC-OHG;C_#H z@@v_zmDtT4-MMfP_6c<#)Z#13aG*8>A`;%OGr)oEdqhNO@~CwL?@A*Ofki#qOp8c@ z>QKY0mo_U@5C7`5!H9${U3ZsGj0q>gNx{Ftf>VO&6`rhv8DkQ)%H-o{m>OPD2H#^B zj7WH+^m@UOG2x9qk?x<{b1iX7aGHkQ2otpxg~sS*Z4LN}dYRETp@@V-dLs{$g#?h& zC!*)NXfxc~L8vikzblzg4f=#t1vV`5dd)ZoBNC28+0}xWh;GQS*%8sBo&t)FNmnIH z%!C3c2+SjpY9x%{iV#@4xPU|g(Y2e9EyVwxzL0JF;Xq*3AjlC~{P9^7j2(!+-uUW1 zcUGcjwIK|VkfcP!xk0o*7=oU2lIVRU0~J@TYgJj4E+$c?&p?NY09Qo78$G;GB=EGK zFEQb8YdO#tb_tke5HSH?sZ@?6tw~9i|L_}itd#nfvdx4i3wXSEWeP) z3v`M%GP?E(Q-z8{Col>!!GZ06mW;g#MI>xK5EFQxA)}v& zZn&_2XtHetl1iZy(4}Ns7aAIEeZSdgk<&Ff2|Z&q3xii6hfJUYqyim3_7@&((_`|? z35{7h+vLD~E#*ceN(qI?K9JtcgTu`83%k#p32*cT9_Vi={X!mX|HbJ@lpZ$z=+#ky z1!e=%u+)g`ME9qLOt6ewx`8!D-d7d}ia0%%n~(d5IF9Rx;OsSe6c*Yc2ZKm8iut5l z&e0Yw{K(~BtBXWcc!rM854AsLgkyhB__`T+oW4Z5JJllJSFM0&FQ(tToF@s10dM zJEk8m+!^Ko&Q^F@L>cq!W8b=^^g6_kC3m`fA-|Kyl!gvZ89ORAY#^ zhbbpCBM;7p!i1D9IMFYpZ!!_mMCU72$aQf#;aS4E;l#z4%~S&ryjs~v4?!ew;{c4M zB}av$yrZpdtl4ZJ6Li9Jgmt5r7PqP~M7~sRL?V_3AQBjepq+R~>4H4F$EPD5mA+Ez z$%K{_2lQ4WYK-~9MJ=qd5m`$EP_M_Ow-^H|u<;azZ7MrZ;8tpx(1YRt1*6=Ev}X@E z)QChV1zx=#JC+n673i2Hs3DbU$C@2vLZOlyBMdt$(x~W7LPOMal=0$-! zQ*tA6S;0JTxb7sx0`RC_25cKF`o$k9-9?Hu0+!C>9Z@}K{yT#!u}DX^tU(_*Hp(ho za>kwz$^#RPe0C8d+H0~X&xoqS)LKRw{GLe1o+TwU6BK#A4*!hVh%Ny3PzTu8F_E5VR!W*9+F7uHW>`!zSSxW@$33ynz0(2y}{O1=wF zB!KZ%BIzupB#u9}pZJL5$L5s^v3{CqWRD8%49Ld77pU&~N)B!iqai}0vI-3-gP|n_ zc^bhV;}cIL;U3WBP?;%h=YC;=HX%oAJBLtVZiyulEC^F6Jf8}DlMEJe{*6JaTm+aP zW5Or?A)ul5;Bf68u1++(DwpU{Ob0sr4M6}jzg7B|4rPu2od{~E)Yi-d6z2F+=CMM1pYEXUmjX- z$!gHLUM&-XM9d9Dr~!HBI`V2nVx!S7&rix?@243jz~53U6Z%b<$as@+o2=9r>0aH4 z^rr$Yx3y6hd%RBOP^n1v;Qyat;zT}Nh{5cdFyQ_~DhytEzV|+i-N`5Zt^B`qu-Fkt zy1Q#GWYLOA6^k2@+)CD?@Nuac|3{Yg!n7O!%1Ys91$N9D!{L)H6p1o|3wzi^65*OZ*y<7+CW*(1vC zCjb9eW~v%BY^!@#V_BMMndbwhfpLxWmT?(zzz4@}_!bQ8nBe}=d3~qd^S}uovST3f z+nr$TIha`EQ1~sy?wQQ`6P|`i^!R&L-nTRHXLuqe(K~#VHSC%6sbRu%F|l>UM>x-W z77i*u;OUseyUvh&h6n6867xxzSPrHTIduV|&9HsL$qirb4%?rH$@e}kbmo`Cqz@~e z{N*s|lMT-ORmP6{zHut;sTQ$M}fZ6Y+kk()%f8-+RN_c zqcGWjLhkW1_h2ImV2R`cg$NcRQ;EEdBv>LuBq9LFo`^~wU-qbRr8L~E6h$LVOdhfp zMy!;2k4W+(6e6m<_?EWIYx3M7i6Ha1#D|;0WIj4FwET)C(gf$tylf zN|Fkx?*^!AY_r7PBG}NO4fT3|npKmni-)1e94E#04wD8!1==zpy~+*&A~dI3Qva*d`GQdC>5zIvp6lRkm|P|9HQASR4LX?=eL_*EAMaNQF; z!$^{PLUcJoCl*B4vj~eZd9dc0t2l(llu?(8rE#Q6Qw>m^wl~&Rxq!L$Mx#yMe1@Z# zo{#|rul=_h0(q-x>!=%ktOq}Q<_%*7gpJL*F(PcVkgzd2il#|}kTSfIk`?{K?WhAw z3pzl6iESZZ(-QKav{qbu3&KY2f4YvR8UbLV^ekCc-5Y6eC&v3DRjjo}yCOeqZ0W@D zl-O;unmd3Ay-+U~ae+XTTg^hWwUxfBWDJS2zS>@I_H0apb1g+~ zR!Q4%afr!BP}Bld{TG6!ixjP5RBT$J4H~iAbeNX^+pB{b06-uHU?bdz`4@~1LTjRV zg@8^VooPM*000000000000000000000000000000T!$meAXl4<$ Ef{T+RDF6Tf literal 0 HcmV?d00001 diff --git a/ui/effect-blind.js b/ui/effect-blind.js index ffdfa373514..e940089b50b 100644 --- a/ui/effect-blind.js +++ b/ui/effect-blind.js @@ -28,68 +28,47 @@ } }(function( $ ) { -return $.effects.effect.blind = function( o, done ) { - // Create element - var el = $( this ), - rvertical = /up|down|vertical/, - rpositivemotion = /up|left|vertical|horizontal/, - props = [ "position", "top", "bottom", "left", "right", "height", "width" ], - mode = $.effects.setMode( el, o.mode || "hide" ), - direction = o.direction || "up", - vertical = rvertical.test( direction ), - ref = vertical ? "height" : "width", - ref2 = vertical ? "top" : "left", - motion = rpositivemotion.test( direction ), - animation = {}, - show = mode === "show", - wrapper, distance, margin; +$.effects.define( "blind", "hide", function( o, done ) { + var start, placeholder, + animate = {}, + map = { + up: [ "bottom", "top" ], + vertical: [ "bottom", "top" ], + down: [ "top", "bottom" ], + left: [ "right", "left" ], + horizontal: [ "right", "left" ], + right: [ "left", "right" ] + }, + el = $( this ), + show = o.mode === "show", + direction = o.direction || "up"; - // if already wrapped, the wrapper's properties are my property. #6245 - if ( el.parent().is( ".ui-effects-wrapper" ) ) { - $.effects.save( el.parent(), props ); - } else { - $.effects.save( el, props ); - } - el.show(); - wrapper = $.effects.createWrapper( el ).css({ - overflow: "hidden" - }); + start = el.cssClip(); + animate.clip = el.cssClip(); + animate.clip[ map[ direction ][ 0 ] ] = animate.clip[ map[ direction ][ 1 ] ]; - distance = wrapper[ ref ](); - margin = parseFloat( wrapper.css( ref2 ) ) || 0; - - animation[ ref ] = show ? distance : 0; - if ( !motion ) { - el - .css( vertical ? "bottom" : "right", 0 ) - .css( vertical ? "top" : "left", "auto" ) - .css({ position: "absolute" }); - - animation[ ref2 ] = show ? margin : distance + margin; - } + placeholder = $.effects.createPlaceholder( el ); - // start at 0 if we are showing if ( show ) { - wrapper.css( ref, 0 ); - if ( !motion ) { - wrapper.css( ref2, margin + distance ); - } + el.cssClip( animate.clip ); + animate.clip = start; } - // Animate - wrapper.animate( animation, { + el.animate( animate, { + queue: false, duration: o.duration, easing: o.easing, - queue: false, complete: function() { - if ( mode === "hide" ) { + + $.effects.removePlaceholder( placeholder, el ); + + if ( !show ) { el.hide(); } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); + done(); } }); -}; +}); })); diff --git a/ui/effect-bounce.js b/ui/effect-bounce.js index b2fa2c951af..016191aff6d 100644 --- a/ui/effect-bounce.js +++ b/ui/effect-bounce.js @@ -28,12 +28,12 @@ } }(function( $ ) { -return $.effects.effect.bounce = function( o, done ) { - var el = $( this ), - props = [ "position", "top", "bottom", "left", "right", "height", "width" ], +$.effects.define( "bounce", function( o, done ) { + var upAnim, downAnim, + el = $( this ), // defaults: - mode = $.effects.setMode( el, o.mode || "effect" ), + mode = o.mode, hide = mode === "hide", show = mode === "show", direction = o.direction || "up", @@ -48,22 +48,14 @@ return $.effects.effect.bounce = function( o, done ) { // utility: ref = ( direction === "up" || direction === "down" ) ? "top" : "left", motion = ( direction === "up" || direction === "left" ), - i, - upAnim, - downAnim, + i = 0, // we will need to re-assemble the queue to stack our animations in place queue = el.queue(), - queuelen = queue.length; + queuelen = queue.length, - // Avoid touching opacity to prevent clearType and PNG issues in IE - if ( show || hide ) { - props.push( "opacity" ); - } - - $.effects.save( el, props ); - el.show(); - $.effects.createWrapper( el ); // Create Wrapper + placeholder = $.effects.createPlaceholder( el ), + refValue = el.css( ref ); // default distance for the BIGGEST bounce is the outer Distance / 3 if ( !distance ) { @@ -72,7 +64,7 @@ return $.effects.effect.bounce = function( o, done ) { if ( show ) { downAnim = { opacity: 1 }; - downAnim[ ref ] = 0; + downAnim[ ref ] = refValue; // if we are showing, force opacity 0 and set the initial position // then do the "first" animation @@ -87,9 +79,9 @@ return $.effects.effect.bounce = function( o, done ) { } downAnim = {}; - downAnim[ ref ] = 0; + downAnim[ ref ] = refValue; // Bounces up/down/left/right then back to 0 -- times * 2 animations happen here - for ( i = 0; i < times; i++ ) { + for ( ; i < times; i++ ) { upAnim = {}; upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance; @@ -108,11 +100,12 @@ return $.effects.effect.bounce = function( o, done ) { } el.queue(function() { + $.effects.removePlaceholder( placeholder, el ); + if ( hide ) { el.hide(); } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); + done(); }); @@ -123,6 +116,6 @@ return $.effects.effect.bounce = function( o, done ) { } el.dequeue(); -}; +}); })); diff --git a/ui/effect-drop.js b/ui/effect-drop.js index 0b3f85557b7..5c359ef47c5 100644 --- a/ui/effect-drop.js +++ b/ui/effect-drop.js @@ -28,11 +28,10 @@ } }(function( $ ) { -return $.effects.effect.drop = function( o, done ) { +$.effects.define( "drop", "hide", function( o, done ) { var el = $( this ), - props = [ "position", "top", "bottom", "left", "right", "opacity", "height", "width" ], - mode = $.effects.setMode( el, o.mode || "hide" ), + mode = o.mode, show = mode === "show", direction = o.direction || "left", ref = ( direction === "up" || direction === "down" ) ? "top" : "left", @@ -40,19 +39,13 @@ return $.effects.effect.drop = function( o, done ) { animation = { opacity: show ? 1 : 0 }, - distance; - - // Adjust - $.effects.save( el, props ); - el.show(); - $.effects.createWrapper( el ); - - distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ) / 2; + placeholder = $.effects.createPlaceholder( el ), + distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ) / 2; if ( show ) { el .css( "opacity", 0 ) - .css( ref, motion === "pos" ? -distance : distance ); + .css( ref, ( motion === "pos" ? "-=" : "+=" ) + distance ); } // Animation @@ -67,14 +60,15 @@ return $.effects.effect.drop = function( o, done ) { duration: o.duration, easing: o.easing, complete: function() { + $.effects.removePlaceholder( placeholder, el ); + if ( mode === "hide" ) { el.hide(); } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); + done(); } }); -}; +}); })); diff --git a/ui/effect-explode.js b/ui/effect-explode.js index 547c6787ae4..c7fde4e3c6b 100644 --- a/ui/effect-explode.js +++ b/ui/effect-explode.js @@ -28,12 +28,13 @@ } }(function( $ ) { -return $.effects.effect.explode = function( o, done ) { +$.effects.define( "explode", "hide", function( o, done ) { - var rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3, + var i, j, left, top, mx, my, + rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3, cells = rows, el = $( this ), - mode = $.effects.setMode( el, o.mode || "hide" ), + mode = o.mode, show = mode === "show", // show and then visibility:hidden the element before calculating offset @@ -42,10 +43,7 @@ return $.effects.effect.explode = function( o, done ) { // width and height of a piece width = Math.ceil( el.outerWidth() / cells ), height = Math.ceil( el.outerHeight() / rows ), - pieces = [], - - // loop - i, j, left, top, mx, my; + pieces = []; // children animate complete: function childComplete() { @@ -107,6 +105,6 @@ return $.effects.effect.explode = function( o, done ) { } done(); } -}; +}); })); diff --git a/ui/effect-fade.js b/ui/effect-fade.js index 3bde7d6b9e1..b86ac3582b0 100644 --- a/ui/effect-fade.js +++ b/ui/effect-fade.js @@ -28,18 +28,15 @@ } }(function( $ ) { -return $.effects.effect.fade = function( o, done ) { - var el = $( this ), - mode = $.effects.setMode( el, o.mode || "toggle" ); - - el.animate({ - opacity: mode +$.effects.define( "fade", "toggle", function( o, done ) { + $( this ).animate({ + opacity: o.mode }, { queue: false, duration: o.duration, easing: o.easing, complete: done }); -}; +}); })); diff --git a/ui/effect-fold.js b/ui/effect-fold.js index 7776f3cc65e..7d5b70f6614 100644 --- a/ui/effect-fold.js +++ b/ui/effect-fold.js @@ -28,64 +28,68 @@ } }(function( $ ) { -return $.effects.effect.fold = function( o, done ) { +$.effects.define( "fold", "hide", function( o, done ) { // Create element var el = $( this ), - props = [ "position", "top", "bottom", "left", "right", "height", "width" ], - mode = $.effects.setMode( el, o.mode || "hide" ), + mode = o.mode, show = mode === "show", hide = mode === "hide", size = o.size || 15, percent = /([0-9]+)%/.exec( size ), horizFirst = !!o.horizFirst, - widthFirst = show !== horizFirst, - ref = widthFirst ? [ "width", "height" ] : [ "height", "width" ], + ref = horizFirst ? [ "right", "bottom" ] : [ "bottom", "right" ], duration = o.duration / 2, - wrapper, distance, - animation1 = {}, - animation2 = {}; - $.effects.save( el, props ); - el.show(); + placeholder = $.effects.createPlaceholder( el ), - // Create Wrapper - wrapper = $.effects.createWrapper( el ).css({ - overflow: "hidden" - }); - distance = widthFirst ? - [ wrapper.width(), wrapper.height() ] : - [ wrapper.height(), wrapper.width() ]; + start = el.cssClip(), + animation1 = { + clip: el.cssClip() + }, + animation2 = { + clip: el.cssClip() + }, + distance = [ start[ref[0]], start[ref[1]] ], + + // we will need to re-assemble the queue to stack our animations in place + queue = el.queue(), + queuelen = queue.length; + + // define animations if ( percent ) { size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ hide ? 0 : 1 ]; } + animation1.clip[ ref[ 0 ] ] = size; + animation2.clip[ ref[ 0 ] ] = size; + animation2.clip[ ref[ 1 ] ] = 0; + if ( show ) { - wrapper.css( horizFirst ? { - height: 0, - width: size - } : { - height: size, - width: 0 - }); + el.cssClip( animation2.clip ); + animation2.clip = start; } - // Animation - animation1[ ref[ 0 ] ] = show ? distance[ 0 ] : size; - animation2[ ref[ 1 ] ] = show ? distance[ 1 ] : 0; - // Animate - wrapper + el .animate( animation1, duration, o.easing ) - .animate( animation2, duration, o.easing, function() { + .animate( animation2, duration, o.easing ) + .queue(function() { + $.effects.removePlaceholder( placeholder, el ); + if ( hide ) { el.hide(); } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); + done(); }); -}; + // inject all the animations we just queued to be first in line (after "inprogress") + if ( queuelen > 1) { + queue.splice.apply( queue, + [ 1, 0 ].concat( queue.splice( queuelen, 3 ) ) ); + } + el.dequeue(); +}); })); diff --git a/ui/effect-highlight.js b/ui/effect-highlight.js index e3ad3cbc4e6..8d5fafef7b5 100644 --- a/ui/effect-highlight.js +++ b/ui/effect-highlight.js @@ -28,22 +28,20 @@ } }(function( $ ) { -return $.effects.effect.highlight = function( o, done ) { +$.effects.define( "highlight", "show", function( o, done ) { var elem = $( this ), - props = [ "backgroundImage", "backgroundColor", "opacity" ], - mode = $.effects.setMode( elem, o.mode || "show" ), + mode = o.mode, animation = { - backgroundColor: elem.css( "backgroundColor" ) + backgroundColor: elem.css("backgroundColor") }; - if (mode === "hide") { + if ( mode === "hide" ) { animation.opacity = 0; } - $.effects.save( elem, props ); + $.effects.saveStyle( elem ); elem - .show() .css({ backgroundImage: "none", backgroundColor: o.color || "#ffff99" @@ -53,13 +51,15 @@ return $.effects.effect.highlight = function( o, done ) { duration: o.duration, easing: o.easing, complete: function() { + $.effects.restoreStyle( elem ); + if ( mode === "hide" ) { elem.hide(); } - $.effects.restore( elem, props ); + done(); } }); -}; +}); })); diff --git a/ui/effect-puff.js b/ui/effect-puff.js index 8ea6ded225b..60773418b6f 100644 --- a/ui/effect-puff.js +++ b/ui/effect-puff.js @@ -29,37 +29,13 @@ } }(function( $ ) { -return $.effects.effect.puff = function( o, done ) { - var elem = $( this ), - mode = $.effects.setMode( elem, o.mode || "hide" ), - hide = mode === "hide", - percent = parseInt( o.percent, 10 ) || 150, - factor = percent / 100, - original = { - height: elem.height(), - width: elem.width(), - outerHeight: elem.outerHeight(), - outerWidth: elem.outerWidth() - }; - - $.extend( o, { - effect: "scale", - queue: false, +$.effects.define( "puff", function( o, done ) { + var options = { fade: true, - mode: mode, - complete: done, - percent: hide ? percent : 100, - from: hide ? - original : - { - height: original.height * factor, - width: original.width * factor, - outerHeight: original.outerHeight * factor, - outerWidth: original.outerWidth * factor - } - }); + percent: parseInt( o.percent, 10 ) || 150 + }; - elem.effect( o ); -}; + $.effects.effect.scale.call( this, options, done ); +}); })); diff --git a/ui/effect-pulsate.js b/ui/effect-pulsate.js index 0e82761a385..747e6f2c218 100644 --- a/ui/effect-pulsate.js +++ b/ui/effect-pulsate.js @@ -28,12 +28,12 @@ } }(function( $ ) { -return $.effects.effect.pulsate = function( o, done ) { +$.effects.define( "pulsate", "show", function( o, done ) { var elem = $( this ), - mode = $.effects.setMode( elem, o.mode || "show" ), + mode = o.mode, show = mode === "show", hide = mode === "hide", - showhide = ( show || mode === "hide" ), + showhide = ( show || hide ), // showing or hiding leaves of the "last" animation anims = ( ( o.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ), @@ -41,7 +41,7 @@ return $.effects.effect.pulsate = function( o, done ) { animateTo = 0, queue = elem.queue(), queuelen = queue.length, - i; + i = 1; if ( show || !elem.is(":visible")) { elem.css( "opacity", 0 ).show(); @@ -49,7 +49,7 @@ return $.effects.effect.pulsate = function( o, done ) { } // anims - 1 opacity "toggles" - for ( i = 1; i < anims; i++ ) { + for ( ; i < anims; i++ ) { elem.animate({ opacity: animateTo }, duration, o.easing ); @@ -64,6 +64,7 @@ return $.effects.effect.pulsate = function( o, done ) { if ( hide ) { elem.hide(); } + done(); }); @@ -73,6 +74,6 @@ return $.effects.effect.pulsate = function( o, done ) { [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); } elem.dequeue(); -}; +}); })); diff --git a/ui/effect-scale.js b/ui/effect-scale.js index e2e1c0b50d9..6cfc555b0b9 100644 --- a/ui/effect-scale.js +++ b/ui/effect-scale.js @@ -29,66 +29,57 @@ } }(function( $ ) { -return $.effects.effect.scale = function( o, done ) { +$.effects.define( "scale", function( o, done ) { // Create element - var el = $( this ), + var temp, + el = $( this ), + mode = o.mode, + + // this copies the "scale" option, which is normalized in $.effects.effect.size + // and the "fade" option, which isn't documented, but supports $.effects.effect.puff 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 ) ), + ( parseInt( o.percent, 10 ) === 0 ? 0 : ( mode !== "effect" ? 0 : 100 ) ), direction = o.direction || "both", - origin = o.origin, - original = { - height: el.height(), - width: el.width(), - outerHeight: el.outerHeight(), - 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 = done; + options.from = { + height: el.height(), + width: el.width(), + outerHeight: el.outerHeight(), + outerWidth: el.outerWidth() + }; + options.to = { + height: options.from.height * factor.y, + width: options.from.width * factor.x, + outerHeight: options.from.outerHeight * factor.y, + outerWidth: options.from.outerWidth * factor.x + }; // Set default origin and restore for show/hide if ( mode !== "effect" ) { - options.origin = origin || [ "middle", "center" ]; + options.origin = o.origin || [ "middle", "center" ]; options.restore = true; - } - options.from = o.from || ( mode === "show" ? { - height: 0, - width: 0, - outerHeight: 0, - outerWidth: 0 - } : original ); - options.to = { - height: original.height * factor.y, - width: original.width * factor.x, - outerHeight: original.outerHeight * factor.y, - outerWidth: original.outerWidth * factor.x - }; - - // Fade option to support puff - if ( options.fade ) { - if ( mode === "show" ) { - options.from.opacity = 0; - options.to.opacity = 1; - } - if ( mode === "hide" ) { + // Fade option to support puff + if ( options.fade ) { options.from.opacity = 1; options.to.opacity = 0; } } - // Animate - el.effect( options ); + if ( mode === "show" ) { + temp = options.from; + options.from = options.to; + options.to = temp; + } -}; + $.effects.effect.size.call( this, options, done ); +}); })); diff --git a/ui/effect-shake.js b/ui/effect-shake.js index 896d6f95e2f..cbfdcf6d4f9 100644 --- a/ui/effect-shake.js +++ b/ui/effect-shake.js @@ -28,11 +28,10 @@ } }(function( $ ) { -return $.effects.effect.shake = function( o, done ) { +$.effects.define( "shake", function( o, done ) { - var el = $( this ), - props = [ "position", "top", "bottom", "left", "right", "height", "width" ], - mode = $.effects.setMode( el, o.mode || "effect" ), + var i = 1, + el = $( this ), direction = o.direction || "left", distance = o.distance || 20, times = o.times || 3, @@ -43,15 +42,10 @@ return $.effects.effect.shake = function( o, done ) { animation = {}, animation1 = {}, animation2 = {}, - i, - // we will need to re-assemble the queue to stack our animations in place queue = el.queue(), - queuelen = queue.length; - - $.effects.save( el, props ); - el.show(); - $.effects.createWrapper( el ); + queuelen = queue.length, + placeholder = $.effects.createPlaceholder( el ); // Animation animation[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance; @@ -62,18 +56,20 @@ return $.effects.effect.shake = function( o, done ) { el.animate( animation, speed, o.easing ); // Shakes - for ( i = 1; i < times; i++ ) { + for ( ; i < times; i++ ) { el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing ); } el .animate( animation1, speed, o.easing ) .animate( animation, speed / 2, o.easing ) .queue(function() { - if ( mode === "hide" ) { + + $.effects.removePlaceholder( placeholder, el ); + + if ( o.mode === "hide" ) { el.hide(); } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); + done(); }); @@ -84,6 +80,6 @@ return $.effects.effect.shake = function( o, done ) { } el.dequeue(); -}; +}); })); diff --git a/ui/effect-size.js b/ui/effect-size.js index 984d7410524..96199effdae 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -28,45 +28,39 @@ } }(function( $ ) { -return $.effects.effect.size = function( o, done ) { +$.effects.define( "size", function( o, done ) { // Create element - var original, baseline, factor, + var baseline, factor, el = $( this ), - props0 = [ "position", "top", "bottom", "left", "right", "width", "height", "overflow", "opacity" ], - - // Always restore - 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" ], // Set options - mode = $.effects.setMode( el, o.mode || "effect" ), + mode = o.mode, restore = o.restore || mode !== "effect", scale = o.scale || "both", - origin = o.origin || [ "middle", "center" ], + origin = o.origin || [ "top", "left" ], position = el.css( "position" ), - props = restore ? props0 : props1, + pos = el.position(), zero = { height: 0, width: 0, outerHeight: 0, outerWidth: 0 - }; + }, - if ( mode === "show" ) { - el.show(); - } - original = { - height: el.height(), - width: el.width(), - outerHeight: el.outerHeight(), - outerWidth: el.outerWidth() - }; + placeholder = $.effects.createPlaceholder( el ), + + original = { + height: el.height(), + width: el.width(), + outerHeight: el.outerHeight(), + outerWidth: el.outerWidth() + }; if ( o.mode === "toggle" && mode === "show" ) { el.from = o.to || zero; @@ -93,14 +87,12 @@ return $.effects.effect.size = function( o, done ) { // Vertical props scaling if ( factor.from.y !== factor.to.y ) { - props = props.concat( vProps ); el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from ); el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to ); } // Horizontal props scaling if ( factor.from.x !== factor.to.x ) { - props = props.concat( hProps ); el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from ); el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to ); } @@ -111,35 +103,29 @@ return $.effects.effect.size = function( o, done ) { // Vertical props scaling if ( factor.from.y !== factor.to.y ) { - props = props.concat( cProps ).concat( props2 ); el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from ); el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to ); } } - $.effects.save( el, props ); - el.show(); - $.effects.createWrapper( el ); - el.css( "overflow", "hidden" ).css( el.from ); - - // Adjust - if (origin) { // Calculate baseline shifts + // Adjust the position properties based on the provided origin points + if ( origin ) { baseline = $.effects.getBaseline( origin, original ); - el.from.top = ( original.outerHeight - el.outerHeight() ) * baseline.y; - el.from.left = ( original.outerWidth - el.outerWidth() ) * baseline.x; - el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y; - el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x; + el.from.top = ( original.outerHeight - el.from.outerHeight ) * baseline.y + pos.top; + el.from.left = ( original.outerWidth - el.from.outerWidth ) * baseline.x + pos.left; + el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y + pos.top; + el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x + pos.left; } - el.css( el.from ); // set top & left + el.css( el.from ); - // Animate - if ( scale === "content" || scale === "both" ) { // Scale the children + // Animate the children if desired + if ( scale === "content" || scale === "both" ) { - // Add margins/font-size - vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat(cProps); + vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat( cProps ); hProps = hProps.concat([ "marginLeft", "marginRight" ]); - props2 = props0.concat(vProps).concat(hProps); + // only animate children with width attributes specified + // TODO: is this right? should we include anything with css width specified as well el.find( "*[width]" ).each( function() { var child = $( this ), c_original = { @@ -149,7 +135,7 @@ return $.effects.effect.size = function( o, done ) { outerWidth: child.outerWidth() }; if (restore) { - $.effects.save(child, props2); + $.effects.saveStyle( child ); } child.from = { @@ -183,7 +169,7 @@ return $.effects.effect.size = function( o, done ) { // Restore children if ( restore ) { - $.effects.restore( child, props2 ); + $.effects.restoreStyle( child ); } }); }); @@ -195,13 +181,15 @@ return $.effects.effect.size = function( o, done ) { duration: o.duration, easing: o.easing, complete: function() { + $.effects.removePlaceholder( placeholder, el ); + if ( el.to.opacity === 0 ) { el.css( "opacity", el.from.opacity ); } if ( mode === "hide" ) { el.hide(); } - $.effects.restore( el, props ); + if ( !restore ) { // we need to calculate our new positioning based on the scaling @@ -228,11 +216,10 @@ return $.effects.effect.size = function( o, done ) { } } - $.effects.removeWrapper( el ); done(); } }); -}; +}); })); diff --git a/ui/effect-slide.js b/ui/effect-slide.js index ec1fec6291f..85901888caf 100644 --- a/ui/effect-slide.js +++ b/ui/effect-slide.js @@ -28,52 +28,52 @@ } }(function( $ ) { -return $.effects.effect.slide = function( o, done ) { - - // Create element +$.effects.define( "slide", "show", function( o, done ) { var el = $( this ), - props = [ "position", "top", "bottom", "left", "right", "width", "height" ], - mode = $.effects.setMode( el, o.mode || "show" ), - show = mode === "show", + map = { + up: [ "bottom", "top" ], + down: [ "top", "bottom" ], + left: [ "right", "left" ], + right: [ "left", "right" ] + }, + mode = o.mode, direction = o.direction || "left", - ref = (direction === "up" || direction === "down") ? "top" : "left", - positiveMotion = (direction === "up" || direction === "left"), - distance, - animation = {}; - - // Adjust - $.effects.save( el, props ); - el.show(); - distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ); + ref = ( direction === "up" || direction === "down" ) ? "top" : "left", + positiveMotion = ( direction === "up" || direction === "left" ), + distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ), + animation = {}, + placeholder = $.effects.createPlaceholder( el ), + startClip = el.cssClip(), + startRef = el.position()[ ref ]; - $.effects.createWrapper( el ).css({ - overflow: "hidden" - }); + // define hide animation + animation[ ref ] = ( positiveMotion ? -1 : 1 ) * distance + startRef; + animation.clip = el.cssClip(); + animation.clip[ map[ direction ][ 1 ] ] = animation.clip[ map[ direction ][ 0 ] ]; - if ( show ) { - el.css( ref, positiveMotion ? (isNaN(distance) ? "-" + distance : -distance) : distance ); + // reverse the animation if we're showing + if ( mode === "show" ) { + el.cssClip( animation.clip ); + el.css( ref, animation[ ref ] ); + animation.clip = startClip; + animation[ ref ] = startRef; } - // Animation - animation[ ref ] = ( show ? - ( positiveMotion ? "+=" : "-=") : - ( positiveMotion ? "-=" : "+=")) + - distance; - - // Animate + // actually animate el.animate( animation, { queue: false, duration: o.duration, easing: o.easing, complete: function() { + $.effects.removePlaceholder( placeholder, el ); + if ( mode === "hide" ) { el.hide(); } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); + done(); } }); -}; +}); })); diff --git a/ui/effect-transfer.js b/ui/effect-transfer.js index 1008e5b47b5..e3cdb2ad210 100644 --- a/ui/effect-transfer.js +++ b/ui/effect-transfer.js @@ -28,10 +28,10 @@ } }(function( $ ) { -return $.effects.effect.transfer = function( o, done ) { +$.effects.define( "transfer", function( o, done ) { var elem = $( this ), target = $( o.to ), - targetFixed = target.css( "position" ) === "fixed", + targetFixed = target.css("position") === "fixed", body = $("body"), fixTop = targetFixed ? body.scrollTop() : 0, fixLeft = targetFixed ? body.scrollLeft() : 0, @@ -43,8 +43,8 @@ return $.effects.effect.transfer = function( o, done ) { width: target.innerWidth() }, startPosition = elem.offset(), - transfer = $( "
" ) - .appendTo( document.body ) + transfer = $("
") + .appendTo("body") .addClass( o.className ) .css({ top: startPosition.top - fixTop, @@ -57,6 +57,6 @@ return $.effects.effect.transfer = function( o, done ) { transfer.remove(); done(); }); -}; +}); })); diff --git a/ui/effect.js b/ui/effect.js index fbbd7fe2881..cc2bfa8b789 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -908,40 +908,166 @@ $.fn.extend({ (function() { -$.extend( $.effects, { - version: "@VERSION", +if ( $.uiBackCompat !== false ) { + $.extend( $.effects, { + // Saves a set of properties in a data storage + save: function( element, set ) { + var i = 0, length = set.length; + for ( ; i < length; i++ ) { + if ( set[ i ] !== null ) { + element.data( dataSpace + set[ i ], element[ 0 ].style[ set[ i ] ] ); + } + } + }, - // Saves a set of properties in a data storage - save: function( element, set ) { - for ( var i = 0; i < set.length; i++ ) { - if ( set[ i ] !== null ) { - element.data( dataSpace + set[ i ], element[ 0 ].style[ set[ i ] ] ); + // Restores a set of previously saved properties from a data storage + restore: function( element, set ) { + var val, i = 0, length = set.length; + for ( ; i < length; i++ ) { + if ( set[ i ] !== null ) { + val = element.data( dataSpace + set[ i ] ); + // support: jQuery 1.6.2 + // http://bugs.jquery.com/ticket/9917 + // jQuery 1.6.2 incorrectly returns undefined for any falsy value. + // We can't differentiate between "" and 0 here, so we just assume + // empty string since it's likely to be a more common value... + if ( val === undefined ) { + val = ""; + } + element.css( set[ i ], val ); + } } - } - }, + }, + + setMode: function( el, mode ) { + if ( mode === "toggle" ) { + mode = el.is( ":hidden" ) ? "show" : "hide"; + } + return mode; + }, + + // Wraps the element around a wrapper that copies position properties + createWrapper: function( element ) { + + // if the element is already wrapped, return it + if ( element.parent().is( ".ui-effects-wrapper" ) ) { + return element.parent(); + } + + // wrap the element + var props = { + width: element.outerWidth( true ), + height: element.outerHeight( true ), + "float": element.css( "float" ) + }, + wrapper = $( "
" ) + .addClass( "ui-effects-wrapper" ) + .css({ + fontSize: "100%", + background: "transparent", + border: "none", + margin: 0, + padding: 0 + }), + // Store the size in case width/height are defined in % - Fixes #5245 + size = { + width: element.width(), + height: element.height() + }, + active = document.activeElement; + + // support: Firefox + // Firefox incorrectly exposes anonymous content + // https://bugzilla.mozilla.org/show_bug.cgi?id=561664 + try { + active.id; + } catch ( e ) { + active = document.body; + } + + element.wrap( wrapper ); + + // Fixes #7595 - Elements lose focus when wrapped. + if ( element[ 0 ] === active || $.contains( element[ 0 ], active ) ) { + $( active ).focus(); + } + + wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually lose the reference to the wrapped element + + // transfer positioning properties to the wrapper + if ( element.css( "position" ) === "static" ) { + wrapper.css({ position: "relative" }); + element.css({ position: "relative" }); + } else { + $.extend( props, { + position: element.css( "position" ), + zIndex: element.css( "z-index" ) + }); + $.each([ "top", "left", "bottom", "right" ], function(i, pos) { + props[ pos ] = element.css( pos ); + if ( isNaN( parseInt( props[ pos ], 10 ) ) ) { + props[ pos ] = "auto"; + } + }); + element.css({ + position: "relative", + top: 0, + left: 0, + right: "auto", + bottom: "auto" + }); + } + element.css(size); + + return wrapper.css( props ).show(); + }, + + removeWrapper: function( element ) { + var active = document.activeElement; + + if ( element.parent().is( ".ui-effects-wrapper" ) ) { + element.parent().replaceWith( element ); - // Restores a set of previously saved properties from a data storage - restore: function( element, set ) { - var val, i; - for ( i = 0; i < set.length; i++ ) { - if ( set[ i ] !== null ) { - val = element.data( dataSpace + set[ i ] ); - // support: jQuery 1.6.2 - // http://bugs.jquery.com/ticket/9917 - // jQuery 1.6.2 incorrectly returns undefined for any falsy value. - // We can't differentiate between "" and 0 here, so we just assume - // empty string since it's likely to be a more common value... - if ( val === undefined ) { - val = ""; + // Fixes #7595 - Elements lose focus when wrapped. + if ( element[ 0 ] === active || $.contains( element[ 0 ], active ) ) { + $( active ).focus(); } - element.css( set[ i ], val ); } + + return element; + } + }); +} + +$.extend( $.effects, { + version: "@VERSION", + + define: function( name, mode, effect ) { + if ( !effect ) { + effect = mode; + mode = "effect"; } + + $.effects.effect[ name ] = effect; + $.effects.effect[ name ].mode = mode; + }, + + saveStyle: function( element ) { + element.data( dataSpace + "style", element[ 0 ].style.cssText ); + }, + + restoreStyle: function( element ) { + element[ 0 ].style.cssText = element.data( dataSpace + "style" ) || ""; }, - setMode: function( el, mode ) { - if (mode === "toggle") { - mode = el.is( ":hidden" ) ? "show" : "hide"; + mode: function( el, mode ) { + var hidden = el.is( ":hidden" ); + + if ( mode === "toggle" ) { + mode = hidden ? "show" : "hide"; + } + if ( hidden ? mode === "hide" : mode === "show" ) { + mode = "none"; } return mode; }, @@ -968,95 +1094,62 @@ $.extend( $.effects, { }; }, - // Wraps the element around a wrapper that copies position properties - createWrapper: function( element ) { - - // if the element is already wrapped, return it - if ( element.parent().is( ".ui-effects-wrapper" )) { - return element.parent(); + // Creates a placeholder element so that the original element can be made absolute + // also stores all modified properties on the element so they can be restored later + createPlaceholder: function( element ) { + + var placeholder, + cssPosition = element.css("position"), + position = element.position(); + + // lock in margins first to account for form elements, which + // will change margin if you explicitly set height + // see: http://jsfiddle.net/JZSMt/3/ https://bugs.webkit.org/show_bug.cgi?id=107380 + // Support: Chrome + element.css({ + marginTop: element.css("marginTop"), + marginBottom: element.css("marginBottom"), + marginLeft: element.css("marginLeft"), + marginRight: element.css("marginRight") + }) + .outerWidth( element.outerWidth() ) + .outerHeight( element.outerHeight() ); + + if ( /^(static|relative)/.test( cssPosition ) ) { + cssPosition = "absolute"; + + placeholder = $( "<" + element[ 0 ].nodeName + ">" ).insertAfter( element ).css({ + // convert inline to inline block to account for inline elements + // that turn to inline block based on content (like img) + display: /^(inline|ruby)/.test( element.css("display") ) ? "inline-block" : "block", + visibility: "hidden", + // margins need to be set to account for margin collapse + marginTop: element.css( "marginTop" ), + marginBottom: element.css( "marginBottom" ), + marginLeft: element.css( "marginLeft" ), + marginRight: element.css( "marginRight" ) + }) + .outerWidth( element.outerWidth() ) + .outerHeight( element.outerHeight() ); } - // wrap the element - var props = { - width: element.outerWidth(true), - height: element.outerHeight(true), - "float": element.css( "float" ) - }, - wrapper = $( "
" ) - .addClass( "ui-effects-wrapper" ) - .css({ - fontSize: "100%", - background: "transparent", - border: "none", - margin: 0, - padding: 0 - }), - // Store the size in case width/height are defined in % - Fixes #5245 - size = { - width: element.width(), - height: element.height() - }, - active = document.activeElement; - - // support: Firefox - // Firefox incorrectly exposes anonymous content - // https://bugzilla.mozilla.org/show_bug.cgi?id=561664 - try { - active.id; - } catch ( e ) { - active = document.body; - } - - element.wrap( wrapper ); - - // Fixes #7595 - Elements lose focus when wrapped. - if ( element[ 0 ] === active || $.contains( element[ 0 ], active ) ) { - $( active ).focus(); - } - - wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually lose the reference to the wrapped element - - // transfer positioning properties to the wrapper - if ( element.css( "position" ) === "static" ) { - wrapper.css({ position: "relative" }); - element.css({ position: "relative" }); - } else { - $.extend( props, { - position: element.css( "position" ), - zIndex: element.css( "z-index" ) - }); - $.each([ "top", "left", "bottom", "right" ], function(i, pos) { - props[ pos ] = element.css( pos ); - if ( isNaN( parseInt( props[ pos ], 10 ) ) ) { - props[ pos ] = "auto"; - } - }); - element.css({ - position: "relative", - top: 0, - left: 0, - right: "auto", - bottom: "auto" - }); - } - element.css(size); + element.css({ + position: cssPosition, + left: position.left, + top: position.top + }); - return wrapper.css( props ).show(); + return placeholder; }, - removeWrapper: function( element ) { - var active = document.activeElement; + // removes a placeholder if it exists and restores + // properties that were modified during placeholder creation + removePlaceholder: function( placeholder, el ) { + $.effects.restoreStyle( el ); - if ( element.parent().is( ".ui-effects-wrapper" ) ) { - element.parent().replaceWith( element ); - - // Fixes #7595 - Elements lose focus when wrapped. - if ( element[ 0 ] === active || $.contains( element[ 0 ], active ) ) { - $( active ).focus(); - } + if ( placeholder ) { + placeholder.remove(); } - - return element; }, setTransition: function( element, list, factor, value ) { @@ -1152,27 +1245,48 @@ function standardAnimationOption( option ) { $.fn.extend({ effect: function( /* effect, options, speed, callback */ ) { var args = _normalizeArguments.apply( this, arguments ), - mode = args.mode, + effectMethod = $.effects.effect[ args.effect ], + defaultMode = effectMethod.mode, + modes = [], + effectPrefilter = function() { + + var el = $( this ), + normalizedMode = $.effects.mode( el, mode ); + + // save effect mode for later use, + // we can't just call $.effects.mode again later, + // as the .show() below destroys the initial state + modes.push( normalizedMode ); + + if ( normalizedMode === "none" ) { + return; + } + + if ( normalizedMode === "show" ) { + el.show(); + } + + $.effects.saveStyle( el ); + }, queue = args.queue, - effectMethod = $.effects.effect[ args.effect ]; + complete = args.complete, + mode = args.mode || defaultMode; if ( $.fx.off || !effectMethod ) { // delegate to the original method (e.g., .show()) if possible if ( mode ) { - return this[ mode ]( args.duration, args.complete ); + return this[ mode ]( args.duration, complete ); } else { return this.each( function() { - if ( args.complete ) { - args.complete.call( this ); + if ( complete ) { + complete.call( this ); } }); } } function run( next ) { - var elem = $( this ), - complete = args.complete, - mode = args.mode; + var elem = $( this ); function done() { if ( $.isFunction( complete ) ) { @@ -1183,9 +1297,12 @@ $.fn.extend({ } } - // If the element already has the correct final state, delegate to - // the core methods so the internal tracking of "olddisplay" works. - if ( elem.is( ":hidden" ) ? mode === "hide" : mode === "show" ) { + // override mode option on a per element basis, + // as toggle can be show, or hide depending on element state + args.mode = modes.shift(); + + if ( args.mode === "none" ) { + // call the core method to track "olddisplay" properly elem[ mode ](); done(); } else { @@ -1193,7 +1310,16 @@ $.fn.extend({ } } - return queue === false ? this.each( run ) : this.queue( queue || "fx", run ); + function prefilter( next ) { + effectPrefilter.call( this ); + if ( $.isFunction( next ) ) { + next(); + } + } + + return queue === false ? + this.each( prefilter ).each( run ) : + this.queue( queue || "fx", prefilter ).queue( queue || "fx", run ); }, show: (function( orig ) { @@ -1243,9 +1369,47 @@ $.fn.extend({ } }); return val; + }, + + // getter/setter for an object representing clip values + cssClip: function( clipObj ) { + return clipObj ? + this.css( "clip", "rect(" + clipObj.top + "px " + clipObj.right + "px " + clipObj.bottom + "px " + clipObj.left + "px)" ) : + parseClip( this.css("clip"), this ); } }); +function parseClip( str, element ) { + var outerWidth = element.outerWidth(), + outerHeight = element.outerHeight(), + clipRegex = /^rect\((-?\d*\.?\d*px|-?\d+%|auto),?\s+(-?\d*\.?\d*px|-?\d+%|auto),?\s+(-?\d*\.?\d*px|-?\d+%|auto),?\s+(-?\d*\.?\d*px|-?\d+%|auto)\)$/, + values = clipRegex.exec( str ) || [ "", 0, outerWidth, outerHeight, 0 ]; + + return { + top: parseFloat( values[ 1 ] ) || 0, + right: values[ 2 ] === "auto" ? outerWidth : parseFloat( values[ 2 ] ), + bottom: values[ 3 ] === "auto" ? outerHeight : parseFloat( values[ 3 ] ), + left: parseFloat( values[ 4 ] ) || 0 + }; +} + +$.fx.step.clip = function( fx ) { + if ( !fx.clipInit ) { + fx.start = $( fx.elem ).cssClip(); + if ( typeof fx.end === "string" ) { + fx.end = parseClip( fx.end, fx.elem ); + } + fx.clipInit = true; + } + + $( fx.elem ).cssClip({ + top: fx.pos * (fx.end.top - fx.start.top) + fx.start.top, + right: fx.pos * (fx.end.right - fx.start.right) + fx.start.right, + bottom: fx.pos * (fx.end.bottom - fx.start.bottom) + fx.start.bottom, + left: fx.pos * (fx.end.left - fx.start.left) + fx.start.left + }); +}; + })(); /******************************************************************************/ From a2e69cddaad0e6da774db6c9427c7c1d7c5009d9 Mon Sep 17 00:00:00 2001 From: Mike Petrovich Date: Wed, 26 Jun 2013 08:45:44 -0400 Subject: [PATCH 02/40] Effects rewrite: clip effect --- ui/effect-clip.js | 56 ++++++++++++++++++++--------------------------- 1 file changed, 24 insertions(+), 32 deletions(-) diff --git a/ui/effect-clip.js b/ui/effect-clip.js index 6a07ad67d84..c3d8ae25cb3 100644 --- a/ui/effect-clip.js +++ b/ui/effect-clip.js @@ -28,55 +28,47 @@ } }(function( $ ) { -return $.effects.effect.clip = function( o, done ) { - // Create element - var el = $( this ), - props = [ "position", "top", "bottom", "left", "right", "height", "width" ], - mode = $.effects.setMode( el, o.mode || "hide" ), - show = mode === "show", +$.effects.define( "clip", "hide", function( o, done ) { + var start, placeholder, + animate = {}, + el = $( this ), + show = o.mode === "show", direction = o.direction || "vertical", - vert = direction === "vertical", - size = vert ? "height" : "width", - position = vert ? "top" : "left", - animation = {}, - wrapper, animate, distance; + both = direction === "both", + horizontal = both || direction === "horizontal", + vertical = both || direction === "vertical"; - // Save & Show - $.effects.save( el, props ); - el.show(); + start = el.cssClip(); + animate.clip = { + top: vertical ? ( start.bottom - start.top ) / 2 : start.top, + right: horizontal ? ( start.right - start.left ) / 2 : start.right, + bottom: vertical ? ( start.bottom - start.top ) / 2 : start.bottom, + left: horizontal ? ( start.right - start.left ) / 2 : start.left + }; - // Create Wrapper - wrapper = $.effects.createWrapper( el ).css({ - overflow: "hidden" - }); - animate = ( el[0].tagName === "IMG" ) ? wrapper : el; - distance = animate[ size ](); + placeholder = $.effects.createPlaceholder( el ); - // Shift if ( show ) { - animate.css( size, 0 ); - animate.css( position, distance / 2 ); + el.cssClip( animate.clip ); + animate.clip = start; } - // Create Animation Object: - animation[ size ] = show ? distance : 0; - animation[ position ] = show ? 0 : distance / 2; - - // Animate - animate.animate( animation, { + el.animate( animate, { queue: false, duration: o.duration, easing: o.easing, complete: function() { + + $.effects.removePlaceholder( placeholder, el ); + if ( !show ) { el.hide(); } - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); + done(); } }); -}; +}); })); From 73c00e5c52ed8baf7630d7d334c6e0888b0a7ce0 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Tue, 11 Feb 2014 17:59:26 -0800 Subject: [PATCH 03/40] Effects rewrite: puff effect --- tests/visual/effects/all.html | 2 ++ ui/effect-puff.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/tests/visual/effects/all.html b/tests/visual/effects/all.html index 9fb4cf9c4ce..c1bdd9fa32b 100644 --- a/tests/visual/effects/all.html +++ b/tests/visual/effects/all.html @@ -14,8 +14,10 @@ + + diff --git a/ui/effect-puff.js b/ui/effect-puff.js index 60773418b6f..0a586c62898 100644 --- a/ui/effect-puff.js +++ b/ui/effect-puff.js @@ -30,10 +30,10 @@ }(function( $ ) { $.effects.define( "puff", function( o, done ) { - var options = { + var options = $.extend( true, {}, o, { fade: true, percent: parseInt( o.percent, 10 ) || 150 - }; + }); $.effects.effect.scale.call( this, options, done ); }); From 164132943325b89e53e47b774b5d8f789e39bcfd Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Wed, 12 Feb 2014 14:10:13 -0800 Subject: [PATCH 04/40] Effects Rewrite: correct animation for "show" on "size". This also stops adding "from" and "to" as properties on the jQuery object. --- ui/effect-size.js | 58 +++++++++++++++++++++++------------------------ 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/ui/effect-size.js b/ui/effect-size.js index 96199effdae..e68687bcb57 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -31,7 +31,7 @@ $.effects.define( "size", function( o, done ) { // Create element - var baseline, factor, + var baseline, factor, temp, el = $( this ), // Copy for children @@ -60,25 +60,25 @@ $.effects.define( "size", function( o, done ) { width: el.width(), outerHeight: el.outerHeight(), outerWidth: el.outerWidth() - }; + }, + from = o.from || original, + to = o.to || zero; - if ( o.mode === "toggle" && mode === "show" ) { - el.from = o.to || zero; - el.to = o.from || original; - } else { - el.from = o.from || ( mode === "show" ? zero : original ); - el.to = o.to || ( mode === "hide" ? zero : original ); + if ( mode === "show" ) { + temp = from; + from = to; + to = temp; } // Set scaling factor factor = { from: { - y: el.from.height / original.height, - x: el.from.width / original.width + y: from.height / original.height, + x: from.width / original.width }, to: { - y: el.to.height / original.height, - x: el.to.width / original.width + y: to.height / original.height, + x: to.width / original.width } }; @@ -87,14 +87,14 @@ $.effects.define( "size", function( o, done ) { // Vertical props scaling if ( factor.from.y !== factor.to.y ) { - el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from ); - el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to ); + from = $.effects.setTransition( el, vProps, factor.from.y, from ); + to = $.effects.setTransition( el, vProps, factor.to.y, to ); } // Horizontal props scaling if ( factor.from.x !== factor.to.x ) { - el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from ); - el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to ); + from = $.effects.setTransition( el, hProps, factor.from.x, from ); + to = $.effects.setTransition( el, hProps, factor.to.x, to ); } } @@ -103,20 +103,20 @@ $.effects.define( "size", function( o, done ) { // Vertical props scaling if ( factor.from.y !== factor.to.y ) { - el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from ); - el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to ); + from = $.effects.setTransition( el, cProps, factor.from.y, from ); + to = $.effects.setTransition( el, cProps, factor.to.y, to ); } } // Adjust the position properties based on the provided origin points if ( origin ) { baseline = $.effects.getBaseline( origin, original ); - el.from.top = ( original.outerHeight - el.from.outerHeight ) * baseline.y + pos.top; - el.from.left = ( original.outerWidth - el.from.outerWidth ) * baseline.x + pos.left; - el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y + pos.top; - el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x + pos.left; + from.top = ( original.outerHeight - from.outerHeight ) * baseline.y + pos.top; + from.left = ( original.outerWidth - from.outerWidth ) * baseline.x + pos.left; + to.top = ( original.outerHeight - to.outerHeight ) * baseline.y + pos.top; + to.left = ( original.outerWidth - to.outerWidth ) * baseline.x + pos.left; } - el.css( el.from ); + el.css( from ); // Animate the children if desired if ( scale === "content" || scale === "both" ) { @@ -176,15 +176,15 @@ $.effects.define( "size", function( o, done ) { } // Animate - el.animate( el.to, { + el.animate( to, { queue: false, duration: o.duration, easing: o.easing, complete: function() { $.effects.removePlaceholder( placeholder, el ); - if ( el.to.opacity === 0 ) { - el.css( "opacity", el.from.opacity ); + if ( to.opacity === 0 ) { + el.css( "opacity", from.opacity ); } if ( mode === "hide" ) { el.hide(); @@ -196,14 +196,14 @@ $.effects.define( "size", function( o, done ) { if ( position === "static" ) { el.css({ position: "relative", - top: el.to.top, - left: el.to.left + top: to.top, + left: to.left }); } else { $.each([ "top", "left" ], function( idx, pos ) { el.css( pos, function( _, str ) { var val = parseInt( str, 10 ), - toRef = idx ? el.to.left : el.to.top; + toRef = idx ? to.left : to.top; // if original was "auto", recalculate the new value from wrapper if ( str === "auto" ) { From 277b6cc63b73ec3cc2a283150a5192a60f076b42 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Wed, 12 Feb 2014 14:10:57 -0800 Subject: [PATCH 05/40] Effects rewrite: correct whitespace in ui/effect.js --- ui/effect.js | 32 +++++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/ui/effect.js b/ui/effect.js index cc2bfa8b789..749e6351de6 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1077,16 +1077,30 @@ $.extend( $.effects, { getBaseline: function( origin, original ) { var y, x; switch ( origin[ 0 ] ) { - case "top": y = 0; break; - case "middle": y = 0.5; break; - case "bottom": y = 1; break; - default: y = origin[ 0 ] / original.height; + case "top": + y = 0; + break; + case "middle": + y = 0.5; + break; + case "bottom": + y = 1; + break; + default: + y = origin[ 0 ] / original.height; } switch ( origin[ 1 ] ) { - case "left": x = 0; break; - case "center": x = 0.5; break; - case "right": x = 1; break; - default: x = origin[ 1 ] / original.width; + case "left": + x = 0; + break; + case "center": + x = 0.5; + break; + case "right": + x = 1; + break; + default: + x = origin[ 1 ] / original.width; } return { x: x, @@ -1105,7 +1119,7 @@ $.extend( $.effects, { // lock in margins first to account for form elements, which // will change margin if you explicitly set height // see: http://jsfiddle.net/JZSMt/3/ https://bugs.webkit.org/show_bug.cgi?id=107380 - // Support: Chrome + // Support: Chrome, Safari element.css({ marginTop: element.css("marginTop"), marginBottom: element.css("marginBottom"), From 2603495ecc0ab17f8a7306c14730fe6531bd1b31 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Wed, 12 Feb 2014 14:37:51 -0800 Subject: [PATCH 06/40] Effects rewrite: correct element jumping during size animation --- ui/effect-size.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/ui/effect-size.js b/ui/effect-size.js index e68687bcb57..05ca2499a35 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -181,7 +181,10 @@ $.effects.define( "size", function( o, done ) { duration: o.duration, easing: o.easing, complete: function() { - $.effects.removePlaceholder( placeholder, el ); + + if ( restore ) { + $.effects.removePlaceholder( placeholder, el ); + } if ( to.opacity === 0 ) { el.css( "opacity", from.opacity ); @@ -205,7 +208,7 @@ $.effects.define( "size", function( o, done ) { var val = parseInt( str, 10 ), toRef = idx ? to.left : to.top; - // if original was "auto", recalculate the new value from wrapper + // if original was "auto", recalculate the new value from placeholder if ( str === "auto" ) { return toRef + "px"; } @@ -214,6 +217,10 @@ $.effects.define( "size", function( o, done ) { }); }); } + + // the placeholder needs to be removed only after the new position is set + // as it's relied upon for correcting "auto" above + $.effects.removePlaceholder( placeholder, el ); } done(); From 03fa2cfea387564be22c7ed3d9d63a8157416510 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Wed, 12 Feb 2014 15:10:20 -0800 Subject: [PATCH 07/40] Effects rewrite: add clip visual test to visual test index --- tests/visual/effects/clip.html | 2 +- tests/visual/index.html | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/tests/visual/effects/clip.html b/tests/visual/effects/clip.html index 49efa6d8bfc..66058b198c9 100644 --- a/tests/visual/effects/clip.html +++ b/tests/visual/effects/clip.html @@ -80,7 +80,7 @@

Jerky corned beef short loin fatback jowl tail. Rump spare ribs shoulder pork belly. Sausage cow ground round bacon. Bresaola kielbasa pastrami brisket ham hock. Andouille kielbasa ham, pork beef tenderloin ground round beef ribs flank turkey pancetta tri-tip.

Shankle filet mignon ribeye chicken, bacon jowl drumstick frankfurter swine short loin capicola leberkas tenderloin pig. Shankle bacon shank pork loin, shoulder ham drumstick biltong. Shankle ham pastrami ball tip turkey leberkas pork loin ground round. Chicken strip steak venison shoulder biltong ham. Bacon pork loin tenderloin kielbasa, prosciutto sausage leberkas jowl ribeye turducken. Flank short loin venison tenderloin spare ribs boudin, tongue pork chop shank sirloin. Ground round ham pork belly, corned beef jowl strip steak short ribs prosciutto pig bresaola spare ribs.

- jQuery Logo + jQuery Logo

Pork loin biltong ball tip tail jerky beef ribs prosciutto short loin turducken. Turkey chicken jowl pork loin shank tri-tip swine brisket. Doner prosciutto leberkas venison ground round, short loin capicola hamburger pork bacon. Spare ribs beef pork tenderloin rump shoulder pork belly turducken cow beef ribs pastrami tail flank. Spare ribs tri-tip shank, pork beef ribs ribeye chicken bacon boudin shoulder venison. Sirloin beef ribs boudin, andouille doner tail ball tip biltong prosciutto chicken beef turkey tongue hamburger tri-tip.

Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.

diff --git a/tests/visual/index.html b/tests/visual/index.html index f7d516f2072..0c9b14da8d2 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -48,6 +48,7 @@

Draggable

Effects

From 01f7f3c5fd45cc8fc4fd2ec28b668080c8cc8aa7 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Wed, 12 Feb 2014 15:54:09 -0800 Subject: [PATCH 08/40] Effects Rewrite: No longer swap "to" and "from" in scale. This is now always handled by effect-size. --- ui/effect-scale.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/ui/effect-scale.js b/ui/effect-scale.js index 6cfc555b0b9..071e03ac3fe 100644 --- a/ui/effect-scale.js +++ b/ui/effect-scale.js @@ -32,8 +32,7 @@ $.effects.define( "scale", function( o, done ) { // Create element - var temp, - el = $( this ), + var el = $( this ), mode = o.mode, // this copies the "scale" option, which is normalized in $.effects.effect.size @@ -73,12 +72,6 @@ $.effects.define( "scale", function( o, done ) { } } - if ( mode === "show" ) { - temp = options.from; - options.from = options.to; - options.to = temp; - } - $.effects.effect.size.call( this, options, done ); }); From 902996393115e415e6d1ed266aa20cc17f864fd0 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Wed, 12 Feb 2014 17:08:43 -0800 Subject: [PATCH 09/40] Effects rewrite: correct "restore: false" use case for size/scale. This makes all tests pass in test suite. Wooh! --- ui/effect-size.js | 31 +++++++------------------------ 1 file changed, 7 insertions(+), 24 deletions(-) diff --git a/ui/effect-size.js b/ui/effect-size.js index 05ca2499a35..de7864c32d3 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -182,6 +182,8 @@ $.effects.define( "size", function( o, done ) { easing: o.easing, complete: function() { + var offset = el.offset(); + if ( restore ) { $.effects.removePlaceholder( placeholder, el ); } @@ -195,32 +197,13 @@ $.effects.define( "size", function( o, done ) { if ( !restore ) { - // we need to calculate our new positioning based on the scaling - if ( position === "static" ) { - el.css({ - position: "relative", - top: to.top, - left: to.left - }); - } else { - $.each([ "top", "left" ], function( idx, pos ) { - el.css( pos, function( _, str ) { - var val = parseInt( str, 10 ), - toRef = idx ? to.left : to.top; - - // if original was "auto", recalculate the new value from placeholder - if ( str === "auto" ) { - return toRef + "px"; - } - - return val + toRef + "px"; - }); - }); + if ( placeholder ) { + placeholder.remove(); } - // the placeholder needs to be removed only after the new position is set - // as it's relied upon for correcting "auto" above - $.effects.removePlaceholder( placeholder, el ); + el.css("position", position === "static" ? "relative" : position ); + + el.offset(offset); } done(); From d56459005e581571d1e54617cf68d0af2c283bc8 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Fri, 28 Feb 2014 19:56:57 -0500 Subject: [PATCH 10/40] Effects: Allow all "effect" calls to default to default Mode. This fixes the situation where calling e.g. .effect("highlight") was a no-op as if .show("highlight") was called. --- ui/effect.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/effect.js b/ui/effect.js index 749e6351de6..87b7f18d17f 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1265,7 +1265,7 @@ $.fn.extend({ effectPrefilter = function() { var el = $( this ), - normalizedMode = $.effects.mode( el, mode ); + normalizedMode = $.effects.mode( el, mode ) || defaultMode; // save effect mode for later use, // we can't just call $.effects.mode again later, @@ -1284,7 +1284,7 @@ $.fn.extend({ }, queue = args.queue, complete = args.complete, - mode = args.mode || defaultMode; + mode = args.mode; if ( $.fx.off || !effectMethod ) { // delegate to the original method (e.g., .show()) if possible From 1cae0d3ea2c862e78ff9318a3e538515991cef66 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Mon, 3 Mar 2014 08:23:14 -0500 Subject: [PATCH 11/40] Size Effect: revert default origin to middle, center. --- ui/effect-size.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/effect-size.js b/ui/effect-size.js index de7864c32d3..9ef9dabe489 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -43,7 +43,7 @@ $.effects.define( "size", function( o, done ) { mode = o.mode, restore = o.restore || mode !== "effect", scale = o.scale || "both", - origin = o.origin || [ "top", "left" ], + origin = o.origin || [ "middle", "center" ], position = el.css( "position" ), pos = el.position(), zero = { From fb390564412645229315273b54f5611e7e657770 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Mon, 3 Mar 2014 08:35:56 -0500 Subject: [PATCH 12/40] Puff Effect: set default effect mode to hide --- ui/effect-puff.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/effect-puff.js b/ui/effect-puff.js index 0a586c62898..d8c324f4e3e 100644 --- a/ui/effect-puff.js +++ b/ui/effect-puff.js @@ -29,7 +29,7 @@ } }(function( $ ) { -$.effects.define( "puff", function( o, done ) { +$.effects.define( "puff", "hide", function( o, done ) { var options = $.extend( true, {}, o, { fade: true, percent: parseInt( o.percent, 10 ) || 150 From 2f25d1fc11c4538838c25a2c4caefb0f0061b2ea Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Wed, 3 Sep 2014 15:34:54 -0400 Subject: [PATCH 13/40] Effects: Calling an effect that hides back to back replays animation --- ui/effect.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/effect.js b/ui/effect.js index 87b7f18d17f..15a341c5a65 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1276,7 +1276,8 @@ $.fn.extend({ return; } - if ( normalizedMode === "show" ) { + if ( normalizedMode === "show" || + ( normalizedMode === defaultMode && normalizedMode === "hide" ) ) { el.show(); } From e02ec9d0d683c689578efe20d54c05f20c5bb42e Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Fri, 12 Sep 2014 11:36:54 -0500 Subject: [PATCH 14/40] Effects: rename effect.removePlaceholder to effect.cleanUpPlaceholder --- ui/effect-blind.js | 2 +- ui/effect-bounce.js | 2 +- ui/effect-clip.js | 2 +- ui/effect-drop.js | 2 +- ui/effect-fold.js | 2 +- ui/effect-shake.js | 3 ++- ui/effect-size.js | 7 ++----- ui/effect-slide.js | 2 +- ui/effect.js | 13 ++++++++----- 9 files changed, 18 insertions(+), 17 deletions(-) diff --git a/ui/effect-blind.js b/ui/effect-blind.js index e940089b50b..fe3ed68c025 100644 --- a/ui/effect-blind.js +++ b/ui/effect-blind.js @@ -60,7 +60,7 @@ $.effects.define( "blind", "hide", function( o, done ) { easing: o.easing, complete: function() { - $.effects.removePlaceholder( placeholder, el ); + $.effects.cleanUpPlaceholder( placeholder, el ); if ( !show ) { el.hide(); diff --git a/ui/effect-bounce.js b/ui/effect-bounce.js index 016191aff6d..6e50a448e41 100644 --- a/ui/effect-bounce.js +++ b/ui/effect-bounce.js @@ -100,7 +100,7 @@ $.effects.define( "bounce", function( o, done ) { } el.queue(function() { - $.effects.removePlaceholder( placeholder, el ); + $.effects.cleanUpPlaceholder( placeholder, el ); if ( hide ) { el.hide(); diff --git a/ui/effect-clip.js b/ui/effect-clip.js index c3d8ae25cb3..5fec670ede0 100644 --- a/ui/effect-clip.js +++ b/ui/effect-clip.js @@ -59,7 +59,7 @@ $.effects.define( "clip", "hide", function( o, done ) { easing: o.easing, complete: function() { - $.effects.removePlaceholder( placeholder, el ); + $.effects.cleanUpPlaceholder( placeholder, el ); if ( !show ) { el.hide(); diff --git a/ui/effect-drop.js b/ui/effect-drop.js index 5c359ef47c5..1eb274d0cc4 100644 --- a/ui/effect-drop.js +++ b/ui/effect-drop.js @@ -60,7 +60,7 @@ $.effects.define( "drop", "hide", function( o, done ) { duration: o.duration, easing: o.easing, complete: function() { - $.effects.removePlaceholder( placeholder, el ); + $.effects.cleanUpPlaceholder( placeholder, el ); if ( mode === "hide" ) { el.hide(); diff --git a/ui/effect-fold.js b/ui/effect-fold.js index 7d5b70f6614..a3a9ab15ea8 100644 --- a/ui/effect-fold.js +++ b/ui/effect-fold.js @@ -75,7 +75,7 @@ $.effects.define( "fold", "hide", function( o, done ) { .animate( animation1, duration, o.easing ) .animate( animation2, duration, o.easing ) .queue(function() { - $.effects.removePlaceholder( placeholder, el ); + $.effects.cleanUpPlaceholder( placeholder, el ); if ( hide ) { el.hide(); diff --git a/ui/effect-shake.js b/ui/effect-shake.js index cbfdcf6d4f9..7d34351b96b 100644 --- a/ui/effect-shake.js +++ b/ui/effect-shake.js @@ -59,12 +59,13 @@ $.effects.define( "shake", function( o, done ) { for ( ; i < times; i++ ) { el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing ); } + el .animate( animation1, speed, o.easing ) .animate( animation, speed / 2, o.easing ) .queue(function() { - $.effects.removePlaceholder( placeholder, el ); + $.effects.cleanUpPlaceholder( placeholder, el ); if ( o.mode === "hide" ) { el.hide(); diff --git a/ui/effect-size.js b/ui/effect-size.js index 9ef9dabe489..6a2cbb4f7da 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -185,7 +185,7 @@ $.effects.define( "size", function( o, done ) { var offset = el.offset(); if ( restore ) { - $.effects.removePlaceholder( placeholder, el ); + $.effects.cleanUpPlaceholder( placeholder, el ); } if ( to.opacity === 0 ) { @@ -196,10 +196,7 @@ $.effects.define( "size", function( o, done ) { } if ( !restore ) { - - if ( placeholder ) { - placeholder.remove(); - } + $.effects.removePlaceholder( placeholder ); el.css("position", position === "static" ? "relative" : position ); diff --git a/ui/effect-slide.js b/ui/effect-slide.js index 85901888caf..26bd91d2410 100644 --- a/ui/effect-slide.js +++ b/ui/effect-slide.js @@ -65,7 +65,7 @@ $.effects.define( "slide", "show", function( o, done ) { duration: o.duration, easing: o.easing, complete: function() { - $.effects.removePlaceholder( placeholder, el ); + $.effects.cleanUpPlaceholder( placeholder, el ); if ( mode === "hide" ) { el.hide(); diff --git a/ui/effect.js b/ui/effect.js index 15a341c5a65..51fef8d96ff 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1156,16 +1156,19 @@ $.extend( $.effects, { return placeholder; }, - // removes a placeholder if it exists and restores - // properties that were modified during placeholder creation - removePlaceholder: function( placeholder, el ) { - $.effects.restoreStyle( el ); - + removePlaceholder: function( placeholder ) { if ( placeholder ) { placeholder.remove(); } }, + // removes a placeholder if it exists and restores + // properties that were modified during placeholder creation + cleanUpPlaceholder: function( placeholder, el ) { + $.effects.restoreStyle( el ); + $.effects.removePlaceholder( placeholder ); + }, + setTransition: function( element, list, factor, value ) { value = value || {}; $.each( list, function( i, x ) { From cc786a8937088dc63a50c9f475a46992f60edad2 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Fri, 12 Sep 2014 12:03:36 -0500 Subject: [PATCH 15/40] Effects: Remove stored style data when calling removeStyle --- ui/effect.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/ui/effect.js b/ui/effect.js index 51fef8d96ff..7966241548a 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -26,6 +26,7 @@ }(function( $ ) { var dataSpace = "ui-effects-", + dataSpaceStyle = "ui-effects-style", // Create a local jQuery because jQuery Color relies on it and the // global may not exist with AMD and a custom build (#10199) @@ -1053,11 +1054,12 @@ $.extend( $.effects, { }, saveStyle: function( element ) { - element.data( dataSpace + "style", element[ 0 ].style.cssText ); + element.data( dataSpaceStyle, element[ 0 ].style.cssText ); }, restoreStyle: function( element ) { - element[ 0 ].style.cssText = element.data( dataSpace + "style" ) || ""; + element[ 0 ].style.cssText = element.data( dataSpaceStyle ) || ""; + element.removeData( dataSpaceStyle ); }, mode: function( el, mode ) { From dbb6540d60ba232967a1ed867c6f21459f8e09dd Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Fri, 12 Sep 2014 14:58:30 -0500 Subject: [PATCH 16/40] Effects: Introduce $.fn.transfer, deprecate $.effects.effect.transfer --- ui/effect-transfer.js | 35 +++++------------------------------ ui/effect.js | 31 +++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 30 deletions(-) diff --git a/ui/effect-transfer.js b/ui/effect-transfer.js index e3cdb2ad210..02b34d26b65 100644 --- a/ui/effect-transfer.js +++ b/ui/effect-transfer.js @@ -28,35 +28,10 @@ } }(function( $ ) { -$.effects.define( "transfer", function( o, done ) { - var elem = $( this ), - target = $( o.to ), - targetFixed = target.css("position") === "fixed", - body = $("body"), - fixTop = targetFixed ? body.scrollTop() : 0, - fixLeft = targetFixed ? body.scrollLeft() : 0, - endPosition = target.offset(), - animation = { - top: endPosition.top - fixTop, - left: endPosition.left - fixLeft, - height: target.innerHeight(), - width: target.innerWidth() - }, - startPosition = elem.offset(), - transfer = $("
") - .appendTo("body") - .addClass( o.className ) - .css({ - top: startPosition.top - fixTop, - left: startPosition.left - fixLeft, - height: elem.innerHeight(), - width: elem.innerWidth(), - position: targetFixed ? "fixed" : "absolute" - }) - .animate( animation, o.duration, o.easing, function() { - transfer.remove(); - done(); - }); -}); +if ( $.uiBackCompat !== false ) { + $.effects.define( "transfer", function( options, done ) { + $( this ).transfer( options, done ); + }); +} })); diff --git a/ui/effect.js b/ui/effect.js index 7966241548a..18d083c7ba9 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1396,6 +1396,37 @@ $.fn.extend({ return clipObj ? this.css( "clip", "rect(" + clipObj.top + "px " + clipObj.right + "px " + clipObj.bottom + "px " + clipObj.left + "px)" ) : parseClip( this.css("clip"), this ); + }, + + transfer: function( options, done ) { + var element = $( this ), + target = $( options.to ), + targetFixed = target.css( "position" ) === "fixed", + body = $( "body" ), + fixTop = targetFixed ? body.scrollTop() : 0, + fixLeft = targetFixed ? body.scrollLeft() : 0, + endPosition = target.offset(), + animation = { + top: endPosition.top - fixTop, + left: endPosition.left - fixLeft, + height: target.innerHeight(), + width: target.innerWidth() + }, + startPosition = element.offset(), + transfer = $( "
" ) + .appendTo( "body" ) + .addClass( options.className ) + .css({ + top: startPosition.top - fixTop, + left: startPosition.left - fixLeft, + height: element.innerHeight(), + width: element.innerWidth(), + position: targetFixed ? "fixed" : "absolute" + }) + .animate( animation, options.duration, options.easing, function() { + transfer.remove(); + done(); + }); } }); From 85ce536fae5aac4a54a99af022b60e70fd404747 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Fri, 12 Sep 2014 15:10:22 -0500 Subject: [PATCH 17/40] Effects: Ensure defined effects are exported as modules --- ui/effect-blind.js | 2 +- ui/effect-bounce.js | 2 +- ui/effect-clip.js | 2 +- ui/effect-drop.js | 2 +- ui/effect-explode.js | 2 +- ui/effect-fade.js | 2 +- ui/effect-fold.js | 2 +- ui/effect-highlight.js | 2 +- ui/effect-puff.js | 2 +- ui/effect-pulsate.js | 2 +- ui/effect-scale.js | 2 +- ui/effect-shake.js | 2 +- ui/effect-size.js | 2 +- ui/effect-slide.js | 2 +- ui/effect-transfer.js | 2 +- ui/effect.js | 2 ++ 16 files changed, 17 insertions(+), 15 deletions(-) diff --git a/ui/effect-blind.js b/ui/effect-blind.js index fe3ed68c025..423ebc86152 100644 --- a/ui/effect-blind.js +++ b/ui/effect-blind.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "blind", "hide", function( o, done ) { +return $.effects.define( "blind", "hide", function( o, done ) { var start, placeholder, animate = {}, map = { diff --git a/ui/effect-bounce.js b/ui/effect-bounce.js index 6e50a448e41..d921dfc1907 100644 --- a/ui/effect-bounce.js +++ b/ui/effect-bounce.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "bounce", function( o, done ) { +return $.effects.define( "bounce", function( o, done ) { var upAnim, downAnim, el = $( this ), diff --git a/ui/effect-clip.js b/ui/effect-clip.js index 5fec670ede0..2e51ed4108b 100644 --- a/ui/effect-clip.js +++ b/ui/effect-clip.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "clip", "hide", function( o, done ) { +return $.effects.define( "clip", "hide", function( o, done ) { var start, placeholder, animate = {}, el = $( this ), diff --git a/ui/effect-drop.js b/ui/effect-drop.js index 1eb274d0cc4..c923374cc35 100644 --- a/ui/effect-drop.js +++ b/ui/effect-drop.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "drop", "hide", function( o, done ) { +return $.effects.define( "drop", "hide", function( o, done ) { var el = $( this ), mode = o.mode, diff --git a/ui/effect-explode.js b/ui/effect-explode.js index c7fde4e3c6b..56f8fe375f4 100644 --- a/ui/effect-explode.js +++ b/ui/effect-explode.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "explode", "hide", function( o, done ) { +return $.effects.define( "explode", "hide", function( o, done ) { var i, j, left, top, mx, my, rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3, diff --git a/ui/effect-fade.js b/ui/effect-fade.js index b86ac3582b0..bb94eee2221 100644 --- a/ui/effect-fade.js +++ b/ui/effect-fade.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "fade", "toggle", function( o, done ) { +return $.effects.define( "fade", "toggle", function( o, done ) { $( this ).animate({ opacity: o.mode }, { diff --git a/ui/effect-fold.js b/ui/effect-fold.js index a3a9ab15ea8..aebf5f72894 100644 --- a/ui/effect-fold.js +++ b/ui/effect-fold.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "fold", "hide", function( o, done ) { +return $.effects.define( "fold", "hide", function( o, done ) { // Create element var el = $( this ), diff --git a/ui/effect-highlight.js b/ui/effect-highlight.js index 8d5fafef7b5..e8199355ecc 100644 --- a/ui/effect-highlight.js +++ b/ui/effect-highlight.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "highlight", "show", function( o, done ) { +return $.effects.define( "highlight", "show", function( o, done ) { var elem = $( this ), mode = o.mode, animation = { diff --git a/ui/effect-puff.js b/ui/effect-puff.js index d8c324f4e3e..1b42c049778 100644 --- a/ui/effect-puff.js +++ b/ui/effect-puff.js @@ -29,7 +29,7 @@ } }(function( $ ) { -$.effects.define( "puff", "hide", function( o, done ) { +return $.effects.define( "puff", "hide", function( o, done ) { var options = $.extend( true, {}, o, { fade: true, percent: parseInt( o.percent, 10 ) || 150 diff --git a/ui/effect-pulsate.js b/ui/effect-pulsate.js index 747e6f2c218..dd9467d7475 100644 --- a/ui/effect-pulsate.js +++ b/ui/effect-pulsate.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "pulsate", "show", function( o, done ) { +return $.effects.define( "pulsate", "show", function( o, done ) { var elem = $( this ), mode = o.mode, show = mode === "show", diff --git a/ui/effect-scale.js b/ui/effect-scale.js index 071e03ac3fe..77386843e1f 100644 --- a/ui/effect-scale.js +++ b/ui/effect-scale.js @@ -29,7 +29,7 @@ } }(function( $ ) { -$.effects.define( "scale", function( o, done ) { +return $.effects.define( "scale", function( o, done ) { // Create element var el = $( this ), diff --git a/ui/effect-shake.js b/ui/effect-shake.js index 7d34351b96b..7590a147548 100644 --- a/ui/effect-shake.js +++ b/ui/effect-shake.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "shake", function( o, done ) { +return $.effects.define( "shake", function( o, done ) { var i = 1, el = $( this ), diff --git a/ui/effect-size.js b/ui/effect-size.js index 6a2cbb4f7da..331187d7e6d 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "size", function( o, done ) { +return $.effects.define( "size", function( o, done ) { // Create element var baseline, factor, temp, diff --git a/ui/effect-slide.js b/ui/effect-slide.js index 26bd91d2410..bfb5fec3a7e 100644 --- a/ui/effect-slide.js +++ b/ui/effect-slide.js @@ -28,7 +28,7 @@ } }(function( $ ) { -$.effects.define( "slide", "show", function( o, done ) { +return $.effects.define( "slide", "show", function( o, done ) { var el = $( this ), map = { up: [ "bottom", "top" ], diff --git a/ui/effect-transfer.js b/ui/effect-transfer.js index 02b34d26b65..78f12881ebe 100644 --- a/ui/effect-transfer.js +++ b/ui/effect-transfer.js @@ -29,7 +29,7 @@ }(function( $ ) { if ( $.uiBackCompat !== false ) { - $.effects.define( "transfer", function( options, done ) { + return $.effects.define( "transfer", function( options, done ) { $( this ).transfer( options, done ); }); } diff --git a/ui/effect.js b/ui/effect.js index 18d083c7ba9..fc9e9237f4b 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1051,6 +1051,8 @@ $.extend( $.effects, { $.effects.effect[ name ] = effect; $.effects.effect[ name ].mode = mode; + + return effect; }, saveStyle: function( element ) { From bf67149dc46ee3d23b1be09e9ca3afdd825c3ae9 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Fri, 12 Sep 2014 16:50:49 -0500 Subject: [PATCH 18/40] Effects: Fix css clip parsing in IE8 --- ui/effect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/effect.js b/ui/effect.js index fc9e9237f4b..fee2137b316 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1435,7 +1435,7 @@ $.fn.extend({ function parseClip( str, element ) { var outerWidth = element.outerWidth(), outerHeight = element.outerHeight(), - clipRegex = /^rect\((-?\d*\.?\d*px|-?\d+%|auto),?\s+(-?\d*\.?\d*px|-?\d+%|auto),?\s+(-?\d*\.?\d*px|-?\d+%|auto),?\s+(-?\d*\.?\d*px|-?\d+%|auto)\)$/, + clipRegex = /^rect\((-?\d*\.?\d*px|-?\d+%|auto),?\s*(-?\d*\.?\d*px|-?\d+%|auto),?\s*(-?\d*\.?\d*px|-?\d+%|auto),?\s*(-?\d*\.?\d*px|-?\d+%|auto)\)$/, values = clipRegex.exec( str ) || [ "", 0, outerWidth, outerHeight, 0 ]; return { From cd3ec9f36218af0014a324a247300e5c081691c1 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sat, 13 Sep 2014 11:56:59 -0500 Subject: [PATCH 19/40] Effects: Provide back compat for effects defined without a default mode --- ui/effect.js | 35 ++++++++++++++++++++++++----------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/ui/effect.js b/ui/effect.js index fee2137b316..0ae4420981b 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1279,13 +1279,16 @@ $.fn.extend({ // as the .show() below destroys the initial state modes.push( normalizedMode ); - if ( normalizedMode === "none" ) { - return; - } + // see $.uiBackCompat inside of run() for removal in 1.13 + if ( defaultMode ) { + if ( normalizedMode === "none" ) { + return; + } - if ( normalizedMode === "show" || - ( normalizedMode === defaultMode && normalizedMode === "hide" ) ) { - el.show(); + if ( normalizedMode === "show" || + ( normalizedMode === defaultMode && normalizedMode === "hide" ) ) { + el.show(); + } } $.effects.saveStyle( el ); @@ -1323,12 +1326,22 @@ $.fn.extend({ // as toggle can be show, or hide depending on element state args.mode = modes.shift(); - if ( args.mode === "none" ) { - // call the core method to track "olddisplay" properly - elem[ mode ](); - done(); + if ( $.uiBackCompat !== false && !defaultMode ) { + if ( elem.is( ":hidden" ) ? mode === "hide" : mode === "show" ) { + // call the core method to track "olddisplay" properly + elem[ mode ](); + done(); + } else { + effectMethod.call( elem[ 0 ], args, done ); + } } else { - effectMethod.call( elem[0], args, done ); + if ( args.mode === "none" ) { + // call the core method to track "olddisplay" properly + elem[ mode ](); + done(); + } else { + effectMethod.call( elem[ 0 ], args, done ); + } } } From e8a0d53ce5c4497431ac24f3e7c6cf063612cc89 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sat, 13 Sep 2014 12:06:43 -0500 Subject: [PATCH 20/40] Effects: Add explanatory comments for prefilter step --- ui/effect.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui/effect.js b/ui/effect.js index 0ae4420981b..901b0e00ef6 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1352,6 +1352,9 @@ $.fn.extend({ } } + // run prefilter on all elements first to ensure that + // any showing or hiding happens before placeholder creation, + // which ensures that any layout changes are correctly captured return queue === false ? this.each( prefilter ).each( run ) : this.queue( queue || "fx", prefilter ).queue( queue || "fx", run ); From fd051a0fba8baf8d3e1a286b1ad586da72679802 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sat, 13 Sep 2014 12:17:26 -0500 Subject: [PATCH 21/40] Effects Tests: Fix failing scale test due to subpixel accuracy --- tests/unit/effects/effects_scale.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/unit/effects/effects_scale.js b/tests/unit/effects/effects_scale.js index 6abbcb5382f..caed39c228c 100644 --- a/tests/unit/effects/effects_scale.js +++ b/tests/unit/effects/effects_scale.js @@ -6,8 +6,8 @@ function run( position, v, h, vo, ho ) { asyncTest( desc, function() { expect( 2 ); function complete() { - equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc ); - equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc ); + closeEnough( parseInt( test.css( h ), 10 ), target[ h ], 1, "Horizontal Position Correct " + desc ); + closeEnough( parseInt( test.css( v ), 10 ), target[ v ], 1, "Vertical Position Correct " + desc ); start(); } var test = $( ".testScale" ), From 15f0cf75e8d77facc61cd0e026aec0845c8a1db6 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Thu, 13 Nov 2014 18:38:32 -0500 Subject: [PATCH 22/40] Effects rewrite: ensure placeholder element copies float property --- ui/effect.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/effect.js b/ui/effect.js index 901b0e00ef6..faf6f70c027 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1145,7 +1145,8 @@ $.extend( $.effects, { marginTop: element.css( "marginTop" ), marginBottom: element.css( "marginBottom" ), marginLeft: element.css( "marginLeft" ), - marginRight: element.css( "marginRight" ) + marginRight: element.css( "marginRight" ), + "float": element.css( "float" ) }) .outerWidth( element.outerWidth() ) .outerHeight( element.outerHeight() ); From b68b4b2cf7fa2addc1fbcbbd15475e7d3c2c1728 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Fri, 14 Nov 2014 12:12:34 -0500 Subject: [PATCH 23/40] Effects Rewrite: ensure fold and blind animate the placeholder --- ui/effect-blind.js | 8 ++++++++ ui/effect-fold.js | 15 ++++++++++++++- ui/effect.js | 9 +++++++++ 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/ui/effect-blind.js b/ui/effect-blind.js index 423ebc86152..2e04c8def23 100644 --- a/ui/effect-blind.js +++ b/ui/effect-blind.js @@ -51,9 +51,17 @@ return $.effects.define( "blind", "hide", function( o, done ) { if ( show ) { el.cssClip( animate.clip ); + if ( placeholder ) { + placeholder.css( $.effects.clipToBox( animate ) ); + } + animate.clip = start; } + if ( placeholder ) { + placeholder.animate( $.effects.clipToBox( animate ), o.duration, o.easing ); + } + el.animate( animate, { queue: false, duration: o.duration, diff --git a/ui/effect-fold.js b/ui/effect-fold.js index aebf5f72894..96a47b01231 100644 --- a/ui/effect-fold.js +++ b/ui/effect-fold.js @@ -67,11 +67,24 @@ return $.effects.define( "fold", "hide", function( o, done ) { if ( show ) { el.cssClip( animation2.clip ); + if ( placeholder ) { + placeholder.css( $.effects.clipToBox( animation2 ) ); + } + animation2.clip = start; } // Animate el + .queue(function(next) { + if ( placeholder ) { + placeholder + .animate( $.effects.clipToBox( animation1 ), duration, o.easing ) + .animate( $.effects.clipToBox( animation2 ), duration, o.easing ); + } + + next(); + }) .animate( animation1, duration, o.easing ) .animate( animation2, duration, o.easing ) .queue(function() { @@ -87,7 +100,7 @@ return $.effects.define( "fold", "hide", function( o, done ) { // inject all the animations we just queued to be first in line (after "inprogress") if ( queuelen > 1) { queue.splice.apply( queue, - [ 1, 0 ].concat( queue.splice( queuelen, 3 ) ) ); + [ 1, 0 ].concat( queue.splice( queuelen, 4 ) ) ); } el.dequeue(); }); diff --git a/ui/effect.js b/ui/effect.js index faf6f70c027..f47db316d8f 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1055,6 +1055,15 @@ $.extend( $.effects, { return effect; }, + clipToBox: function( animation ) { + return { + width: animation.clip.right - animation.clip.left, + height: animation.clip.bottom - animation.clip.top, + left: animation.clip.left, + top: animation.clip.top + }; + }, + saveStyle: function( element ) { element.data( dataSpaceStyle, element[ 0 ].style.cssText ); }, From 32167bda4cbb8942e2a5ef664529af8f06d0d2e2 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Fri, 14 Nov 2014 18:35:35 -0500 Subject: [PATCH 24/40] Effects Rewrite: extract "unshift" method for reuse --- ui/effect-bounce.js | 12 +----------- ui/effect-fold.js | 13 ++----------- ui/effect-pulsate.js | 19 ++++--------------- ui/effect-shake.js | 11 +---------- ui/effect.js | 12 ++++++++++++ 5 files changed, 20 insertions(+), 47 deletions(-) diff --git a/ui/effect-bounce.js b/ui/effect-bounce.js index d921dfc1907..65ec684a018 100644 --- a/ui/effect-bounce.js +++ b/ui/effect-bounce.js @@ -50,10 +50,6 @@ return $.effects.define( "bounce", function( o, done ) { motion = ( direction === "up" || direction === "left" ), i = 0, - // we will need to re-assemble the queue to stack our animations in place - queue = el.queue(), - queuelen = queue.length, - placeholder = $.effects.createPlaceholder( el ), refValue = el.css( ref ); @@ -109,13 +105,7 @@ return $.effects.define( "bounce", function( o, done ) { done(); }); - // inject all the animations we just queued to be first in line (after "inprogress") - if ( queuelen > 1) { - queue.splice.apply( queue, - [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); - } - el.dequeue(); - + $.effects.unshift( el, anims + 1 ); }); })); diff --git a/ui/effect-fold.js b/ui/effect-fold.js index 96a47b01231..8d26cff1aca 100644 --- a/ui/effect-fold.js +++ b/ui/effect-fold.js @@ -51,11 +51,7 @@ return $.effects.define( "fold", "hide", function( o, done ) { clip: el.cssClip() }, - distance = [ start[ref[0]], start[ref[1]] ], - - // we will need to re-assemble the queue to stack our animations in place - queue = el.queue(), - queuelen = queue.length; + distance = [ start[ref[0]], start[ref[1]] ]; // define animations if ( percent ) { @@ -97,12 +93,7 @@ return $.effects.define( "fold", "hide", function( o, done ) { done(); }); - // inject all the animations we just queued to be first in line (after "inprogress") - if ( queuelen > 1) { - queue.splice.apply( queue, - [ 1, 0 ].concat( queue.splice( queuelen, 4 ) ) ); - } - el.dequeue(); + $.effects.unshift( el, 4 ); }); })); diff --git a/ui/effect-pulsate.js b/ui/effect-pulsate.js index dd9467d7475..032aa9fbca5 100644 --- a/ui/effect-pulsate.js +++ b/ui/effect-pulsate.js @@ -39,26 +39,20 @@ return $.effects.define( "pulsate", "show", function( o, done ) { anims = ( ( o.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ), duration = o.duration / anims, animateTo = 0, - queue = elem.queue(), - queuelen = queue.length, i = 1; - if ( show || !elem.is(":visible")) { + if ( show || !elem.is( ":visible" ) ) { elem.css( "opacity", 0 ).show(); animateTo = 1; } // anims - 1 opacity "toggles" for ( ; i < anims; i++ ) { - elem.animate({ - opacity: animateTo - }, duration, o.easing ); + elem.animate( { opacity: animateTo }, duration, o.easing ); animateTo = 1 - animateTo; } - elem.animate({ - opacity: animateTo - }, duration, o.easing); + elem.animate( { opacity: animateTo }, duration, o.easing); elem.queue(function() { if ( hide ) { @@ -68,12 +62,7 @@ return $.effects.define( "pulsate", "show", function( o, done ) { done(); }); - // We just queued up "anims" animations, we need to put them next in the queue - if ( queuelen > 1 ) { - queue.splice.apply( queue, - [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); - } - elem.dequeue(); + $.effects.unshift( elem, anims + 1 ); }); })); diff --git a/ui/effect-shake.js b/ui/effect-shake.js index 7590a147548..dd8cf334857 100644 --- a/ui/effect-shake.js +++ b/ui/effect-shake.js @@ -42,9 +42,6 @@ return $.effects.define( "shake", function( o, done ) { animation = {}, animation1 = {}, animation2 = {}, - // we will need to re-assemble the queue to stack our animations in place - queue = el.queue(), - queuelen = queue.length, placeholder = $.effects.createPlaceholder( el ); // Animation @@ -74,13 +71,7 @@ return $.effects.define( "shake", function( o, done ) { done(); }); - // inject all the animations we just queued to be first in line (after "inprogress") - if ( queuelen > 1) { - queue.splice.apply( queue, - [ 1, 0 ].concat( queue.splice( queuelen, anims + 1 ) ) ); - } - el.dequeue(); - + $.effects.unshift( el, anims + 1 ); }); })); diff --git a/ui/effect.js b/ui/effect.js index f47db316d8f..ef6bd0cb419 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1064,6 +1064,18 @@ $.extend( $.effects, { }; }, + // Injects recently queued functions to be first in line (after "inprogress") + unshift: function( el, count ) { + var queue = el.queue(), + queuelen = queue.length; + + if ( queuelen > count + 1 ) { + queue.splice.apply( queue, + [ 1, 0 ].concat( queue.splice( queuelen, count ) ) ); + } + el.dequeue(); + }, + saveStyle: function( element ) { element.data( dataSpaceStyle, element[ 0 ].style.cssText ); }, From b4045257b62098f472995cf4245e5dd4544c5124 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sat, 15 Nov 2014 14:36:43 -0500 Subject: [PATCH 25/40] Effects Rewrite: add IE8 CANTFIX note to clip effect test --- tests/visual/effects/clip.html | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/visual/effects/clip.html b/tests/visual/effects/clip.html index 66058b198c9..f56f5418909 100644 --- a/tests/visual/effects/clip.html +++ b/tests/visual/effects/clip.html @@ -70,6 +70,7 @@

EXPECTED: Clicking "Toggle" or "Effect Toggle" a second time reverses the animation, first showing all elements at their original dimensions, and restoring them to their original state.

EXPECTED: Clicking "Effect Default" should always perform a "hide" animation.

EXPECTED: Clicking any of the buttons in quick succession should queue the relevant animations.

+

EXPECTED CANTFIX: In IE8, the clip animation jumps due to a bug that causes .css('clip') to return undefined unless the clip property is an inline style.

From 8017d84a3c88eb6340068e1ace81b00870dcac00 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sat, 15 Nov 2014 15:00:16 -0500 Subject: [PATCH 26/40] Effects Rewrite: Fix "unshift" method --- ui/effect-bounce.js | 4 +++- ui/effect-fold.js | 6 ++++-- ui/effect-pulsate.js | 5 +++-- ui/effect-shake.js | 5 ++++- ui/effect.js | 9 ++++----- 5 files changed, 18 insertions(+), 11 deletions(-) diff --git a/ui/effect-bounce.js b/ui/effect-bounce.js index 65ec684a018..224b0650a68 100644 --- a/ui/effect-bounce.js +++ b/ui/effect-bounce.js @@ -50,6 +50,8 @@ return $.effects.define( "bounce", function( o, done ) { motion = ( direction === "up" || direction === "left" ), i = 0, + queuelen = el.queue().length, + placeholder = $.effects.createPlaceholder( el ), refValue = el.css( ref ); @@ -105,7 +107,7 @@ return $.effects.define( "bounce", function( o, done ) { done(); }); - $.effects.unshift( el, anims + 1 ); + $.effects.unshift( el, queuelen, anims + 1 ); }); })); diff --git a/ui/effect-fold.js b/ui/effect-fold.js index 8d26cff1aca..1d5996d6e49 100644 --- a/ui/effect-fold.js +++ b/ui/effect-fold.js @@ -51,7 +51,9 @@ return $.effects.define( "fold", "hide", function( o, done ) { clip: el.cssClip() }, - distance = [ start[ref[0]], start[ref[1]] ]; + distance = [ start[ref[0]], start[ref[1]] ], + + queuelen = el.queue().length; // define animations if ( percent ) { @@ -93,7 +95,7 @@ return $.effects.define( "fold", "hide", function( o, done ) { done(); }); - $.effects.unshift( el, 4 ); + $.effects.unshift( el, queuelen, 4 ); }); })); diff --git a/ui/effect-pulsate.js b/ui/effect-pulsate.js index 032aa9fbca5..304848c8837 100644 --- a/ui/effect-pulsate.js +++ b/ui/effect-pulsate.js @@ -39,7 +39,8 @@ return $.effects.define( "pulsate", "show", function( o, done ) { anims = ( ( o.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ), duration = o.duration / anims, animateTo = 0, - i = 1; + i = 1, + queuelen = elem.queue().length; if ( show || !elem.is( ":visible" ) ) { elem.css( "opacity", 0 ).show(); @@ -62,7 +63,7 @@ return $.effects.define( "pulsate", "show", function( o, done ) { done(); }); - $.effects.unshift( elem, anims + 1 ); + $.effects.unshift( elem, queuelen, anims + 1 ); }); })); diff --git a/ui/effect-shake.js b/ui/effect-shake.js index dd8cf334857..5857305a641 100644 --- a/ui/effect-shake.js +++ b/ui/effect-shake.js @@ -42,6 +42,9 @@ return $.effects.define( "shake", function( o, done ) { animation = {}, animation1 = {}, animation2 = {}, + + queuelen = el.queue().length, + placeholder = $.effects.createPlaceholder( el ); // Animation @@ -71,7 +74,7 @@ return $.effects.define( "shake", function( o, done ) { done(); }); - $.effects.unshift( el, anims + 1 ); + $.effects.unshift( el, queuelen, anims + 1 ); }); })); diff --git a/ui/effect.js b/ui/effect.js index ef6bd0cb419..6b61d0fc337 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1065,13 +1065,12 @@ $.extend( $.effects, { }, // Injects recently queued functions to be first in line (after "inprogress") - unshift: function( el, count ) { - var queue = el.queue(), - queuelen = queue.length; + unshift: function( el, queueLength, count ) { + var queue = el.queue(); - if ( queuelen > count + 1 ) { + if ( queueLength > 1 ) { queue.splice.apply( queue, - [ 1, 0 ].concat( queue.splice( queuelen, count ) ) ); + [ 1, 0 ].concat( queue.splice( queueLength, count ) ) ); } el.dequeue(); }, From 77783f0bb3169a106de4e6719e977ff693cdbd86 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Mon, 17 Nov 2014 09:41:30 -0500 Subject: [PATCH 27/40] Effects Rewrite: Inline prefilter method --- ui/effect.js | 37 +++++++++++++++---------------------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/ui/effect.js b/ui/effect.js index 6b61d0fc337..e0180fb95ad 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1290,8 +1290,7 @@ $.fn.extend({ effectMethod = $.effects.effect[ args.effect ], defaultMode = effectMethod.mode, modes = [], - effectPrefilter = function() { - + prefilter = function( next ) { var el = $( this ), normalizedMode = $.effects.mode( el, mode ) || defaultMode; @@ -1300,21 +1299,22 @@ $.fn.extend({ // as the .show() below destroys the initial state modes.push( normalizedMode ); - // see $.uiBackCompat inside of run() for removal in 1.13 - if ( defaultMode ) { - if ( normalizedMode === "none" ) { - return; - } + // see $.uiBackCompat inside of run() for removal of defaultMode in 1.13 + if ( defaultMode && ( normalizedMode === "show" || + ( normalizedMode === defaultMode && normalizedMode === "hide" ) ) ) { + el.show(); + } - if ( normalizedMode === "show" || - ( normalizedMode === defaultMode && normalizedMode === "hide" ) ) { - el.show(); - } + if ( !defaultMode || normalizedMode !== "none" ) { + $.effects.saveStyle( el ); } - $.effects.saveStyle( el ); + if ( $.isFunction( next ) ) { + next(); + } }, queue = args.queue, + queueName = queue || "fx", complete = args.complete, mode = args.mode; @@ -1366,19 +1366,12 @@ $.fn.extend({ } } - function prefilter( next ) { - effectPrefilter.call( this ); - if ( $.isFunction( next ) ) { - next(); - } - } - - // run prefilter on all elements first to ensure that + // Run prefilter on all elements first to ensure that // any showing or hiding happens before placeholder creation, - // which ensures that any layout changes are correctly captured + // which ensures that any layout changes are correctly captured. return queue === false ? this.each( prefilter ).each( run ) : - this.queue( queue || "fx", prefilter ).queue( queue || "fx", run ); + this.queue( queueName, prefilter ).queue( queueName, run ); }, show: (function( orig ) { From 86c375fa4343f83db787685794fb8aa57c7a2b2a Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Mon, 17 Nov 2014 10:05:06 -0500 Subject: [PATCH 28/40] Effects Rewrite: Fix style violations in effects_core.js --- tests/unit/effects/effects_core.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index 7753f42c578..417dee074af 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -1,11 +1,11 @@ (function($) { function present( value, array, message ) { - QUnit.push( jQuery.inArray( value, array ) !== -1 , value, array, message ); + QUnit.push( jQuery.inArray( value, array ) !== -1, value, array, message ); } function notPresent( value, array, message ) { - QUnit.push( jQuery.inArray( value, array ) === -1 , value, array, message ); + QUnit.push( jQuery.inArray( value, array ) === -1, value, array, message ); } // minDuration is used for "short" animate tests where we are only concerned about the final @@ -229,11 +229,11 @@ $.each( $.effects.effect, function( effect ) { } hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() { - equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" ); + equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" + effect + "\", time)" ); })).queue( queueTest() ).hide( effect, minDuration, queueTest(function() { - equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" ); + equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" + effect + "\", time)" ); })).queue( queueTest(function() { - deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains"); + deepEqual( hidden.queue(), [ "inprogress" ], "Only the inprogress sentinel remains"); start(); })); }); From 4c2ffd9f61c903c77b035a3eba363b1eac772c89 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Mon, 17 Nov 2014 10:29:25 -0500 Subject: [PATCH 29/40] Effects Rewrite: Tests for createPlaceholder --- tests/unit/effects/effects.html | 51 ++++++++++++++++++++---------- tests/unit/effects/effects_core.js | 38 ++++++++++++++++++++++ ui/effect.js | 16 +++++----- 3 files changed, 81 insertions(+), 24 deletions(-) diff --git a/tests/unit/effects/effects.html b/tests/unit/effects/effects.html index d6cfdb7973b..a092ce04bcf 100644 --- a/tests/unit/effects/effects.html +++ b/tests/unit/effects/effects.html @@ -88,28 +88,47 @@ width: 100px; } + .relative { + position: relative; + top: 0px; + left: 0px; + } + .absolute { + position: absolute; + top: 0px; + left: 0px; + } + .fixed { + position: fixed; + top: 0px; + left: 0px; + } + .static { + position: static; + } +
-
-
- -
-

Child Element Test

-
-
-

Slide with relative width

-
-
-
-
-
- +
+ +
+

Child Element Test

+
+
+

Slide with relative width

+
+
+
+
+
+
+
diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index 417dee074af..2762a982bce 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -199,6 +199,44 @@ asyncTest( "animateClass: css and class changes during animation are not lost (# .height( 100 ); }); +test( "createPlaceholder: only created for static or relative elements", function() { + expect( 4 ); + + ok( $.effects.createPlaceholder( $( ".relative" ) ).length ); + ok( $.effects.createPlaceholder( $( ".static" ) ).length ); + ok( !$.effects.createPlaceholder( $( ".absolute" ) ) ); + ok( !$.effects.createPlaceholder( $( ".fixed" ) ) ); +}); + +test( "createPlaceholder: preserves layout effecting properties", function() { + expect( 7 ); + + var position = 5, + element = $( ".relative" ).css({ + top: position, + left: position + }), + before = { + offset: element.offset(), + outerWidth: element.outerWidth( true ), + outerHeight: element.outerHeight( true ), + "float": element.css( "float" ), + position: element.position() + }, + placeholder = $.effects.createPlaceholder( element ); + + // Placeholders are only placed to preserve the effect on layout. Considering + // top and left do not change layout, they are not preserved, which makes some + // of the math simpler in the implementation. + deepEqual( before.offset.top - position, placeholder.offset().top, "offset top preserved" ); + deepEqual( before.offset.left - position, placeholder.offset().left, "offset left preserved" ); + deepEqual( before.position.top - position, placeholder.position().top, "position top preserved" ); + deepEqual( before.position.left - position, placeholder.position().left, "position left preserved" ); + + deepEqual( before[ "float" ], placeholder.css( "float" ), "float preserved" ); + deepEqual( before.outerWidth, placeholder.outerWidth( true ), "width preserved" ); + deepEqual( before.outerHeight, placeholder.outerHeight( true ), "height preserved" ); +}); $.each( $.effects.effect, function( effect ) { module( "effects." + effect ); diff --git a/ui/effect.js b/ui/effect.js index e0180fb95ad..318fe9f9ed8 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1137,18 +1137,18 @@ $.extend( $.effects, { createPlaceholder: function( element ) { var placeholder, - cssPosition = element.css("position"), + cssPosition = element.css( "position" ), position = element.position(); - // lock in margins first to account for form elements, which + // Lock in margins first to account for form elements, which // will change margin if you explicitly set height // see: http://jsfiddle.net/JZSMt/3/ https://bugs.webkit.org/show_bug.cgi?id=107380 - // Support: Chrome, Safari + // Support: Safari element.css({ - marginTop: element.css("marginTop"), - marginBottom: element.css("marginBottom"), - marginLeft: element.css("marginLeft"), - marginRight: element.css("marginRight") + marginTop: element.css( "marginTop" ), + marginBottom: element.css( "marginBottom" ), + marginLeft: element.css( "marginLeft" ), + marginRight: element.css( "marginRight" ) }) .outerWidth( element.outerWidth() ) .outerHeight( element.outerHeight() ); @@ -1159,7 +1159,7 @@ $.extend( $.effects, { placeholder = $( "<" + element[ 0 ].nodeName + ">" ).insertAfter( element ).css({ // convert inline to inline block to account for inline elements // that turn to inline block based on content (like img) - display: /^(inline|ruby)/.test( element.css("display") ) ? "inline-block" : "block", + display: /^(inline|ruby)/.test( element.css( "display" ) ) ? "inline-block" : "block", visibility: "hidden", // margins need to be set to account for margin collapse marginTop: element.css( "marginTop" ), From 2d7eb90f7fbe4ef43e12eee9fc150c72fef1240a Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Mon, 17 Nov 2014 14:47:44 -0500 Subject: [PATCH 30/40] Effects Rewrite: Consolidate placeholder and style cleanup --- tests/unit/effects/effects_core.js | 4 ++- ui/effect-blind.js | 11 +------- ui/effect-bounce.js | 19 +++++--------- ui/effect-clip.js | 15 +++-------- ui/effect-drop.js | 21 ++++++--------- ui/effect-explode.js | 3 --- ui/effect-fold.js | 10 +------ ui/effect-highlight.js | 10 +------ ui/effect-pulsate.js | 8 +----- ui/effect-shake.js | 15 +++-------- ui/effect-size.js | 36 ++++++++++++------------- ui/effect-slide.js | 23 +++++++--------- ui/effect.js | 42 +++++++++++++++++++++--------- 13 files changed, 82 insertions(+), 135 deletions(-) diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index 2762a982bce..f290611ec2f 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -247,7 +247,7 @@ $.each( $.effects.effect, function( effect ) { return; } asyncTest( "show/hide", function() { - expect( 8 ); + expect( 10 ); var hidden = $( "div.hidden" ), count = 0, test = 0; @@ -268,8 +268,10 @@ $.each( $.effects.effect, function( effect ) { hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() { equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" + effect + "\", time)" ); + ok( !$( ".ui-effects-placeholder" ).length, "No placeholder remains after .show(\"" + effect + "\", time)" ); })).queue( queueTest() ).hide( effect, minDuration, queueTest(function() { equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" + effect + "\", time)" ); + ok( !$( ".ui-effects-placeholder" ).length, "No placeholder remains after .hide(\"" + effect + "\", time)" ); })).queue( queueTest(function() { deepEqual( hidden.queue(), [ "inprogress" ], "Only the inprogress sentinel remains"); start(); diff --git a/ui/effect-blind.js b/ui/effect-blind.js index 2e04c8def23..832028ce0cf 100644 --- a/ui/effect-blind.js +++ b/ui/effect-blind.js @@ -66,16 +66,7 @@ return $.effects.define( "blind", "hide", function( o, done ) { queue: false, duration: o.duration, easing: o.easing, - complete: function() { - - $.effects.cleanUpPlaceholder( placeholder, el ); - - if ( !show ) { - el.hide(); - } - - done(); - } + complete: done }); }); diff --git a/ui/effect-bounce.js b/ui/effect-bounce.js index 224b0650a68..182f496fe80 100644 --- a/ui/effect-bounce.js +++ b/ui/effect-bounce.js @@ -29,7 +29,7 @@ }(function( $ ) { return $.effects.define( "bounce", function( o, done ) { - var upAnim, downAnim, + var upAnim, downAnim, refValue, el = $( this ), // defaults: @@ -50,10 +50,11 @@ return $.effects.define( "bounce", function( o, done ) { motion = ( direction === "up" || direction === "left" ), i = 0, - queuelen = el.queue().length, + queuelen = el.queue().length; - placeholder = $.effects.createPlaceholder( el ), - refValue = el.css( ref ); + $.effects.createPlaceholder( el ); + + refValue = el.css( ref ); // default distance for the BIGGEST bounce is the outer Distance / 3 if ( !distance ) { @@ -97,15 +98,7 @@ return $.effects.define( "bounce", function( o, done ) { el.animate( upAnim, speed, easing ); } - el.queue(function() { - $.effects.cleanUpPlaceholder( placeholder, el ); - - if ( hide ) { - el.hide(); - } - - done(); - }); + el.queue(done); $.effects.unshift( el, queuelen, anims + 1 ); }); diff --git a/ui/effect-clip.js b/ui/effect-clip.js index 2e51ed4108b..36420cd52fb 100644 --- a/ui/effect-clip.js +++ b/ui/effect-clip.js @@ -29,7 +29,7 @@ }(function( $ ) { return $.effects.define( "clip", "hide", function( o, done ) { - var start, placeholder, + var start, animate = {}, el = $( this ), show = o.mode === "show", @@ -46,7 +46,7 @@ return $.effects.define( "clip", "hide", function( o, done ) { left: horizontal ? ( start.right - start.left ) / 2 : start.left }; - placeholder = $.effects.createPlaceholder( el ); + $.effects.createPlaceholder( el ); if ( show ) { el.cssClip( animate.clip ); @@ -57,16 +57,7 @@ return $.effects.define( "clip", "hide", function( o, done ) { queue: false, duration: o.duration, easing: o.easing, - complete: function() { - - $.effects.cleanUpPlaceholder( placeholder, el ); - - if ( !show ) { - el.hide(); - } - - done(); - } + complete: done }); }); diff --git a/ui/effect-drop.js b/ui/effect-drop.js index c923374cc35..574d236efd3 100644 --- a/ui/effect-drop.js +++ b/ui/effect-drop.js @@ -30,7 +30,8 @@ return $.effects.define( "drop", "hide", function( o, done ) { - var el = $( this ), + var distance, + el = $( this ), mode = o.mode, show = mode === "show", direction = o.direction || "left", @@ -38,9 +39,11 @@ return $.effects.define( "drop", "hide", function( o, done ) { motion = ( direction === "up" || direction === "left" ) ? "pos" : "neg", animation = { opacity: show ? 1 : 0 - }, - placeholder = $.effects.createPlaceholder( el ), - distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ) / 2; + }; + + $.effects.createPlaceholder( el ); + + distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ) / 2; if ( show ) { el @@ -59,15 +62,7 @@ return $.effects.define( "drop", "hide", function( o, done ) { queue: false, duration: o.duration, easing: o.easing, - complete: function() { - $.effects.cleanUpPlaceholder( placeholder, el ); - - if ( mode === "hide" ) { - el.hide(); - } - - done(); - } + complete: done }); }); diff --git a/ui/effect-explode.js b/ui/effect-explode.js index 56f8fe375f4..33e8fc8fc95 100644 --- a/ui/effect-explode.js +++ b/ui/effect-explode.js @@ -100,9 +100,6 @@ return $.effects.define( "explode", "hide", function( o, done ) { visibility: "visible" }); $( pieces ).remove(); - if ( !show ) { - el.hide(); - } done(); } }); diff --git a/ui/effect-fold.js b/ui/effect-fold.js index 1d5996d6e49..a9fe51d9312 100644 --- a/ui/effect-fold.js +++ b/ui/effect-fold.js @@ -85,15 +85,7 @@ return $.effects.define( "fold", "hide", function( o, done ) { }) .animate( animation1, duration, o.easing ) .animate( animation2, duration, o.easing ) - .queue(function() { - $.effects.cleanUpPlaceholder( placeholder, el ); - - if ( hide ) { - el.hide(); - } - - done(); - }); + .queue(done); $.effects.unshift( el, queuelen, 4 ); }); diff --git a/ui/effect-highlight.js b/ui/effect-highlight.js index e8199355ecc..992ca55e983 100644 --- a/ui/effect-highlight.js +++ b/ui/effect-highlight.js @@ -50,15 +50,7 @@ return $.effects.define( "highlight", "show", function( o, done ) { queue: false, duration: o.duration, easing: o.easing, - complete: function() { - $.effects.restoreStyle( elem ); - - if ( mode === "hide" ) { - elem.hide(); - } - - done(); - } + complete: done }); }); diff --git a/ui/effect-pulsate.js b/ui/effect-pulsate.js index 304848c8837..71f31989f6c 100644 --- a/ui/effect-pulsate.js +++ b/ui/effect-pulsate.js @@ -55,13 +55,7 @@ return $.effects.define( "pulsate", "show", function( o, done ) { elem.animate( { opacity: animateTo }, duration, o.easing); - elem.queue(function() { - if ( hide ) { - elem.hide(); - } - - done(); - }); + elem.queue(done); $.effects.unshift( elem, queuelen, anims + 1 ); }); diff --git a/ui/effect-shake.js b/ui/effect-shake.js index 5857305a641..8e6e3f50c24 100644 --- a/ui/effect-shake.js +++ b/ui/effect-shake.js @@ -43,9 +43,9 @@ return $.effects.define( "shake", function( o, done ) { animation1 = {}, animation2 = {}, - queuelen = el.queue().length, + queuelen = el.queue().length; - placeholder = $.effects.createPlaceholder( el ); + $.effects.createPlaceholder( el ); // Animation animation[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance; @@ -63,16 +63,7 @@ return $.effects.define( "shake", function( o, done ) { el .animate( animation1, speed, o.easing ) .animate( animation, speed / 2, o.easing ) - .queue(function() { - - $.effects.cleanUpPlaceholder( placeholder, el ); - - if ( o.mode === "hide" ) { - el.hide(); - } - - done(); - }); + .queue(done); $.effects.unshift( el, queuelen, anims + 1 ); }); diff --git a/ui/effect-size.js b/ui/effect-size.js index 331187d7e6d..bd2d84c3ccf 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -31,7 +31,7 @@ return $.effects.define( "size", function( o, done ) { // Create element - var baseline, factor, temp, + var baseline, factor, temp, original, from, el = $( this ), // Copy for children @@ -52,17 +52,17 @@ return $.effects.define( "size", function( o, done ) { outerHeight: 0, outerWidth: 0 }, + to = o.to || zero; - placeholder = $.effects.createPlaceholder( el ), + $.effects.createPlaceholder( el ); - original = { - height: el.height(), - width: el.width(), - outerHeight: el.outerHeight(), - outerWidth: el.outerWidth() - }, - from = o.from || original, - to = o.to || zero; + original = { + height: el.height(), + width: el.width(), + outerHeight: el.outerHeight(), + outerWidth: el.outerWidth() + }; + from = o.from || original; if ( mode === "show" ) { temp = from; @@ -134,6 +134,7 @@ return $.effects.define( "size", function( o, done ) { outerHeight: child.outerHeight(), outerWidth: child.outerWidth() }; + if (restore) { $.effects.saveStyle( child ); } @@ -184,23 +185,18 @@ return $.effects.define( "size", function( o, done ) { var offset = el.offset(); - if ( restore ) { - $.effects.cleanUpPlaceholder( placeholder, el ); - } - if ( to.opacity === 0 ) { el.css( "opacity", from.opacity ); } - if ( mode === "hide" ) { - el.hide(); - } if ( !restore ) { - $.effects.removePlaceholder( placeholder ); + el.css( "position", position === "static" ? "relative" : position ); - el.css("position", position === "static" ? "relative" : position ); + el.offset( offset ); - el.offset(offset); + // Need to save style here so that automatic style restoration + // doesn't restore to the original styles from before the animation. + $.effects.saveStyle( el ); } done(); diff --git a/ui/effect-slide.js b/ui/effect-slide.js index bfb5fec3a7e..eb24547c780 100644 --- a/ui/effect-slide.js +++ b/ui/effect-slide.js @@ -29,7 +29,8 @@ }(function( $ ) { return $.effects.define( "slide", "show", function( o, done ) { - var el = $( this ), + var startClip, startRef, + el = $( this ), map = { up: [ "bottom", "top" ], down: [ "top", "bottom" ], @@ -41,10 +42,12 @@ return $.effects.define( "slide", "show", function( o, done ) { ref = ( direction === "up" || direction === "down" ) ? "top" : "left", positiveMotion = ( direction === "up" || direction === "left" ), distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ), - animation = {}, - placeholder = $.effects.createPlaceholder( el ), - startClip = el.cssClip(), - startRef = el.position()[ ref ]; + animation = {}; + + $.effects.createPlaceholder( el ); + + startClip = el.cssClip(); + startRef = el.position()[ ref ]; // define hide animation animation[ ref ] = ( positiveMotion ? -1 : 1 ) * distance + startRef; @@ -64,15 +67,7 @@ return $.effects.define( "slide", "show", function( o, done ) { queue: false, duration: o.duration, easing: o.easing, - complete: function() { - $.effects.cleanUpPlaceholder( placeholder, el ); - - if ( mode === "hide" ) { - el.hide(); - } - - done(); - } + complete: done }); }); diff --git a/ui/effect.js b/ui/effect.js index 318fe9f9ed8..787768471ee 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1169,7 +1169,8 @@ $.extend( $.effects, { "float": element.css( "float" ) }) .outerWidth( element.outerWidth() ) - .outerHeight( element.outerHeight() ); + .outerHeight( element.outerHeight() ) + .addClass( "ui-effects-placeholder" ); } element.css({ @@ -1178,20 +1179,26 @@ $.extend( $.effects, { top: position.top }); + element.data( dataSpace + "placeholder", placeholder ); + return placeholder; }, - removePlaceholder: function( placeholder ) { + removePlaceholder: function( element ) { + var dataKey = dataSpace + "placeholder", + placeholder = element.data( dataKey ); + if ( placeholder ) { placeholder.remove(); + element.removeData( dataKey ); } }, // removes a placeholder if it exists and restores // properties that were modified during placeholder creation - cleanUpPlaceholder: function( placeholder, el ) { - $.effects.restoreStyle( el ); - $.effects.removePlaceholder( placeholder ); + cleanUpPlaceholder: function( element ) { + $.effects.restoreStyle( element ); + $.effects.removePlaceholder( element ); }, setTransition: function( element, list, factor, value ) { @@ -1289,6 +1296,10 @@ $.fn.extend({ var args = _normalizeArguments.apply( this, arguments ), effectMethod = $.effects.effect[ args.effect ], defaultMode = effectMethod.mode, + queue = args.queue, + queueName = queue || "fx", + complete = args.complete, + mode = args.mode, modes = [], prefilter = function( next ) { var el = $( this ), @@ -1312,11 +1323,7 @@ $.fn.extend({ if ( $.isFunction( next ) ) { next(); } - }, - queue = args.queue, - queueName = queue || "fx", - complete = args.complete, - mode = args.mode; + }; if ( $.fx.off || !effectMethod ) { // delegate to the original method (e.g., .show()) if possible @@ -1334,10 +1341,21 @@ $.fn.extend({ function run( next ) { var elem = $( this ); + function cleanup() { + $.effects.cleanUpPlaceholder( elem ); + + if ( args.mode === "hide" ) { + elem.hide(); + } + + done(); + } + function done() { if ( $.isFunction( complete ) ) { - complete.call( elem[0] ); + complete.call( elem[ 0 ] ); } + if ( $.isFunction( next ) ) { next(); } @@ -1361,7 +1379,7 @@ $.fn.extend({ elem[ mode ](); done(); } else { - effectMethod.call( elem[ 0 ], args, done ); + effectMethod.call( elem[ 0 ], args, cleanup ); } } } From 64b8ab85f16e1d1d3bab10a74ac079e961dc3a81 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Mon, 17 Nov 2014 15:09:32 -0500 Subject: [PATCH 31/40] Effects Rewrite: Style cleanup in most files --- ui/effect-blind.js | 14 ++++++-------- ui/effect-bounce.js | 2 +- ui/effect-clip.js | 3 +-- ui/effect-fold.js | 12 ++++-------- ui/effect-highlight.js | 5 ++--- ui/effect-pulsate.js | 4 ++-- ui/effect-shake.js | 6 +++--- ui/effect-size.js | 2 +- 8 files changed, 20 insertions(+), 28 deletions(-) diff --git a/ui/effect-blind.js b/ui/effect-blind.js index 832028ce0cf..359e2c3c5e3 100644 --- a/ui/effect-blind.js +++ b/ui/effect-blind.js @@ -29,9 +29,7 @@ }(function( $ ) { return $.effects.define( "blind", "hide", function( o, done ) { - var start, placeholder, - animate = {}, - map = { + var map = { up: [ "bottom", "top" ], vertical: [ "bottom", "top" ], down: [ "top", "bottom" ], @@ -40,16 +38,16 @@ return $.effects.define( "blind", "hide", function( o, done ) { right: [ "left", "right" ] }, el = $( this ), - show = o.mode === "show", - direction = o.direction || "up"; + direction = o.direction || "up", + start = el.cssClip(), + animate = { clip: $.extend( {}, start ) }, + placeholder = $.effects.createPlaceholder( el ); - start = el.cssClip(); - animate.clip = el.cssClip(); animate.clip[ map[ direction ][ 0 ] ] = animate.clip[ map[ direction ][ 1 ] ]; placeholder = $.effects.createPlaceholder( el ); - if ( show ) { + if ( o.mode === "show" ) { el.cssClip( animate.clip ); if ( placeholder ) { placeholder.css( $.effects.clipToBox( animate ) ); diff --git a/ui/effect-bounce.js b/ui/effect-bounce.js index 182f496fe80..30a0234dca7 100644 --- a/ui/effect-bounce.js +++ b/ui/effect-bounce.js @@ -98,7 +98,7 @@ return $.effects.define( "bounce", function( o, done ) { el.animate( upAnim, speed, easing ); } - el.queue(done); + el.queue( done ); $.effects.unshift( el, queuelen, anims + 1 ); }); diff --git a/ui/effect-clip.js b/ui/effect-clip.js index 36420cd52fb..4ecfbdfea2d 100644 --- a/ui/effect-clip.js +++ b/ui/effect-clip.js @@ -32,7 +32,6 @@ return $.effects.define( "clip", "hide", function( o, done ) { var start, animate = {}, el = $( this ), - show = o.mode === "show", direction = o.direction || "vertical", both = direction === "both", horizontal = both || direction === "horizontal", @@ -48,7 +47,7 @@ return $.effects.define( "clip", "hide", function( o, done ) { $.effects.createPlaceholder( el ); - if ( show ) { + if ( o.mode === "show" ) { el.cssClip( animate.clip ); animate.clip = start; } diff --git a/ui/effect-fold.js b/ui/effect-fold.js index a9fe51d9312..35d8f497fb6 100644 --- a/ui/effect-fold.js +++ b/ui/effect-fold.js @@ -44,14 +44,10 @@ return $.effects.define( "fold", "hide", function( o, done ) { placeholder = $.effects.createPlaceholder( el ), start = el.cssClip(), - animation1 = { - clip: el.cssClip() - }, - animation2 = { - clip: el.cssClip() - }, + animation1 = { clip: $.extend( {}, start ) }, + animation2 = { clip: $.extend( {}, start ) }, - distance = [ start[ref[0]], start[ref[1]] ], + distance = [ start[ ref[ 0 ] ], start[ ref[ 1 ] ] ], queuelen = el.queue().length; @@ -85,7 +81,7 @@ return $.effects.define( "fold", "hide", function( o, done ) { }) .animate( animation1, duration, o.easing ) .animate( animation2, duration, o.easing ) - .queue(done); + .queue( done ); $.effects.unshift( el, queuelen, 4 ); }); diff --git a/ui/effect-highlight.js b/ui/effect-highlight.js index 992ca55e983..8ac88c7af10 100644 --- a/ui/effect-highlight.js +++ b/ui/effect-highlight.js @@ -30,12 +30,11 @@ return $.effects.define( "highlight", "show", function( o, done ) { var elem = $( this ), - mode = o.mode, animation = { - backgroundColor: elem.css("backgroundColor") + backgroundColor: elem.css( "backgroundColor" ) }; - if ( mode === "hide" ) { + if ( o.mode === "hide" ) { animation.opacity = 0; } diff --git a/ui/effect-pulsate.js b/ui/effect-pulsate.js index 71f31989f6c..19ffc4f8536 100644 --- a/ui/effect-pulsate.js +++ b/ui/effect-pulsate.js @@ -35,7 +35,7 @@ return $.effects.define( "pulsate", "show", function( o, done ) { hide = mode === "hide", showhide = ( show || hide ), - // showing or hiding leaves of the "last" animation + // showing or hiding leaves off the "last" animation anims = ( ( o.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ), duration = o.duration / anims, animateTo = 0, @@ -55,7 +55,7 @@ return $.effects.define( "pulsate", "show", function( o, done ) { elem.animate( { opacity: animateTo }, duration, o.easing); - elem.queue(done); + elem.queue( done ); $.effects.unshift( elem, queuelen, anims + 1 ); }); diff --git a/ui/effect-shake.js b/ui/effect-shake.js index 8e6e3f50c24..f426480796a 100644 --- a/ui/effect-shake.js +++ b/ui/effect-shake.js @@ -37,8 +37,8 @@ return $.effects.define( "shake", function( o, done ) { times = o.times || 3, anims = times * 2 + 1, speed = Math.round( o.duration / anims ), - ref = (direction === "up" || direction === "down") ? "top" : "left", - positiveMotion = (direction === "up" || direction === "left"), + ref = ( direction === "up" || direction === "down" ) ? "top" : "left", + positiveMotion = ( direction === "up" || direction === "left" ), animation = {}, animation1 = {}, animation2 = {}, @@ -63,7 +63,7 @@ return $.effects.define( "shake", function( o, done ) { el .animate( animation1, speed, o.easing ) .animate( animation, speed / 2, o.easing ) - .queue(done); + .queue( done ); $.effects.unshift( el, queuelen, anims + 1 ); }); diff --git a/ui/effect-size.js b/ui/effect-size.js index bd2d84c3ccf..be8cefb158c 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -135,7 +135,7 @@ return $.effects.define( "size", function( o, done ) { outerWidth: child.outerWidth() }; - if (restore) { + if ( restore ) { $.effects.saveStyle( child ); } From 08544b489e36b73de606e13b204151c1c6e7d224 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Mon, 17 Nov 2014 22:21:03 -0500 Subject: [PATCH 32/40] Effects Rewrite: Fix toggle behavior of fade effect --- demos/effect/hide.html | 2 ++ demos/effect/show.html | 2 ++ demos/effect/toggle.html | 2 ++ tests/unit/effects/effects_core.js | 46 +++++++++++++++++++++++------- ui/effect-fade.js | 20 +++++++------ ui/effect.js | 6 ++-- 6 files changed, 56 insertions(+), 22 deletions(-) diff --git a/demos/effect/hide.html b/demos/effect/hide.html index 6c9948aabb6..b42aeafe21f 100644 --- a/demos/effect/hide.html +++ b/demos/effect/hide.html @@ -11,6 +11,7 @@ + @@ -77,6 +78,7 @@

Hide

+ diff --git a/demos/effect/show.html b/demos/effect/show.html index 445db04b934..3a325232c6f 100644 --- a/demos/effect/show.html +++ b/demos/effect/show.html @@ -11,6 +11,7 @@ + @@ -79,6 +80,7 @@

Show

+ diff --git a/demos/effect/toggle.html b/demos/effect/toggle.html index 1a2cf0a1b35..d7482a35803 100644 --- a/demos/effect/toggle.html +++ b/demos/effect/toggle.html @@ -11,6 +11,7 @@ + @@ -85,6 +86,7 @@

Toggle

+ diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index f290611ec2f..63f7a9309c2 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -247,7 +247,7 @@ $.each( $.effects.effect, function( effect ) { return; } asyncTest( "show/hide", function() { - expect( 10 ); + expect( 12 ); var hidden = $( "div.hidden" ), count = 0, test = 0; @@ -266,16 +266,40 @@ $.each( $.effects.effect, function( effect ) { }; } - hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() { - equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" + effect + "\", time)" ); - ok( !$( ".ui-effects-placeholder" ).length, "No placeholder remains after .show(\"" + effect + "\", time)" ); - })).queue( queueTest() ).hide( effect, minDuration, queueTest(function() { - equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" + effect + "\", time)" ); - ok( !$( ".ui-effects-placeholder" ).length, "No placeholder remains after .hide(\"" + effect + "\", time)" ); - })).queue( queueTest(function() { - deepEqual( hidden.queue(), [ "inprogress" ], "Only the inprogress sentinel remains"); - start(); - })); + function duringTest( fn ) { + return function( next ) { + setTimeout( fn ); + next(); + }; + } + + hidden + .queue( queueTest() ) + .queue( duringTest( function() { + ok( effect === "explode" || hidden.is( ":animated" ), + "Hidden is seen as animated during .show(\"" + effect + "\", time)" ); + }) ) + .show( effect, minDuration, queueTest(function() { + equal( hidden.css( "display" ), "block", + "Hidden is shown after .show(\"" + effect + "\", time)" ); + ok( !$( ".ui-effects-placeholder" ).length, + "No placeholder remains after .show(\"" + effect + "\", time)" ); + }) ) + .queue( queueTest() ) + .queue( duringTest( function() { + ok( effect === "explode" || hidden.is( ":animated" ), + "Hidden is seen as animated during .hide(\"" + effect + "\", time)" ); + }) ) + .hide( effect, minDuration, queueTest(function() { + equal( hidden.css( "display" ), "none", + "Back to hidden after .hide(\"" + effect + "\", time)" ); + ok( !$( ".ui-effects-placeholder" ).length, + "No placeholder remains after .hide(\"" + effect + "\", time)" ); + }) ) + .queue( queueTest(function() { + deepEqual( hidden.queue(), [ "inprogress" ], "Only the inprogress sentinel remains" ); + start(); + }) ); }); asyncTest( "relative width & height - properties are preserved", function() { diff --git a/ui/effect-fade.js b/ui/effect-fade.js index bb94eee2221..c436a837c54 100644 --- a/ui/effect-fade.js +++ b/ui/effect-fade.js @@ -29,14 +29,18 @@ }(function( $ ) { return $.effects.define( "fade", "toggle", function( o, done ) { - $( this ).animate({ - opacity: o.mode - }, { - queue: false, - duration: o.duration, - easing: o.easing, - complete: done - }); + var show = o.mode === "show"; + + $( this ) + .css( "opacity", show ? 0 : 1 ) + .animate({ + opacity: show ? 1 : 0 + }, { + queue: false, + duration: o.duration, + easing: o.easing, + complete: done + }); }); })); diff --git a/ui/effect.js b/ui/effect.js index 787768471ee..206ce4b9533 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1194,9 +1194,9 @@ $.extend( $.effects, { } }, - // removes a placeholder if it exists and restores + // Removes a placeholder if it exists and restores // properties that were modified during placeholder creation - cleanUpPlaceholder: function( element ) { + cleanUp: function( element ) { $.effects.restoreStyle( element ); $.effects.removePlaceholder( element ); }, @@ -1342,7 +1342,7 @@ $.fn.extend({ var elem = $( this ); function cleanup() { - $.effects.cleanUpPlaceholder( elem ); + $.effects.cleanUp( elem ); if ( args.mode === "hide" ) { elem.hide(); From f03b93823045c84b4fbd35f4b6b9d521c21d8348 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Mon, 17 Nov 2014 19:24:59 -0800 Subject: [PATCH 33/40] Effects Rewrite: Fix style nits --- tests/unit/effects/effects_core.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index 63f7a9309c2..f93c2ce07e3 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -212,18 +212,18 @@ test( "createPlaceholder: preserves layout effecting properties", function() { expect( 7 ); var position = 5, - element = $( ".relative" ).css({ - top: position, - left: position - }), - before = { - offset: element.offset(), - outerWidth: element.outerWidth( true ), - outerHeight: element.outerHeight( true ), - "float": element.css( "float" ), - position: element.position() - }, - placeholder = $.effects.createPlaceholder( element ); + element = $( ".relative" ).css({ + top: position, + left: position + }), + before = { + offset: element.offset(), + outerWidth: element.outerWidth( true ), + outerHeight: element.outerHeight( true ), + "float": element.css( "float" ), + position: element.position() + }, + placeholder = $.effects.createPlaceholder( element ); // Placeholders are only placed to preserve the effect on layout. Considering // top and left do not change layout, they are not preserved, which makes some From d1b41325996a0fd621d4572a12d60e6dfcac841c Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Tue, 18 Nov 2014 11:26:52 -0800 Subject: [PATCH 34/40] Effects Rewrite: ensure all effects are :animated detectable --- tests/unit/effects/effects_core.js | 4 ++-- ui/effect.js | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index f93c2ce07e3..f04e9b915f3 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -276,7 +276,7 @@ $.each( $.effects.effect, function( effect ) { hidden .queue( queueTest() ) .queue( duringTest( function() { - ok( effect === "explode" || hidden.is( ":animated" ), + ok( hidden.is( ":animated" ), "Hidden is seen as animated during .show(\"" + effect + "\", time)" ); }) ) .show( effect, minDuration, queueTest(function() { @@ -287,7 +287,7 @@ $.each( $.effects.effect, function( effect ) { }) ) .queue( queueTest() ) .queue( duringTest( function() { - ok( effect === "explode" || hidden.is( ":animated" ), + ok( hidden.is( ":animated" ), "Hidden is seen as animated during .hide(\"" + effect + "\", time)" ); }) ) .hide( effect, minDuration, queueTest(function() { diff --git a/ui/effect.js b/ui/effect.js index 206ce4b9533..daac585f9a4 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -27,6 +27,7 @@ var dataSpace = "ui-effects-", dataSpaceStyle = "ui-effects-style", + dataSpaceAnimated = "ui-effects-animated", // Create a local jQuery because jQuery Color relies on it and the // global may not exist with AMD and a custom build (#10199) @@ -909,6 +910,14 @@ $.fn.extend({ (function() { +if ( $.expr && $.expr.filters && $.expr.filters.animated ) { + $.expr.filters.animated = (function( orig ) { + return function( elem ) { + return !!$( elem ).data( dataSpaceAnimated ) || orig( elem ); + }; + })( $.expr.filters.animated ); +} + if ( $.uiBackCompat !== false ) { $.extend( $.effects, { // Saves a set of properties in a data storage @@ -1305,6 +1314,9 @@ $.fn.extend({ var el = $( this ), normalizedMode = $.effects.mode( el, mode ) || defaultMode; + // Sentinel for duck-punching the :animated psuedo-selector + el.data( dataSpaceAnimated, true ); + // save effect mode for later use, // we can't just call $.effects.mode again later, // as the .show() below destroys the initial state @@ -1342,6 +1354,8 @@ $.fn.extend({ var elem = $( this ); function cleanup() { + elem.removeData( dataSpaceAnimated ); + $.effects.cleanUp( elem ); if ( args.mode === "hide" ) { From 40e9a824ac49b3863136771d35f159efdffdc624 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Tue, 25 Nov 2014 18:27:37 -0500 Subject: [PATCH 35/40] Effects Rewrite: Style Changes From Code Review --- tests/unit/effects/effects_core.js | 14 +++++------ ui/effect-blind.js | 2 -- ui/effect-fold.js | 3 +-- ui/effect-pulsate.js | 8 +++---- ui/effect-scale.js | 2 +- ui/effect-size.js | 2 +- ui/effect-slide.js | 6 ++--- ui/effect.js | 37 +++++++++++++++--------------- 8 files changed, 36 insertions(+), 38 deletions(-) diff --git a/tests/unit/effects/effects_core.js b/tests/unit/effects/effects_core.js index f04e9b915f3..0c4e5574fb9 100644 --- a/tests/unit/effects/effects_core.js +++ b/tests/unit/effects/effects_core.js @@ -202,13 +202,13 @@ asyncTest( "animateClass: css and class changes during animation are not lost (# test( "createPlaceholder: only created for static or relative elements", function() { expect( 4 ); - ok( $.effects.createPlaceholder( $( ".relative" ) ).length ); - ok( $.effects.createPlaceholder( $( ".static" ) ).length ); - ok( !$.effects.createPlaceholder( $( ".absolute" ) ) ); - ok( !$.effects.createPlaceholder( $( ".fixed" ) ) ); + ok( $.effects.createPlaceholder( $( ".relative" ) ).length, "placeholder created for relative element" ); + ok( $.effects.createPlaceholder( $( ".static" ) ).length, "placeholder created for static element" ); + ok( !$.effects.createPlaceholder( $( ".absolute" ) ), "placeholder not created for absolute element" ); + ok( !$.effects.createPlaceholder( $( ".fixed" ) ), "placeholder not created for fixed element" ); }); -test( "createPlaceholder: preserves layout effecting properties", function() { +test( "createPlaceholder: preserves layout affecting properties", function() { expect( 7 ); var position = 5, @@ -275,7 +275,7 @@ $.each( $.effects.effect, function( effect ) { hidden .queue( queueTest() ) - .queue( duringTest( function() { + .queue( duringTest(function() { ok( hidden.is( ":animated" ), "Hidden is seen as animated during .show(\"" + effect + "\", time)" ); }) ) @@ -286,7 +286,7 @@ $.each( $.effects.effect, function( effect ) { "No placeholder remains after .show(\"" + effect + "\", time)" ); }) ) .queue( queueTest() ) - .queue( duringTest( function() { + .queue( duringTest(function() { ok( hidden.is( ":animated" ), "Hidden is seen as animated during .hide(\"" + effect + "\", time)" ); }) ) diff --git a/ui/effect-blind.js b/ui/effect-blind.js index 359e2c3c5e3..e2a8a9591f6 100644 --- a/ui/effect-blind.js +++ b/ui/effect-blind.js @@ -45,8 +45,6 @@ return $.effects.define( "blind", "hide", function( o, done ) { animate.clip[ map[ direction ][ 0 ] ] = animate.clip[ map[ direction ][ 1 ] ]; - placeholder = $.effects.createPlaceholder( el ); - if ( o.mode === "show" ) { el.cssClip( animate.clip ); if ( placeholder ) { diff --git a/ui/effect-fold.js b/ui/effect-fold.js index 35d8f497fb6..4603981562d 100644 --- a/ui/effect-fold.js +++ b/ui/effect-fold.js @@ -51,7 +51,6 @@ return $.effects.define( "fold", "hide", function( o, done ) { queuelen = el.queue().length; - // define animations if ( percent ) { size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ hide ? 0 : 1 ]; } @@ -70,7 +69,7 @@ return $.effects.define( "fold", "hide", function( o, done ) { // Animate el - .queue(function(next) { + .queue(function( next ) { if ( placeholder ) { placeholder .animate( $.effects.clipToBox( animation1 ), duration, o.easing ) diff --git a/ui/effect-pulsate.js b/ui/effect-pulsate.js index 19ffc4f8536..5f1241abc6a 100644 --- a/ui/effect-pulsate.js +++ b/ui/effect-pulsate.js @@ -33,9 +33,9 @@ return $.effects.define( "pulsate", "show", function( o, done ) { mode = o.mode, show = mode === "show", hide = mode === "hide", - showhide = ( show || hide ), + showhide = show || hide, - // showing or hiding leaves off the "last" animation + // Showing or hiding leaves off the "last" animation anims = ( ( o.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ), duration = o.duration / anims, animateTo = 0, @@ -47,13 +47,13 @@ return $.effects.define( "pulsate", "show", function( o, done ) { animateTo = 1; } - // anims - 1 opacity "toggles" + // Anims - 1 opacity "toggles" for ( ; i < anims; i++ ) { elem.animate( { opacity: animateTo }, duration, o.easing ); animateTo = 1 - animateTo; } - elem.animate( { opacity: animateTo }, duration, o.easing); + elem.animate( { opacity: animateTo }, duration, o.easing ); elem.queue( done ); diff --git a/ui/effect-scale.js b/ui/effect-scale.js index 77386843e1f..028978367b6 100644 --- a/ui/effect-scale.js +++ b/ui/effect-scale.js @@ -35,7 +35,7 @@ return $.effects.define( "scale", function( o, done ) { var el = $( this ), mode = o.mode, - // this copies the "scale" option, which is normalized in $.effects.effect.size + // This copies the "scale" option, which is normalized in $.effects.effect.size // and the "fade" option, which isn't documented, but supports $.effects.effect.puff options = $.extend( true, {}, o ), diff --git a/ui/effect-size.js b/ui/effect-size.js index be8cefb158c..ba74aa93efe 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -124,7 +124,7 @@ return $.effects.define( "size", function( o, done ) { vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat( cProps ); hProps = hProps.concat([ "marginLeft", "marginRight" ]); - // only animate children with width attributes specified + // Only animate children with width attributes specified // TODO: is this right? should we include anything with css width specified as well el.find( "*[width]" ).each( function() { var child = $( this ), diff --git a/ui/effect-slide.js b/ui/effect-slide.js index eb24547c780..58fd150f526 100644 --- a/ui/effect-slide.js +++ b/ui/effect-slide.js @@ -49,12 +49,12 @@ return $.effects.define( "slide", "show", function( o, done ) { startClip = el.cssClip(); startRef = el.position()[ ref ]; - // define hide animation + // Define hide animation animation[ ref ] = ( positiveMotion ? -1 : 1 ) * distance + startRef; animation.clip = el.cssClip(); animation.clip[ map[ direction ][ 1 ] ] = animation.clip[ map[ direction ][ 0 ] ]; - // reverse the animation if we're showing + // Reverse the animation if we're showing if ( mode === "show" ) { el.cssClip( animation.clip ); el.css( ref, animation[ ref ] ); @@ -62,7 +62,7 @@ return $.effects.define( "slide", "show", function( o, done ) { animation[ ref ] = startRef; } - // actually animate + // Actually animate el.animate( animation, { queue: false, duration: o.duration, diff --git a/ui/effect.js b/ui/effect.js index daac585f9a4..66ad36e128d 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1074,14 +1074,14 @@ $.extend( $.effects, { }, // Injects recently queued functions to be first in line (after "inprogress") - unshift: function( el, queueLength, count ) { - var queue = el.queue(); + unshift: function( element, queueLength, count ) { + var queue = element.queue(); if ( queueLength > 1 ) { queue.splice.apply( queue, [ 1, 0 ].concat( queue.splice( queueLength, count ) ) ); } - el.dequeue(); + element.dequeue(); }, saveStyle: function( element ) { @@ -1093,8 +1093,8 @@ $.extend( $.effects, { element.removeData( dataSpaceStyle ); }, - mode: function( el, mode ) { - var hidden = el.is( ":hidden" ); + mode: function( element, mode ) { + var hidden = element.is( ":hidden" ); if ( mode === "toggle" ) { mode = hidden ? "show" : "hide"; @@ -1144,7 +1144,6 @@ $.extend( $.effects, { // Creates a placeholder element so that the original element can be made absolute // also stores all modified properties on the element so they can be restored later createPlaceholder: function( element ) { - var placeholder, cssPosition = element.css( "position" ), position = element.position(); @@ -1166,11 +1165,13 @@ $.extend( $.effects, { cssPosition = "absolute"; placeholder = $( "<" + element[ 0 ].nodeName + ">" ).insertAfter( element ).css({ - // convert inline to inline block to account for inline elements + + // Convert inline to inline block to account for inline elements // that turn to inline block based on content (like img) display: /^(inline|ruby)/.test( element.css( "display" ) ) ? "inline-block" : "block", visibility: "hidden", - // margins need to be set to account for margin collapse + + // Margins need to be set to account for margin collapse marginTop: element.css( "marginTop" ), marginBottom: element.css( "marginBottom" ), marginLeft: element.css( "marginLeft" ), @@ -1180,6 +1181,8 @@ $.extend( $.effects, { .outerWidth( element.outerWidth() ) .outerHeight( element.outerHeight() ) .addClass( "ui-effects-placeholder" ); + + element.data( dataSpace + "placeholder", placeholder ); } element.css({ @@ -1188,8 +1191,6 @@ $.extend( $.effects, { top: position.top }); - element.data( dataSpace + "placeholder", placeholder ); - return placeholder; }, @@ -1317,12 +1318,12 @@ $.fn.extend({ // Sentinel for duck-punching the :animated psuedo-selector el.data( dataSpaceAnimated, true ); - // save effect mode for later use, + // Save effect mode for later use, // we can't just call $.effects.mode again later, // as the .show() below destroys the initial state modes.push( normalizedMode ); - // see $.uiBackCompat inside of run() for removal of defaultMode in 1.13 + // See $.uiBackCompat inside of run() for removal of defaultMode in 1.13 if ( defaultMode && ( normalizedMode === "show" || ( normalizedMode === defaultMode && normalizedMode === "hide" ) ) ) { el.show(); @@ -1375,13 +1376,14 @@ $.fn.extend({ } } - // override mode option on a per element basis, - // as toggle can be show, or hide depending on element state + // Override mode option on a per element basis, + // as toggle can be either show or hide depending on element state args.mode = modes.shift(); if ( $.uiBackCompat !== false && !defaultMode ) { if ( elem.is( ":hidden" ) ? mode === "hide" : mode === "show" ) { - // call the core method to track "olddisplay" properly + + // Call the core method to track "olddisplay" properly elem[ mode ](); done(); } else { @@ -1389,7 +1391,8 @@ $.fn.extend({ } } else { if ( args.mode === "none" ) { - // call the core method to track "olddisplay" properly + + // Call the core method to track "olddisplay" properly elem[ mode ](); done(); } else { @@ -1442,7 +1445,6 @@ $.fn.extend({ }; })( $.fn.toggle ), - // helper functions cssUnit: function(key) { var style = this.css( key ), val = []; @@ -1455,7 +1457,6 @@ $.fn.extend({ return val; }, - // getter/setter for an object representing clip values cssClip: function( clipObj ) { return clipObj ? this.css( "clip", "rect(" + clipObj.top + "px " + clipObj.right + "px " + clipObj.bottom + "px " + clipObj.left + "px)" ) : From 1cd8fb8d0992e88a896c1aee40da88ded5bda165 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Wed, 26 Nov 2014 17:06:15 -0500 Subject: [PATCH 36/40] Effects Rewrite: consolidate scaledDimensions --- demos/effect/default.html | 2 +- demos/effect/hide.html | 2 +- demos/effect/show.html | 2 +- demos/effect/toggle.html | 2 +- ui/effect-scale.js | 41 +++++++++------------------------------ ui/effect-size.js | 29 ++++++--------------------- ui/effect.js | 22 +++++++++++++++++++++ 7 files changed, 41 insertions(+), 59 deletions(-) diff --git a/demos/effect/default.html b/demos/effect/default.html index aff19783f62..7a1c23baa92 100644 --- a/demos/effect/default.html +++ b/demos/effect/default.html @@ -40,7 +40,7 @@ var options = {}; // some effects have required parameters if ( selectedEffect === "scale" ) { - options = { percent: 0 }; + options = { percent: 50 }; } else if ( selectedEffect === "transfer" ) { options = { to: "#button", className: "ui-effects-transfer" }; } else if ( selectedEffect === "size" ) { diff --git a/demos/effect/hide.html b/demos/effect/hide.html index b42aeafe21f..cae5c337b58 100644 --- a/demos/effect/hide.html +++ b/demos/effect/hide.html @@ -38,7 +38,7 @@ var options = {}; // some effects have required parameters if ( selectedEffect === "scale" ) { - options = { percent: 0 }; + options = { percent: 50 }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } diff --git a/demos/effect/show.html b/demos/effect/show.html index 3a325232c6f..9b8599bdbf5 100644 --- a/demos/effect/show.html +++ b/demos/effect/show.html @@ -38,7 +38,7 @@ var options = {}; // some effects have required parameters if ( selectedEffect === "scale" ) { - options = { percent: 100 }; + options = { percent: 50 }; } else if ( selectedEffect === "size" ) { options = { to: { width: 280, height: 185 } }; } diff --git a/demos/effect/toggle.html b/demos/effect/toggle.html index d7482a35803..c626746f33d 100644 --- a/demos/effect/toggle.html +++ b/demos/effect/toggle.html @@ -53,7 +53,7 @@ var options = {}; // some effects have required parameters if ( selectedEffect === "scale" ) { - options = { percent: 0 }; + options = { percent: 50 }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } diff --git a/ui/effect-scale.js b/ui/effect-scale.js index 028978367b6..48ae1d85364 100644 --- a/ui/effect-scale.js +++ b/ui/effect-scale.js @@ -34,42 +34,19 @@ return $.effects.define( "scale", function( o, done ) { // Create element var el = $( this ), mode = o.mode, - - // This copies the "scale" option, which is normalized in $.effects.effect.size - // and the "fade" option, which isn't documented, but supports $.effects.effect.puff - options = $.extend( true, {}, o ), - percent = parseInt( o.percent, 10 ) || ( parseInt( o.percent, 10 ) === 0 ? 0 : ( mode !== "effect" ? 0 : 100 ) ), - direction = o.direction || "both", - factor = { - y: direction !== "horizontal" ? ( percent / 100 ) : 1, - x: direction !== "vertical" ? ( percent / 100 ) : 1 - }; - - options.from = { - height: el.height(), - width: el.width(), - outerHeight: el.outerHeight(), - outerWidth: el.outerWidth() - }; - options.to = { - height: options.from.height * factor.y, - width: options.from.width * factor.x, - outerHeight: options.from.outerHeight * factor.y, - outerWidth: options.from.outerWidth * factor.x - }; - // Set default origin and restore for show/hide - if ( mode !== "effect" ) { - options.origin = o.origin || [ "middle", "center" ]; - options.restore = true; + options = $.extend( true, { + from: $.effects.scaledDimensions( el ), + to: $.effects.scaledDimensions( el, percent, o.direction || "both" ), + origin: o.origin || [ "middle", "center" ] + }, o ); - // Fade option to support puff - if ( options.fade ) { - options.from.opacity = 1; - options.to.opacity = 0; - } + // Fade option to support puff + if ( o.fade ) { + options.from.opacity = 1; + options.to.opacity = 0; } $.effects.effect.size.call( this, options, done ); diff --git a/ui/effect-size.js b/ui/effect-size.js index ba74aa93efe..ee6d7be0e5b 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -31,7 +31,7 @@ return $.effects.define( "size", function( o, done ) { // Create element - var baseline, factor, temp, original, from, + var baseline, factor, temp, el = $( this ), // Copy for children @@ -41,29 +41,17 @@ return $.effects.define( "size", function( o, done ) { // Set options mode = o.mode, - restore = o.restore || mode !== "effect", + restore = mode !== "effect", scale = o.scale || "both", origin = o.origin || [ "middle", "center" ], position = el.css( "position" ), pos = el.position(), - zero = { - height: 0, - width: 0, - outerHeight: 0, - outerWidth: 0 - }, - to = o.to || zero; + original = $.effects.scaledDimensions( el ), + from = o.from || original, + to = o.to || original; $.effects.createPlaceholder( el ); - original = { - height: el.height(), - width: el.width(), - outerHeight: el.outerHeight(), - outerWidth: el.outerWidth() - }; - from = o.from || original; - if ( mode === "show" ) { temp = from; from = to; @@ -128,12 +116,7 @@ return $.effects.define( "size", function( o, done ) { // TODO: is this right? should we include anything with css width specified as well el.find( "*[width]" ).each( function() { var child = $( this ), - c_original = { - height: child.height(), - width: child.width(), - outerHeight: child.outerHeight(), - outerWidth: child.outerWidth() - }; + c_original = $.effects.scaledDimensions( child ); if ( restore ) { $.effects.saveStyle( child ); diff --git a/ui/effect.js b/ui/effect.js index 66ad36e128d..8fa0e4010b4 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1064,6 +1064,28 @@ $.extend( $.effects, { return effect; }, + scaledDimensions: function( element, percent, direction ) { + if ( percent === 0 ) { + return { + height: 0, + width: 0, + outerHeight: 0, + outerWidth: 0 + }; + } + + var x = direction !== "horizontal" ? ( ( percent || 100 ) / 100 ) : 1, + y = direction !== "vertical" ? ( ( percent || 100 ) / 100 ) : 1; + + return { + height: element.height() * y, + width: element.width() * x, + outerHeight: element.outerHeight() * y, + outerWidth: element.outerWidth() * x + }; + + }, + clipToBox: function( animation ) { return { width: animation.clip.right - animation.clip.left, From 4855481ed9c42ecae706e4165f8f771698e18c96 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Wed, 26 Nov 2014 17:11:58 -0500 Subject: [PATCH 37/40] Effects Rewrite: Style fixes --- ui/effect.js | 47 +++++++++++++++++++++++++---------------------- 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/ui/effect.js b/ui/effect.js index 8fa0e4010b4..9dbe4670893 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -1131,32 +1131,35 @@ $.extend( $.effects, { // this should be a little more flexible in the future to handle a string & hash getBaseline: function( origin, original ) { var y, x; + switch ( origin[ 0 ] ) { - case "top": - y = 0; - break; - case "middle": - y = 0.5; - break; - case "bottom": - y = 1; - break; - default: - y = origin[ 0 ] / original.height; + case "top": + y = 0; + break; + case "middle": + y = 0.5; + break; + case "bottom": + y = 1; + break; + default: + y = origin[ 0 ] / original.height; } + switch ( origin[ 1 ] ) { - case "left": - x = 0; - break; - case "center": - x = 0.5; - break; - case "right": - x = 1; - break; - default: - x = origin[ 1 ] / original.width; + case "left": + x = 0; + break; + case "center": + x = 0.5; + break; + case "right": + x = 1; + break; + default: + x = origin[ 1 ] / original.width; } + return { x: x, y: y From e9b02fe23f7a854ae24a708ad18b2eb0b63f6960 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Wed, 26 Nov 2014 18:43:20 -0500 Subject: [PATCH 38/40] Effects Rewrite: Rename el and o to element and options --- tests/visual/effects/effects.js | 2 +- ui/effect-blind.js | 22 ++++++------- ui/effect-bounce.js | 36 ++++++++++---------- ui/effect-clip.js | 20 ++++++------ ui/effect-drop.js | 38 ++++++++++----------- ui/effect-explode.js | 20 ++++++------ ui/effect-fade.js | 8 ++--- ui/effect-fold.js | 32 +++++++++--------- ui/effect-highlight.js | 18 +++++----- ui/effect-puff.js | 8 ++--- ui/effect-pulsate.js | 24 +++++++------- ui/effect-scale.js | 24 +++++++------- ui/effect-shake.js | 28 ++++++++-------- ui/effect-size.js | 58 ++++++++++++++++----------------- ui/effect-slide.js | 28 ++++++++-------- 15 files changed, 183 insertions(+), 183 deletions(-) diff --git a/tests/visual/effects/effects.js b/tests/visual/effects/effects.js index 624e0b128a0..f0963a99d5b 100644 --- a/tests/visual/effects/effects.js +++ b/tests/visual/effects/effects.js @@ -57,7 +57,7 @@ effect( "#highlight", "highlight", {} ); effect( "#pulsate", "pulsate", { times: 2 } ); -effect( "#puff", "puff", { times: 2 } ); +effect( "#puff", "puff", {} ); effect( "#scale", "scale", {} ); effect( "#size", "size", {} ); $( "#sizeToggle" ).click(function() { diff --git a/ui/effect-blind.js b/ui/effect-blind.js index e2a8a9591f6..eb96cca6edc 100644 --- a/ui/effect-blind.js +++ b/ui/effect-blind.js @@ -28,7 +28,7 @@ } }(function( $ ) { -return $.effects.define( "blind", "hide", function( o, done ) { +return $.effects.define( "blind", "hide", function( options, done ) { var map = { up: [ "bottom", "top" ], vertical: [ "bottom", "top" ], @@ -37,16 +37,16 @@ return $.effects.define( "blind", "hide", function( o, done ) { horizontal: [ "right", "left" ], right: [ "left", "right" ] }, - el = $( this ), - direction = o.direction || "up", - start = el.cssClip(), + element = $( this ), + direction = options.direction || "up", + start = element.cssClip(), animate = { clip: $.extend( {}, start ) }, - placeholder = $.effects.createPlaceholder( el ); + placeholder = $.effects.createPlaceholder( element ); animate.clip[ map[ direction ][ 0 ] ] = animate.clip[ map[ direction ][ 1 ] ]; - if ( o.mode === "show" ) { - el.cssClip( animate.clip ); + if ( options.mode === "show" ) { + element.cssClip( animate.clip ); if ( placeholder ) { placeholder.css( $.effects.clipToBox( animate ) ); } @@ -55,13 +55,13 @@ return $.effects.define( "blind", "hide", function( o, done ) { } if ( placeholder ) { - placeholder.animate( $.effects.clipToBox( animate ), o.duration, o.easing ); + placeholder.animate( $.effects.clipToBox( animate ), options.duration, options.easing ); } - el.animate( animate, { + element.animate( animate, { queue: false, - duration: o.duration, - easing: o.easing, + duration: options.duration, + easing: options.easing, complete: done }); }); diff --git a/ui/effect-bounce.js b/ui/effect-bounce.js index 30a0234dca7..d599c40b5d7 100644 --- a/ui/effect-bounce.js +++ b/ui/effect-bounce.js @@ -28,37 +28,37 @@ } }(function( $ ) { -return $.effects.define( "bounce", function( o, done ) { +return $.effects.define( "bounce", function( options, done ) { var upAnim, downAnim, refValue, - el = $( this ), + element = $( this ), // defaults: - mode = o.mode, + mode = options.mode, hide = mode === "hide", show = mode === "show", - direction = o.direction || "up", - distance = o.distance, - times = o.times || 5, + direction = options.direction || "up", + distance = options.distance, + times = options.times || 5, // number of internal animations anims = times * 2 + ( show || hide ? 1 : 0 ), - speed = o.duration / anims, - easing = o.easing, + speed = options.duration / anims, + easing = options.easing, // utility: ref = ( direction === "up" || direction === "down" ) ? "top" : "left", motion = ( direction === "up" || direction === "left" ), i = 0, - queuelen = el.queue().length; + queuelen = element.queue().length; - $.effects.createPlaceholder( el ); + $.effects.createPlaceholder( element ); - refValue = el.css( ref ); + refValue = element.css( ref ); // default distance for the BIGGEST bounce is the outer Distance / 3 if ( !distance ) { - distance = el[ ref === "top" ? "outerHeight" : "outerWidth" ]() / 3; + distance = element[ ref === "top" ? "outerHeight" : "outerWidth" ]() / 3; } if ( show ) { @@ -67,7 +67,8 @@ return $.effects.define( "bounce", function( o, done ) { // if we are showing, force opacity 0 and set the initial position // then do the "first" animation - el.css( "opacity", 0 ) + element + .css( "opacity", 0 ) .css( ref, motion ? -distance * 2 : distance * 2 ) .animate( downAnim, speed, easing ); } @@ -84,7 +85,8 @@ return $.effects.define( "bounce", function( o, done ) { upAnim = {}; upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance; - el.animate( upAnim, speed, easing ) + element + .animate( upAnim, speed, easing ) .animate( downAnim, speed, easing ); distance = hide ? distance * 2 : distance / 2; @@ -95,12 +97,12 @@ return $.effects.define( "bounce", function( o, done ) { upAnim = { opacity: 0 }; upAnim[ ref ] = ( motion ? "-=" : "+=" ) + distance; - el.animate( upAnim, speed, easing ); + element.animate( upAnim, speed, easing ); } - el.queue( done ); + element.queue( done ); - $.effects.unshift( el, queuelen, anims + 1 ); + $.effects.unshift( element, queuelen, anims + 1 ); }); })); diff --git a/ui/effect-clip.js b/ui/effect-clip.js index 4ecfbdfea2d..1bb3ebce293 100644 --- a/ui/effect-clip.js +++ b/ui/effect-clip.js @@ -28,16 +28,16 @@ } }(function( $ ) { -return $.effects.define( "clip", "hide", function( o, done ) { +return $.effects.define( "clip", "hide", function( options, done ) { var start, animate = {}, - el = $( this ), - direction = o.direction || "vertical", + element = $( this ), + direction = options.direction || "vertical", both = direction === "both", horizontal = both || direction === "horizontal", vertical = both || direction === "vertical"; - start = el.cssClip(); + start = element.cssClip(); animate.clip = { top: vertical ? ( start.bottom - start.top ) / 2 : start.top, right: horizontal ? ( start.right - start.left ) / 2 : start.right, @@ -45,17 +45,17 @@ return $.effects.define( "clip", "hide", function( o, done ) { left: horizontal ? ( start.right - start.left ) / 2 : start.left }; - $.effects.createPlaceholder( el ); + $.effects.createPlaceholder( element ); - if ( o.mode === "show" ) { - el.cssClip( animate.clip ); + if ( options.mode === "show" ) { + element.cssClip( animate.clip ); animate.clip = start; } - el.animate( animate, { + element.animate( animate, { queue: false, - duration: o.duration, - easing: o.easing, + duration: options.duration, + easing: options.easing, complete: done }); diff --git a/ui/effect-drop.js b/ui/effect-drop.js index 574d236efd3..a990c48e7cf 100644 --- a/ui/effect-drop.js +++ b/ui/effect-drop.js @@ -28,40 +28,38 @@ } }(function( $ ) { -return $.effects.define( "drop", "hide", function( o, done ) { +return $.effects.define( "drop", "hide", function( options, done ) { var distance, - el = $( this ), - mode = o.mode, + element = $( this ), + mode = options.mode, show = mode === "show", - direction = o.direction || "left", + direction = options.direction || "left", ref = ( direction === "up" || direction === "down" ) ? "top" : "left", - motion = ( direction === "up" || direction === "left" ) ? "pos" : "neg", + motion = ( direction === "up" || direction === "left" ) ? "-=" : "+=", + oppositeMotion = ( motion === "+=" ) ? "-=" : "+=", animation = { - opacity: show ? 1 : 0 + opacity: 0 }; - $.effects.createPlaceholder( el ); + $.effects.createPlaceholder( element ); - distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ) / 2; + distance = options.distance || element[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ) / 2; + + animation[ ref ] = motion + distance; if ( show ) { - el - .css( "opacity", 0 ) - .css( ref, ( motion === "pos" ? "-=" : "+=" ) + distance ); - } + element.css( animation ); - // Animation - animation[ ref ] = ( show ? - ( motion === "pos" ? "+=" : "-=" ) : - ( motion === "pos" ? "-=" : "+=" ) ) + - distance; + animation[ ref ] = oppositeMotion + distance; + animation.opacity = 1; + } // Animate - el.animate( animation, { + element.animate( animation, { queue: false, - duration: o.duration, - easing: o.easing, + duration: options.duration, + easing: options.easing, complete: done }); }); diff --git a/ui/effect-explode.js b/ui/effect-explode.js index 33e8fc8fc95..adb05cf5f36 100644 --- a/ui/effect-explode.js +++ b/ui/effect-explode.js @@ -28,21 +28,21 @@ } }(function( $ ) { -return $.effects.define( "explode", "hide", function( o, done ) { +return $.effects.define( "explode", "hide", function( options, done ) { var i, j, left, top, mx, my, - rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3, + rows = options.pieces ? Math.round( Math.sqrt( options.pieces ) ) : 3, cells = rows, - el = $( this ), - mode = o.mode, + element = $( this ), + mode = options.mode, show = mode === "show", // show and then visibility:hidden the element before calculating offset - offset = el.show().css( "visibility", "hidden" ).offset(), + offset = element.show().css( "visibility", "hidden" ).offset(), // width and height of a piece - width = Math.ceil( el.outerWidth() / cells ), - height = Math.ceil( el.outerHeight() / rows ), + width = Math.ceil( element.outerWidth() / cells ), + height = Math.ceil( element.outerHeight() / rows ), pieces = []; // children animate complete: @@ -64,7 +64,7 @@ return $.effects.define( "explode", "hide", function( o, done ) { // Create a clone of the now hidden main element that will be absolute positioned // within a wrapper div off the -left and -top equal to size of our pieces - el + element .clone() .appendTo( "body" ) .wrap( "
" ) @@ -91,12 +91,12 @@ return $.effects.define( "explode", "hide", function( o, done ) { left: left + ( show ? 0 : mx * width ), top: top + ( show ? 0 : my * height ), opacity: show ? 1 : 0 - }, o.duration || 500, o.easing, childComplete ); + }, options.duration || 500, options.easing, childComplete ); } } function animComplete() { - el.css({ + element.css({ visibility: "visible" }); $( pieces ).remove(); diff --git a/ui/effect-fade.js b/ui/effect-fade.js index c436a837c54..ad7c2134b83 100644 --- a/ui/effect-fade.js +++ b/ui/effect-fade.js @@ -28,8 +28,8 @@ } }(function( $ ) { -return $.effects.define( "fade", "toggle", function( o, done ) { - var show = o.mode === "show"; +return $.effects.define( "fade", "toggle", function( options, done ) { + var show = options.mode === "show"; $( this ) .css( "opacity", show ? 0 : 1 ) @@ -37,8 +37,8 @@ return $.effects.define( "fade", "toggle", function( o, done ) { opacity: show ? 1 : 0 }, { queue: false, - duration: o.duration, - easing: o.easing, + duration: options.duration, + easing: options.easing, complete: done }); }); diff --git a/ui/effect-fold.js b/ui/effect-fold.js index 4603981562d..7961ee79feb 100644 --- a/ui/effect-fold.js +++ b/ui/effect-fold.js @@ -28,28 +28,28 @@ } }(function( $ ) { -return $.effects.define( "fold", "hide", function( o, done ) { +return $.effects.define( "fold", "hide", function( options, done ) { // Create element - var el = $( this ), - mode = o.mode, + var element = $( this ), + mode = options.mode, show = mode === "show", hide = mode === "hide", - size = o.size || 15, + size = options.size || 15, percent = /([0-9]+)%/.exec( size ), - horizFirst = !!o.horizFirst, + horizFirst = !!options.horizFirst, ref = horizFirst ? [ "right", "bottom" ] : [ "bottom", "right" ], - duration = o.duration / 2, + duration = options.duration / 2, - placeholder = $.effects.createPlaceholder( el ), + placeholder = $.effects.createPlaceholder( element ), - start = el.cssClip(), + start = element.cssClip(), animation1 = { clip: $.extend( {}, start ) }, animation2 = { clip: $.extend( {}, start ) }, distance = [ start[ ref[ 0 ] ], start[ ref[ 1 ] ] ], - queuelen = el.queue().length; + queuelen = element.queue().length; if ( percent ) { size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ hide ? 0 : 1 ]; @@ -59,7 +59,7 @@ return $.effects.define( "fold", "hide", function( o, done ) { animation2.clip[ ref[ 1 ] ] = 0; if ( show ) { - el.cssClip( animation2.clip ); + element.cssClip( animation2.clip ); if ( placeholder ) { placeholder.css( $.effects.clipToBox( animation2 ) ); } @@ -68,21 +68,21 @@ return $.effects.define( "fold", "hide", function( o, done ) { } // Animate - el + element .queue(function( next ) { if ( placeholder ) { placeholder - .animate( $.effects.clipToBox( animation1 ), duration, o.easing ) - .animate( $.effects.clipToBox( animation2 ), duration, o.easing ); + .animate( $.effects.clipToBox( animation1 ), duration, options.easing ) + .animate( $.effects.clipToBox( animation2 ), duration, options.easing ); } next(); }) - .animate( animation1, duration, o.easing ) - .animate( animation2, duration, o.easing ) + .animate( animation1, duration, options.easing ) + .animate( animation2, duration, options.easing ) .queue( done ); - $.effects.unshift( el, queuelen, 4 ); + $.effects.unshift( element, queuelen, 4 ); }); })); diff --git a/ui/effect-highlight.js b/ui/effect-highlight.js index 8ac88c7af10..fb44aef9124 100644 --- a/ui/effect-highlight.js +++ b/ui/effect-highlight.js @@ -28,27 +28,27 @@ } }(function( $ ) { -return $.effects.define( "highlight", "show", function( o, done ) { - var elem = $( this ), +return $.effects.define( "highlight", "show", function( options, done ) { + var element = $( this ), animation = { - backgroundColor: elem.css( "backgroundColor" ) + backgroundColor: element.css( "backgroundColor" ) }; - if ( o.mode === "hide" ) { + if ( options.mode === "hide" ) { animation.opacity = 0; } - $.effects.saveStyle( elem ); + $.effects.saveStyle( element ); - elem + element .css({ backgroundImage: "none", - backgroundColor: o.color || "#ffff99" + backgroundColor: options.color || "#ffff99" }) .animate( animation, { queue: false, - duration: o.duration, - easing: o.easing, + duration: options.duration, + easing: options.easing, complete: done }); }); diff --git a/ui/effect-puff.js b/ui/effect-puff.js index 1b42c049778..607ca77f5a9 100644 --- a/ui/effect-puff.js +++ b/ui/effect-puff.js @@ -29,13 +29,13 @@ } }(function( $ ) { -return $.effects.define( "puff", "hide", function( o, done ) { - var options = $.extend( true, {}, o, { +return $.effects.define( "puff", "hide", function( options, done ) { + var newOptions = $.extend( true, {}, options, { fade: true, - percent: parseInt( o.percent, 10 ) || 150 + percent: parseInt( options.percent, 10 ) || 150 }); - $.effects.effect.scale.call( this, options, done ); + $.effects.effect.scale.call( this, newOptions, done ); }); })); diff --git a/ui/effect-pulsate.js b/ui/effect-pulsate.js index 5f1241abc6a..c28da9ff8ea 100644 --- a/ui/effect-pulsate.js +++ b/ui/effect-pulsate.js @@ -28,36 +28,36 @@ } }(function( $ ) { -return $.effects.define( "pulsate", "show", function( o, done ) { - var elem = $( this ), - mode = o.mode, +return $.effects.define( "pulsate", "show", function( options, done ) { + var element = $( this ), + mode = options.mode, show = mode === "show", hide = mode === "hide", showhide = show || hide, // Showing or hiding leaves off the "last" animation - anims = ( ( o.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ), - duration = o.duration / anims, + anims = ( ( options.times || 5 ) * 2 ) + ( showhide ? 1 : 0 ), + duration = options.duration / anims, animateTo = 0, i = 1, - queuelen = elem.queue().length; + queuelen = element.queue().length; - if ( show || !elem.is( ":visible" ) ) { - elem.css( "opacity", 0 ).show(); + if ( show || !element.is( ":visible" ) ) { + element.css( "opacity", 0 ).show(); animateTo = 1; } // Anims - 1 opacity "toggles" for ( ; i < anims; i++ ) { - elem.animate( { opacity: animateTo }, duration, o.easing ); + element.animate( { opacity: animateTo }, duration, options.easing ); animateTo = 1 - animateTo; } - elem.animate( { opacity: animateTo }, duration, o.easing ); + element.animate( { opacity: animateTo }, duration, options.easing ); - elem.queue( done ); + element.queue( done ); - $.effects.unshift( elem, queuelen, anims + 1 ); + $.effects.unshift( element, queuelen, anims + 1 ); }); })); diff --git a/ui/effect-scale.js b/ui/effect-scale.js index 48ae1d85364..478ca25baa1 100644 --- a/ui/effect-scale.js +++ b/ui/effect-scale.js @@ -29,27 +29,27 @@ } }(function( $ ) { -return $.effects.define( "scale", function( o, done ) { +return $.effects.define( "scale", function( options, done ) { // Create element var el = $( this ), - mode = o.mode, - percent = parseInt( o.percent, 10 ) || - ( parseInt( o.percent, 10 ) === 0 ? 0 : ( mode !== "effect" ? 0 : 100 ) ), + mode = options.mode, + percent = parseInt( options.percent, 10 ) || + ( parseInt( options.percent, 10 ) === 0 ? 0 : ( mode !== "effect" ? 0 : 100 ) ), - options = $.extend( true, { + newOptions = $.extend( true, { from: $.effects.scaledDimensions( el ), - to: $.effects.scaledDimensions( el, percent, o.direction || "both" ), - origin: o.origin || [ "middle", "center" ] - }, o ); + to: $.effects.scaledDimensions( el, percent, options.direction || "both" ), + origin: options.origin || [ "middle", "center" ] + }, options ); // Fade option to support puff - if ( o.fade ) { - options.from.opacity = 1; - options.to.opacity = 0; + if ( options.fade ) { + newOptions.from.opacity = 1; + newOptions.to.opacity = 0; } - $.effects.effect.size.call( this, options, done ); + $.effects.effect.size.call( this, newOptions, done ); }); })); diff --git a/ui/effect-shake.js b/ui/effect-shake.js index f426480796a..387f2134017 100644 --- a/ui/effect-shake.js +++ b/ui/effect-shake.js @@ -28,24 +28,24 @@ } }(function( $ ) { -return $.effects.define( "shake", function( o, done ) { +return $.effects.define( "shake", function( options, done ) { var i = 1, - el = $( this ), - direction = o.direction || "left", - distance = o.distance || 20, - times = o.times || 3, + element = $( this ), + direction = options.direction || "left", + distance = options.distance || 20, + times = options.times || 3, anims = times * 2 + 1, - speed = Math.round( o.duration / anims ), + speed = Math.round( options.duration / anims ), ref = ( direction === "up" || direction === "down" ) ? "top" : "left", positiveMotion = ( direction === "up" || direction === "left" ), animation = {}, animation1 = {}, animation2 = {}, - queuelen = el.queue().length; + queuelen = element.queue().length; - $.effects.createPlaceholder( el ); + $.effects.createPlaceholder( element ); // Animation animation[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance; @@ -53,19 +53,19 @@ return $.effects.define( "shake", function( o, done ) { animation2[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance * 2; // Animate - el.animate( animation, speed, o.easing ); + element.animate( animation, speed, options.easing ); // Shakes for ( ; i < times; i++ ) { - el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing ); + element.animate( animation1, speed, options.easing ).animate( animation2, speed, options.easing ); } - el - .animate( animation1, speed, o.easing ) - .animate( animation, speed / 2, o.easing ) + element + .animate( animation1, speed, options.easing ) + .animate( animation, speed / 2, options.easing ) .queue( done ); - $.effects.unshift( el, queuelen, anims + 1 ); + $.effects.unshift( element, queuelen, anims + 1 ); }); })); diff --git a/ui/effect-size.js b/ui/effect-size.js index ee6d7be0e5b..aaa6bcfe762 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -28,11 +28,11 @@ } }(function( $ ) { -return $.effects.define( "size", function( o, done ) { +return $.effects.define( "size", function( options, done ) { // Create element var baseline, factor, temp, - el = $( this ), + element = $( this ), // Copy for children cProps = [ "fontSize" ], @@ -40,17 +40,17 @@ return $.effects.define( "size", function( o, done ) { hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ], // Set options - mode = o.mode, + mode = options.mode, restore = mode !== "effect", - scale = o.scale || "both", - origin = o.origin || [ "middle", "center" ], - position = el.css( "position" ), - pos = el.position(), - original = $.effects.scaledDimensions( el ), - from = o.from || original, - to = o.to || original; + scale = options.scale || "both", + origin = options.origin || [ "middle", "center" ], + position = element.css( "position" ), + pos = element.position(), + original = $.effects.scaledDimensions( element ), + from = options.from || original, + to = options.to || $.effects.scaledDimensions( element, 0 ); - $.effects.createPlaceholder( el ); + $.effects.createPlaceholder( element ); if ( mode === "show" ) { temp = from; @@ -75,14 +75,14 @@ return $.effects.define( "size", function( o, done ) { // Vertical props scaling if ( factor.from.y !== factor.to.y ) { - from = $.effects.setTransition( el, vProps, factor.from.y, from ); - to = $.effects.setTransition( el, vProps, factor.to.y, to ); + from = $.effects.setTransition( element, vProps, factor.from.y, from ); + to = $.effects.setTransition( element, vProps, factor.to.y, to ); } // Horizontal props scaling if ( factor.from.x !== factor.to.x ) { - from = $.effects.setTransition( el, hProps, factor.from.x, from ); - to = $.effects.setTransition( el, hProps, factor.to.x, to ); + from = $.effects.setTransition( element, hProps, factor.from.x, from ); + to = $.effects.setTransition( element, hProps, factor.to.x, to ); } } @@ -91,8 +91,8 @@ return $.effects.define( "size", function( o, done ) { // Vertical props scaling if ( factor.from.y !== factor.to.y ) { - from = $.effects.setTransition( el, cProps, factor.from.y, from ); - to = $.effects.setTransition( el, cProps, factor.to.y, to ); + from = $.effects.setTransition( element, cProps, factor.from.y, from ); + to = $.effects.setTransition( element, cProps, factor.to.y, to ); } } @@ -104,7 +104,7 @@ return $.effects.define( "size", function( o, done ) { to.top = ( original.outerHeight - to.outerHeight ) * baseline.y + pos.top; to.left = ( original.outerWidth - to.outerWidth ) * baseline.x + pos.left; } - el.css( from ); + element.css( from ); // Animate the children if desired if ( scale === "content" || scale === "both" ) { @@ -114,7 +114,7 @@ return $.effects.define( "size", function( o, done ) { // Only animate children with width attributes specified // TODO: is this right? should we include anything with css width specified as well - el.find( "*[width]" ).each( function() { + element.find( "*[width]" ).each( function() { var child = $( this ), c_original = $.effects.scaledDimensions( child ); @@ -149,7 +149,7 @@ return $.effects.define( "size", function( o, done ) { // Animate children child.css( child.from ); - child.animate( child.to, o.duration, o.easing, function() { + child.animate( child.to, options.duration, options.easing, function() { // Restore children if ( restore ) { @@ -160,26 +160,26 @@ return $.effects.define( "size", function( o, done ) { } // Animate - el.animate( to, { + element.animate( to, { queue: false, - duration: o.duration, - easing: o.easing, + duration: options.duration, + easing: options.easing, complete: function() { - var offset = el.offset(); + var offset = element.offset(); if ( to.opacity === 0 ) { - el.css( "opacity", from.opacity ); + element.css( "opacity", from.opacity ); } if ( !restore ) { - el.css( "position", position === "static" ? "relative" : position ); - - el.offset( offset ); + element + .css( "position", position === "static" ? "relative" : position ) + .offset( offset ); // Need to save style here so that automatic style restoration // doesn't restore to the original styles from before the animation. - $.effects.saveStyle( el ); + $.effects.saveStyle( element ); } done(); diff --git a/ui/effect-slide.js b/ui/effect-slide.js index 58fd150f526..03086a9285c 100644 --- a/ui/effect-slide.js +++ b/ui/effect-slide.js @@ -28,45 +28,45 @@ } }(function( $ ) { -return $.effects.define( "slide", "show", function( o, done ) { +return $.effects.define( "slide", "show", function( options, done ) { var startClip, startRef, - el = $( this ), + element = $( this ), map = { up: [ "bottom", "top" ], down: [ "top", "bottom" ], left: [ "right", "left" ], right: [ "left", "right" ] }, - mode = o.mode, - direction = o.direction || "left", + mode = options.mode, + direction = options.direction || "left", ref = ( direction === "up" || direction === "down" ) ? "top" : "left", positiveMotion = ( direction === "up" || direction === "left" ), - distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ), + distance = options.distance || element[ ref === "top" ? "outerHeight" : "outerWidth" ]( true ), animation = {}; - $.effects.createPlaceholder( el ); + $.effects.createPlaceholder( element ); - startClip = el.cssClip(); - startRef = el.position()[ ref ]; + startClip = element.cssClip(); + startRef = element.position()[ ref ]; // Define hide animation animation[ ref ] = ( positiveMotion ? -1 : 1 ) * distance + startRef; - animation.clip = el.cssClip(); + animation.clip = element.cssClip(); animation.clip[ map[ direction ][ 1 ] ] = animation.clip[ map[ direction ][ 0 ] ]; // Reverse the animation if we're showing if ( mode === "show" ) { - el.cssClip( animation.clip ); - el.css( ref, animation[ ref ] ); + element.cssClip( animation.clip ); + element.css( ref, animation[ ref ] ); animation.clip = startClip; animation[ ref ] = startRef; } // Actually animate - el.animate( animation, { + element.animate( animation, { queue: false, - duration: o.duration, - easing: o.easing, + duration: options.duration, + easing: options.easing, complete: done }); }); From 2f39707dc34ed93cfb006c2d213be7c86c97272f Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Fri, 28 Nov 2014 10:47:36 -0500 Subject: [PATCH 39/40] Effects Rewrite: Fix style nits in size effect --- ui/effect-size.js | 47 +++++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/ui/effect-size.js b/ui/effect-size.js index aaa6bcfe762..91a6bf51bde 100644 --- a/ui/effect-size.js +++ b/ui/effect-size.js @@ -116,40 +116,39 @@ return $.effects.define( "size", function( options, done ) { // TODO: is this right? should we include anything with css width specified as well element.find( "*[width]" ).each( function() { var child = $( this ), - c_original = $.effects.scaledDimensions( child ); - - if ( restore ) { - $.effects.saveStyle( child ); - } - - child.from = { - height: c_original.height * factor.from.y, - width: c_original.width * factor.from.x, - outerHeight: c_original.outerHeight * factor.from.y, - outerWidth: c_original.outerWidth * factor.from.x - }; - child.to = { - height: c_original.height * factor.to.y, - width: c_original.width * factor.to.x, - outerHeight: c_original.height * factor.to.y, - outerWidth: c_original.width * factor.to.x - }; + childOriginal = $.effects.scaledDimensions( child ), + childFrom = { + height: childOriginal.height * factor.from.y, + width: childOriginal.width * factor.from.x, + outerHeight: childOriginal.outerHeight * factor.from.y, + outerWidth: childOriginal.outerWidth * factor.from.x + }, + childTo = { + height: childOriginal.height * factor.to.y, + width: childOriginal.width * factor.to.x, + outerHeight: childOriginal.height * factor.to.y, + outerWidth: childOriginal.width * factor.to.x + }; // Vertical props scaling if ( factor.from.y !== factor.to.y ) { - child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from ); - child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to ); + childFrom = $.effects.setTransition( child, vProps, factor.from.y, childFrom ); + childTo = $.effects.setTransition( child, vProps, factor.to.y, childTo ); } // Horizontal props scaling if ( factor.from.x !== factor.to.x ) { - child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from ); - child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to ); + childFrom = $.effects.setTransition( child, hProps, factor.from.x, childFrom ); + childTo = $.effects.setTransition( child, hProps, factor.to.x, childTo ); + } + + if ( restore ) { + $.effects.saveStyle( child ); } // Animate children - child.css( child.from ); - child.animate( child.to, options.duration, options.easing, function() { + child.css( childFrom ); + child.animate( childTo, options.duration, options.easing, function() { // Restore children if ( restore ) { From 2a373452df46179aa5dbed16186e3b4fb2af70d1 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Fri, 28 Nov 2014 14:47:32 -0500 Subject: [PATCH 40/40] Effects Rewrite: Fix demo sizes to account for new font sizes --- demos/effect/addClass.html | 4 ++-- demos/effect/animate.html | 2 +- demos/effect/default.html | 2 +- demos/effect/hide.html | 2 +- demos/effect/show.html | 2 +- demos/effect/switchClass.html | 4 ++-- demos/effect/toggle.html | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/demos/effect/addClass.html b/demos/effect/addClass.html index f594291fe08..0aab17304e1 100644 --- a/demos/effect/addClass.html +++ b/demos/effect/addClass.html @@ -10,8 +10,8 @@ $(function() { diff --git a/demos/effect/animate.html b/demos/effect/animate.html index 41f969982c8..7de5351143d 100644 --- a/demos/effect/animate.html +++ b/demos/effect/animate.html @@ -10,7 +10,7 @@ diff --git a/demos/effect/default.html b/demos/effect/default.html index 7a1c23baa92..f2a6b768667 100644 --- a/demos/effect/default.html +++ b/demos/effect/default.html @@ -25,7 +25,7 @@ diff --git a/demos/effect/hide.html b/demos/effect/hide.html index cae5c337b58..301f93047cf 100644 --- a/demos/effect/hide.html +++ b/demos/effect/hide.html @@ -24,7 +24,7 @@ diff --git a/demos/effect/show.html b/demos/effect/show.html index 9b8599bdbf5..5583ff36fdc 100644 --- a/demos/effect/show.html +++ b/demos/effect/show.html @@ -24,7 +24,7 @@ diff --git a/demos/effect/switchClass.html b/demos/effect/switchClass.html index 34af4715bd7..0ac90fe9368 100644 --- a/demos/effect/switchClass.html +++ b/demos/effect/switchClass.html @@ -11,8 +11,8 @@ .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { position: relative; } - .newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; } - .anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } + .newClass { width: 240px; padding: 1em; letter-spacing: 0; margin: 0; } + .anotherNewClass { text-indent: 40px; letter-spacing: .2em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.1em; } $(function() { diff --git a/demos/effect/toggle.html b/demos/effect/toggle.html index c626746f33d..bac5758abcc 100644 --- a/demos/effect/toggle.html +++ b/demos/effect/toggle.html @@ -33,7 +33,7 @@ #effect { position: relative; width: 240px; - height: 135px; + height: 170px; padding: 0.4em; } #effect h3 {