From: Alexander Schmitz Date: Fri, 21 Aug 2015 04:12:17 +0000 (-0400) Subject: Effects: Style updates X-Git-Tag: 1.12.0-beta.1~170 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=de242d8ca9bf2b90237c413cb91601541798bae9;p=jquery-ui.git Effects: Style updates Ref #14246 Ref gh-1588 --- diff --git a/demos/effect/default.html b/demos/effect/default.html index bd28652a6..59479539f 100644 --- a/demos/effect/default.html +++ b/demos/effect/default.html @@ -19,7 +19,7 @@ // get effect type from var selectedEffect = $( "#effectTypes" ).val(); - // most effect types need no options passed by default + // Most effect types need no options passed by default var options = {}; // some effects have required parameters if ( selectedEffect === "scale" ) { @@ -30,18 +30,18 @@ options = { to: { width: 200, height: 60 } }; } - // run the effect + // Run the effect $( "#effect" ).effect( selectedEffect, options, 500, callback ); }; - // callback function to bring a hidden box back + // Callback function to bring a hidden box back function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; - // set effect from select menu value + // Set effect from select menu value $( "#button" ).on( "click", function() { runEffect(); return false; diff --git a/demos/effect/easing.html b/demos/effect/easing.html index 5985dc699..7d5f4b982 100644 --- a/demos/effect/easing.html +++ b/demos/effect/easing.html @@ -37,7 +37,7 @@ ctx = canvas.getContext( "2d" ); ctx.fillStyle = "black"; - // draw background + // Draw background ctx.beginPath(); ctx.moveTo( cradius, 0 ); ctx.quadraticCurveTo( 0, 0, 0, cradius ); @@ -49,21 +49,21 @@ ctx.lineTo( cradius, 0 ); ctx.fill(); - // draw bottom line + // Draw bottom line ctx.strokeStyle = "#555"; ctx.beginPath(); ctx.moveTo( width * 0.1, drawHeight + .5 ); ctx.lineTo( width * 0.9, drawHeight + .5 ); ctx.stroke(); - // draw top line + // Draw top line ctx.strokeStyle = "#555"; ctx.beginPath(); ctx.moveTo( width * 0.1, drawHeight * .3 - .5 ); ctx.lineTo( width * 0.9, drawHeight * .3 - .5 ); ctx.stroke(); - // plot easing + // Plot easing ctx.strokeStyle = "white"; ctx.beginPath(); ctx.lineWidth = 2; @@ -76,7 +76,7 @@ }); ctx.stroke(); - // animate on click + // Animate on click graph.on( "click", function() { wrap .animate( { height: "hide" }, 2000, name ) diff --git a/demos/effect/hide.html b/demos/effect/hide.html index 1fcd6477e..38ac3e157 100644 --- a/demos/effect/hide.html +++ b/demos/effect/hide.html @@ -18,7 +18,7 @@ // get effect type from var selectedEffect = $( "#effectTypes" ).val(); - // most effect types need no options passed by default + // Most effect types need no options passed by default var options = {}; // some effects have required parameters if ( selectedEffect === "scale" ) { @@ -27,18 +27,18 @@ options = { to: { width: 200, height: 60 } }; } - // run the effect + // Run the effect $( "#effect" ).hide( selectedEffect, options, 1000, callback ); }; - // callback function to bring a hidden box back + // Callback function to bring a hidden box back function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; - // set effect from select menu value + // Set effect from select menu value $( "#button" ).on( "click", function() { runEffect(); }); diff --git a/demos/effect/show.html b/demos/effect/show.html index 4bb0919e4..19a6cca97 100644 --- a/demos/effect/show.html +++ b/demos/effect/show.html @@ -18,7 +18,7 @@ // get effect type from var selectedEffect = $( "#effectTypes" ).val(); - // most effect types need no options passed by default + // Most effect types need no options passed by default var options = {}; // some effects have required parameters if ( selectedEffect === "scale" ) { @@ -27,7 +27,7 @@ options = { to: { width: 280, height: 185 } }; } - // run the effect + // Run the effect $( "#effect" ).show( selectedEffect, options, 500, callback ); }; @@ -38,7 +38,7 @@ }, 1000 ); }; - // set effect from select menu value + // Set effect from select menu value $( "#button" ).on( "click", function() { runEffect(); }); diff --git a/demos/effect/toggle.html b/demos/effect/toggle.html index 65c4747a9..7ecf8c9c0 100644 --- a/demos/effect/toggle.html +++ b/demos/effect/toggle.html @@ -33,7 +33,7 @@ // get effect type from var selectedEffect = $( "#effectTypes" ).val(); - // most effect types need no options passed by default + // Most effect types need no options passed by default var options = {}; // some effects have required parameters if ( selectedEffect === "scale" ) { @@ -42,11 +42,11 @@ options = { to: { width: 200, height: 60 } }; } - // run the effect + // Run the effect $( "#effect" ).toggle( selectedEffect, options, 500 ); }; - // set effect from select menu value + // Set effect from select menu value $( "#button" ).on( "click", function() { runEffect(); }); diff --git a/tests/unit/effects/core.js b/tests/unit/effects/core.js index c8e7c2632..5f634a782 100644 --- a/tests/unit/effects/core.js +++ b/tests/unit/effects/core.js @@ -30,7 +30,7 @@ function notPresent( value, array, message ) { // minDuration is used for "short" animate tests where we are only concerned about the final var minDuration = 15, - // duration is used for "long" animates where we plan on testing properties during animation + // Duration is used for "long" animates where we plan on testing properties during animation duration = 200; module( "effects.core" ); @@ -115,11 +115,11 @@ asyncTest( "animateClass works with colors", function() { expect(2); - // we want to catch the first frame of animation + // We want to catch the first frame of animation jQuery.fx.step.backgroundColor = function( fx ) { oldStep.apply( this, arguments ); - // make sure it has animated somewhere we can detect + // Make sure it has animated somewhere we can detect if ( fx.pos > 255 / 2000 ) { jQuery.fx.step.backgroundColor = oldStep; notPresent( test.css("backgroundColor"), @@ -206,14 +206,14 @@ function( assert ) { expect( 2 ); var test = $( "div.ticket7106" ); - // ensure the class stays and that the css property stays + // Ensure the class stays and that the css property stays function animationComplete() { assert.hasClasses( test, "testClass", "class change during animateClass was not lost" ); equal( test.height(), 100, "css change during animateClass was not lost" ); start(); } - // add a class and change a style property after starting an animated class + // Add a class and change a style property after starting an animated class test.addClass( "animate", minDuration, animationComplete ) .addClass( "testClass" ) .height( 100 ); diff --git a/ui/effect.js b/ui/effect.js index 7fa45cfc0..1a660fa49 100644 --- a/ui/effect.js +++ b/ui/effect.js @@ -13,7 +13,7 @@ //>>docs: http://api.jqueryui.com/category/effects-core/ //>>demos: http://jqueryui.com/effect/ -(function( factory ) { +( function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. @@ -23,7 +23,7 @@ // Browser globals factory( jQuery ); } -}(function( $ ) { +}( function( $ ) { var dataSpace = "ui-effects-", dataSpaceStyle = "ui-effects-style", @@ -47,13 +47,14 @@ $.effects = { * * Date: Wed Jan 16 08:47:09 2013 -0600 */ -(function( jQuery, undefined ) { +( function( jQuery, undefined ) { var stepHooks = "backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor", - // plusequals test for += 100 -= 100 + // Plusequals test for += 100 -= 100 rplusequals = /^([\-+])=\s*(\d+\.?\d*)/, - // a set of RE's that can match strings and generate color tuples. + + // A set of RE's that can match strings and generate color tuples. stringParsers = [ { re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/, parse: function( execResult ) { @@ -75,7 +76,8 @@ $.effects = { ]; } }, { - // this regex ignores A-F because it's compared against an already lowercased string + + // This regex ignores A-F because it's compared against an already lowercased string re: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/, parse: function( execResult ) { return [ @@ -85,7 +87,8 @@ $.effects = { ]; } }, { - // this regex ignores A-F because it's compared against an already lowercased string + + // This regex ignores A-F because it's compared against an already lowercased string re: /#([a-f0-9])([a-f0-9])([a-f0-9])/, parse: function( execResult ) { return [ @@ -107,7 +110,7 @@ $.effects = { } } ], - // jQuery.Color( ) + // JQuery.Color( ) color = jQuery.Color = function( color, green, blue, alpha ) { return new jQuery.Color.fn.parse( color, green, blue, alpha ); }, @@ -161,20 +164,20 @@ $.effects = { }, support = color.support = {}, - // element for support tests + // Element for support tests supportElem = jQuery( "

