vuikit/lib/util/animation.js

A responsive Vue UI library for web site interfaces based on UIkit

/**
 * Vuikit 0.8.10
 * (c) 2018 Miljan Aleksic
 * @license MIT
**/

/* Substantial part of the code is adapted from UIkit,
  Copyright (c) 2013-2018 YOOtheme GmbH, getuikit.com */

import { attr } from './attr';
import { Promise } from './promise';
import { once, trigger } from './event';
import { css, propName } from './style';
import { assign, startsWith, toNodes } from './lang';
import { addClass, hasClass, removeClass, removeClasses } from './class';

function transition (element, props, duration, timing) {
  if ( duration === void 0 ) duration = 400;
  if ( timing === void 0 ) timing = 'linear';
  return Promise.all(toNodes(element).map(function (element) { return new Promise(function (resolve, reject) {
      for (var name in props) {
        var value = css(element, name);
        if (value === '') {
          css(element, name, value);
        }
      }
      var timer = setTimeout(function () { return trigger(element, 'transitionend'); }, duration);
      once(element, 'transitionend transitioncanceled', function (ref) {
        var type = ref.type;
        clearTimeout(timer);
        removeClass(element, 'uk-transition');
        css(element, {
          'transition-property': '',
          'transition-duration': '',
          'transition-timing-function': ''
        });
        type === 'transitioncanceled' ? reject() : resolve();
      }, false, function (ref) {
        var target = ref.target;
        return element === target;
      });
      addClass(element, 'uk-transition');
      css(element, assign({
        'transition-property': Object.keys(props).map(propName).join(','),
        'transition-duration': (duration + "ms"),
        'transition-timing-function': timing
      }, props));
    }); }
  ))
}
var Transition = {
  start: transition,
  stop: function stop (element) {
    trigger(element, 'transitionend');
    return Promise.resolve()
  },
  cancel: function cancel (element) {
    trigger(element, 'transitioncanceled');
  },
  inProgress: function inProgress (element) {
    return hasClass(element, 'uk-transition')
  }
};
var animationPrefix = 'uk-animation-';
var clsCancelAnimation = 'uk-cancel-animation';
function animate (element, animation, duration, origin, out) {
  var arguments$1 = arguments;
  if ( duration === void 0 ) duration = 200;
  return Promise.all(toNodes(element).map(function (element) { return new Promise(function (resolve, reject) {
      if (hasClass(element, clsCancelAnimation)) {
        requestAnimationFrame(function () { return Promise.resolve().then(function () { return animate.apply(void 0, arguments$1).then(resolve, reject); }
          ); }
        );
        return
      }
      var cls = animation + " " + animationPrefix + (out ? 'leave' : 'enter');
      if (startsWith(animation, animationPrefix)) {
        if (origin) {
          cls += " uk-transform-origin-" + origin;
        }
        if (out) {
          cls += " " + animationPrefix + "reverse";
        }
      }
      reset();
      once(element, 'animationend animationcancel', function (ref) {
        var type = ref.type;
        var hasReset = false;
        if (type === 'animationcancel') {
          reject();
          reset();
        } else {
          resolve();
          Promise.resolve().then(function () {
            hasReset = true;
            reset();
          });
        }
        requestAnimationFrame(function () {
          if (!hasReset) {
            addClass(element, clsCancelAnimation);
            requestAnimationFrame(function () { return removeClass(element, clsCancelAnimation); });
          }
        });
      }, false, function (ref) {
        var target = ref.target;
        return element === target;
      });
      css(element, 'animationDuration', (duration + "ms"));
      addClass(element, cls);
      function reset () {
        css(element, 'animationDuration', '');
        removeClasses(element, (animationPrefix + "\\S*"));
      }
    }); }
  ))
}
var inProgress = new RegExp((animationPrefix + "(enter|leave)"));
var Animation = {
  in: function in$1 (element, animation, duration, origin) {
    return animate(element, animation, duration, origin, false)
  },
  out: function out (element, animation, duration, origin) {
    return animate(element, animation, duration, origin, true)
  },
  inProgress: function inProgress$1 (element) {
    return inProgress.test(attr(element, 'class'))
  },
  cancel: function cancel (element) {
    trigger(element, 'animationcancel');
  }
};

export { transition, Transition, animate, Animation };