From 68e4649dc59140e0ecd19348a63fb6ef14ef7621 Mon Sep 17 00:00:00 2001 From: Julian Shapiro Date: Tue, 16 Sep 2014 17:47:11 -0700 Subject: [PATCH] 5.0.0 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit “In” transitioning elements have their initial opacity set to 0 immediately (instead of waiting for the first rAF tick). This removes FOUC. Closes #248. New Sequence Running feature. See: http://velocityjs.org/#uiPack. Thanks @stephen. Closes #296. --- packages/velocity/velocity.ui.js | 298 +++++++++++++++++---------- packages/velocity/velocity.ui.min.js | 4 +- 2 files changed, 192 insertions(+), 110 deletions(-) diff --git a/packages/velocity/velocity.ui.js b/packages/velocity/velocity.ui.js index 2f4aee8e..a43dc641 100644 --- a/packages/velocity/velocity.ui.js +++ b/packages/velocity/velocity.ui.js @@ -2,9 +2,9 @@ Velocity UI Pack **********************/ -/* VelocityJS.org UI Pack (4.1.4). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */ +/* VelocityJS.org UI Pack (5.0.0). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */ -;(function (factory) { +;(function (factory) { /* CommonJS module. */ if (typeof module === "object" && typeof module.exports === "object") { module.exports = factory(); @@ -12,38 +12,67 @@ } else if (typeof define === "function" && define.amd) { define([ "velocity" ], factory); /* Browser globals. */ - } else { + } else { factory(); } }(function() { return function (global, window, document, undefined) { - /************** + /************* Checks - **************/ + *************/ if (!global.Velocity || !global.Velocity.Utilities) { window.console && console.log("Velocity UI Pack: Velocity must be loaded first. Aborting."); return; - } else if (!global.Velocity.version || (global.Velocity.version.major <= 0 && global.Velocity.version.minor <= 11 && global.Velocity.version.patch < 8)) { - var abortError = "Velocity UI Pack: You need to update Velocity (jquery.velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity."; + } else { + var Velocity = global.Velocity, + $ = Velocity.Utilities; + } + + var velocityVersion = Velocity.version, + requiredVersion = { major: 1, minor: 1, patch: 0 }; + + function greaterSemver (primary, secondary) { + var versionInts = []; + + if (!primary || !secondary) { return false; } + + $.each([ primary, secondary ], function(i, versionObject) { + var versionIntsComponents = []; + + $.each(versionObject, function(component, value) { + while (value.toString().length < 5) { + value = "0" + value; + } + versionIntsComponents.push(value); + }); + + versionInts.push(versionIntsComponents.join("")) + }); + + return (parseFloat(versionInts[0]) > parseFloat(versionInts[1])); + } + if (greaterSemver(requiredVersion, velocityVersion)){ + var abortError = "Velocity UI Pack: You need to update Velocity (jquery.velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity."; alert(abortError); throw new Error(abortError); } - /****************** - Register UI - ******************/ + /************************ + Effect Registration + ************************/ - global.Velocity.RegisterUI = function (effectName, properties) { + /* Note: RegisterUI is a legacy name. */ + Velocity.RegisterEffect = Velocity.RegisterUI = function (effectName, properties) { /* Animate the expansion/contraction of the elements' parent's height for In/Out effects. */ function animateParentHeight (elements, direction, totalDuration, stagger) { var totalHeightDelta = 0, parentNode; /* Sum the total height (including padding and margin) of all targeted elements. */ - global.Velocity.Utilities.each(elements.nodeType ? [ elements ] : elements, function(i, element) { + $.each(elements.nodeType ? [ elements ] : elements, function(i, element) { if (stagger) { /* Increase the totalDuration by the successive delay amounts produced by the stagger option. */ totalDuration += i * stagger; @@ -51,84 +80,99 @@ return function (global, window, document, undefined) { parentNode = element.parentNode; - global.Velocity.Utilities.each([ "height", "paddingTop", "paddingBottom", "marginTop", "marginBottom"], function(i, property) { - totalHeightDelta += parseFloat(global.Velocity.CSS.getPropertyValue(element, property)); + $.each([ "height", "paddingTop", "paddingBottom", "marginTop", "marginBottom"], function(i, property) { + totalHeightDelta += parseFloat(Velocity.CSS.getPropertyValue(element, property)); }); }); /* Animate the parent element's height adjustment (with a varying duration multiplier for aesthetic benefits). */ - global.Velocity.animate( + Velocity.animate( parentNode, { height: (direction === "In" ? "+" : "-") + "=" + totalHeightDelta }, { queue: false, easing: "ease-in-out", duration: totalDuration * (direction === "In" ? 0.6 : 1) } ); } - /* Register a custom sequence for each effect. */ - global.Velocity.Sequences[effectName] = function (element, sequenceOptions, elementsIndex, elementsSize, elements, promiseData) { + /* Register a custom redirect for each effect. */ + Velocity.Redirects[effectName] = function (element, redirectOptions, elementsIndex, elementsSize, elements, promiseData) { var finalElement = (elementsIndex === elementsSize - 1); + if (typeof properties.defaultDuration === "function") { + properties.defaultDuration = properties.defaultDuration.call(elements, elements); + } else { + properties.defaultDuration = parseFloat(properties.defaultDuration); + } + /* Iterate through each effect's call array. */ for (var callIndex = 0; callIndex < properties.calls.length; callIndex++) { var call = properties.calls[callIndex], propertyMap = call[0], - sequenceDuration = (sequenceOptions.duration || properties.defaultDuration || 1000), + redirectDuration = (redirectOptions.duration || properties.defaultDuration || 1000), durationPercentage = call[1], callOptions = call[2] || {}, opts = {}; /* Assign the whitelisted per-call options. */ - opts.duration = sequenceDuration * (durationPercentage || 1); - opts.queue = sequenceOptions.queue || ""; + opts.duration = redirectDuration * (durationPercentage || 1); + opts.queue = redirectOptions.queue || ""; opts.easing = callOptions.easing || "ease"; - opts.delay = callOptions.delay || 0; + opts.delay = parseFloat(callOptions.delay) || 0; opts._cacheValues = callOptions._cacheValues || true; /* Special processing for the first effect call. */ if (callIndex === 0) { - /* If a delay was passed into the sequence, combine it with the first call's delay. */ - opts.delay += (sequenceOptions.delay || 0); + /* If a delay was passed into the redirect, combine it with the first call's delay. */ + opts.delay += (parseFloat(redirectOptions.delay) || 0); if (elementsIndex === 0) { opts.begin = function() { /* Only trigger a begin callback on the first effect call with the first element in the set. */ - sequenceOptions.begin && sequenceOptions.begin.call(elements, elements); + redirectOptions.begin && redirectOptions.begin.call(elements, elements); - /* Only trigger animateParentHeight() if we're using an In/Out transition. */ var direction = effectName.match(/(In|Out)$/); - if (sequenceOptions.animateParentHeight && direction) { - animateParentHeight(elements, direction[0], sequenceDuration + opts.delay, sequenceOptions.stagger); + + /* Make "in" transitioning elements invisible immediately so that there's no FOUC between now + and the first RAF tick. */ + if ((direction && direction[0] === "In") && propertyMap.opacity !== undefined) { + $.each(elements.nodeType ? [ elements ] : elements, function(i, element) { + Velocity.CSS.setPropertyValue(element, "opacity", 0); + }); + } + + /* Only trigger animateParentHeight() if we're using an In/Out transition. */ + if (redirectOptions.animateParentHeight && direction) { + animateParentHeight(elements, direction[0], redirectDuration + opts.delay, redirectOptions.stagger); } } } /* If the user isn't overriding the display option, default to "auto" for "In"-suffixed transitions. */ - if (sequenceOptions.display !== null) { - if (sequenceOptions.display !== undefined && sequenceOptions.display !== "none") { - opts.display = sequenceOptions.display; + if (redirectOptions.display !== null) { + if (redirectOptions.display !== undefined && redirectOptions.display !== "none") { + opts.display = redirectOptions.display; } else if (/In$/.test(effectName)) { /* Inline elements cannot be subjected to transforms, so we switch them to inline-block. */ - var defaultDisplay = global.Velocity.CSS.Values.getDisplayType(element); + var defaultDisplay = Velocity.CSS.Values.getDisplayType(element); opts.display = (defaultDisplay === "inline") ? "inline-block" : defaultDisplay; } } - if (sequenceOptions.visibility && sequenceOptions.visibility !== "hidden") { - opts.visibility = sequenceOptions.visibility; + if (redirectOptions.visibility && redirectOptions.visibility !== "hidden") { + opts.visibility = redirectOptions.visibility; } } /* Special processing for the last effect call. */ if (callIndex === properties.calls.length - 1) { - /* Append promise resolving onto the user's sequence callback. */ + /* Append promise resolving onto the user's redirect callback. */ function injectFinalCallbacks () { - if ((sequenceOptions.display === undefined || sequenceOptions.display === "none") && /Out$/.test(effectName)) { - global.Velocity.Utilities.each(elements.nodeType ? [ elements ] : elements, function(i, element) { - global.Velocity.CSS.setPropertyValue(element, "display", "none"); + if ((redirectOptions.display === undefined || redirectOptions.display === "none") && /Out$/.test(effectName)) { + $.each(elements.nodeType ? [ elements ] : elements, function(i, element) { + Velocity.CSS.setPropertyValue(element, "display", "none"); }); } - sequenceOptions.complete && sequenceOptions.complete.call(elements, elements); + redirectOptions.complete && redirectOptions.complete.call(elements, elements); if (promiseData) { promiseData.resolver(elements || element); @@ -142,7 +186,8 @@ return function (global, window, document, undefined) { /* Format each non-array value in the reset property map to [ value, value ] so that changes apply immediately and DOM querying is avoided (via forcefeeding). */ - if (typeof resetValue === "string" || typeof resetValue === "number") { + /* Note: Don't forcefeed hooks, otherwise their hook roots will be defaulted to their null values. */ + if (Velocity.CSS.Hooks.registered[resetProperty] === undefined && (typeof resetValue === "string" || typeof resetValue === "number")) { properties.reset[resetProperty] = [ properties.reset[resetProperty], properties.reset[resetProperty] ]; } } @@ -153,26 +198,26 @@ return function (global, window, document, undefined) { /* Since the reset option uses up the complete callback, we trigger the user's complete callback at the end of ours. */ if (finalElement) { resetOptions.complete = injectFinalCallbacks; - } + } - global.Velocity.animate(element, properties.reset, resetOptions); + Velocity.animate(element, properties.reset, resetOptions); /* Only trigger the user's complete callback on the last effect call with the last element in the set. */ } else if (finalElement) { injectFinalCallbacks(); } }; - if (sequenceOptions.visibility === "hidden") { - opts.visibility = sequenceOptions.visibility; + if (redirectOptions.visibility === "hidden") { + opts.visibility = redirectOptions.visibility; } } - global.Velocity.animate(element, propertyMap, opts); + Velocity.animate(element, propertyMap, opts); } }; /* Return the Velocity object so that RegisterUI calls can be chained. */ - return global.Velocity; + return Velocity; }; /********************* @@ -181,8 +226,8 @@ return function (global, window, document, undefined) { /* Externalize the packagedEffects data so that they can optionally be modified and re-registered. */ /* Support: <=IE8: Callouts will have no effect, and transitions will simply fade in/out. IE9/Android 2.3: Most effects are fully supported, the rest fade in/out. All other browsers: full support. */ - global.Velocity.RegisterUI.packagedEffects = - { + Velocity.RegisterEffect.packagedEffects = + { /* Animate.css */ "callout.bounce": { defaultDuration: 550, @@ -196,7 +241,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "callout.shake": { defaultDuration: 800, - calls: [ + calls: [ [ { translateX: -11 }, 0.125 ], [ { translateX: 11 }, 0.125 ], [ { translateX: -11 }, 0.125 ], @@ -210,7 +255,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "callout.flash": { defaultDuration: 1100, - calls: [ + calls: [ [ { opacity: [ 0, "easeInOutQuad", 1 ] }, 0.25 ], [ { opacity: [ 1, "easeInOutQuad" ] }, 0.25 ], [ { opacity: [ 0, "easeInOutQuad" ] }, 0.25 ], @@ -220,7 +265,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "callout.pulse": { defaultDuration: 825, - calls: [ + calls: [ [ { scaleX: 1.1, scaleY: 1.1 }, 0.50 ], [ { scaleX: 1, scaleY: 1 }, 0.50 ] ] @@ -228,7 +273,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "callout.swing": { defaultDuration: 950, - calls: [ + calls: [ [ { rotateZ: 15 }, 0.20 ], [ { rotateZ: -10 }, 0.20 ], [ { rotateZ: 5 }, 0.20 ], @@ -239,7 +284,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "callout.tada": { defaultDuration: 1000, - calls: [ + calls: [ [ { scaleX: 0.9, scaleY: 0.9, rotateZ: -3 }, 0.10 ], [ { scaleX: 1.1, scaleY: 1.1, rotateZ: 3 }, 0.10 ], [ { scaleX: 1.1, scaleY: 1.1, rotateZ: -3 }, 0.10 ], @@ -266,7 +311,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.flipXIn": { defaultDuration: 700, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], rotateY: [ 0, -55 ] } ] ], reset: { transformPerspective: 0 } @@ -274,7 +319,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.flipXOut": { defaultDuration: 700, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], rotateY: 55 } ] ], reset: { transformPerspective: 0, rotateY: 0 } @@ -282,7 +327,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.flipYIn": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], rotateX: [ 0, -45 ] } ] ], reset: { transformPerspective: 0 } @@ -290,7 +335,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.flipYOut": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], rotateX: 25 } ] ], reset: { transformPerspective: 0, rotateX: 0 } @@ -299,7 +344,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.flipBounceXIn": { defaultDuration: 900, - calls: [ + calls: [ [ { opacity: [ 0.725, 0 ], transformPerspective: [ 400, 400 ], rotateY: [ -10, 90 ] }, 0.50 ], [ { opacity: 0.80, rotateY: 10 }, 0.25 ], [ { opacity: 1, rotateY: 0 }, 0.25 ] @@ -310,7 +355,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.flipBounceXOut": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 0.9, 1 ], transformPerspective: [ 400, 400 ], rotateY: -10 }, 0.50 ], [ { opacity: 0, rotateY: 90 }, 0.50 ] ], @@ -320,7 +365,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.flipBounceYIn": { defaultDuration: 850, - calls: [ + calls: [ [ { opacity: [ 0.725, 0 ], transformPerspective: [ 400, 400 ], rotateX: [ -10, 90 ] }, 0.50 ], [ { opacity: 0.80, rotateX: 10 }, 0.25 ], [ { opacity: 1, rotateX: 0 }, 0.25 ] @@ -331,7 +376,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.flipBounceYOut": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 0.9, 1 ], transformPerspective: [ 400, 400 ], rotateX: -15 }, 0.50 ], [ { opacity: 0, rotateX: 90 }, 0.50 ] ], @@ -340,7 +385,7 @@ return function (global, window, document, undefined) { /* Magic.css */ "transition.swoopIn": { defaultDuration: 850, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], transformOriginX: [ "100%", "50%" ], transformOriginY: [ "100%", "100%" ], scaleX: [ 1, 0 ], scaleY: [ 1, 0 ], translateX: [ 0, -700 ], translateZ: 0 } ] ], reset: { transformOriginX: "50%", transformOriginY: "50%" } @@ -348,7 +393,7 @@ return function (global, window, document, undefined) { /* Magic.css */ "transition.swoopOut": { defaultDuration: 850, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "100%" ], transformOriginY: [ "100%", "100%" ], scaleX: 0, scaleY: 0, translateX: -700, translateZ: 0 } ] ], reset: { transformOriginX: "50%", transformOriginY: "50%", scaleX: 1, scaleY: 1, translateX: 0 } @@ -356,42 +401,42 @@ return function (global, window, document, undefined) { /* Magic.css */ /* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */ "transition.whirlIn": { - defaultDuration: 900, - calls: [ - [ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 0 ], scaleY: [ 1, 0 ], rotateY: [ 0, 160 ] } ] + defaultDuration: 750, + calls: [ + [ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 0 ], scaleY: [ 1, 0 ], rotateY: [ 0, 160 ] }, 1, { easing: "easeInOutSine" } ] ] }, /* Magic.css */ /* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */ "transition.whirlOut": { - defaultDuration: 900, - calls: [ - [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 0, scaleY: 0, rotateY: 160 } ] + defaultDuration: 850, + calls: [ + [ { opacity: [ 0, "easeInOutQuint", 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 0, scaleY: 0, rotateY: 160 }, 1, { easing: "easeInOutSine" } ] ], reset: { scaleX: 1, scaleY: 1, rotateY: 0 } }, "transition.shrinkIn": { defaultDuration: 700, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 1.5 ], scaleY: [ 1, 1.5 ], translateZ: 0 } ] ] }, "transition.shrinkOut": { defaultDuration: 650, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 1.3, scaleY: 1.3, translateZ: 0 } ] ], reset: { scaleX: 1, scaleY: 1 } }, "transition.expandIn": { defaultDuration: 700, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 0.625 ], scaleY: [ 1, 0.625 ], translateZ: 0 } ] ] }, "transition.expandOut": { defaultDuration: 700, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 0.5, scaleY: 0.5, translateZ: 0 } ] ], reset: { scaleX: 1, scaleY: 1 } @@ -399,7 +444,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "transition.bounceIn": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], scaleX: [ 1.05, 0.3 ], scaleY: [ 1.05, 0.3 ] }, 0.40 ], [ { scaleX: 0.9, scaleY: 0.9, translateZ: 0 }, 0.20 ], [ { scaleX: 1, scaleY: 1 }, 0.50 ] @@ -408,7 +453,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "transition.bounceOut": { defaultDuration: 800, - calls: [ + calls: [ [ { scaleX: 0.95, scaleY: 0.95 }, 0.40 ], [ { scaleX: 1.1, scaleY: 1.1, translateZ: 0 }, 0.40 ], [ { opacity: [ 0, 1 ], scaleX: 0.3, scaleY: 0.3 }, 0.20 ] @@ -418,7 +463,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "transition.bounceUpIn": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateY: [ -30, 1000 ] }, 0.60, { easing: "easeOutCirc" } ], [ { translateY: 10 }, 0.20 ], [ { translateY: 0 }, 0.20 ] @@ -427,7 +472,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "transition.bounceUpOut": { defaultDuration: 1000, - calls: [ + calls: [ [ { translateY: 20 }, 0.20 ], [ { opacity: [ 0, "easeInCirc", 1 ], translateY: -1000 }, 0.80 ] ], @@ -436,7 +481,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "transition.bounceDownIn": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateY: [ 30, -1000 ] }, 0.60, { easing: "easeOutCirc" } ], [ { translateY: -10 }, 0.20 ], [ { translateY: 0 }, 0.20 ] @@ -445,7 +490,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "transition.bounceDownOut": { defaultDuration: 1000, - calls: [ + calls: [ [ { translateY: -20 }, 0.20 ], [ { opacity: [ 0, "easeInCirc", 1 ], translateY: 1000 }, 0.80 ] ], @@ -454,7 +499,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "transition.bounceLeftIn": { defaultDuration: 750, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateX: [ 30, -1250 ] }, 0.60, { easing: "easeOutCirc" } ], [ { translateX: -10 }, 0.20 ], [ { translateX: 0 }, 0.20 ] @@ -463,7 +508,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "transition.bounceLeftOut": { defaultDuration: 750, - calls: [ + calls: [ [ { translateX: 30 }, 0.20 ], [ { opacity: [ 0, "easeInCirc", 1 ], translateX: -1250 }, 0.80 ] ], @@ -472,7 +517,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "transition.bounceRightIn": { defaultDuration: 750, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateX: [ -30, 1250 ] }, 0.60, { easing: "easeOutCirc" } ], [ { translateX: 10 }, 0.20 ], [ { translateX: 0 }, 0.20 ] @@ -481,7 +526,7 @@ return function (global, window, document, undefined) { /* Animate.css */ "transition.bounceRightOut": { defaultDuration: 750, - calls: [ + calls: [ [ { translateX: -30 }, 0.20 ], [ { opacity: [ 0, "easeInCirc", 1 ], translateX: 1250 }, 0.80 ] ], @@ -489,104 +534,104 @@ return function (global, window, document, undefined) { }, "transition.slideUpIn": { defaultDuration: 900, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateY: [ 0, 20 ], translateZ: 0 } ] ] }, "transition.slideUpOut": { defaultDuration: 900, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], translateY: -20, translateZ: 0 } ] ], reset: { translateY: 0 } }, "transition.slideDownIn": { defaultDuration: 900, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateY: [ 0, -20 ], translateZ: 0 } ] ] }, "transition.slideDownOut": { defaultDuration: 900, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], translateY: 20, translateZ: 0 } ] ], reset: { translateY: 0 } }, "transition.slideLeftIn": { defaultDuration: 1000, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateX: [ 0, -20 ], translateZ: 0 } ] ] }, "transition.slideLeftOut": { defaultDuration: 1050, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], translateX: -20, translateZ: 0 } ] ], reset: { translateX: 0 } }, "transition.slideRightIn": { defaultDuration: 1000, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateX: [ 0, 20 ], translateZ: 0 } ] ] }, "transition.slideRightOut": { defaultDuration: 1050, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], translateX: 20, translateZ: 0 } ] ], reset: { translateX: 0 } }, "transition.slideUpBigIn": { defaultDuration: 850, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateY: [ 0, 75 ], translateZ: 0 } ] ] }, "transition.slideUpBigOut": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], translateY: -75, translateZ: 0 } ] ], reset: { translateY: 0 } }, "transition.slideDownBigIn": { defaultDuration: 850, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateY: [ 0, -75 ], translateZ: 0 } ] ] }, "transition.slideDownBigOut": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], translateY: 75, translateZ: 0 } ] ], reset: { translateY: 0 } }, "transition.slideLeftBigIn": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateX: [ 0, -75 ], translateZ: 0 } ] ] }, "transition.slideLeftBigOut": { defaultDuration: 750, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], translateX: -75, translateZ: 0 } ] ], reset: { translateX: 0 } }, "transition.slideRightBigIn": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], translateX: [ 0, 75 ], translateZ: 0 } ] ] }, "transition.slideRightBigOut": { defaultDuration: 750, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], translateX: 75, translateZ: 0 } ] ], reset: { translateX: 0 } @@ -594,7 +639,7 @@ return function (global, window, document, undefined) { /* Magic.css */ "transition.perspectiveUpIn": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ "100%", "100%" ], rotateX: [ 0, -180 ] } ] ], reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" } @@ -603,7 +648,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.perspectiveUpOut": { defaultDuration: 850, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ "100%", "100%" ], rotateX: -180 } ] ], reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0 } @@ -612,7 +657,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.perspectiveDownIn": { defaultDuration: 800, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateX: [ 0, 180 ] } ] ], reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" } @@ -621,7 +666,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.perspectiveDownOut": { defaultDuration: 850, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateX: 180 } ] ], reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0 } @@ -630,7 +675,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.perspectiveLeftIn": { defaultDuration: 950, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateY: [ 0, -180 ] } ] ], reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" } @@ -639,7 +684,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.perspectiveLeftOut": { defaultDuration: 950, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateY: -180 } ] ], reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0 } @@ -648,7 +693,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.perspectiveRightIn": { defaultDuration: 950, - calls: [ + calls: [ [ { opacity: [ 1, 0 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ "100%", "100%" ], transformOriginY: [ 0, 0 ], rotateY: [ 0, 180 ] } ] ], reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" } @@ -657,7 +702,7 @@ return function (global, window, document, undefined) { /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ "transition.perspectiveRightOut": { defaultDuration: 950, - calls: [ + calls: [ [ { opacity: [ 0, 1 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ "100%", "100%" ], transformOriginY: [ 0, 0 ], rotateY: 180 } ] ], reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0 } @@ -665,8 +710,45 @@ return function (global, window, document, undefined) { }; /* Register the packaged effects. */ - for (var effectName in global.Velocity.RegisterUI.packagedEffects) { - global.Velocity.RegisterUI(effectName, global.Velocity.RegisterUI.packagedEffects[effectName]); + for (var effectName in Velocity.RegisterEffect.packagedEffects) { + Velocity.RegisterEffect(effectName, Velocity.RegisterEffect.packagedEffects[effectName]); } + + /********************* + Sequence Running + **********************/ + + /* Sequence calls must use Velocity's single-object arguments syntax. */ + Velocity.RunSequence = function (originalSequence) { + var sequence = $.extend(true, [], originalSequence); + + if (sequence.length > 1) { + $.each(sequence.reverse(), function(i, currentCall) { + var nextCall = sequence[i + 1]; + + if (nextCall) { + /* Parallel sequence calls (indicated via sequenceQueue:false) are triggered + in the previous call's begin callback. Otherwise, chained calls are normally triggered + in the previous call's complete callback. */ + var timing = (currentCall.options && currentCall.options.sequenceQueue === false) ? "begin" : "complete", + callbackOriginal = nextCall.options && nextCall.options[timing], + options = {}; + + options[timing] = function() { + var elements = nextCall.elements.nodeType ? [ nextCall.elements ] : nextCall.elements; + + callbackOriginal && callbackOriginal.call(elements, elements); + $.Velocity(currentCall); + } + + nextCall.options = $.extend({}, nextCall.options, options); + } + }); + + sequence.reverse(); + } + + $.Velocity(sequence[0]); + }; }((window.jQuery || window.Zepto || window), window, document); })); \ No newline at end of file diff --git a/packages/velocity/velocity.ui.min.js b/packages/velocity/velocity.ui.min.js index 238abc5c..c332d040 100644 --- a/packages/velocity/velocity.ui.min.js +++ b/packages/velocity/velocity.ui.min.js @@ -1,2 +1,2 @@ -/* VelocityJS.org UI Pack (4.1.4). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */ -!function(t){"object"==typeof module&&"object"==typeof module.exports?module.exports=t():"function"==typeof define&&define.amd?define(["velocity"],t):t()}(function(){return function(t,a,e,r){if(!t.Velocity||!t.Velocity.Utilities)return void(a.console&&console.log("Velocity UI Pack: Velocity must be loaded first. Aborting."));if(!t.Velocity.version||t.Velocity.version.major<=0&&t.Velocity.version.minor<=11&&t.Velocity.version.patch<8){var i="Velocity UI Pack: You need to update Velocity (jquery.velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.";throw alert(i),new Error(i)}t.Velocity.RegisterUI=function(a,e){function i(a,e,r,i){var n=0,s;t.Velocity.Utilities.each(a.nodeType?[a]:a,function(a,e){i&&(r+=a*i),s=e.parentNode,t.Velocity.Utilities.each(["height","paddingTop","paddingBottom","marginTop","marginBottom"],function(a,r){n+=parseFloat(t.Velocity.CSS.getPropertyValue(e,r))})}),t.Velocity.animate(s,{height:("In"===e?"+":"-")+"="+n},{queue:!1,easing:"ease-in-out",duration:r*("In"===e?.6:1)})}return t.Velocity.Sequences[a]=function(n,s,l,o,c,u){function f(){s.display!==r&&"none"!==s.display||!/Out$/.test(a)||t.Velocity.Utilities.each(c.nodeType?[c]:c,function(a,e){t.Velocity.CSS.setPropertyValue(e,"display","none")}),s.complete&&s.complete.call(c,c),u&&u.resolver(c||n)}for(var p=l===o-1,d=0;dparseFloat(e[1])):!1}if(!t.Velocity||!t.Velocity.Utilities)return void(a.console&&console.log("Velocity UI Pack: Velocity must be loaded first. Aborting."));var i=t.Velocity,$=i.Utilities,s=i.version,o={major:1,minor:1,patch:0};if(n(o,s)){var l="Velocity UI Pack: You need to update Velocity (jquery.velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.";throw alert(l),new Error(l)}i.RegisterEffect=i.RegisterUI=function(t,a){function e(t,a,e,r){var n=0,s;$.each(t.nodeType?[t]:t,function(t,a){r&&(e+=t*r),s=a.parentNode,$.each(["height","paddingTop","paddingBottom","marginTop","marginBottom"],function(t,e){n+=parseFloat(i.CSS.getPropertyValue(a,e))})}),i.animate(s,{height:("In"===a?"+":"-")+"="+n},{queue:!1,easing:"ease-in-out",duration:e*("In"===a?.6:1)})}return i.Redirects[t]=function(n,s,o,l,c,u){function f(){s.display!==r&&"none"!==s.display||!/Out$/.test(t)||$.each(c.nodeType?[c]:c,function(t,a){i.CSS.setPropertyValue(a,"display","none")}),s.complete&&s.complete.call(c,c),u&&u.resolver(c||n)}var p=o===l-1;a.defaultDuration="function"==typeof a.defaultDuration?a.defaultDuration.call(c,c):parseFloat(a.defaultDuration);for(var d=0;d1&&($.each(a.reverse(),function(t,e){var r=a[t+1];if(r){var n=e.options&&e.options.sequenceQueue===!1?"begin":"complete",i=r.options&&r.options[n],s={};s[n]=function(){var t=r.elements.nodeType?[r.elements]:r.elements;i&&i.call(t,t),$.Velocity(e)},r.options=$.extend({},r.options,s)}}),a.reverse()),$.Velocity(a[0])}}(window.jQuery||window.Zepto||window,window,document)}); \ No newline at end of file