getInverseToggleValue

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);
}

animateHeight

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;
}));