Skip to content

Commit

Permalink
0.11.9
Browse files Browse the repository at this point in the history 
Apply `overflow: hidden` when using the slide commands. Closes #260.

Sequence (UI pack effect) options object no longer gets externally
modified by Velocity. Closes #265.

Fixed bug where tweens would jump when dequeuing custom queues. Closes
#262. (The reverse command now only applies to the default effects
queue; reverse cannot be used with custom queues or parallel queueing
(queue: false).)

Fixed unit conversion bug on the `x` property of SVG elements.
  • Loading branch information
@julianshapiro @Rycochet
julianshapiro authored and Rycochet committed Aug 2, 2020
1 parent 24755a9 commit 5152a07
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 100 deletions.
2 changes: 1 addition & 1 deletion packages/velocity/bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "velocity",
"version": "0.11.8",
"version": "0.11.9",
"homepage": "http://velocityjs.org",
"authors": [
{ "name" : "Julian Shapiro",
Expand Down
102 changes: 55 additions & 47 deletions packages/velocity/jquery.velocity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Velocity.js
******************/

/*! VelocityJS.org (0.11.8). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License */
/*! VelocityJS.org (0.11.9). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License */

;(function (factory) {
/* CommonJS module. */
Expand All @@ -21,8 +21,12 @@
}
}(function (jQuery) {
return function (global, window, document, undefined) {

/***************
Summary
***************/

/*
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.
Expand Down Expand Up @@ -75,8 +79,6 @@ return function (global, window, document, undefined) {
};
})();

var ticker = window.requestAnimationFrame || rAFShim;

/* Array compacting. Copyright Lo-Dash. MIT License: https://github.com/lodash/lodash/blob/master/LICENSE.txt */
function compactSparseArray (array) {
var index = -1,
Expand Down Expand Up @@ -283,7 +285,7 @@ return function (global, window, document, undefined) {
hook: null, /* Defined below. */
/* 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: 8 },
version: { major: 0, minor: 11, patch: 9 },
/* Set to 1 or 2 (most verbose) to output debug info to console. */
debug: false
};
Expand Down Expand Up @@ -439,7 +441,6 @@ return function (global, window, document, undefined) {
/* 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 delta -- 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);
}
Expand Down Expand Up @@ -531,6 +532,7 @@ return function (global, window, document, undefined) {
/* Bonus "spring" easing, which is a less exaggerated version of easeInOutElastic. */
spring: function(p) { return 1 - (Math.cos(p * 4.5 * Math.PI) * Math.exp(-p * 6)); }
};

$.each(
[
/* CSS3's named easing types. */
Expand Down Expand Up @@ -1766,14 +1768,6 @@ return function (global, window, document, undefined) {
$.each(createElementsArray(elements), function(l, element) {
/* Check that this call was applied to the target element. */
if (element === activeElement) {
if (Data(element)) {
/* Since "reverse" uses cached start values (the previous call's endValues),
these values must be changed to reflect the final value that the elements were actually tweened to. */
$.each(Data(element).tweensContainer, function(m, activeTween) {
activeTween.endValue = activeTween.currentValue;
});
}

/* Optionally clear the remaining queued calls. */
if (options !== undefined) {
/* Iterate through the items in the element's queue. */
Expand All @@ -1790,6 +1784,14 @@ return function (global, window, document, undefined) {
$.queue(element, queueName, []);
}

if (Data(element) && queueName === "") {
/* Since "reverse" uses cached start values (the previous call's endValues),
these values must be changed to reflect the final value that the elements were actually tweened to. */
$.each(Data(element).tweensContainer, function(m, activeTween) {
activeTween.endValue = activeTween.currentValue;
});
}

callsToStop.push(i);
}
});
Expand Down Expand Up @@ -1822,38 +1824,39 @@ return function (global, window, document, undefined) {

/* Check if a string matches a registered sequence (see Sequences above). */
} else if (Type.isString(propertiesMap) && Velocity.Sequences[propertiesMap]) {
var durationOriginal = options.duration,
delayOriginal = options.delay || 0;
var opts = $.extend({}, options),
durationOriginal = opts.duration,
delayOriginal = opts.delay || 0;

/* If the backwards option was passed in, reverse the element set so that elements animate from the last to the first. */
if (options.backwards === true) {
if (opts.backwards === true) {
elements = (Type.isWrapped(elements) ? [].slice.call(elements) : elements).reverse();
}

/* Individually trigger the sequence for each element in the set to prevent users from having to handle iteration logic in their sequence. */
$.each(createElementsArray(elements), function(elementIndex, element) {
/* If the stagger option was passed in, successively delay each element by the stagger value (in ms). Retain the original delay value. */
if (parseFloat(options.stagger)) {
options.delay = delayOriginal + (parseFloat(options.stagger) * elementIndex);
} else if (Type.isFunction(options.stagger)) {
options.delay = delayOriginal + options.stagger.call(element, elementIndex, elementsLength);
if (parseFloat(opts.stagger)) {
opts.delay = delayOriginal + (parseFloat(opts.stagger) * elementIndex);
} else if (Type.isFunction(opts.stagger)) {
opts.delay = delayOriginal + opts.stagger.call(element, elementIndex, elementsLength);
}

/* If the drag option was passed in, successively increase/decrease (depending on the presense of options.backwards)
/* If the drag option was passed in, successively increase/decrease (depending on the presense of opts.backwards)
the duration of each element's animation, using floors to prevent producing very short durations. */
if (options.drag) {
if (opts.drag) {
/* Default the duration of UI pack effects (callouts and transitions) to 1000ms instead of the usual default duration of 400ms. */
options.duration = parseFloat(durationOriginal) || (/^(callout|transition)/.test(propertiesMap) ? 1000 : DURATION_DEFAULT);
opts.duration = parseFloat(durationOriginal) || (/^(callout|transition)/.test(propertiesMap) ? 1000 : DURATION_DEFAULT);

/* For each element, take the greater duration of: A) animation completion percentage relative to the original duration,
B) 75% of the original duration, or C) a 200ms fallback (in case duration is already set to a low value).
The end result is a baseline of 75% of the sequence's duration that increases/decreases as the end of the element set is approached. */
options.duration = Math.max(options.duration * (options.backwards ? 1 - elementIndex/elementsLength : (elementIndex + 1) / elementsLength), options.duration * 0.75, 200);
opts.duration = Math.max(opts.duration * (opts.backwards ? 1 - elementIndex/elementsLength : (elementIndex + 1) / elementsLength), opts.duration * 0.75, 200);
}

/* Pass in the call's options object so that the sequence can optionally extend it. It defaults to an empty object instead of null to
reduce the options checking logic required inside the sequence. */
Velocity.Sequences[propertiesMap].call(element, element, options || {}, elementIndex, elementsLength, elements, promiseData.promise ? promiseData : undefined);
/* Pass in the call's opts object so that the sequence can optionally extend it. It defaults to an empty object instead of null to
reduce the opts checking logic required inside the sequence. */
Velocity.Sequences[propertiesMap].call(element, element, opts || {}, elementIndex, elementsLength, elements, promiseData.promise ? promiseData : undefined);
});

/* Since the animation logic resides within the sequence's own code, abort the remainder of this call.
Expand Down Expand Up @@ -2523,30 +2526,32 @@ return function (global, window, document, undefined) {

if (!sameEmRatio || !samePercentRatio) {
var dummy = Data(element).isSVG ? document.createElementNS("http://www.w3.org/2000/svg", "rect") : document.createElement("div");

Velocity.init(dummy);
sameRatioIndicators.myParent.appendChild(dummy);

Velocity.CSS.setPropertyValue(dummy, "position", sameRatioIndicators.position);
Velocity.CSS.setPropertyValue(dummy, "fontSize", sameRatioIndicators.fontSize);
/* To accurately and consistently calculate conversion ratios, the element's cascaded overflow and box-sizing are stripped.
Similarly, since width/height can be artificially constrained by their min-/max- equivalents, these are controlled for as well. */
/* Note: Overflow must be also be controlled for per-axis since the overflow property overwrites its per-axis values. */
Velocity.CSS.setPropertyValue(dummy, "overflow", "hidden");
Velocity.CSS.setPropertyValue(dummy, "overflowX", "hidden");
Velocity.CSS.setPropertyValue(dummy, "overflowY", "hidden");
$.each([ "overflow", "overflowX", "overflowY" ], function(i, property) {
Velocity.CSS.setPropertyValue(dummy, property, "hidden");
});
Velocity.CSS.setPropertyValue(dummy, "position", sameRatioIndicators.position);
Velocity.CSS.setPropertyValue(dummy, "fontSize", sameRatioIndicators.fontSize);
Velocity.CSS.setPropertyValue(dummy, "boxSizing", "content-box");
/* paddingLeft arbitrarily acts as our proxy property for the em ratio. */
Velocity.CSS.setPropertyValue(dummy, "paddingLeft", measurement + "em");

/* width and height act as our proxy properties for measuring the horizontal and vertical % ratios. */
$.each([ "minWidth", "maxWidth", "width", "minHeight", "maxHeight", "height" ], function(i, property) {
Velocity.CSS.setPropertyValue(dummy, property, measurement + "%");
});
/* paddingLeft arbitrarily acts as our proxy property for the em ratio. */
Velocity.CSS.setPropertyValue(dummy, "paddingLeft", measurement + "em");

/* Divide the returned value by the measurement to get the ratio between 1% and 1px. Default to 1 since working with 0 can produce Infinite. */
unitRatios.percentToPxWidth = callUnitConversionData.lastPercentToPxWidth = (parseFloat(CSS.getPropertyValue(dummy, "width", null, true)) || 1) / measurement; /* GET */
unitRatios.percentToPxHeight = callUnitConversionData.lastPercentToPxHeight = (parseFloat(CSS.getPropertyValue(dummy, "height", null, true)) || 1) / measurement; /* GET */
unitRatios.emToPx = callUnitConversionData.lastEmToPx = (parseFloat(CSS.getPropertyValue(dummy, "paddingLeft")) || 1) / measurement; /* GET */

sameRatioIndicators.myParent.removeChild(dummy);
} else {
unitRatios.emToPx = callUnitConversionData.lastEmToPx;
Expand Down Expand Up @@ -2605,10 +2610,10 @@ return function (global, window, document, undefined) {
/* By this point, we cannot avoid unit conversion (it's undesirable since it causes layout thrashing).
If we haven't already, we trigger calculateUnitRatios(), which runs once per element per call. */
elementUnitConversionData = elementUnitConversionData || calculateUnitRatios();

/* The following RegEx matches CSS properties that have their % values measured relative to the x-axis. */
/* Note: W3C spec mandates that all of margin and padding's properties (even top and bottom) are %-relative to the *width* of the parent element. */
var axis = (/margin|padding|left|right|width|text|word|letter/i.test(property) || /X$/.test(property)) ? "x" : "y";
var axis = (/margin|padding|left|right|width|text|word|letter/i.test(property) || /X$/.test(property) || property === "x") ? "x" : "y";

/* In order to avoid generating n^2 bespoke conversion functions, unit conversion is a two-step process:
1) Convert startValue into pixels. 2) Convert this new pixel value into endValue's unit type. */
Expand Down Expand Up @@ -2704,11 +2709,12 @@ return function (global, window, document, undefined) {
/* The call array houses the tweensContainers for each element being animated in the current call. */
call.push(tweensContainer);

/* Store the tweensContainer on the element, plus the current call's opts so that Velocity can reference this data the next time this element is animated. */
if (opts.queue !== false) {
/* Store the tweensContainer and options if we're working on the default effects queue, so that they can be used by the reverse command. */
if (opts.queue === "") {
Data(element).tweensContainer = tweensContainer;
Data(element).opts = opts;
}
Data(element).opts = opts;

/* Switch on the element's animating flag. */
Data(element).isAnimating = true;

Expand Down Expand Up @@ -2857,6 +2863,8 @@ return function (global, window, document, undefined) {
Timing
**************/

var ticker = window.requestAnimationFrame || rAFShim;

/* Inactive browser tabs pause rAF, which results in all active animations immediately sprinting to their completion states when the tab refocuses.
To get around this, we dynamically switch rAF to setTimeout (which the browser *doesn't* pause) when the tab loses focus. We skip this for mobile
devices to avoid wasting battery power on inactive tabs. */
Expand Down Expand Up @@ -3079,7 +3087,6 @@ return function (global, window, document, undefined) {
if (opts.display !== undefined && opts.display !== "none") {
Velocity.State.calls[i][2].display = false;
}

if (opts.visibility && opts.visibility !== "hidden") {
Velocity.State.calls[i][2].visibility = false;
}
Expand Down Expand Up @@ -3308,6 +3315,10 @@ return function (global, window, document, undefined) {
/* If the user passed in a begin callback, fire it now. */
begin && begin.call(element, element);

/* Force vertical overflow content to clip so that sliding works as expected. */
inlineValues.overflowY = element.style.overflowY;
element.style.overflowY = "hidden";

/* Cache the elements' original vertical dimensional property values so that we can animate back to them. */
for (var property in computedValues) {
/* Cache all inline values, we reset to upon animation completion. */
Expand Down Expand Up @@ -3339,17 +3350,14 @@ return function (global, window, document, undefined) {
$.each([ "In", "Out" ], function(i, direction) {
Velocity.Sequences["fade" + direction] = function (element, options, elementsIndex, elementsSize, elements, promiseData) {
var opts = $.extend({}, options),
propertiesMap = {
opacity: (direction === "In") ? 1 : 0
};
propertiesMap = { opacity: (direction === "In") ? 1 : 0 },
originalComplete = opts.complete;

/* Since sequences are triggered individually for each element in the animated set, avoid repeatedly triggering
callbacks by firing them only when the final element has been reached. */
if (elementsIndex !== elementsSize - 1) {
opts.complete = opts.begin = null;
} else {
var originalComplete = opts.complete;

opts.complete = function() {
if (originalComplete) {
originalComplete.call(element, element);
Expand Down
4 changes: 2 additions & 2 deletions packages/velocity/jquery.velocity.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/velocity/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "velocity-animate",
"version": "0.11.8",
"version": "0.11.9",
"description": "Accelerated JavaScript animation.",
"keywords": [
"velocity",
Expand Down
Loading

0 comments on commit 5152a07

Please sign in to comment.