You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2014/09/02 14:09:14 UTC
[3/4] Update velocity to 1.0.0
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/64e3b086/assets/js/plugins/jquery.velocity.js
----------------------------------------------------------------------
diff --git a/assets/js/plugins/jquery.velocity.js b/assets/js/plugins/jquery.velocity.js
deleted file mode 100644
index 86348d7..0000000
--- a/assets/js/plugins/jquery.velocity.js
+++ /dev/null
@@ -1,4073 +0,0 @@
-/******************
- Velocity.js
-******************/
-
-/*! VelocityJS.org (0.11.7). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License */
-
-;(function (factory) {
- /* CommonJS module. */
- if (typeof module === "object" && typeof module.exports === "object") {
- module.exports = factory(window.Velocity ? window.jQuery : require("jquery"));
- /* AMD module. */
- } else if (typeof define === "function" && define.amd) {
- if (window.Velocity) {
- define("velocity", factory);
- } else {
- define("velocity", [ "jquery" ], factory)
- }
- /* Browser globals. */
- } else {
- factory(window.jQuery);
- }
-}(function (jQuery) {
-return function (global, window, document, undefined) {
- /*
- Structure:
- - CSS: CSS stack that works independently from the rest of Velocity.
- - animate(): Core animation method that iterates over the targeted elements and queues the incoming call onto each element individually.
- - Pre-Queueing: Prepare the element for animation by instantiating its data cache and processing the call's options.
- - Queueing: The logic that runs once the call has reached its point of execution in the element's $.queue() stack.
- Most logic is placed here to avoid risking it becoming stale (if the element's properties have changed).
- - Pushing: Consolidation of the tween data followed by its push onto the global in-progress calls container.
- - tick(): The single requestAnimationFrame loop responsible for tweening all in-progress calls.
- - completeCall(): Handles the cleanup process for each Velocity call.
- */
-
- /*****************
- Constants
- *****************/
-
- var NAME = "velocity",
- DEFAULT_DURATION = 400,
- DEFAULT_EASING = "swing";
-
- /*********************
- Helper Functions
- *********************/
-
- /* IE detection. Gist: https://gist.github.com/julianshapiro/9098609 */
- var IE = (function() {
- if (document.documentMode) {
- return document.documentMode;
- } else {
- for (var i = 7; i > 4; i--) {
- var div = document.createElement("div");
-
- div.innerHTML = "<!--[if IE " + i + "]><span></span><![endif]-->";
-
- if (div.getElementsByTagName("span").length) {
- div = null;
-
- return i;
- }
- }
- }
-
- return undefined;
- })();
-
- /* rAF polyfill. Gist: https://gist.github.com/julianshapiro/9497513 */
- var rAFPollyfill = (function() {
- var timeLast = 0;
-
- return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
- var timeCurrent = (new Date()).getTime(),
- timeDelta;
-
- /* Dynamically set delay on a per-tick basis to match 60fps. */
- /* Technique by Erik Moller. MIT license: https://gist.github.com/paulirish/1579671 */
- timeDelta = Math.max(0, 16 - (timeCurrent - timeLast));
- timeLast = timeCurrent + timeDelta;
-
- return setTimeout(function() { callback(timeCurrent + timeDelta); }, timeDelta);
- };
- })();
-
- var ticker = window.requestAnimationFrame || rAFPollyfill;
-
- /* Array compacting. Copyright Lo-Dash. MIT License: https://github.com/lodash/lodash/blob/master/LICENSE.txt */
- function compactSparseArray (array) {
- var index = -1,
- length = array ? array.length : 0,
- result = [];
-
- while (++index < length) {
- var value = array[index];
-
- if (value) {
- result.push(value);
- }
- }
-
- return result;
- }
-
- /* Wrap single elements in an array so that $.each() can iterate with the element instead of its node's children. */
- function createElementsArray (elements) {
- return Type.isNode(elements) ? [ elements ] : elements;
- }
-
- var Type = {
- isString: function (variable) {
- return (typeof variable === "string");
- },
-
- isArray: Array.isArray || function (variable) {
- return Object.prototype.toString.call(variable) === "[object Array]";
- },
-
- isFunction: function (variable) {
- return Object.prototype.toString.call(variable) === "[object Function]";
- },
-
- isNode: function (variable) {
- return variable && variable.nodeType;
- },
-
- /* Copyright Martin Bohm. MIT License: https://gist.github.com/Tomalak/818a78a226a0738eaade */
- isNodeList: function (variable) {
- return typeof variable === "object" &&
- /^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(variable)) &&
- variable.length !== undefined &&
- (variable.length === 0 || (typeof variable[0] === "object" && variable[0].nodeType > 0));
- },
-
- /* Determine if variable is a wrapped jQuery or Zepto element. */
- isWrapped: function (variable) {
- return variable && (variable.jquery || (window.Zepto && window.Zepto.zepto.isZ(variable)));
- },
-
- isSVG: function (variable) {
- return window.SVGElement && (variable instanceof SVGElement);
- },
-
- isEmptyObject: function (variable) {
- var name;
-
- for (name in variable) {
- return false;
- }
-
- return true;
- }
- };
-
- /*****************
- Dependencies
- *****************/
-
- /* Local to our Velocity scope, assign $ to jQuery or the jQuery shim. (The shim is a port of the jQuery utility functions that Velocity uses.) */
- var $;
-
- /* The argument passed in by the module loader can either be jQuery (if it was required) or a helper function provided by the module loader
- (in the case that Velocity's jQuery shim is being used). We check for jQuery by sniffing its unique .fn property. */
- if (jQuery && jQuery.fn !== undefined) {
- $ = jQuery;
- } else if (window.Velocity && window.Velocity.Utilities) {
- $ = window.Velocity.Utilities;
- }
-
- if (!$) {
- throw new Error("Velocity: Either jQuery or Velocity's jQuery shim must first be loaded.")
- /* We allow the global Velocity variable to pre-exist so long as we were responsible for its creation
- (via the jQuery shim, which uniquely assigns a Utilities property to the Velocity object). */
- } else if (global.Velocity !== undefined && global.Velocity.Utilities == undefined) {
- throw new Error("Velocity: Namespace is occupied.");
- /* Nothing prevents Velocity from working on IE6+7, but it is not worth the time to test on them.
- Revert to jQuery's $.animate(), and lose Velocity's extra features. */
- } else if (IE <= 7) {
- if (!jQuery) {
- throw new Error("Velocity: In IE<=7, Velocity falls back to jQuery, which must first be loaded.");
- } else {
- jQuery.fn.velocity = jQuery.fn.animate;
-
- /* Now that $.fn.velocity is aliased, abort this Velocity declaration. */
- return;
- }
- /* IE8 doesn't work with the jQuery shim; it requires jQuery proper. */
- } else if (IE === 8 && !jQuery) {
- throw new Error("Velocity: In IE8, Velocity requires jQuery proper to be loaded; Velocity's jQuery shim does not work with IE8.");
- }
-
- /* Shorthand alias for jQuery's $.data() utility. */
- function Data (element) {
- /* Hardcode a reference to the plugin name. */
- var response = $.data(element, NAME);
-
- /* jQuery <=1.4.2 returns null instead of undefined when no match is found. We normalize this behavior. */
- return response === null ? undefined : response;
- };
-
- /*************
- State
- *************/
-
- /* Note: The global object also doubles as a publicly-accessible data store for the purposes of unit testing. */
- /* Note: Alias the lowercase and uppercase variants of "velocity" to minimize user confusion due to the lowercase nature of the $.fn extension. */
- var Velocity = {
- /* Container for page-wide Velocity state data. */
- State: {
- /* Detect mobile devices to determine if mobileHA should be turned on. */
- isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
- /* The mobileHA option's behavior changes on older Android devices (Gingerbread, versions 2.3.3-2.3.7). */
- isAndroid: /Android/i.test(navigator.userAgent),
- isGingerbread: /Android 2\.3\.[3-7]/i.test(navigator.userAgent),
- isChrome: window.chrome,
- isFirefox: /Firefox/i.test(navigator.userAgent),
- /* Create a cached element for re-use when checking for CSS property prefixes. */
- prefixElement: document.createElement("div"),
- /* Cache every prefix match to avoid repeating lookups. */
- prefixMatches: {},
- /* Cache the anchor used for animating window scrolling. */
- scrollAnchor: null,
- /* Cache the property names associated with the scroll anchor. */
- scrollPropertyLeft: null,
- scrollPropertyTop: null,
- /* Keep track of whether our RAF tick is running. */
- isTicking: false,
- /* Container for every in-progress call to Velocity. */
- calls: []
- },
- /* Velocity's custom CSS stack. Made global for unit testing. */
- CSS: { /* Defined below. */ },
- /* Defined by Velocity's optional jQuery shim. */
- Utilities: $,
- /* Container for the user's custom animation sequences that are referenced by name in place of a properties map object. */
- Sequences: {
- /* Manually registered by the user. Learn more: VelocityJS.org/#sequences */
- },
- Easings: {
- /* Defined below. */
- },
- /* Attempt to use ES6 Promises by default. Users can override this with a third-party promises library. */
- Promise: window.Promise,
- /* Page-wide option defaults, which can be overriden by the user. */
- defaults: {
- queue: "",
- duration: DEFAULT_DURATION,
- easing: DEFAULT_EASING,
- begin: null,
- complete: null,
- progress: null,
- display: null,
- loop: false,
- delay: false,
- mobileHA: true,
- /* Set to false to prevent property values from being cached between consecutive Velocity-initiated chain calls. */
- _cacheValues: true
- },
- /* A design goal of Velocity is to cache data wherever possible in order to avoid DOM requerying.
- Accordingly, each element has a data cache instantiated on it. */
- init: function (element) {
- $.data(element, NAME, {
- /* Store whether this is an SVG element, since its properties are retrieved and updated differently than standard HTML elements. */
- isSVG: Type.isSVG(element),
- /* Keep track of whether the element is currently being animated by Velocity.
- This is used to ensure that property values are not transferred between non-consecutive (stale) calls. */
- isAnimating: false,
- /* A reference to the element's live computedStyle object. Learn more here: https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle */
- computedStyle: null,
- /* Tween data is cached for each animation on the element so that data can be passed across calls --
- in particular, end values are used as subsequent start values in consecutive Velocity calls. */
- tweensContainer: null,
- /* The full root property values of each CSS hook being animated on this element are cached so that:
- 1) Concurrently-animating hooks sharing the same root can have their root values' merged into one while tweening.
- 2) Post-hook-injection root values can be transferred over to consecutively chained Velocity calls as starting root values. */
- rootPropertyValueCache: {},
- /* A cache for transform updates, which must be manually flushed via CSS.flushTransformCache(). */
- transformCache: {}
- });
- },
- /* Velocity's core animation method, later aliased to $.fn if a framework (jQuery or Zepto) is detected. */
- animate: null, /* Defined below. */
- /* A reimplementation of jQuery's $.css(), used for getting/setting Velocity's hooked CSS properties. */
- hook: function (elements, arg2, arg3) {
- var value = undefined;
-
- /* Unwrap jQuery/Zepto objects. */
- if (Type.isWrapped(elements)) {
- elements = [].slice.call(elements);
- }
-
- $.each(createElementsArray(elements), function(i, element) {
- /* Initialize Velocity's per-element data cache if this element hasn't previously been animated. */
- if (Data(element) === undefined) {
- Velocity.init(element);
- }
-
- /* Get property value. If an element set was passed in, only return the value for the first element. */
- if (arg3 === undefined) {
- if (value === undefined) {
- value = Velocity.CSS.getPropertyValue(element, arg2);
- }
- /* Set property value. */
- } else {
- /* sPV returns an array of the normalized propertyName/propertyValue pair used to update the DOM. */
- var adjustedSet = Velocity.CSS.setPropertyValue(element, arg2, arg3);
-
- /* Transform properties don't automatically set. They have to be flushed to the DOM. */
- if (adjustedSet[0] === "transform") {
- Velocity.CSS.flushTransformCache(element);
- }
-
- value = adjustedSet;
- }
- });
-
- return value;
- },
- /* Set to true to force a duration of 1ms for all animations so that UI testing can be performed without waiting on animations to complete. */
- mock: false,
- version: { major: 0, minor: 11, patch: 7 },
- /* Set to 1 or 2 (most verbose) to output debug info to console. */
- debug: false
- };
-
- /* Retrieve the appropriate scroll anchor and property name for the browser: https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY */
- if (window.pageYOffset !== undefined) {
- Velocity.State.scrollAnchor = window;
- Velocity.State.scrollPropertyLeft = "pageXOffset";
- Velocity.State.scrollPropertyTop = "pageYOffset";
- } else {
- Velocity.State.scrollAnchor = document.documentElement || document.body.parentNode || document.body;
- Velocity.State.scrollPropertyLeft = "scrollLeft";
- Velocity.State.scrollPropertyTop = "scrollTop";
- }
-
- /**************
- Easing
- **************/
-
- /* Step easing generator. */
- function generateStep (steps) {
- return function (p) {
- return Math.round(p * steps) * (1 / steps);
- };
- }
-
- /* Bezier curve function generator. Copyright Gaetan Renaudeau. MIT License: http://en.wikipedia.org/wiki/MIT_License */
- var generateBezier = (function () {
- function A (aA1, aA2) {
- return 1.0 - 3.0 * aA2 + 3.0 * aA1;
- }
-
- function B (aA1, aA2) {
- return 3.0 * aA2 - 6.0 * aA1;
- }
- function C (aA1) {
- return 3.0 * aA1;
- }
-
- function calcBezier (aT, aA1, aA2) {
- return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
- }
-
- function getSlope (aT, aA1, aA2) {
- return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
- }
-
- return function (mX1, mY1, mX2, mY2) {
- /* Must contain four arguments. */
- if (arguments.length !== 4) {
- return false;
- }
-
- /* Arguments must be numbers. */
- for (var i = 0; i < 4; ++i) {
- if (typeof arguments[i] !== "number" || isNaN(arguments[i]) || !isFinite(arguments[i])) {
- return false;
- }
- }
-
- /* X values must be in the [0, 1] range. */
- mX1 = Math.min(mX1, 1);
- mX2 = Math.min(mX2, 1);
- mX1 = Math.max(mX1, 0);
- mX2 = Math.max(mX2, 0);
-
- function getTForX (aX) {
- var aGuessT = aX;
-
- for (var i = 0; i < 8; ++i) {
- var currentSlope = getSlope(aGuessT, mX1, mX2);
-
- if (currentSlope === 0.0) {
- return aGuessT;
- }
-
- var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
-
- aGuessT -= currentX / currentSlope;
- }
-
- return aGuessT;
- }
-
- return function (aX) {
- if (mX1 === mY1 && mX2 === mY2) {
- return aX;
- } else {
- return calcBezier(getTForX(aX), mY1, mY2);
- }
- };
- };
- }());
-
- /* Runge-Kutta spring physics function generator. Adapted from Framer.js, copyright Koen Bok. MIT License: http://en.wikipedia.org/wiki/MIT_License */
- /* Given a tension, friction, and duration, a simulation at 60FPS will first run without a defined duration in order to calculate the full path. A second pass
- then adjusts the time dela -- using the relation between actual time and duration -- to calculate the path for the duration-constrained animation. */
- var generateSpringRK4 = (function () {
-
- function springAccelerationForState (state) {
- return (-state.tension * state.x) - (state.friction * state.v);
- }
-
- function springEvaluateStateWithDerivative (initialState, dt, derivative) {
- var state = {
- x: initialState.x + derivative.dx * dt,
- v: initialState.v + derivative.dv * dt,
- tension: initialState.tension,
- friction: initialState.friction
- };
-
- return { dx: state.v, dv: springAccelerationForState(state) };
- }
-
- function springIntegrateState (state, dt) {
- var a = {
- dx: state.v,
- dv: springAccelerationForState(state)
- },
- b = springEvaluateStateWithDerivative(state, dt * 0.5, a),
- c = springEvaluateStateWithDerivative(state, dt * 0.5, b),
- d = springEvaluateStateWithDerivative(state, dt, c),
- dxdt = 1.0 / 6.0 * (a.dx + 2.0 * (b.dx + c.dx) + d.dx),
- dvdt = 1.0 / 6.0 * (a.dv + 2.0 * (b.dv + c.dv) + d.dv);
-
- state.x = state.x + dxdt * dt;
- state.v = state.v + dvdt * dt;
-
- return state;
- }
-
- return function springRK4Factory (tension, friction, duration) {
-
- var initState = {
- x: -1,
- v: 0,
- tension: null,
- friction: null
- },
- path = [0],
- time_lapsed = 0,
- tolerance = 1 / 10000,
- DT = 16 / 1000,
- have_duration, dt, last_state;
-
- tension = parseFloat(tension) || 500;
- friction = parseFloat(friction) || 20;
- duration = duration || null;
-
- initState.tension = tension;
- initState.friction = friction;
-
- have_duration = duration !== null;
-
- /* Calculate the actual time it takes for this animation to complete with the provided conditions. */
- if (have_duration) {
- /* Run the simulation without a duration. */
- time_lapsed = springRK4Factory(tension, friction);
- /* Compute the adjusted time delta. */
- dt = time_lapsed / duration * DT;
- } else {
- dt = DT;
- }
-
- while (true) {
- /* Next/step function .*/
- last_state = springIntegrateState(last_state || initState, dt);
- /* Store the position. */
- path.push(1 + last_state.x);
- time_lapsed += 16;
- /* If the change threshold is reached, break. */
- if (!(Math.abs(last_state.x) > tolerance && Math.abs(last_state.v) > tolerance)) {
- break;
- }
- }
-
- /* If duration is not defined, return the actual time required for completing this animation. Otherwise, return a closure that holds the
- computed path and returns a snapshot of the position according to a given percentComplete. */
- return !have_duration ? time_lapsed : function(percentComplete) { return path[ (percentComplete * (path.length - 1)) | 0 ]; };
- };
- }());
-
- /* Velocity embeds the named easings from jQuery, jQuery UI, and CSS3 in order to save users from having to include additional libraries on their page. */
- (function () {
- /* jQuery's default named easing types. */
- Velocity.Easings["linear"] = function(p) {
- return p;
- };
-
- Velocity.Easings["swing"] = function(p) {
- return 0.5 - Math.cos(p * Math.PI) / 2;
- };
-
- /* Bonus "spring" easing, which is a less exaggerated version of easeInOutElastic. */
- Velocity.Easings["spring"] = function(p) {
- return 1 - (Math.cos(p * 4.5 * Math.PI) * Math.exp(-p * 6));
- };
-
- /* CSS3's named easing types. */
- Velocity.Easings["ease"] = generateBezier(0.25, 0.1, 0.25, 1.0);
- Velocity.Easings["ease-in"] = generateBezier(0.42, 0.0, 1.00, 1.0);
- Velocity.Easings["ease-out"] = generateBezier(0.00, 0.0, 0.58, 1.0);
- Velocity.Easings["ease-in-out"] = generateBezier(0.42, 0.0, 0.58, 1.0);
-
- /* jQuery UI's Robert Penner easing equations. Copyright The jQuery Foundation. MIT License: https://jquery.org/license */
- var baseEasings = {};
-
- $.each(["Quad", "Cubic", "Quart", "Quint", "Expo"], function(i, name) {
- baseEasings[name] = function(p) {
- return Math.pow(p, i + 2);
- };
- });
-
- $.extend(baseEasings, {
- Sine: function (p) {
- return 1 - Math.cos(p * Math.PI / 2);
- },
-
- Circ: function (p) {
- return 1 - Math.sqrt(1 - p * p);
- },
-
- 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);
- },
-
- Back: function(p) {
- return p * p * (3 * p - 2);
- },
-
- Bounce: function (p) {
- var pow2,
- bounce = 4;
-
- 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);
- }
- });
-
- /* jQuery's easing generator for the object above. */
- $.each(baseEasings, function(name, easeIn) {
- Velocity.Easings["easeIn" + name] = easeIn;
- Velocity.Easings["easeOut" + name] = function(p) {
- return 1 - easeIn(1 - p);
- };
- Velocity.Easings["easeInOut" + name] = function(p) {
- return p < 0.5 ?
- easeIn(p * 2) / 2 :
- 1 - easeIn(p * -2 + 2) / 2;
- };
- });
- })();
-
- /* Determine the appropriate easing type given an easing input. */
- function getEasing(value, duration) {
- var easing = value;
-
- /* The easing option can either be a string that references a pre-registered easing,
- or it can be a two-/four-item array of integers to be converted into a bezier/spring function. */
- if (Type.isString(value)) {
- /* Ensure that the easing has been assigned to jQuery's Velocity.Easings object. */
- if (!Velocity.Easings[value]) {
- easing = false;
- }
- } else if (Type.isArray(value) && value.length === 1) {
- easing = generateStep.apply(null, value);
- } else if (Type.isArray(value) && value.length === 2) {
- /* springRK4 must be passed the animation's duration. */
- /* Note: If the springRK4 array contains non-numbers, generateSpringRK4() returns an easing
- function generated with default tension and friction values. */
- easing = generateSpringRK4.apply(null, value.concat([ duration ]));
- } else if (Type.isArray(value) && value.length === 4) {
- /* Note: If the bezier array contains non-numbers, generateBezier() returns false. */
- easing = generateBezier.apply(null, value);
- } else {
- easing = false;
- }
-
- /* Revert to the Velocity-wide default easing type, or fall back to "swing" (which is also jQuery's default)
- if the Velocity-wide default has been incorrectly modified. */
- if (easing === false) {
- if (Velocity.Easings[Velocity.defaults.easing]) {
- easing = Velocity.defaults.easing;
- } else {
- easing = DEFAULT_EASING;
- }
- }
-
- return easing;
- }
-
- /*****************
- CSS Stack
- *****************/
-
- /* The CSS object is a highly condensed and performant CSS stack that fully replaces jQuery's.
- It handles the validation, getting, and setting of both standard CSS properties and CSS property hooks. */
- /* Note: A "CSS" shorthand is aliased so that our code is easier to read. */
- var CSS = Velocity.CSS = {
-
- /*************
- RegEx
- *************/
-
- RegEx: {
- /* Unwrap a property value's surrounding text, e.g. "rgba(4, 3, 2, 1)" ==> "4, 3, 2, 1" and "rect(4px 3px 2px 1px)" ==> "4px 3px 2px 1px". */
- isHex: /^#([A-f\d]{3}){1,2}$/i,
- valueUnwrap: /^[A-z]+\((.*)\)$/i,
- wrappedValueAlreadyExtracted: /[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/,
- /* Split a multi-value property into an array of subvalues, e.g. "rgba(4, 3, 2, 1) 4px 3px 2px 1px" ==> [ "rgba(4, 3, 2, 1)", "4px", "3px", "2px", "1px" ]. */
- valueSplit: /([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/ig
- },
-
- /************
- Lists
- ************/
-
- Lists: {
- colors: [ "fill", "stroke", "stopColor", "color", "backgroundColor", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", "outlineColor" ],
- transformsBase: [ "translateX", "translateY", "scale", "scaleX", "scaleY", "skewX", "skewY", "rotateZ" ],
- transforms3D: [ "transformPerspective", "translateZ", "scaleZ", "rotateX", "rotateY" ]
- },
-
- /************
- Hooks
- ************/
-
- /* Hooks allow a subproperty (e.g. "boxShadowBlur") of a compound-value CSS property
- (e.g. "boxShadow: X Y Blur Spread Color") to be animated as if it were a discrete property. */
- /* Note: Beyond enabling fine-grained property animation, hooking is necessary since Velocity only
- tweens properties with single numeric values; unlike CSS transitions, Velocity does not interpolate compound-values. */
- Hooks: {
- /********************
- Registration
- ********************/
-
- /* Templates are a concise way of indicating which subproperties must be individually registered for each compound-value CSS property. */
- /* Each template consists of the compound-value's base name, its constituent subproperty names, and those subproperties' default values. */
- templates: {
- "textShadow": [ "Color X Y Blur", "black 0px 0px 0px" ],
- /* Todo: Add support for inset boxShadows. (webkit places it last whereas IE places it first.) */
- "boxShadow": [ "Color X Y Blur Spread", "black 0px 0px 0px 0px" ],
- "clip": [ "Top Right Bottom Left", "0px 0px 0px 0px" ],
- "backgroundPosition": [ "X Y", "0% 0%" ],
- "transformOrigin": [ "X Y Z", "50% 50% 0px" ],
- "perspectiveOrigin": [ "X Y", "50% 50%" ]
- },
-
- /* A "registered" hook is one that has been converted from its template form into a live,
- tweenable property. It contains data to associate it with its root property. */
- registered: {
- /* Note: A registered hook looks like this ==> textShadowBlur: [ "textShadow", 3 ],
- which consists of the subproperty's name, the associated root property's name,
- and the subproperty's position in the root's value. */
- },
- /* Convert the templates into individual hooks then append them to the registered object above. */
- register: function () {
- /* Color hooks registration. */
- /* Note: Colors are defaulted to white -- as opposed to black -- since colors that are
- currently set to "transparent" default to their respective template below when color-animated,
- and white is typically a closer match to transparent than black is. */
- for (var i = 0; i < CSS.Lists.colors.length; i++) {
- CSS.Hooks.templates[CSS.Lists.colors[i]] = [ "Red Green Blue Alpha", "255 255 255 1" ];
- }
-
- var rootProperty,
- hookTemplate,
- hookNames;
-
- /* In IE, color values inside compound-value properties are positioned at the end the value instead of at the beginning.
- Thus, we re-arrange the templates accordingly. */
- if (IE) {
- for (rootProperty in CSS.Hooks.templates) {
- hookTemplate = CSS.Hooks.templates[rootProperty];
- hookNames = hookTemplate[0].split(" ");
-
- var defaultValues = hookTemplate[1].match(CSS.RegEx.valueSplit);
-
- if (hookNames[0] === "Color") {
- /* Reposition both the hook's name and its default value to the end of their respective strings. */
- hookNames.push(hookNames.shift());
- defaultValues.push(defaultValues.shift());
-
- /* Replace the existing template for the hook's root property. */
- CSS.Hooks.templates[rootProperty] = [ hookNames.join(" "), defaultValues.join(" ") ];
- }
- }
- }
-
- /* Hook registration. */
- for (rootProperty in CSS.Hooks.templates) {
- hookTemplate = CSS.Hooks.templates[rootProperty];
- hookNames = hookTemplate[0].split(" ");
-
- for (var i in hookNames) {
- var fullHookName = rootProperty + hookNames[i],
- hookPosition = i;
-
- /* For each hook, register its full name (e.g. textShadowBlur) with its root property (e.g. textShadow)
- and the hook's position in its template's default value string. */
- CSS.Hooks.registered[fullHookName] = [ rootProperty, hookPosition ];
- }
- }
- },
-
- /*****************************
- Injection and Extraction
- *****************************/
-
- /* Look up the root property associated with the hook (e.g. return "textShadow" for "textShadowBlur"). */
- /* Since a hook cannot be set directly (the browser won't recognize it), style updating for hooks is routed through the hook's root property. */
- getRoot: function (property) {
- var hookData = CSS.Hooks.registered[property];
-
- if (hookData) {
- return hookData[0];
- } else {
- /* If there was no hook match, return the property name untouched. */
- return property;
- }
- },
- /* Convert any rootPropertyValue, null or otherwise, into a space-delimited list of hook values so that
- the targeted hook can be injected or extracted at its standard position. */
- cleanRootPropertyValue: function(rootProperty, rootPropertyValue) {
- /* If the rootPropertyValue is wrapped with "rgb()", "clip()", etc., remove the wrapping to normalize the value before manipulation. */
- if (CSS.RegEx.valueUnwrap.test(rootPropertyValue)) {
- rootPropertyValue = rootPropertyValue.match(CSS.Hooks.RegEx.valueUnwrap)[1];
- }
-
- /* If rootPropertyValue is a CSS null-value (from which there's inherently no hook value to extract),
- default to the root's default value as defined in CSS.Hooks.templates. */
- /* Note: CSS null-values include "none", "auto", and "transparent". They must be converted into their
- zero-values (e.g. textShadow: "none" ==> textShadow: "0px 0px 0px black") for hook manipulation to proceed. */
- if (CSS.Values.isCSSNullValue(rootPropertyValue)) {
- rootPropertyValue = CSS.Hooks.templates[rootProperty][1];
- }
-
- return rootPropertyValue;
- },
- /* Extracted the hook's value from its root property's value. This is used to get the starting value of an animating hook. */
- extractValue: function (fullHookName, rootPropertyValue) {
- var hookData = CSS.Hooks.registered[fullHookName];
-
- if (hookData) {
- var hookRoot = hookData[0],
- hookPosition = hookData[1];
-
- rootPropertyValue = CSS.Hooks.cleanRootPropertyValue(hookRoot, rootPropertyValue);
-
- /* Split rootPropertyValue into its constituent hook values then grab the desired hook at its standard position. */
- return rootPropertyValue.toString().match(CSS.RegEx.valueSplit)[hookPosition];
- } else {
- /* If the provided fullHookName isn't a registered hook, return the rootPropertyValue that was passed in. */
- return rootPropertyValue;
- }
- },
- /* Inject the hook's value into its root property's value. This is used to piece back together the root property
- once Velocity has updated one of its individually hooked values through tweening. */
- injectValue: function (fullHookName, hookValue, rootPropertyValue) {
- var hookData = CSS.Hooks.registered[fullHookName];
-
- if (hookData) {
- var hookRoot = hookData[0],
- hookPosition = hookData[1],
- rootPropertyValueParts,
- rootPropertyValueUpdated;
-
- rootPropertyValue = CSS.Hooks.cleanRootPropertyValue(hookRoot, rootPropertyValue);
-
- /* Split rootPropertyValue into its individual hook values, replace the targeted value with hookValue,
- then reconstruct the rootPropertyValue string. */
- rootPropertyValueParts = rootPropertyValue.toString().match(CSS.RegEx.valueSplit);
- rootPropertyValueParts[hookPosition] = hookValue;
- rootPropertyValueUpdated = rootPropertyValueParts.join(" ");
-
- return rootPropertyValueUpdated;
- } else {
- /* If the provided fullHookName isn't a registered hook, return the rootPropertyValue that was passed in. */
- return rootPropertyValue;
- }
- }
- },
-
- /*******************
- Normalizations
- *******************/
-
- /* Normalizations standardize CSS property manipulation by pollyfilling browser-specific implementations (e.g. opacity)
- and reformatting special properties (e.g. clip, rgba) to look like standard ones. */
- Normalizations: {
- /* Normalizations are passed a normalization target (either the property's name, its extracted value, or its injected value),
- the targeted element (which may need to be queried), and the targeted property value. */
- registered: {
- clip: function(type, element, propertyValue) {
- switch (type) {
- case "name":
- return "clip";
- /* Clip needs to be unwrapped and stripped of its commas during extraction. */
- case "extract":
- var extracted;
-
- /* If Velocity also extracted this value, skip extraction. */
- if (CSS.RegEx.wrappedValueAlreadyExtracted.test(propertyValue)) {
- extracted = propertyValue;
- } else {
- /* Remove the "rect()" wrapper. */
- extracted = propertyValue.toString().match(CSS.RegEx.valueUnwrap);
-
- /* Strip off commas. */
- extracted = extracted ? extracted[1].replace(/,(\s+)?/g, " ") : propertyValue;
- }
-
- return extracted;
- /* Clip needs to be re-wrapped during injection. */
- case "inject":
- return "rect(" + propertyValue + ")";
- }
- },
-
- /* <=IE8 do not support the standard opacity property. They use filter:alpha(opacity=INT) instead. */
- opacity: function (type, element, propertyValue) {
- if (IE <= 8) {
- switch (type) {
- case "name":
- return "filter";
- case "extract":
- /* <=IE8 return a "filter" value of "alpha(opacity=\d{1,3})".
- Extract the value and convert it to a decimal value to match the standard CSS opacity property's formatting. */
- var extracted = propertyValue.toString().match(/alpha\(opacity=(.*)\)/i);
-
- if (extracted) {
- /* Convert to decimal value. */
- propertyValue = extracted[1] / 100;
- } else {
- /* When extracting opacity, default to 1 since a null value means opacity hasn't been set. */
- propertyValue = 1;
- }
-
- return propertyValue;
- case "inject":
- /* Opacified elements are required to have their zoom property set to a non-zero value. */
- element.style.zoom = 1;
-
- /* Setting the filter property on elements with certain font property combinations can result in a
- highly unappealing ultra-bolding effect. There's no way to remedy this throughout a tween, but dropping the
- value altogether (when opacity hits 1) at leasts ensures that the glitch is gone post-tweening. */
- if (parseFloat(propertyValue) >= 1) {
- return "";
- } else {
- /* As per the filter property's spec, convert the decimal value to a whole number and wrap the value. */
- return "alpha(opacity=" + parseInt(parseFloat(propertyValue) * 100, 10) + ")";
- }
- }
- /* With all other browsers, normalization is not required; return the same values that were passed in. */
- } else {
- switch (type) {
- case "name":
- return "opacity";
- case "extract":
- return propertyValue;
- case "inject":
- return propertyValue;
- }
- }
- }
- },
-
- /*****************************
- Batched Registrations
- *****************************/
-
- /* Note: Batched normalizations extend the CSS.Normalizations.registered object. */
- register: function () {
-
- /*****************
- Transforms
- *****************/
-
- /* Transforms are the subproperties contained by the CSS "transform" property. Transforms must undergo normalization
- so that they can be referenced in a properties map by their individual names. */
- /* Note: When transforms are "set", they are actually assigned to a per-element transformCache. When all transform
- setting is complete complete, CSS.flushTransformCache() must be manually called to flush the values to the DOM.
- Transform setting is batched in this way to improve performance: the transform style only needs to be updated
- once when multiple transform subproperties are being animated simultaneously. */
- /* Note: IE9 and Android Gingerbread have support for 2D -- but not 3D -- transforms. Since animating unsupported
- transform properties results in the browser ignoring the *entire* transform string, we prevent these 3D values
- from being normalized for these browsers so that tweening skips these properties altogether
- (since it will ignore them as being unsupported by the browser.) */
- if (!(IE <= 9) && !Velocity.State.isGingerbread) {
- /* Note: Since the standalone CSS "perspective" property and the CSS transform "perspective" subproperty
- share the same name, the latter is given a unique token within Velocity: "transformPerspective". */
- CSS.Lists.transformsBase = CSS.Lists.transformsBase.concat(CSS.Lists.transforms3D);
- }
-
- for (var i = 0; i < CSS.Lists.transformsBase.length; i++) {
- /* Wrap the dynamically generated normalization function in a new scope so that transformName's value is
- paired with its respective function. (Otherwise, all functions would take the final for loop's transformName.) */
- (function() {
- var transformName = CSS.Lists.transformsBase[i];
-
- CSS.Normalizations.registered[transformName] = function (type, element, propertyValue) {
- switch (type) {
- /* The normalized property name is the parent "transform" property -- the property that is actually set in CSS. */
- case "name":
- return "transform";
- /* Transform values are cached onto a per-element transformCache object. */
- case "extract":
- /* If this transform has yet to be assigned a value, return its null value. */
- if (Data(element) === undefined || Data(element).transformCache[transformName] === undefined) {
- /* Scale CSS.Lists.transformsBase default to 1 whereas all other transform properties default to 0. */
- return /^scale/i.test(transformName) ? 1 : 0;
- /* When transform values are set, they are wrapped in parentheses as per the CSS spec.
- Thus, when extracting their values (for tween calculations), we strip off the parentheses. */
- } else {
- return Data(element).transformCache[transformName].replace(/[()]/g, "");
- }
- case "inject":
- var invalid = false;
-
- /* If an individual transform property contains an unsupported unit type, the browser ignores the *entire* transform property.
- Thus, protect users from themselves by skipping setting for transform values supplied with invalid unit types. */
- /* Switch on the base transform type; ignore the axis by removing the last letter from the transform's name. */
- switch (transformName.substr(0, transformName.length - 1)) {
- /* Whitelist unit types for each transform. */
- case "translate":
- invalid = !/(%|px|em|rem|vw|vh|\d)$/i.test(propertyValue);
- break;
- /* Since an axis-free "scale" property is supported as well, a little hack is used here to detect it by chopping off its last letter. */
- case "scal":
- case "scale":
- /* Chrome on Android has a bug in which scaled elements blur if their initial scale
- value is below 1 (which can happen with forcefeeding). Thus, we detect a yet-unset scale property
- and ensure that its first value is always 1. More info: http://stackoverflow.com/questions/10417890/css3-animations-with-transform-causes-blurred-elements-on-webkit/10417962#10417962 */
- if (Velocity.State.isAndroid && Data(element).transformCache[transformName] === undefined && propertyValue < 1) {
- propertyValue = 1;
- }
-
- invalid = !/(\d)$/i.test(propertyValue);
- break;
- case "skew":
- invalid = !/(deg|\d)$/i.test(propertyValue);
- break;
- case "rotate":
- invalid = !/(deg|\d)$/i.test(propertyValue);
- break;
- }
-
- if (!invalid) {
- /* As per the CSS spec, wrap the value in parentheses. */
- Data(element).transformCache[transformName] = "(" + propertyValue + ")";
- }
-
- /* Although the value is set on the transformCache object, return the newly-updated value for the calling code to process as normal. */
- return Data(element).transformCache[transformName];
- }
- };
- })();
- }
-
- /*************
- Colors
- *************/
-
- /* Since Velocity only animates a single numeric value per property, color animation is achieved by hooking the individual RGBA components of CSS color properties.
- Accordingly, color values must be normalized (e.g. "#ff0000", "red", and "rgb(255, 0, 0)" ==> "255 0 0 1") so that their components can be injected/extracted by CSS.Hooks logic. */
- for (var i = 0; i < CSS.Lists.colors.length; i++) {
- /* Wrap the dynamically generated normalization function in a new scope so that colorName's value is paired with its respective function.
- (Otherwise, all functions would take the final for loop's colorName.) */
- (function () {
- var colorName = CSS.Lists.colors[i];
-
- /* Note: In IE<=8, which support rgb but not rgba, color properties are reverted to rgb by stripping off the alpha component. */
- CSS.Normalizations.registered[colorName] = function(type, element, propertyValue) {
- switch (type) {
- case "name":
- return colorName;
- /* Convert all color values into the rgb format. (Old IE can return hex values and color names instead of rgb/rgba.) */
- case "extract":
- var extracted;
-
- /* If the color is already in its hookable form (e.g. "255 255 255 1") due to having been previously extracted, skip extraction. */
- if (CSS.RegEx.wrappedValueAlreadyExtracted.test(propertyValue)) {
- extracted = propertyValue;
- } else {
- var converted,
- colorNames = {
- black: "rgb(0, 0, 0)",
- blue: "rgb(0, 0, 255)",
- gray: "rgb(128, 128, 128)",
- green: "rgb(0, 128, 0)",
- red: "rgb(255, 0, 0)",
- white: "rgb(255, 255, 255)"
- };
-
- /* Convert color names to rgb. */
- if (/^[A-z]+$/i.test(propertyValue)) {
- if (colorNames[propertyValue] !== undefined) {
- converted = colorNames[propertyValue]
- } else {
- /* If an unmatched color name is provided, default to black. */
- converted = colorNames.black;
- }
- /* Convert hex values to rgb. */
- } else if (CSS.RegEx.isHex.test(propertyValue)) {
- converted = "rgb(" + CSS.Values.hexToRgb(propertyValue).join(" ") + ")";
- /* If the provided color doesn't match any of the accepted color formats, default to black. */
- } else if (!(/^rgba?\(/i.test(propertyValue))) {
- converted = colorNames.black;
- }
-
- /* Remove the surrounding "rgb/rgba()" string then replace commas with spaces and strip
- repeated spaces (in case the value included spaces to begin with). */
- extracted = (converted || propertyValue).toString().match(CSS.RegEx.valueUnwrap)[1].replace(/,(\s+)?/g, " ");
- }
-
- /* So long as this isn't <=IE8, add a fourth (alpha) component if it's missing and default it to 1 (visible). */
- if (!(IE <= 8) && extracted.split(" ").length === 3) {
- extracted += " 1";
- }
-
- return extracted;
- case "inject":
- /* If this is IE<=8 and an alpha component exists, strip it off. */
- if (IE <= 8) {
- if (propertyValue.split(" ").length === 4) {
- propertyValue = propertyValue.split(/\s+/).slice(0, 3).join(" ");
- }
- /* Otherwise, add a fourth (alpha) component if it's missing and default it to 1 (visible). */
- } else if (propertyValue.split(" ").length === 3) {
- propertyValue += " 1";
- }
-
- /* Re-insert the browser-appropriate wrapper("rgb/rgba()"), insert commas, and strip off decimal units
- on all values but the fourth (R, G, and B only accept whole numbers). */
- return (IE <= 8 ? "rgb" : "rgba") + "(" + propertyValue.replace(/\s+/g, ",").replace(/\.(\d)+(?=,)/g, "") + ")";
- }
- };
- })();
- }
- }
- },
-
- /************************
- CSS Property Names
- ************************/
-
- Names: {
- /* Camelcase a property name into its JavaScript notation (e.g. "background-color" ==> "backgroundColor").
- Camelcasing is used to normalize property names between and across calls. */
- camelCase: function (property) {
- return property.replace(/-(\w)/g, function (match, subMatch) {
- return subMatch.toUpperCase();
- });
- },
-
- /* For SVG elements, some properties (namely, dimensional ones) are GET/SET via the element's HTML attributes (instead of via CSS styles). */
- SVGAttribute: function (property) {
- var SVGAttributes = "width|height|x|y|cx|cy|r|rx|ry|x1|x2|y1|y2";
-
- /* Certain browsers require an SVG transform to be applied as an attribute. (Otherwise, application via CSS is preferable due to 3D support.) */
- if (IE || (Velocity.State.isAndroid && !Velocity.State.isChrome)) {
- SVGAttributes += "|transform";
- }
-
- return new RegExp("^(" + SVGAttributes + ")$", "i").test(property);
- },
-
- /* Determine whether a property should be set with a vendor prefix. */
- /* If a prefixed version of the property exists, return it. Otherwise, return the original property name.
- If the property is not at all supported by the browser, return a false flag. */
- prefixCheck: function (property) {
- /* If this property has already been checked, return the cached value. */
- if (Velocity.State.prefixMatches[property]) {
- return [ Velocity.State.prefixMatches[property], true ];
- } else {
- var vendors = [ "", "Webkit", "Moz", "ms", "O" ];
-
- for (var i = 0, vendorsLength = vendors.length; i < vendorsLength; i++) {
- var propertyPrefixed;
-
- if (i === 0) {
- propertyPrefixed = property;
- } else {
- /* Capitalize the first letter of the property to conform to JavaScript vendor prefix notation (e.g. webkitFilter). */
- propertyPrefixed = vendors[i] + property.replace(/^\w/, function(match) { return match.toUpperCase(); });
- }
-
- /* Check if the browser supports this property as prefixed. */
- if (Type.isString(Velocity.State.prefixElement.style[propertyPrefixed])) {
- /* Cache the match. */
- Velocity.State.prefixMatches[property] = propertyPrefixed;
-
- return [ propertyPrefixed, true ];
- }
- }
-
- /* If the browser doesn't support this property in any form, include a false flag so that the caller can decide how to proceed. */
- return [ property, false ];
- }
- }
- },
-
- /************************
- CSS Property Values
- ************************/
-
- Values: {
- /* Hex to RGB conversion. Copyright Tim Down: http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb */
- hexToRgb: function (hex) {
- var shortformRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
- longformRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,
- rgbParts;
-
- hex = hex.replace(shortformRegex, function (m, r, g, b) {
- return r + r + g + g + b + b;
- });
-
- rgbParts = longformRegex.exec(hex);
-
- return rgbParts ? [ parseInt(rgbParts[1], 16), parseInt(rgbParts[2], 16), parseInt(rgbParts[3], 16) ] : [ 0, 0, 0 ];
- },
- isCSSNullValue: function (value) {
- /* The browser defaults CSS values that have not been set to either 0 or one of several possible null-value strings.
- Thus, we check for both falsiness and these special strings. */
- /* Null-value checking is performed to default the special strings to 0 (for the sake of tweening) or their hook
- templates as defined as CSS.Hooks (for the sake of hook injection/extraction). */
- /* Note: Chrome returns "rgba(0, 0, 0, 0)" for an undefined color whereas IE returns "transparent". */
- return (value == 0 || /^(none|auto|transparent|(rgba\(0, ?0, ?0, ?0\)))$/i.test(value));
- },
- /* Retrieve a property's default unit type. Used for assigning a unit type when one is not supplied by the user. */
- getUnitType: function (property) {
- if (/^(rotate|skew)/i.test(property)) {
- return "deg";
- } else if (/(^(scale|scaleX|scaleY|scaleZ|alpha|flexGrow|flexHeight|zIndex|fontWeight)$)|((opacity|red|green|blue|alpha)$)/i.test(property)) {
- /* The above properties are unitless. */
- return "";
- } else {
- /* Default to px for all other properties. */
- return "px";
- }
- },
- /* HTML elements default to an associated display type when they're not set to display:none. */
- /* Note: This function is used for correctly setting the non-"none" display value in certain Velocity sequences, such as fadeIn/Out. */
- getDisplayType: function (element) {
- var tagName = element.tagName.toString().toLowerCase();
-
- if (/^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|var|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i.test(tagName)) {
- return "inline";
- } else if (/^(li)$/i.test(tagName)) {
- return "list-item";
- } else if (/^(tr)$/i.test(tagName)) {
- return "table-row";
- /* Default to "block" when no match is found. */
- } else {
- return "block";
- }
- },
- /* The class add/remove functions are used to temporarily apply a "velocity-animating" class to elements while they're animating. */
- addClass: function (element, className) {
- if (element.classList) {
- element.classList.add(className);
- } else {
- element.className += (element.className.length ? " " : "") + className;
- }
- },
- removeClass: function (element, className) {
- if (element.classList) {
- element.classList.remove(className);
- } else {
- element.className = element.className.toString().replace(new RegExp("(^|\\s)" + className.split(" ").join("|") + "(\\s|$)", "gi"), " ");
- }
- }
- },
-
- /****************************
- Style Getting & Setting
- ****************************/
-
- /* The singular getPropertyValue, which routes the logic for all normalizations, hooks, and standard CSS properties. */
- getPropertyValue: function (element, property, rootPropertyValue, forceStyleLookup) {
- /* Get an element's computed property value. */
- /* Note: Retrieving the value of a CSS property cannot simply be performed by checking an element's
- style attribute (which only reflects user-defined values). Instead, the browser must be queried for a property's
- *computed* value. You can read more about getComputedStyle here: https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle */
- function computePropertyValue (element, property) {
- /* When box-sizing isn't set to border-box, height and width style values are incorrectly computed when an
- element's scrollbars are visible (which expands the element's dimensions). Thus, we defer to the more accurate
- offsetHeight/Width property, which includes the total dimensions for interior, border, padding, and scrollbar.
- We subtract border and padding to get the sum of interior + scrollbar. */
-
- var computedValue = 0;
-
- /* IE<=8 doesn't support window.getComputedStyle, thus we defer to jQuery, which has an extensive array
- of hacks to accurately retrieve IE8 property values. Re-implementing that logic here is not worth bloating the
- codebase for a dying browser. The performance repercussions of using jQuery here are minimal since
- Velocity is optimized to rarely (and sometimes never) query the DOM. Further, the $.css() codepath isn't that slow. */
- if (IE <= 8) {
- computedValue = $.css(element, property); /* GET */
- /* All other browsers support getComputedStyle. The returned live object reference is cached onto its
- associated element so that it does not need to be refetched upon every GET. */
- } else {
- /* Browsers do not return height and width values for elements that are set to display:"none". Thus, we temporarily
- toggle display to the element type's default value. */
- var toggleDisplay = false;
-
- if (/^(width|height)$/.test(property) && CSS.getPropertyValue(element, "display") === 0) {
- toggleDisplay = true;
- CSS.setPropertyValue(element, "display", CSS.Values.getDisplayType(element));
- }
-
- function revertDisplay () {
- if (toggleDisplay) {
- CSS.setPropertyValue(element, "display", "none");
- }
- }
-
- if (!forceStyleLookup) {
- if (property === "height" && CSS.getPropertyValue(element, "boxSizing").toString().toLowerCase() !== "border-box") {
- var contentBoxHeight = element.offsetHeight - (parseFloat(CSS.getPropertyValue(element, "borderTopWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "borderBottomWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingTop")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingBottom")) || 0);
- revertDisplay();
-
- return contentBoxHeight;
- } else if (property === "width" && CSS.getPropertyValue(element, "boxSizing").toString().toLowerCase() !== "border-box") {
- var contentBoxWidth = element.offsetWidth - (parseFloat(CSS.getPropertyValue(element, "borderLeftWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "borderRightWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingLeft")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingRight")) || 0);
- revertDisplay();
-
- return contentBoxWidth;
- }
- }
-
- var computedStyle;
-
- /* For elements that Velocity hasn't been called on directly (e.g. when Velocity queries the DOM on behalf
- of a parent of an element its animating), perform a direct getComputedStyle lookup since the object isn't cached. */
- if (Data(element) === undefined) {
- computedStyle = window.getComputedStyle(element, null); /* GET */
- /* If the computedStyle object has yet to be cached, do so now. */
- } else if (!Data(element).computedStyle) {
- computedStyle = Data(element).computedStyle = window.getComputedStyle(element, null); /* GET */
- /* If computedStyle is cached, use it. */
- } else {
- computedStyle = Data(element).computedStyle;
- }
-
- /* IE and Firefox do not return a value for the generic borderColor -- they only return individual values for each border side's color.
- As a polyfill for querying individual border side colors, just return the top border's color. */
- if ((IE || Velocity.State.isFirefox) && property === "borderColor") {
- property = "borderTopColor";
- }
-
- /* IE9 has a bug in which the "filter" property must be accessed from computedStyle using the getPropertyValue method
- instead of a direct property lookup. The getPropertyValue method is slower than a direct lookup, which is why we avoid it by default. */
- if (IE === 9 && property === "filter") {
- computedValue = computedStyle.getPropertyValue(property); /* GET */
- } else {
- computedValue = computedStyle[property];
- }
-
- /* Fall back to the property's style value (if defined) when computedValue returns nothing,
- which can happen when the element hasn't been painted. */
- if (computedValue === "" || computedValue === null) {
- computedValue = element.style[property];
- }
-
- revertDisplay();
- }
-
- /* For top, right, bottom, and left (TRBL) values that are set to "auto" on elements of "fixed" or "absolute" position,
- defer to jQuery for converting "auto" to a numeric value. (For elements with a "static" or "relative" position, "auto" has the same
- effect as being set to 0, so no conversion is necessary.) */
- /* An example of why numeric conversion is necessary: When an element with "position:absolute" has an untouched "left"
- property, which reverts to "auto", left's value is 0 relative to its parent element, but is often non-zero relative
- to its *containing* (not parent) element, which is the nearest "position:relative" ancestor or the viewport (and always the viewport in the case of "position:fixed"). */
- if (computedValue === "auto" && /^(top|right|bottom|left)$/i.test(property)) {
- var position = computePropertyValue(element, "position"); /* GET */
-
- /* For absolute positioning, jQuery's $.position() only returns values for top and left;
- right and bottom will have their "auto" value reverted to 0. */
- /* Note: A jQuery object must be created here since jQuery doesn't have a low-level alias for $.position().
- Not a big deal since we're currently in a GET batch anyway. */
- if (position === "fixed" || (position === "absolute" && /top|left/i.test(property))) {
- /* Note: jQuery strips the pixel unit from its returned values; we re-add it here to conform with computePropertyValue's behavior. */
- computedValue = $(element).position()[property] + "px"; /* GET */
- }
- }
-
- return computedValue;
- }
-
- var propertyValue;
-
- /* If this is a hooked property (e.g. "clipLeft" instead of the root property of "clip"),
- extract the hook's value from a normalized rootPropertyValue using CSS.Hooks.extractValue(). */
- if (CSS.Hooks.registered[property]) {
- var hook = property,
- hookRoot = CSS.Hooks.getRoot(hook);
-
- /* If a cached rootPropertyValue wasn't passed in (which Velocity always attempts to do in order to avoid requerying the DOM),
- query the DOM for the root property's value. */
- if (rootPropertyValue === undefined) {
- /* Since the browser is now being directly queried, use the official post-prefixing property name for this lookup. */
- rootPropertyValue = CSS.getPropertyValue(element, CSS.Names.prefixCheck(hookRoot)[0]); /* GET */
- }
-
- /* If this root has a normalization registered, peform the associated normalization extraction. */
- if (CSS.Normalizations.registered[hookRoot]) {
- rootPropertyValue = CSS.Normalizations.registered[hookRoot]("extract", element, rootPropertyValue);
- }
-
- /* Extract the hook's value. */
- propertyValue = CSS.Hooks.extractValue(hook, rootPropertyValue);
-
- /* If this is a normalized property (e.g. "opacity" becomes "filter" in <=IE8) or "translateX" becomes "transform"),
- normalize the property's name and value, and handle the special case of transforms. */
- /* Note: Normalizing a property is mutually exclusive from hooking a property since hook-extracted values are strictly
- numerical and therefore do not require normalization extraction. */
- } else if (CSS.Normalizations.registered[property]) {
- var normalizedPropertyName,
- normalizedPropertyValue;
-
- normalizedPropertyName = CSS.Normalizations.registered[property]("name", element);
-
- /* Transform values are calculated via normalization extraction (see below), which checks against the element's transformCache.
- At no point do transform GETs ever actually query the DOM; initial stylesheet values are never processed.
- This is because parsing 3D transform matrices is not always accurate and would bloat our codebase;
- thus, normalization extraction defaults initial transform values to their zero-values (e.g. 1 for scaleX and 0 for translateX). */
- if (normalizedPropertyName !== "transform") {
- normalizedPropertyValue = computePropertyValue(element, CSS.Names.prefixCheck(normalizedPropertyName)[0]); /* GET */
-
- /* If the value is a CSS null-value and this property has a hook template, use that zero-value template so that hooks can be extracted from it. */
- if (CSS.Values.isCSSNullValue(normalizedPropertyValue) && CSS.Hooks.templates[property]) {
- normalizedPropertyValue = CSS.Hooks.templates[property][1];
- }
- }
-
- propertyValue = CSS.Normalizations.registered[property]("extract", element, normalizedPropertyValue);
- }
-
- /* If a (numeric) value wasn't produced via hook extraction or normalization, query the DOM. */
- if (!/^[\d-]/.test(propertyValue)) {
- /* For SVG elements, dimensional properties (which SVGAttribute() detects) are tweened via
- their HTML attribute values instead of their CSS style values. */
- if (Data(element) && Data(element).isSVG && CSS.Names.SVGAttribute(property)) {
- /* Since the height/width attribute values must be set manually, they don't reflect computed values.
- Thus, we use use getBBox() to ensure we always get values for elements with undefined height/width attributes. */
- if (/^(height|width)$/i.test(property)) {
- propertyValue = element.getBBox()[property];
- /* Otherwise, access the attribute value directly. */
- } else {
- propertyValue = element.getAttribute(property);
- }
- } else {
- propertyValue = computePropertyValue(element, CSS.Names.prefixCheck(property)[0]); /* GET */
- }
- }
-
- /* Since property lookups are for animation purposes (which entails computing the numeric delta between start and end values),
- convert CSS null-values to an integer of value 0. */
- if (CSS.Values.isCSSNullValue(propertyValue)) {
- propertyValue = 0;
- }
-
- if (Velocity.debug >= 2) console.log("Get " + property + ": " + propertyValue);
-
- return propertyValue;
- },
-
- /* The singular setPropertyValue, which routes the logic for all normalizations, hooks, and standard CSS properties. */
- setPropertyValue: function(element, property, propertyValue, rootPropertyValue, scrollData) {
- var propertyName = property;
-
- /* In order to be subjected to call options and element queueing, scroll animation is routed through Velocity as if it were a standard CSS property. */
- if (property === "scroll") {
- /* If a container option is present, scroll the container instead of the browser window. */
- if (scrollData.container) {
- scrollData.container["scroll" + scrollData.direction] = propertyValue;
- /* Otherwise, Velocity defaults to scrolling the browser window. */
- } else {
- if (scrollData.direction === "Left") {
- window.scrollTo(propertyValue, scrollData.alternateValue);
- } else {
- window.scrollTo(scrollData.alternateValue, propertyValue);
- }
- }
- } else {
- /* Transforms (translateX, rotateZ, etc.) are applied to a per-element transformCache object, which is manually flushed via flushTransformCache().
- Thus, for now, we merely cache transforms being SET. */
- if (CSS.Normalizations.registered[property] && CSS.Normalizations.registered[property]("name", element) === "transform") {
- /* Perform a normalization injection. */
- /* Note: The normalization logic handles the transformCache updating. */
- CSS.Normalizations.registered[property]("inject", element, propertyValue);
-
- propertyName = "transform";
- propertyValue = Data(element).transformCache[property];
- } else {
- /* Inject hooks. */
- if (CSS.Hooks.registered[property]) {
- var hookName = property,
- hookRoot = CSS.Hooks.getRoot(property);
-
- /* If a cached rootPropertyValue was not provided, query the DOM for the hookRoot's current value. */
- rootPropertyValue = rootPropertyValue || CSS.getPropertyValue(element, hookRoot); /* GET */
-
- propertyValue = CSS.Hooks.injectValue(hookName, propertyValue, rootPropertyValue);
- property = hookRoot;
- }
-
- /* Normalize names and values. */
- if (CSS.Normalizations.registered[property]) {
- propertyValue = CSS.Normalizations.registered[property]("inject", element, propertyValue);
- property = CSS.Normalizations.registered[property]("name", element);
- }
-
- /* Assign the appropriate vendor prefix before performing an official style update. */
- propertyName = CSS.Names.prefixCheck(property)[0];
-
- /* A try/catch is used for IE<=8, which throws an error when "invalid" CSS values are set, e.g. a negative width.
- Try/catch is avoided for other browsers since it incurs a performance overhead. */
- if (IE <= 8) {
- try {
- element.style[propertyName] = propertyValue;
- } catch (error) { if (Velocity.debug) console.log("Browser does not support [" + propertyValue + "] for [" + propertyName + "]"); }
- /* SVG elements have their dimensional properties (width, height, x, y, cx, etc.) applied directly as attributes instead of as styles. */
- /* Note: IE8 does not support SVG elements, so it's okay that we skip it for SVG animation. */
- } else if (Data(element) && Data(element).isSVG && CSS.Names.SVGAttribute(property)) {
- /* Note: For SVG attributes, vendor-prefixed property names are never used. */
- /* Note: Not all CSS properties can be animated via attributes, but the browser won't throw an error for unsupported properties. */
- element.setAttribute(property, propertyValue);
- } else {
- element.style[propertyName] = propertyValue;
- }
-
- if (Velocity.debug >= 2) console.log("Set " + property + " (" + propertyName + "): " + propertyValue);
- }
- }
-
- /* Return the normalized property name and value in case the caller wants to know how these values were modified before being applied to the DOM. */
- return [ propertyName, propertyValue ];
- },
-
- /* To increase performance by batching transform updates into a single SET, transforms are not directly applied to an element until flushTransformCache() is called. */
- /* Note: Velocity applies transform properties in the same order that they are chronogically introduced to the element's CSS styles. */
- flushTransformCache: function(element) {
- var transformString = "";
-
- /* Certain browsers require that SVG transforms be applied as an attribute. However, the SVG transform attribute takes a modified version of CSS's transform string
- (units are dropped and, except for skewX/Y, subproperties are merged into their master property -- e.g. scaleX and scaleY are merged into scale(X Y). */
- if ((IE || (Velocity.State.isAndroid && !Velocity.State.isChrome)) && Data(element).isSVG) {
- /* Since transform values are stored in their parentheses-wrapped form, we use a helper function to strip out their numeric values.
- Further, SVG transform properties only take unitless (representing pixels) values, so it's okay that parseFloat() strips the unit suffixed to the float value. */
- function getTransformFloat (transformProperty) {
- return parseFloat(CSS.getPropertyValue(element, transformProperty));
- }
-
- /* Create an object to organize all the transforms that we'll apply to the SVG element. To keep the logic simple,
- we process *all* transform properties -- even those that may not be explicitly applied (since they default to their zero-values anyway). */
- var SVGTransforms = {
- translate: [ getTransformFloat("translateX"), getTransformFloat("translateY") ],
- skewX: [ getTransformFloat("skewX") ], skewY: [ getTransformFloat("skewY") ],
- /* If the scale property is set (non-1), use that value for the scaleX and scaleY values
- (this behavior mimics the result of animating all these properties at once on HTML elements). */
- scale: getTransformFloat("scale") !== 1 ? [ getTransformFloat("scale"), getTransformFloat("scale") ] : [ getTransformFloat("scaleX"), getTransformFloat("scaleY") ],
- /* Note: SVG's rotate transform takes three values: rotation degrees followed by the X and Y values
- defining the rotation's origin point. We ignore the origin values (default them to 0). */
- rotate: [ getTransformFloat("rotateZ"), 0, 0 ]
- };
-
- /* Iterate through the transform properties in the user-defined property map order.
- (This mimics the behavior of non-SVG transform animation.) */
- $.each(Data(element).transformCache, function(transformName) {
- /* Except for with skewX/Y, revert the axis-specific transform subproperties to their axis-free master
- properties so that they match up with SVG's accepted transform properties. */
- if (/^translate/i.test(transformName)) {
- transformName = "translate";
- } else if (/^scale/i.test(transformName)) {
- transformName = "scale";
- } else if (/^rotate/i.test(transformName)) {
- transformName = "rotate";
- }
-
- /* Check that we haven't yet deleted the property from the SVGTransforms container. */
- if (SVGTransforms[transformName]) {
- /* Append the transform property in the SVG-supported transform format. As per the spec, surround the space-delimited values in parentheses. */
- transformString += transformName + "(" + SVGTransforms[transformName].join(" ") + ")" + " ";
-
- /* After processing an SVG transform property, delete it from the SVGTransforms container so we don't
- re-insert the same master property if we encounter another one of its axis-specific properties. */
- delete SVGTransforms[transformName];
- }
- });
- } else {
- var transformValue,
- perspective;
-
- /* Transform properties are stored as members of the transformCache object. Concatenate all the members into a string. */
- $.each(Data(element).transformCache, function(transformName) {
- transformValue = Data(element).transformCache[transformName];
-
- /* Transform's perspective subproperty must be set first in order to take effect. Store it temporarily. */
- if (transformName === "transformPerspective") {
- perspective = transformValue;
- return true;
- }
-
- /* IE9 only supports one rotation type, rotateZ, which it refers to as "rotate". */
- if (IE === 9 && transformName === "rotateZ") {
- transformName = "rotate";
- }
-
- transformString += transformName + transformValue + " ";
- });
-
- /* If present, set the perspective subproperty first. */
- if (perspective) {
- transformString = "perspective" + perspective + " " + transformString;
- }
- }
-
- CSS.setPropertyValue(element, "transform", transformString);
- }
- };
-
- /* Register hooks and normalizations. */
- CSS.Hooks.register();
- CSS.Normalizations.register();
-
- /*****************
- Animation
- *****************/
-
- var animate = function() {
-
- /******************
- Call Chain
- ******************/
-
- /* Logic for determining what to return to the call stack when exiting out of Velocity. */
- function getChain () {
- /* If we are using the utility function, attempt to return this call's promise. If no promise library was detected,
- default to null instead of returning the targeted elements so that utility function's return value is standardized. */
- if (isUtility) {
- return promiseData.promise || null;
- /* Otherwise, if we're using $.fn, return the jQuery-/Zepto-wrapped element set. */
- } else {
- return elementsWrapped;
- }
- }
-
- /*************************
- Arguments Assignment
- *************************/
-
- /* To allow for expressive CoffeeScript code, Velocity supports an alternative syntax in which "properties" and "options"
- objects are defined on a container object that's passed in as Velocity's sole argument. */
- /* Note: Some browsers automatically populate arguments with a "properties" object. We detect it by checking for its default "names" property. */
- var syntacticSugar = (arguments[0] && (($.isPlainObject(arguments[0].properties) && !arguments[0].properties.names) || Type.isString(arguments[0].properties))),
- /* Whether Velocity was called via the utility function (as opposed to on a jQuery/Zepto object). */
- isUtility,
- /* When Velocity is called via the utility function ($.Velocity()/Velocity()), elements are explicitly
- passed in as the first parameter. Thus, argument positioning varies. We normalize them here. */
- elementsWrapped,
- argumentIndex;
-
- var elements,
-
<TRUNCATED>