function
getInverseToggleValue()
Option name | Type | Description |
---|---|---|
property | String | |
originalValue | String | |
return | String |
Get the inverse toggle value
function getInverseToggleValue(el, property, originalValue) {
// Get the value to toggle to for the given property
switch (property) {
case 'overflow':
case 'visibility':
return originalValue === 'visible' ? 'hidden' : 'visible';
default:
return originalValue === 'block' || originalValue === 'inline-block' ? 'none' : 'block';
}
}
function onComplete(params) {
// Reset toggle el visibility
params.toggleEl.style[params.toggleProperty] = '';
// Remove the height property
params.el.style.height = '';
params.toggleEl.style.height = '';
params.toggleEl.style.marginBottom = '';
params.toggleEl.style.marginTop = '';
// Remove the spark-animate-height class so the transitions no longer apply
Base.removeClass(params.el, params.heightAnimationClass);
Base.removeClass(params.toggleEl, params.heightAnimationClass);
// Run the callback
params.onComplete();
// Remove the element and callback from their respective arrays
var runningIndex = runningAnimations.els.indexOf(params.el);
runningAnimations.els.splice(runningIndex, 1);
runningAnimations.completeCallbacks.splice(runningIndex, 1);
}
function
animateHeight()
Option name | Type | Description |
---|---|---|
params | Object |
function animateHeight(params) {
params = params || {};
var el = params.el;
if (!el) {
return;
}
var collapse = params.action && params.action === 'collapse';
var heightAnimationClass = params.heightAnimationClass || 'spark-animate-height';
// Allow for elements to be passed or selector strings
var toggleEl = typeof params.toggleEl === 'string' ? el.querySelector(params.toggleEl) : params.toggleEl;
// No element to be switching with toggling so we can't determine the desired height to animate to.
if (!toggleEl || Base.hasClass(el, 'spark-no-animate')) {
return;
}
// The style property to use when toggling visibility
var toggleProperty = params.toggleProperty || 'display';
var toggleStyles = window.getComputedStyle(toggleEl);
var originalToggleValue = toggleStyles[toggleProperty];
var toggleValue = params.toggleValue || getInverseToggleValue(toggleProperty, originalToggleValue);
// If we are already animating, stop now.
var runningIndex = runningAnimations.els.indexOf(el);
if (runningIndex !== -1) {
var completeCallback = runningAnimations.completeCallbacks[runningIndex];
if (completeCallback) {
clearTimeout(completeCallback);
}
onComplete({
el: el,
toggleEl: toggleEl,
onComplete: params.onComplete || noop,
collapse: collapse,
toggleProperty: toggleProperty,
toggleValue: toggleValue,
heightAnimationClass: heightAnimationClass
});
}
// Store the current height
var originalHeight = outerHeight(el);
// Toggle the visible property
toggleEl.style[toggleProperty] = toggleValue;
// Now that the toggle el is taking up space, get the new height which we will be animating to
var targetElHeight = outerHeight(el);
// We need to store the original and target toggle element heights. They differ depending on
// whether we are going to expand or collapse.
var targetToggleElHeight;
var originalToggleElHeight;
// If we are collapsing, reset the toggle style and set it when we're done. Set the height so
// that we can animate down to 0 or up to the target height.
if (collapse) {
toggleEl.style[toggleProperty] = originalToggleValue;
originalToggleElHeight = outerHeight(toggleEl, toggleStyles);
targetToggleElHeight = 0;
} else {
targetToggleElHeight = outerHeight(toggleEl, toggleStyles);
originalToggleElHeight = 0;
}
// Set the original height
el.style.height = originalHeight + 'px';
toggleEl.style.height = originalToggleElHeight + 'px';
toggleEl.style.marginBottom = '0px';
toggleEl.style.marginTop = '0px';
// Add the spark-animate-height class which will setup the transition-property and duration
Base.addClass(el, heightAnimationClass);
Base.addClass(toggleEl, heightAnimationClass);
runningAnimations.els.push(el);
// We need to wait a tick to toggle the height or else the animation class won't function
setTimeout(function() {
// Set the height to the target height
el.style.height = targetElHeight + 'px';
toggleEl.style.height = targetToggleElHeight + 'px';
// Remove inline styles after the animation is complete
runningAnimations.completeCallbacks.push(setTimeout(function() {
onComplete({
el: el,
toggleEl: toggleEl,
onComplete: params.onComplete || noop,
collapse: collapse,
toggleProperty: toggleProperty,
toggleValue: toggleValue,
heightAnimationClass: heightAnimationClass
});
}, params.animationDuration !== undefined ? params.animationDuration : 250));
}, 0);
}
Base.exportjQuery(animateHeight, 'animateHeight');
return animateHeight;
}));