" )[ 0 ], - // colors = jQuery.Color.names + // Colors = jQuery.Color.names colors, - // local aliases of functions called often + // Local aliases of functions called often each = jQuery.each; -// determine rgba support immediately +// Determine rgba support immediately supportElem.style.cssText = "background-color:rgba(1,1,1,.5)"; support.rgba = supportElem.style.backgroundColor.indexOf( "rgba" ) > -1; -// define cache name and alpha properties +// Define cache name and alpha properties // for rgba and hsla spaces each( spaces, function( spaceName, space ) { space.cache = "_" + spaceName; @@ -183,13 +186,13 @@ each( spaces, function( spaceName, space ) { type: "percent", def: 1 }; -}); +} ); function clamp( value, prop, allowEmpty ) { var type = propTypes[ prop.type ] || {}; if ( value == null ) { - return (allowEmpty || !prop.def) ? null : prop.def; + return ( allowEmpty || !prop.def ) ? null : prop.def; } // ~~ is an short way of doing floor for positive numbers @@ -202,12 +205,13 @@ function clamp( value, prop, allowEmpty ) { } if ( type.mod ) { - // we add mod before modding to make sure that negatives values + + // We add mod before modding to make sure that negatives values // get converted properly: -10 -> 350 - return (value + type.mod) % type.mod; + return ( value + type.mod ) % type.mod; } - // for now all property types without mod have min and max + // For now all property types without mod have min and max return 0 > value ? 0 : type.max < value ? type.max : value; } @@ -226,20 +230,20 @@ function stringParse( string ) { if ( values ) { parsed = inst[ spaceName ]( values ); - // if this was an rgba parse the assignment might happen twice + // If this was an rgba parse the assignment might happen twice // oh well.... inst[ spaces[ spaceName ].cache ] = parsed[ spaces[ spaceName ].cache ]; rgba = inst._rgba = parsed._rgba; - // exit each( stringParsers ) here because we matched + // Exit each( stringParsers ) here because we matched return false; } - }); + } ); // Found a stringParser that handled it if ( rgba.length ) { - // if this came from a parsed string, force "transparent" when alpha is 0 + // If this came from a parsed string, force "transparent" when alpha is 0 // chrome, (and maybe others) return "transparent" as rgba(0,0,0,0) if ( rgba.join() === "0,0,0,0" ) { jQuery.extend( rgba, colors.transparent ); @@ -247,7 +251,7 @@ function stringParse( string ) { return inst; } - // named colors + // Named colors return colors[ string ]; } @@ -266,7 +270,7 @@ color.fn = jQuery.extend( color.prototype, { type = jQuery.type( red ), rgba = this._rgba = []; - // more than 1 argument specified - assume ( red, green, blue, alpha ) + // More than 1 argument specified - assume ( red, green, blue, alpha ) if ( green !== undefined ) { red = [ red, green, blue, alpha ]; type = "array"; @@ -279,7 +283,7 @@ color.fn = jQuery.extend( color.prototype, { if ( type === "array" ) { each( spaces.rgba.props, function( key, prop ) { rgba[ prop.idx ] = clamp( red[ prop.idx ], prop ); - }); + } ); return this; } @@ -289,16 +293,16 @@ color.fn = jQuery.extend( color.prototype, { if ( red[ space.cache ] ) { inst[ space.cache ] = red[ space.cache ].slice(); } - }); + } ); } else { each( spaces, function( spaceName, space ) { var cache = space.cache; each( space.props, function( key, prop ) { - // if the cache doesn't exist, and we know how to convert + // If the cache doesn't exist, and we know how to convert if ( !inst[ cache ] && space.to ) { - // if the value was null, we don't need to copy it + // If the value was null, we don't need to copy it // if the key was alpha, we don't need to copy it either if ( key === "alpha" || red[ key ] == null ) { return; @@ -306,20 +310,21 @@ color.fn = jQuery.extend( color.prototype, { inst[ cache ] = space.to( inst._rgba ); } - // this is the only case where we allow nulls for ALL properties. + // This is the only case where we allow nulls for ALL properties. // call clamp with alwaysAllowEmpty inst[ cache ][ prop.idx ] = clamp( red[ key ], prop, true ); - }); + } ); - // everything defined but alpha? + // Everything defined but alpha? if ( inst[ cache ] && jQuery.inArray( null, inst[ cache ].slice( 0, 3 ) ) < 0 ) { - // use the default of 1 + + // Use the default of 1 inst[ cache ][ 3 ] = 1; if ( space.from ) { inst._rgba = space.from( inst[ cache ] ); } } - }); + } ); } return this; } @@ -332,17 +337,17 @@ color.fn = jQuery.extend( color.prototype, { each( spaces, function( _, space ) { var localCache, isCache = is[ space.cache ]; - if (isCache) { + if ( isCache ) { localCache = inst[ space.cache ] || space.to && space.to( inst._rgba ) || []; each( space.props, function( _, prop ) { if ( isCache[ prop.idx ] != null ) { same = ( isCache[ prop.idx ] === localCache[ prop.idx ] ); return same; } - }); + } ); } return same; - }); + } ); return same; }, _space: function() { @@ -352,7 +357,7 @@ color.fn = jQuery.extend( color.prototype, { if ( inst[ space.cache ] ) { used.push( spaceName ); } - }); + } ); return used.pop(); }, transition: function( other, distance ) { @@ -370,11 +375,12 @@ color.fn = jQuery.extend( color.prototype, { endValue = end[ index ], type = propTypes[ prop.type ] || {}; - // if null, don't override start value + // If null, don't override start value if ( endValue === null ) { return; } - // if null - use end + + // If null - use end if ( startValue === null ) { result[ index ] = endValue; } else { @@ -387,11 +393,12 @@ color.fn = jQuery.extend( color.prototype, { } result[ index ] = clamp( ( endValue - startValue ) * distance + startValue, prop ); } - }); + } ); return this[ spaceName ]( result ); }, blend: function( opaque ) { - // if we are already opaque - return ourself + + // If we are already opaque - return ourself if ( this._rgba[ 3 ] === 1 ) { return this; } @@ -402,13 +409,13 @@ color.fn = jQuery.extend( color.prototype, { return color( jQuery.map( rgb, function( v, i ) { return ( 1 - a ) * blend[ i ] + a * v; - })); + } ) ); }, toRgbaString: function() { var prefix = "rgba(", rgba = jQuery.map( this._rgba, function( v, i ) { return v == null ? ( i > 2 ? 1 : 0 ) : v; - }); + } ); if ( rgba[ 3 ] === 1 ) { rgba.pop(); @@ -424,12 +431,12 @@ color.fn = jQuery.extend( color.prototype, { v = i > 2 ? 1 : 0; } - // catch 1 and 2 + // Catch 1 and 2 if ( i && i < 3 ) { v = Math.round( v * 100 ) + "%"; } return v; - }); + } ); if ( hsla[ 3 ] === 1 ) { hsla.pop(); @@ -447,18 +454,18 @@ color.fn = jQuery.extend( color.prototype, { return "#" + jQuery.map( rgba, function( v ) { - // default to 0 when nulls exist + // Default to 0 when nulls exist v = ( v || 0 ).toString( 16 ); return v.length === 1 ? "0" + v : v; - }).join(""); + } ).join( "" ); }, toString: function() { return this._rgba[ 3 ] === 0 ? "transparent" : this.toRgbaString(); } -}); +} ); color.fn.parse.prototype = color.fn; -// hsla conversions adapted from: +// Hsla conversions adapted from: // https://code.google.com/p/maashaack/source/browse/packages/graphics/trunk/src/graphics/colors/HUE2RGB.as?r=5021 function hue2rgb( p, q, h ) { @@ -466,7 +473,7 @@ function hue2rgb( p, q, h ) { if ( h * 6 < 1 ) { return p + ( q - p ) * h * 6; } - if ( h * 2 < 1) { + if ( h * 2 < 1 ) { return q; } if ( h * 3 < 2 ) { @@ -500,7 +507,7 @@ spaces.hsla.to = function( rgba ) { h = ( 60 * ( r - g ) / diff ) + 240; } - // chroma (diff) == 0 means greyscale which, by definition, saturation = 0% + // Chroma (diff) == 0 means greyscale which, by definition, saturation = 0% // otherwise, saturation is based on the ratio of chroma (diff) to lightness (add) if ( diff === 0 ) { s = 0; @@ -509,7 +516,7 @@ spaces.hsla.to = function( rgba ) { } else { s = diff / ( 2 - add ); } - return [ Math.round(h) % 360, s, l, a == null ? 1 : a ]; + return [ Math.round( h ) % 360, s, l, a == null ? 1 : a ]; }; spaces.hsla.from = function( hsla ) { @@ -537,10 +544,10 @@ each( spaces, function( spaceName, space ) { to = space.to, from = space.from; - // makes rgba() and hsla() + // Makes rgba() and hsla() color.fn[ spaceName ] = function( value ) { - // generate a cache for this space if it doesn't exist + // Generate a cache for this space if it doesn't exist if ( to && !this[ cache ] ) { this[ cache ] = to( this._rgba ); } @@ -559,7 +566,7 @@ each( spaces, function( spaceName, space ) { val = local[ prop.idx ]; } local[ prop.idx ] = clamp( val, prop ); - }); + } ); if ( from ) { ret = color( from( local ) ); @@ -570,9 +577,10 @@ each( spaces, function( spaceName, space ) { } }; - // makes red() green() blue() alpha() hue() saturation() lightness() + // Makes red() green() blue() alpha() hue() saturation() lightness() each( props, function( key, prop ) { - // alpha is included in more than one space + + // Alpha is included in more than one space if ( color.fn[ key ] ) { return; } @@ -603,10 +611,10 @@ each( spaces, function( spaceName, space ) { local[ prop.idx ] = value; return this[ fn ]( local ); }; - }); -}); + } ); +} ); -// add cssHook and .fx.step function for each named hook. +// Add cssHook and .fx.step function for each named hook. // accept a space separated string of properties color.hook = function( hook ) { var hooks = hook.split( " " ); @@ -621,7 +629,7 @@ color.hook = function( hook ) { if ( !support.rgba && value._rgba[ 3 ] !== 1 ) { curElem = hook === "backgroundColor" ? elem.parentNode : elem; while ( - (backgroundColor === "" || backgroundColor === "transparent") && + ( backgroundColor === "" || backgroundColor === "transparent" ) && curElem && curElem.style ) { try { @@ -641,7 +649,8 @@ color.hook = function( hook ) { try { elem.style[ hook ] = value; } catch ( e ) { - // wrapped to prevent IE from throwing errors on "invalid" values like 'auto' or 'inherit' + + // Wrapped to prevent IE from throwing errors on "invalid" values like 'auto' or 'inherit' } } }; @@ -653,7 +662,7 @@ color.hook = function( hook ) { } jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) ); }; - }); + } ); }; @@ -665,7 +674,7 @@ jQuery.cssHooks.borderColor = { each( [ "Top", "Right", "Bottom", "Left" ], function( i, part ) { expanded[ "border" + part + "Color" ] = value; - }); + } ); return expanded; } }; @@ -674,6 +683,7 @@ jQuery.cssHooks.borderColor = { // Usage of any of the other color names requires adding yourself or including // jquery.color.svg-names.js. colors = jQuery.Color.names = { + // 4.1. Basic color keywords aqua: "#00ffff", black: "#000000", @@ -698,12 +708,12 @@ colors = jQuery.Color.names = { _default: "#ffffff" }; -})( jQuery ); +} )( jQuery ); /******************************************************************************/ /****************************** CLASS ANIMATIONS ******************************/ /******************************************************************************/ -(function() { +( function() { var classAnimationActions = [ "add", "remove", "toggle" ], shorthandStyles = { @@ -718,14 +728,14 @@ var classAnimationActions = [ "add", "remove", "toggle" ], padding: 1 }; -$.each([ "borderLeftStyle", "borderRightStyle", "borderBottomStyle", "borderTopStyle" ], function( _, prop ) { +$.each( [ "borderLeftStyle", "borderRightStyle", "borderBottomStyle", "borderTopStyle" ], function( _, prop ) { $.fx.step[ prop ] = function( fx ) { if ( fx.end !== "none" && !fx.setAttr || fx.pos === 1 && !fx.setAttr ) { jQuery.style( fx.elem, prop, fx.end ); fx.setAttr = true; } }; -}); +} ); function getElementStyles( elem ) { var key, len, @@ -742,7 +752,8 @@ function getElementStyles( elem ) { styles[ $.camelCase( key ) ] = style[ key ]; } } - // support: Opera, IE <9 + + // Support: Opera, IE <9 } else { for ( key in style ) { if ( typeof style[ key ] === "string" ) { @@ -772,7 +783,7 @@ function styleDifference( oldStyle, newStyle ) { return diff; } -// support: jQuery <1.8 +// Support: jQuery <1.8 if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? @@ -790,136 +801,139 @@ $.effects.animateClass = function( value, duration, easing, callback ) { applyClassChange, allAnimations = o.children ? animated.find( "*" ).addBack() : animated; - // map the animated objects to store the original styles. - allAnimations = allAnimations.map(function() { + // Map the animated objects to store the original styles. + allAnimations = allAnimations.map( function() { var el = $( this ); return { el: el, start: getElementStyles( this ) }; - }); + } ); - // apply class change + // Apply class change applyClassChange = function() { - $.each( classAnimationActions, function(i, action) { + $.each( classAnimationActions, function( i, action ) { if ( value[ action ] ) { animated[ action + "Class" ]( value[ action ] ); } - }); + } ); }; applyClassChange(); - // map all animated objects again - calculate new styles and diff - allAnimations = allAnimations.map(function() { + // Map all animated objects again - calculate new styles and diff + allAnimations = allAnimations.map( function() { this.end = getElementStyles( this.el[ 0 ] ); this.diff = styleDifference( this.start, this.end ); return this; - }); + } ); - // apply original class + // Apply original class animated.attr( "class", baseClass ); - // map all animated objects again - this time collecting a promise - allAnimations = allAnimations.map(function() { + // Map all animated objects again - this time collecting a promise + allAnimations = allAnimations.map( function() { var styleInfo = this, dfd = $.Deferred(), - opts = $.extend({}, o, { + opts = $.extend( {}, o, { queue: false, complete: function() { dfd.resolve( styleInfo ); } - }); + } ); this.el.animate( this.diff, opts ); return dfd.promise(); - }); + } ); - // once all animations have completed: - $.when.apply( $, allAnimations.get() ).done(function() { + // Once all animations have completed: + $.when.apply( $, allAnimations.get() ).done( function() { - // set the final class + // Set the final class applyClassChange(); - // for each animated element, + // For each animated element, // clear all css properties that were animated $.each( arguments, function() { var el = this.el; - $.each( this.diff, function(key) { + $.each( this.diff, function( key ) { el.css( key, "" ); - }); - }); + } ); + } ); - // this is guarnteed to be there if you use jQuery.speed() + // This is guarnteed to be there if you use jQuery.speed() // it also handles dequeuing the next anim... o.complete.call( animated[ 0 ] ); - }); - }); + } ); + } ); }; -$.fn.extend({ - addClass: (function( orig ) { +$.fn.extend( { + addClass: ( function( orig ) { return function( classNames, speed, easing, callback ) { return speed ? $.effects.animateClass.call( this, { add: classNames }, speed, easing, callback ) : orig.apply( this, arguments ); }; - })( $.fn.addClass ), + } )( $.fn.addClass ), - removeClass: (function( orig ) { + removeClass: ( function( orig ) { return function( classNames, speed, easing, callback ) { return arguments.length > 1 ? $.effects.animateClass.call( this, { remove: classNames }, speed, easing, callback ) : orig.apply( this, arguments ); }; - })( $.fn.removeClass ), + } )( $.fn.removeClass ), - toggleClass: (function( orig ) { + toggleClass: ( function( orig ) { return function( classNames, force, speed, easing, callback ) { if ( typeof force === "boolean" || force === undefined ) { if ( !speed ) { - // without speed parameter + + // Without speed parameter return orig.apply( this, arguments ); } else { return $.effects.animateClass.call( this, - (force ? { add: classNames } : { remove: classNames }), + ( force ? { add: classNames } : { remove: classNames } ), speed, easing, callback ); } } else { - // without force parameter + + // Without force parameter return $.effects.animateClass.call( this, { toggle: classNames }, force, speed, easing ); } }; - })( $.fn.toggleClass ), + } )( $.fn.toggleClass ), - switchClass: function( remove, add, speed, easing, callback) { + switchClass: function( remove, add, speed, easing, callback ) { return $.effects.animateClass.call( this, { add: add, remove: remove }, speed, easing, callback ); } -}); +} ); -})(); +} )(); /******************************************************************************/ /*********************************** EFFECTS **********************************/ /******************************************************************************/ -(function() { +( function() { if ( $.expr && $.expr.filters && $.expr.filters.animated ) { - $.expr.filters.animated = (function( orig ) { + $.expr.filters.animated = ( function( orig ) { return function( elem ) { return !!$( elem ).data( dataSpaceAnimated ) || orig( elem ); }; - })( $.expr.filters.animated ); + } )( $.expr.filters.animated ); } if ( $.uiBackCompat !== false ) { $.extend( $.effects, { + // Saves a set of properties in a data storage save: function( element, set ) { var i = 0, length = set.length; @@ -951,12 +965,12 @@ if ( $.uiBackCompat !== false ) { // Wraps the element around a wrapper that copies position properties createWrapper: function( element ) { - // if the element is already wrapped, return it + // If the element is already wrapped, return it if ( element.parent().is( ".ui-effects-wrapper" ) ) { return element.parent(); } - // wrap the element + // Wrap the element var props = { width: element.outerWidth( true ), height: element.outerHeight( true ), @@ -964,13 +978,14 @@ if ( $.uiBackCompat !== false ) { }, wrapper = $( "

" ) .addClass( "ui-effects-wrapper" ) - .css({ + .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(), @@ -978,7 +993,7 @@ if ( $.uiBackCompat !== false ) { }, active = document.activeElement; - // support: Firefox + // Support: Firefox // Firefox incorrectly exposes anonymous content // https://bugzilla.mozilla.org/show_bug.cgi?id=561664 try { @@ -996,30 +1011,30 @@ if ( $.uiBackCompat !== false ) { 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 + // Transfer positioning properties to the wrapper if ( element.css( "position" ) === "static" ) { - wrapper.css({ position: "relative" }); - element.css({ position: "relative" }); + 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) { + } ); + $.each( [ "top", "left", "bottom", "right" ], function( i, pos ) { props[ pos ] = element.css( pos ); if ( isNaN( parseInt( props[ pos ], 10 ) ) ) { props[ pos ] = "auto"; } - }); - element.css({ + } ); + element.css( { position: "relative", top: 0, left: 0, right: "auto", bottom: "auto" - }); + } ); } - element.css(size); + element.css( size ); return wrapper.css( props ).show(); }, @@ -1038,7 +1053,7 @@ if ( $.uiBackCompat !== false ) { return element; } - }); + } ); } $.extend( $.effects, { @@ -1167,19 +1182,19 @@ $.extend( $.effects, { // will change margin if you explicitly set height // see: http://jsfiddle.net/JZSMt/3/ https://bugs.webkit.org/show_bug.cgi?id=107380 // Support: Safari - element.css({ + 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({ + 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) @@ -1192,7 +1207,7 @@ $.extend( $.effects, { marginLeft: element.css( "marginLeft" ), marginRight: element.css( "marginRight" ), "float": element.css( "float" ) - }) + } ) .outerWidth( element.outerWidth() ) .outerHeight( element.outerHeight() ) .addClass( "ui-effects-placeholder" ); @@ -1200,11 +1215,11 @@ $.extend( $.effects, { element.data( dataSpace + "placeholder", placeholder ); } - element.css({ + element.css( { position: cssPosition, left: position.left, top: position.top - }); + } ); return placeholder; }, @@ -1233,49 +1248,49 @@ $.extend( $.effects, { if ( unit[ 0 ] > 0 ) { value[ x ] = unit[ 0 ] * factor + unit[ 1 ]; } - }); + } ); return value; } -}); +} ); -// return an effect options object for the given parameters: +// Return an effect options object for the given parameters: function _normalizeArguments( effect, options, speed, callback ) { - // allow passing all options as the first parameter + // Allow passing all options as the first parameter if ( $.isPlainObject( effect ) ) { options = effect; effect = effect.effect; } - // convert to an object + // Convert to an object effect = { effect: effect }; - // catch (effect, null, ...) + // Catch (effect, null, ...) if ( options == null ) { options = {}; } - // catch (effect, callback) + // Catch (effect, callback) if ( $.isFunction( options ) ) { callback = options; speed = null; options = {}; } - // catch (effect, speed, ?) + // Catch (effect, speed, ?) if ( typeof options === "number" || $.fx.speeds[ options ] ) { callback = speed; speed = options; options = {}; } - // catch (effect, options, callback) + // Catch (effect, options, callback) if ( $.isFunction( speed ) ) { callback = speed; speed = null; } - // add options to effect + // Add options to effect if ( options ) { $.extend( effect, options ); } @@ -1292,6 +1307,7 @@ function _normalizeArguments( effect, options, speed, callback ) { } function standardAnimationOption( option ) { + // Valid standard speeds (nothing, number, named speed) if ( !option || typeof option === "number" || $.fx.speeds[ option ] ) { return true; @@ -1316,7 +1332,7 @@ function standardAnimationOption( option ) { return false; } -$.fn.extend({ +$.fn.extend( { effect: function( /* effect, options, speed, callback */ ) { var args = _normalizeArguments.apply( this, arguments ), effectMethod = $.effects.effect[ args.effect ], @@ -1354,7 +1370,8 @@ $.fn.extend({ }; if ( $.fx.off || !effectMethod ) { - // delegate to the original method (e.g., .show()) if possible + + // Delegate to the original method (e.g., .show()) if possible if ( mode ) { return this[ mode ]( args.duration, complete ); } else { @@ -1362,7 +1379,7 @@ $.fn.extend({ if ( complete ) { complete.call( this ); } - }); + } ); } } @@ -1424,7 +1441,7 @@ $.fn.extend({ this.queue( queueName, prefilter ).queue( queueName, run ); }, - show: (function( orig ) { + show: ( function( orig ) { return function( option ) { if ( standardAnimationOption( option ) ) { return orig.apply( this, arguments ); @@ -1434,9 +1451,9 @@ $.fn.extend({ return this.effect.call( this, args ); } }; - })( $.fn.show ), + } )( $.fn.show ), - hide: (function( orig ) { + hide: ( function( orig ) { return function( option ) { if ( standardAnimationOption( option ) ) { return orig.apply( this, arguments ); @@ -1446,9 +1463,9 @@ $.fn.extend({ return this.effect.call( this, args ); } }; - })( $.fn.hide ), + } )( $.fn.hide ), - toggle: (function( orig ) { + toggle: ( function( orig ) { return function( option ) { if ( standardAnimationOption( option ) || typeof option === "boolean" ) { return orig.apply( this, arguments ); @@ -1458,9 +1475,9 @@ $.fn.extend({ return this.effect.call( this, args ); } }; - })( $.fn.toggle ), + } )( $.fn.toggle ), - cssUnit: function(key) { + cssUnit: function( key ) { var style = this.css( key ), val = []; @@ -1468,14 +1485,14 @@ $.fn.extend({ if ( style.indexOf( unit ) > 0 ) { val = [ parseFloat( style ), unit ]; } - }); + } ); return val; }, 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 ); + parseClip( this.css( "clip" ), this ); }, transfer: function( options, done ) { @@ -1496,21 +1513,21 @@ $.fn.extend({ transfer = $( "
" ) .appendTo( "body" ) .addClass( options.className ) - .css({ + .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(); if ( $.isFunction( done ) ) { done(); } - }); + } ); } -}); +} ); function parseClip( str, element ) { var outerWidth = element.outerWidth(), @@ -1535,23 +1552,23 @@ $.fx.step.clip = function( fx ) { 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 - }); + $( 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 + } ); }; -})(); +} )(); /******************************************************************************/ /*********************************** EASING ***********************************/ /******************************************************************************/ -(function() { +( function() { -// based on easing equations from Robert Penner (http://www.robertpenner.com/easing) +// Based on easing equations from Robert Penner (http://www.robertpenner.com/easing) var baseEasings = {}; @@ -1559,7 +1576,7 @@ $.each( [ "Quad", "Cubic", "Quart", "Quint", "Expo" ], function( i, name ) { baseEasings[ name ] = function( p ) { return Math.pow( p, i + 2 ); }; -}); +} ); $.extend( baseEasings, { Sine: function( p ) { @@ -1570,7 +1587,7 @@ $.extend( baseEasings, { }, Elastic: function( p ) { return p === 0 || p === 1 ? p : - -Math.pow( 2, 8 * (p - 1) ) * Math.sin( ( (p - 1) * 80 - 7.5 ) * Math.PI / 15 ); + -Math.pow( 2, 8 * ( p - 1 ) ) * Math.sin( ( ( p - 1 ) * 80 - 7.5 ) * Math.PI / 15 ); }, Back: function( p ) { return p * p * ( 3 * p - 2 ); @@ -1582,7 +1599,7 @@ $.extend( baseEasings, { while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {} return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 ); } -}); +} ); $.each( baseEasings, function( name, easeIn ) { $.easing[ "easeIn" + name ] = easeIn; @@ -1594,10 +1611,10 @@ $.each( baseEasings, function( name, easeIn ) { easeIn( p * 2 ) / 2 : 1 - easeIn( p * -2 + 2 ) / 2; }; -}); +} ); -})(); +} )(); return $.effects; -})); +} ) ); diff --git a/ui/effects/effect-bounce.js b/ui/effects/effect-bounce.js index 06bc84426..1743ef503 100644 --- a/ui/effects/effect-bounce.js +++ b/ui/effects/effect-bounce.js @@ -33,7 +33,7 @@ return $.effects.define( "bounce", function( options, done ) { var upAnim, downAnim, refValue, element = $( this ), - // defaults: + // Defaults: mode = options.mode, hide = mode === "hide", show = mode === "show", @@ -41,12 +41,12 @@ return $.effects.define( "bounce", function( options, done ) { distance = options.distance, times = options.times || 5, - // number of internal animations + // Number of internal animations anims = times * 2 + ( show || hide ? 1 : 0 ), speed = options.duration / anims, easing = options.easing, - // utility: + // Utility: ref = ( direction === "up" || direction === "down" ) ? "top" : "left", motion = ( direction === "up" || direction === "left" ), i = 0, @@ -57,7 +57,7 @@ return $.effects.define( "bounce", function( options, done ) { refValue = element.css( ref ); - // default distance for the BIGGEST bounce is the outer Distance / 3 + // Default distance for the BIGGEST bounce is the outer Distance / 3 if ( !distance ) { distance = element[ ref === "top" ? "outerHeight" : "outerWidth" ]() / 3; } @@ -66,7 +66,7 @@ return $.effects.define( "bounce", function( options, done ) { downAnim = { opacity: 1 }; downAnim[ ref ] = refValue; - // if we are showing, force opacity 0 and set the initial position + // If we are showing, force opacity 0 and set the initial position // then do the "first" animation element .css( "opacity", 0 ) @@ -74,13 +74,14 @@ return $.effects.define( "bounce", function( options, done ) { .animate( downAnim, speed, easing ); } - // start at the smallest distance if we are hiding + // Start at the smallest distance if we are hiding if ( hide ) { distance = distance / Math.pow( 2, times - 1 ); } downAnim = {}; downAnim[ ref ] = refValue; + // Bounces up/down/left/right then back to 0 -- times * 2 animations happen here for ( ; i < times; i++ ) { upAnim = {}; diff --git a/ui/effects/effect-explode.js b/ui/effects/effect-explode.js index 55c247d3e..92b83f545 100644 --- a/ui/effects/effect-explode.js +++ b/ui/effects/effect-explode.js @@ -38,15 +38,15 @@ return $.effects.define( "explode", "hide", function( options, done ) { mode = options.mode, show = mode === "show", - // show and then visibility:hidden the element before calculating offset + // Show and then visibility:hidden the element before calculating offset offset = element.show().css( "visibility", "hidden" ).offset(), - // width and height of a piece + // Width and height of a piece width = Math.ceil( element.outerWidth() / cells ), height = Math.ceil( element.outerHeight() / rows ), pieces = []; - // children animate complete: + // Children animate complete: function childComplete() { pieces.push( this ); if ( pieces.length === rows * cells ) { @@ -54,7 +54,7 @@ return $.effects.define( "explode", "hide", function( options, done ) { } } - // clone the element for each row and cell. + // Clone the element for each row and cell. for ( i = 0; i < rows; i++ ) { // ===> top = offset.top + i * height; my = i - ( rows - 1 ) / 2; @@ -76,7 +76,7 @@ return $.effects.define( "explode", "hide", function( options, done ) { top: -i * height } ) - // select the wrapper - make it overflow: hidden and absolute positioned based on + // Select the wrapper - make it overflow: hidden and absolute positioned based on // where the original was located +left and +top equal to the size of pieces .parent() .addClass( "ui-effects-explode" )