From 65a6c46e5568c43a9df9505e23da6a766814557e Mon Sep 17 00:00:00 2001 From: gnarf Date: Tue, 21 Jun 2011 01:15:42 -0500 Subject: [PATCH] Effects.*: Style Guidance --- ui/jquery.effects.blind.js | 16 ++++++++-------- ui/jquery.effects.bounce.js | 2 +- ui/jquery.effects.drop.js | 16 ++++++++++------ ui/jquery.effects.explode.js | 4 ++-- ui/jquery.effects.fold.js | 34 +++++++++++++++++++++------------- ui/jquery.effects.highlight.js | 11 +++++++---- ui/jquery.effects.scale.js | 5 +++-- ui/jquery.effects.shake.js | 12 +++++++----- ui/jquery.effects.slide.js | 21 ++++++++++++--------- ui/jquery.effects.transfer.js | 4 +++- 10 files changed, 74 insertions(+), 51 deletions(-) diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index 8c536be78..09d6a9e57 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -11,7 +11,7 @@ * jquery.effects.core.js */ (function( $, undefined ) { - + var rvertical = /up|down|vertical/, rpositivemotion = /up|left|vertical|horizontal/; @@ -35,24 +35,24 @@ $.effects.effect.blind = function( o, next ) { } else { $.effects.save( el, props ); } - el.show(); - wrapper = $.effects.createWrapper( el ).css({ + el.show(); + wrapper = $.effects.createWrapper( el ).css({ overflow: "hidden" }); distance = wrapper[ ref ](); - animation[ ref ] = ( mode === "show" ? distance : 0 ); + animation[ ref ] = show ? distance : 0; if ( !motion ) { el .css( vertical ? "bottom" : "right", 0 ) .css( vertical ? "top" : "left", "" ) .css({ position: "absolute" }); - animation[ ref2 ] = ( mode === "show" ) ? 0 : distance; + animation[ ref2 ] = show ? 0 : distance; } // start at 0 if we are showing - if ( mode === "show" ) { + if ( show ) { wrapper.css( ref, 0 ); if ( ! motion ) { wrapper.css( ref2, distance ); @@ -65,10 +65,10 @@ $.effects.effect.blind = function( o, next ) { easing: o.easing, queue: false, complete: function() { - if ( mode == "hide" ) { + if ( mode === "hide" ) { el.hide(); } - $.effects.restore( el, props ); + $.effects.restore( el, props ); $.effects.removeWrapper( el ); if ( $.isFunction( o.complete ) ) { o.complete.apply( el[ 0 ], arguments ); diff --git a/ui/jquery.effects.bounce.js b/ui/jquery.effects.bounce.js index f6cf5bb02..38171c32e 100644 --- a/ui/jquery.effects.bounce.js +++ b/ui/jquery.effects.bounce.js @@ -61,7 +61,7 @@ $.effects.effect.bounce = function( o, next ) { // if we are showing, force opacity 0 and set the initial position // then do the "first" animation el.css( "opacity", 0 ) - .css( ref, motion ? -distance*2 : distance*2 ) + .css( ref, motion ? -distance * 2 : distance * 2 ) .animate( downAnim, speed, easing ); } diff --git a/ui/jquery.effects.drop.js b/ui/jquery.effects.drop.js index a0bdc7d4d..2fba49d92 100644 --- a/ui/jquery.effects.drop.js +++ b/ui/jquery.effects.drop.js @@ -17,11 +17,12 @@ $.effects.effect.drop = function( o, next ) { var el = $( this ), props = [ "position", "top", "bottom", "left", "right", "opacity", "height", "width" ], mode = $.effects.setMode( el, o.mode || "hide" ), + show = mode === "show", direction = o.direction || "left", - ref = ( direction == "up" || direction == "down" ) ? "top" : "left", - motion = ( direction == "up" || direction == "left" ) ? "pos" : "neg", + ref = ( direction === "up" || direction === "down" ) ? "top" : "left", + motion = ( direction === "up" || direction === "left" ) ? "pos" : "neg", animation = { - opacity: mode == "show" ? 1 : 0 + opacity: show ? 1 : 0 }, distance; @@ -32,14 +33,17 @@ $.effects.effect.drop = function( o, next ) { distance = o.distance || el[ ref == "top" ? "outerHeight": "outerWidth" ]({ margin: true }) / 2; - if ( mode == "show" ) { + if ( show ) { el .css( "opacity", 0 ) .css( ref, motion == "pos" ? -distance : distance ); } // Animation - animation[ ref ] = ((mode == "show") ? (motion == "pos" ? "+=" : "-=") : (motion == "pos" ? "-=" : "+=")) + distance; + animation[ ref ] = ( show ? + ( motion === "pos" ? "+=" : "-=" ) : + ( motion === "pos" ? "-=" : "+=" ) ) + + distance; // Animate el.animate( animation, { @@ -50,7 +54,7 @@ $.effects.effect.drop = function( o, next ) { mode == "hide" && el.hide(); $.effects.restore( el, props ); $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply(this, arguments); + $.isFunction( o.complete ) && o.complete.apply( this, arguments ); next(); } }); diff --git a/ui/jquery.effects.explode.js b/ui/jquery.effects.explode.js index 76711c6f2..0deb2be9f 100644 --- a/ui/jquery.effects.explode.js +++ b/ui/jquery.effects.explode.js @@ -14,11 +14,11 @@ $.effects.effect.explode = function( o, next ) { - var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3, + var rows = o.pieces ? Math.round( Math.sqrt( o.pieces ) ) : 3, cells = rows, el = $( this ), mode = $.effects.setMode( el, o.mode || "hide" ), - show = ( mode == "show" ), + show = mode === "show", // show and then visibility:hidden the element before calculating offset offset = el.show().css( "visibility", "hidden" ).offset(), diff --git a/ui/jquery.effects.fold.js b/ui/jquery.effects.fold.js index de7530bf0..b2a02ba78 100644 --- a/ui/jquery.effects.fold.js +++ b/ui/jquery.effects.fold.js @@ -16,15 +16,18 @@ $.effects.effect.fold = function( o, next ) { // Create element var el = $( this ), - props = ["position","top","bottom","left","right","height","width"], - mode = $.effects.setMode(el, o.mode || "hide"), + props = [ "position", "top", "bottom", "left", "right", "height", "width" ], + mode = $.effects.setMode( el, o.mode || "hide" ), + show = mode === "show", + hide = mode === "hide", size = o.size || 15, - percent = /([0-9]+)%/.exec(size), + percent = /([0-9]+)%/.exec( size ), horizFirst = !!o.horizFirst, - widthFirst = ((mode == "show") != horizFirst), - ref = widthFirst ? ["width", "height"] : ["height", "width"], + widthFirst = show != horizFirst, + ref = widthFirst ? [ "width", "height" ] : [ "height", "width" ], duration = o.duration / 2, - wrapper, distance; + wrapper, distance, + animation1 = {}, animation2 = {}; $.effects.save( el, props ); el.show(); @@ -38,29 +41,34 @@ $.effects.effect.fold = function( o, next ) { [ wrapper.height(), wrapper.width() ]; if ( percent ) { - size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ ( mode == "hide") ? 0 : 1 ]; + size = parseInt( percent[ 1 ], 10 ) / 100 * distance[ hide ? 0 : 1 ]; } - mode == "show" && wrapper.css( horizFirst ? { + if ( show ) { + wrapper.css( horizFirst ? { height: 0, width: size } : { height: size, width: 0 }); + } // Animation - var animation1 = {}, animation2 = {}; - animation1[ ref[ 0 ] ] = mode == "show" ? distance[ 0 ] : size; - animation2[ ref[ 1 ] ] = mode == "show" ? distance[ 1 ] : 0; + animation1[ ref[ 0 ] ] = show ? distance[ 0 ] : size; + animation2[ ref[ 1 ] ] = show ? distance[ 1 ] : 0; // Animate wrapper .animate( animation1, duration, o.easing ) .animate( animation2, duration, o.easing, function() { - (mode == "hide") && el.hide(); + if ( hide ) { + el.hide(); + } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - jQuery.isFunction(o.complete) && o.complete.apply( el[ 0 ], arguments ); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( el[ 0 ], arguments ); + } next(); }); diff --git a/ui/jquery.effects.highlight.js b/ui/jquery.effects.highlight.js index 61826e696..709e93a3c 100644 --- a/ui/jquery.effects.highlight.js +++ b/ui/jquery.effects.highlight.js @@ -20,7 +20,7 @@ $.effects.effect.highlight = function( o, next ) { backgroundColor: elem.css( "backgroundColor" ) }; - if (mode == "hide") { + if (mode === "hide") { animation.opacity = 0; } @@ -37,10 +37,13 @@ $.effects.effect.highlight = function( o, next ) { duration: o.duration, easing: o.easing, complete: function() { - (mode == "hide" && elem.hide()); + if ( mode === "hide" ) { + elem.hide(); + } $.effects.restore( elem, props ); - (mode == "show" && !$.support.opacity && this.style.removeAttribute( "filter" )); - jQuery.isFunction(o.complete) && o.complete.apply(this, arguments); + if ( $.isFunction( o.complete) ) { + o.complete.apply( this, arguments ); + } next(); } }); diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js index 614943cfb..2642c6c1d 100644 --- a/ui/jquery.effects.scale.js +++ b/ui/jquery.effects.scale.js @@ -24,6 +24,7 @@ function compFunction( el, complete, next ) { $.effects.effect.puff = function( o, next ) { var elem = $( this ), mode = $.effects.setMode( elem, o.mode || "hide" ), + hide = mode === "hide", percent = parseInt( o.percent, 10 ) || 150, factor = percent / 100, original = { @@ -37,8 +38,8 @@ $.effects.effect.puff = function( o, next ) { fade: true, mode: mode, complete: compFunction( this, o.complete, next ), - percent: mode == "hide" ? percent : 100, - from: mode == "hide" + percent: hide ? percent : 100, + from: hide ? original : { height: original.height * factor, diff --git a/ui/jquery.effects.shake.js b/ui/jquery.effects.shake.js index 82d7ae97e..311edced0 100644 --- a/ui/jquery.effects.shake.js +++ b/ui/jquery.effects.shake.js @@ -23,7 +23,7 @@ $.effects.effect.shake = function( o, next ) { anims = times * 2 + 1, speed = o.duration, ref = (direction == "up" || direction == "down") ? "top" : "left", - motion = (direction == "up" || direction == "left") ? "pos" : "neg", + positiveMotion = (direction == "up" || direction == "left"), animation = {}, animation1 = {}, animation2 = {}, @@ -39,9 +39,9 @@ $.effects.effect.shake = function( o, next ) { $.effects.createWrapper( el ); // Animation - animation[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance; - animation1[ ref ] = ( motion == "pos" ? "+=" : "-=" ) + distance * 2; - animation2[ ref ] = ( motion == "pos" ? "-=" : "+=" ) + distance * 2; + animation[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance; + animation1[ ref ] = ( positiveMotion ? "+=" : "-=" ) + distance * 2; + animation2[ ref ] = ( positiveMotion ? "-=" : "+=" ) + distance * 2; // Animate el.animate( animation, speed, o.easing ); @@ -59,7 +59,9 @@ $.effects.effect.shake = function( o, next ) { } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply( this, arguments ); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( this, arguments ); + } next(); }); diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js index 7ed744284..3be28d91b 100644 --- a/ui/jquery.effects.slide.js +++ b/ui/jquery.effects.slide.js @@ -18,9 +18,10 @@ $.effects.effect.slide = function( o, next ) { var el = $( this ), props = [ "position", "top", "bottom", "left", "right", "width", "height" ], mode = $.effects.setMode( el, o.mode || "show" ), + show = mode === "show", direction = o.direction || "left", ref = (direction == "up" || direction == "down") ? "top" : "left", - motion = (direction == "up" || direction == "left") ? "pos" : "neg", + positiveMotion = (direction == "up" || direction == "left"), distance, animation = {}, size; @@ -28,7 +29,7 @@ $.effects.effect.slide = function( o, next ) { // Adjust $.effects.save( el, props ); el.show(); - distance = o.distance || el[ ref == "top" ? "outerHeight" : "outerWidth" ]({ + distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]({ margin: true }); @@ -36,14 +37,14 @@ $.effects.effect.slide = function( o, next ) { overflow: "hidden" }); - if (mode == "show") { - el.css( ref, motion == "pos" ? (isNaN(distance) ? "-" + distance : -distance) : distance ); + if ( show ) { + el.css( ref, positiveMotion ? (isNaN(distance) ? "-" + distance : -distance) : distance ); } // Animation - animation[ ref ] = ( mode == "show" ? - (motion == "pos" ? "+=" : "-=") : - (motion == "pos" ? "-=" : "+=")) + animation[ ref ] = ( show ? + ( positiveMotion ? "+=" : "-=") : + ( positiveMotion ? "-=" : "+=")) + distance; // Animate @@ -52,12 +53,14 @@ $.effects.effect.slide = function( o, next ) { duration: o.duration, easing: o.easing, complete: function() { - if ( mode == "hide" ) { + if ( mode === "hide" ) { el.hide(); } $.effects.restore( el, props ); $.effects.removeWrapper( el ); - $.isFunction(o.complete) && o.complete.apply( this, arguments ); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( this, arguments ); + } next(); } }); diff --git a/ui/jquery.effects.transfer.js b/ui/jquery.effects.transfer.js index 061882fec..0c840c35c 100644 --- a/ui/jquery.effects.transfer.js +++ b/ui/jquery.effects.transfer.js @@ -39,7 +39,9 @@ $.effects.effect.transfer = function( o, next ) { }) .animate( animation, o.duration, o.easing, function() { transfer.remove(); - $.isFunction( o.complete ) && o.complete.apply(elem[0], arguments); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( elem[0], arguments ); + } next(); }); }; -- 2.39.5