animore - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

animore.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define(factory) :
-	(global.animore = factory());
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global.animore = factory());
 }(this, (function () { 'use strict';
 
-/**
- * Converts any DOM node/s to a loopable array
- * @param   { HTMLElement|NodeList } els - single html element or a node list
- * @returns { Array } always a loopable object
- */
-function domToArray(els) {
-  // can this object be already looped?
-  if (!Array.isArray(els)) {
-    // is it a node list?
-    if (/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(els)) && typeof els.length === 'number') return Array.from(els);else
-      // if it's a single node
-      // it will be returned as "array" with one single entry
-      return [els];
+  /**
+   * Converts any DOM node/s to a loopable array
+   * @param   { HTMLElement|NodeList } els - single html element or a node list
+   * @returns { Array } always a loopable object
+   */
+  function domToArray(els) {
+    // can this object be already looped?
+    if (!Array.isArray(els)) {
+      // is it a node list?
+      if (/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(els)) && typeof els.length === 'number') return Array.from(els);else
+        // if it's a single node
+        // it will be returned as "array" with one single entry
+        return [els];
+    }
+    // this object could be looped out of the box
+    return els;
   }
-  // this object could be looped out of the box
-  return els;
-}
 
-/**
- * Simple helper to find DOM nodes returning them as array like loopable object
- * @param   { String|DOMNodeList } selector - either the query or the DOM nodes to arraify
- * @param   { HTMLElement }        ctx      - context defining where the query will search for the DOM nodes
- * @returns { Array } DOM nodes found as array
- */
-function $(selector, ctx) {
-  return domToArray(typeof selector === 'string' ? (ctx || document).querySelectorAll(selector) : selector);
-}
+  /**
+   * Split a string into several items separed by spaces
+   * @param   { String } l - events list
+   * @returns { Array } all the events detected
+   * @private
+   */
+  var split = function split(l) {
+    return l.split(/\s/);
+  };
 
-/**
- * Split a string into several items separed by spaces
- * @param   { String } l - events list
- * @returns { Array } all the events detected
- * @private
- */
-var split = function split(l) {
-  return l.split(/\s/);
-};
+  /**
+   * Set a listener for all the events received separated by spaces
+   * @param   { HTMLElement|NodeList|Array } els     - DOM node/s where the listeners will be bound
+   * @param   { String }                     evList  - list of events we want to bind or unbind space separated
+   * @param   { Function }                   cb      - listeners callback
+   * @param   { String }                     method  - either 'addEventListener' or 'removeEventListener'
+   * @param   { Object }                     options - event options (capture, once and passive)
+   * @private
+   */
+  function manageEvents(els, evList, cb, method, options) {
+    els = domToArray(els);
 
-/**
- * Set a listener for all the events received separated by spaces
- * @param   { HTMLElement|NodeList|Array } els     - DOM node/s where the listeners will be bound
- * @param   { String }                     evList  - list of events we want to bind or unbind space separated
- * @param   { Function }                   cb      - listeners callback
- * @param   { String }                     method  - either 'addEventListener' or 'removeEventListener'
- * @param   { Object }                     options - event options (capture, once and passive)
- * @private
- */
-function manageEvents(els, evList, cb, method, options) {
-  els = domToArray(els);
+    split(evList).forEach(function (e) {
+      for (var _iterator = els, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+        var _ref;
 
-  split(evList).forEach(function (e) {
-    for (var _iterator = els, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
+        if (_isArray) {
+          if (_i >= _iterator.length) break;
+          _ref = _iterator[_i++];
+        } else {
+          _i = _iterator.next();
+          if (_i.done) break;
+          _ref = _i.value;
+        }
 
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
+        var el = _ref;
+        el[method](e, cb, options || false);
       }
+    });
+  }
 
-      var el = _ref;
-      el[method](e, cb, options || false);
-    }
-  });
-}
-
-/**
- * Set a listener for all the events received separated by spaces
- * @param   { HTMLElement|Array } els    - DOM node/s where the listeners will be bound
- * @param   { String }            evList - list of events we want to bind space separated
- * @param   { Function }          cb     - listeners callback
- * @param   { Object }            options - event options (capture, once and passive)
- * @returns { HTMLElement|NodeList|Array } DOM node/s and first argument of the function
- */
-function add(els, evList, cb, options) {
-  manageEvents(els, evList, cb, 'addEventListener', options);
-  return els;
-}
-
-/**
- * Set a listener using from a list of events triggering the callback only once
- * @param   { HTMLElement|Array } els     - DOM node where the listeners will be bound
- * @param   { String }            evList  - list of events we want to bind space separated
- * @param   { Function }          cb      - listeners callback
- * @param   { Object }             options - event options (capture, once and passive)
- * @returns { HTMLElement|NodeList|Array }  DOM node/s and first argument of the function
- */
-
-
-/**
- * Remove all the listeners for the events received separated by spaces
- * @param   { HTMLElement|Array } els     - DOM node/s where the events will be unbind
- * @param   { String }            evList  - list of events we want unbind space separated
- * @param   { Function }          cb      - listeners callback
- * @param   { Object }             options - event options (capture, once and passive)
- * @returns { HTMLElement|NodeList|Array }  DOM node/s and first argument of the function
- */
-function remove(els, evList, cb, options) {
-  manageEvents(els, evList, cb, 'removeEventListener', options);
-  return els;
-}
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-/**
- * Converts any DOM node/s to a loopable array
- * @param   { HTMLElement|NodeList } els - single html element or a node list
- * @returns { Object } always a loopable object
- */
-
-function domToArray$1(els) {
-  // can this object be already looped?
-  if (!Array.isArray(els)) {
-    // is it a node list?
-    if (els.length) return Array.from(els);else
-      // if it's a single node
-      // it will be returned as "array" with one single entry
-      return [els];
+  /**
+   * Set a listener for all the events received separated by spaces
+   * @param   { HTMLElement|Array } els    - DOM node/s where the listeners will be bound
+   * @param   { String }            evList - list of events we want to bind space separated
+   * @param   { Function }          cb     - listeners callback
+   * @param   { Object }            options - event options (capture, once and passive)
+   * @returns { HTMLElement|NodeList|Array } DOM node/s and first argument of the function
+   */
+  function add(els, evList, cb, options) {
+    manageEvents(els, evList, cb, 'addEventListener', options);
+    return els;
   }
-  // this object could be looped out of the box
-  return els;
-}
 
-var index$2 = domToArray$1;
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-var index = createCommonjsModule(function (module, exports) {
-  'use strict';
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-  function _interopDefault(ex) {
-    return ex && (typeof ex === 'undefined' ? 'undefined' : _typeof(ex)) === 'object' && 'default' in ex ? ex['default'] : ex;
+  /**
+   * Remove all the listeners for the events received separated by spaces
+   * @param   { HTMLElement|Array } els     - DOM node/s where the events will be unbind
+   * @param   { String }            evList  - list of events we want unbind space separated
+   * @param   { Function }          cb      - listeners callback
+   * @param   { Object }             options - event options (capture, once and passive)
+   * @returns { HTMLElement|NodeList|Array }  DOM node/s and first argument of the function
+   */
+  function remove(els, evList, cb, options) {
+    manageEvents(els, evList, cb, 'removeEventListener', options);
+    return els;
   }
 
-  var domToArray = _interopDefault(index$2);
+  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
@@ -215,26 +159,2 @@ /**
   /**
-   * Get any attribute from a single or a list of DOM nodes
-   * @param   { HTMLElement|NodeList|Array } els   - DOM node/s to parse
-   * @param   { String|Array }               name  - name or list of attributes to get
-   * @returns { Array|String } list of the attributes found
-   *
-   * @example
-   *
-   * import { get } from 'bianco.attr'
-   *
-   * const img = document.createElement('img')
-   *
-   * get(img, 'width') // => '200'
-   *
-   * // or also
-   * get(img, ['width', 'height']) // => ['200', '300']
-   *
-   * // or also
-   * get([img1, img2], ['width', 'height']) // => [['200', '300'], ['500', '200']]
-   */
-  function get(els, name) {
-    return parseNodes(els, name, 'getAttribute');
-  }
-
-  /**
    * Remove any attribute from a single or a list of DOM nodes
@@ -257,3 +177,3 @@ * @param   { HTMLElement|NodeList|Array } els   - DOM node/s to parse
    */
-  function remove(els, name) {
+  function remove$1(els, name) {
     return parseNodes(els, name, 'removeAttribute');
@@ -283,228 +203,250 @@ }
 
-  var index_next = {
-    get: get,
-    set: set,
-    remove: remove,
-    has: has
+  /**
+   * Simple helper to find DOM nodes returning them as array like loopable object
+   * @param   { String|DOMNodeList } selector - either the query or the DOM nodes to arraify
+   * @param   { HTMLElement }        ctx      - context defining where the query will search for the DOM nodes
+   * @returns { Array } DOM nodes found as array
+   */
+  function $(selector, ctx) {
+    return domToArray(typeof selector === 'string' ? (ctx || document).querySelectorAll(selector) : selector);
+  }
+
+  var DEFAULT_OPTIONS = {
+    duration: 300,
+    delay: 0,
+    easing: 'ease-in-out',
+    onEnd: noop,
+    onCancel: noop,
+    onStart: noop
   };
+  var IS_ANIMATING_ATTR = 'is-animating';
+  var TIMER_OFFSET = 5; // ms
+  var ANIMORE_STRUCT = Object.seal({
+    // fallback timer
+    timer: null,
+    /**
+     * Cleanup function triggered when the animations will be complete
+     * @returns { ANIMORE_STRUCT } self
+     */
+    clear: function clear() {
+      removeEvents.call(this);
+      remove$1(this.el, IS_ANIMATING_ATTR);
+      style(this.el, {
+        opacity: null,
+        transition: null,
+        transform: null,
+        transformOrigin: null,
+        willChange: null
+      });
 
-  exports.set = set;
-  exports.get = get;
-  exports.remove = remove;
-  exports.has = has;
-  exports['default'] = index_next;
-});
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-var index_1 = index.set;
-var index_3 = index.remove;
-var index_4 = index.has;
+      this.opts[args[0].type === 'transitioncancel' ? 'onCancel' : 'onEnd'](args);
 
-var DEFAULT_OPTIONS = {
-  duration: 300,
-  delay: 0,
-  easing: 'ease-in-out',
-  onEnd: noop,
-  onCancel: noop,
-  onStart: noop
-};
-var IS_ANIMATING_ATTR = 'is-animating';
-var TIMER_OFFSET = 5; // ms
-var ANIMORE_STRUCT = Object.seal({
-  // fallback timer
-  timer: null,
-  /**
-   * Cleanup function triggered when the animations will be complete
-   * @returns { ANIMORE_STRUCT } self
-   */
-  clear: function clear() {
-    removeEvents.call(this);
-    index_3(this.el, IS_ANIMATING_ATTR);
-    style(this.el, {
-      opacity: null,
-      transition: null,
-      transform: null,
-      transformOrigin: null,
-      willChange: null
-    });
+      return this;
+    },
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
 
-    this.opts[args[0].type === 'transitioncancel' ? 'onCancel' : 'onEnd'](args);
+    /**
+     * Store the element initial properties
+     * @returns { ANIMORE_STRUCT } self
+     */
+    stash: function stash() {
+      this.props.old = inspect(this.el);
+      return this;
+    },
 
-    return this;
-  },
 
+    /**
+     * Apply a flip animation
+     * @returns { ANIMORE_STRUCT } self
+     */
+    apply: function apply() {
+      var _this = this;
 
+      if (!this.props.old) throw new Error('Make sure to trigger animore.stash() before any animore.apply()');
+      this.props.new = inspect(this.el);
+      set(this.el, IS_ANIMATING_ATTR, IS_ANIMATING_ATTR);
+      addEvents.call(this);
+      flip(this.el, this.props, this.opts);
+      Object.assign(this.props.old, this.props.new);
+
+      // make sure the transition end will always be triggered
+      // this will enable the testing of this script also in a node environment
+      clearTimeout(this.timer);
+      this.timer = setTimeout(function () {
+        if (has(_this.el, IS_ANIMATING_ATTR)) {
+          dispatchEvent(_this.el, 'transitionend');
+        }
+      }, this.opts.duration + TIMER_OFFSET);
+
+      return this;
+    }
+  });
+
+  // noop function
+  function noop() {}
+
   /**
-   * Store the element initial properties
-   * @returns { ANIMORE_STRUCT } self
+   * Add all the event listeners to the animore.el
+   * @this animore
+   * @returns { undefined } void function :(
    */
-  stash: function stash() {
-    this.props.old = inspect(this.el);
-    return this;
-  },
+  function addEvents() {
+    add(this.el, 'transitionstart', this.opts.onStart);
+    add(this.el, 'transitionend transitioncancel', this.clear);
+  }
 
+  /**
+   * Remove all the event listeners from the animore.el
+   * @this animore
+   * @returns { undefined } void function :(
+   */
+  function removeEvents() {
+    remove(this.el, 'transitionstart', this.opts.onStart);
+    remove(this.el, 'transitionend transitioncancel', this.clear);
+  }
 
   /**
-   * Apply a flip animation
-   * @returns { ANIMORE_STRUCT } self
+   * Inspect the transitionable properties of a DOM node
+   * @param   { HTMLElement } el - DOM node to inspect
+   * @returns { Object } transitionable properties like width, top...
    */
-  apply: function apply() {
-    var _this = this;
+  function inspect(el) {
+    var _el$getBoundingClient = el.getBoundingClientRect(),
+        left = _el$getBoundingClient.left,
+        top = _el$getBoundingClient.top,
+        height = _el$getBoundingClient.height,
+        width = _el$getBoundingClient.width;
 
-    if (!this.props.old) throw new Error('Make sure to trigger animore.stash() before any animore.apply()');
-    this.props.new = inspect(this.el);
-    index_1(this.el, IS_ANIMATING_ATTR, IS_ANIMATING_ATTR);
-    addEvents.call(this);
-    flip(this.el, this.props, this.opts);
-    Object.assign(this.props.old, this.props.new);
+    return {
+      left: left,
+      top: top,
+      height: height,
+      width: width,
+      opacity: +(el.style.opacity || 1)
+    };
+  }
 
-    // make sure the transition end will always be triggered
-    // this will enable the testing of this script also in a node environment
-    clearTimeout(this.timer);
-    this.timer = setTimeout(function () {
-      if (index_4(_this.el, IS_ANIMATING_ATTR)) {
-        _this.el.dispatchEvent(new Event('transitionend'));
-      }
-    }, this.opts.duration + TIMER_OFFSET);
-
-    return this;
+  /**
+   * Simple function to apply style properties to a DOM node via js objects
+   * @param   { HTMLElement } el - element that will be updated
+   * @param   { Object } props - new css rules to apply to the element
+   * @returns { undefined } void function :(
+   */
+  function style(el, props) {
+    Object.keys(props).forEach(function (key) {
+      el.style[key] = props[key];
+    });
   }
-});
 
-// noop function
-function noop() {}
+  /**
+   * Apply a flip transition diffing the previous properties against the new ones received
+   * @param   { HTMLElement } el - DOM element we want to animate
+   * @param   { Object } props - object containing the old and new properties to animate
+   * @param   { Object } opts - animation options
+   * @returns { undefined } void function :(
+   */
+  function flip(el, props, opts) {
+    style(el, {
+      opacity: props.old.opacity,
+      willChange: 'transform',
+      transformOrigin: '0 0',
+      transform: '\n    translateX(' + (props.old.left - props.new.left) + 'px)\n    translateY(' + (props.old.top - props.new.top) + 'px)\n    scaleX(' + props.old.width / props.new.width + ')\n    scaleY(' + props.old.height / props.new.height + ')\n'
+    });
 
-/**
- * Add all the event listeners to the animore.el
- * @this animore
- */
-function addEvents() {
-  add(this.el, 'transitionstart', this.opts.onStart);
-  add(this.el, 'transitionend transitioncancel', this.clear);
-}
+    // force the reflow
+    el.scrollTop;
 
-/**
- * Remove all the event listeners from the animore.el
- * @this animore
- */
-function removeEvents() {
-  remove(this.el, 'transitionstart', this.opts.onStart);
-  remove(this.el, 'transitionend transitioncancel', this.clear);
-}
+    style(el, {
+      opacity: props.new.opacity,
+      transition: 'transform ' + opts.duration + 'ms ' + opts.easing + ' ' + opts.delay + 'ms',
+      transform: '\n    translateX(0)\n    translateY(0)\n    scaleX(1)\n    scaleY(1)\n'
+    });
+  }
 
-/**
- * Inspect the transitionable properties of a DOM node
- * @param   { HTMLElement } el - DOM node to inspect
- * @returns { Object } transitionable properties like width, top...
- */
-function inspect(el) {
-  var _el$getBoundingClient = el.getBoundingClientRect(),
-      left = _el$getBoundingClient.left,
-      top = _el$getBoundingClient.top,
-      height = _el$getBoundingClient.height,
-      width = _el$getBoundingClient.width;
+  /**
+   * Return an object linked to the context prototype but with all the methods bound to it
+   * @param   { Object } src - object that will receive our bound methods
+   * @param   { Array } methods - array containing all the methods we want to bind
+   * @param   { * } context (optional) - context where we want to bind our methods
+   * @returns { Object } new object linked to the src prototype
+   */
+  function bind(src, methods, context) {
+    if (!context) context = src;
+    methods.forEach(function (method) {
+      return src[method] = src[method].bind(context);
+    });
+    return Object.create(src);
+  }
 
-  return {
-    left: left,
-    top: top,
-    height: height,
-    width: width,
-    opacity: +(el.style.opacity || 1)
-  };
-}
+  /**
+   * Create a crossbrowser event Object to dispatch on a DOM node
+   * @param   { string } eventName [description]
+   * @returns { Event } event object
+   */
+  function getEventObject(eventName) {
+    if (typeof Event === 'function') {
+      return new Event(eventName);
+    }
 
-/**
- * Simple function to apply style properties to a DOM node via js objects
- * @param   { HTMLElement } el - element that will be updated
- * @param   { Object } props - new css rules to apply to the element
- */
-function style(el, props) {
-  Object.keys(props).forEach(function (key) {
-    el.style[key] = props[key];
-  });
-}
+    var event = document.createEvent('Event');
+    event.initEvent(eventName, true, true);
 
-/**
- * Apply a flip transition diffing the previous properties against the new ones received
- * @param   { HTMLElement } el - DOM element we want to animate
- * @param   { Object } props - object containing the old and new properties to animate
- * @param   { Object } opts - animation options
- */
-function flip(el, props, opts) {
-  style(el, {
-    opacity: props.old.opacity,
-    willChange: 'transform',
-    transformOrigin: '0 0',
-    transform: '\n    translateX(' + (props.old.left - props.new.left) + 'px)\n    translateY(' + (props.old.top - props.new.top) + 'px)\n    scaleX(' + props.old.width / props.new.width + ')\n    scaleY(' + props.old.height / props.new.height + ')\n'
-  });
+    return event;
+  }
 
-  // force the reflow
-  el.scrollTop;
+  /**
+   * Helper function to dispatch a DOM event
+   * @param   { HTMLElement } el - target node
+   * @param   { string } eventName - event name
+   * @returns { undefined } this is a void function :(
+   */
+  function dispatchEvent(el, eventName) {
+    el.dispatchEvent(getEventObject(eventName));
+  }
 
-  style(el, {
-    opacity: props.new.opacity,
-    transition: 'transform ' + opts.duration + 'ms ' + opts.easing + ' ' + opts.delay + 'ms',
-    transform: '\n    translateX(0)\n    translateY(0)\n    scaleX(1)\n    scaleY(1)\n'
-  });
-}
+  /**
+   * Factory funciton to create a single animore object
+   * @param   { HTMLElement } el - DOM node we need to animate
+   * @param   { Object } opts - animations options
+   * @returns { Object } animore - animore object
+   */
+  function create(el) {
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-/**
- * Return an object linked to the context prototype but with all the methods bound to it
- * @param   { Object } src - object that will receive our bound methods
- * @param   { Array } methods - array containing all the methods we want to bind
- * @param   { * } context (optional) - context where we want to bind our methods
- * @returns { Object } new object linked to the src prototype
- */
-function bind(src, methods, context) {
-  if (!context) context = src;
-  methods.forEach(function (method) {
-    return src[method] = src[method].bind(context);
-  });
-  return Object.create(src);
-}
+    var animore = {};
 
-/**
- * Factory funciton to create a single animore object
- * @param   { HTMLElement } el - DOM node we need to animate
- * @param   { Object } opts - animations options
- * @returns { Object } animore - animore object
- */
-function create(el) {
-  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return Object.seal(bind(Object.assign(animore, ANIMORE_STRUCT, {
+      el: el,
+      opts: bind(Object.assign({}, DEFAULT_OPTIONS, opts), ['onStart', 'onEnd', 'onCancel'], animore),
+      props: {
+        old: null,
+        new: null
+      }
+    }), ['clear', 'stash', 'apply']));
+  }
 
-  var animore = {};
+  /**
+   * Returns always an array containing all the animore objects
+   * @param   { Array|string|HTMLElement } el - element/s we want to animate
+   * @param   { Object } opts - options object
+   * @param   { number } opts.duration - transition duration
+   * @param   { string } opts.easing - transition css easing function
+   * @param   { number } opts.delay - transition delay
+   * @param   { Function } opts.onEnd - on transition end callback
+   * @param   { Function } opts.onStart - on transition start callback
+   * @param   { Function } opts.onCancel - on transition cancel callback
+   * @returns { Array<animore> } animore objects
+   */
+  function animore(el, opts) {
+    return $(el).map(function (e) {
+      return create(e, opts);
+    });
+  }
 
-  return Object.seal(bind(Object.assign(animore, ANIMORE_STRUCT, {
-    el: el,
-    opts: bind(Object.assign({}, DEFAULT_OPTIONS, opts), ['onStart', 'onEnd', 'onCancel'], animore),
-    props: {
-      old: null,
-      new: null
-    }
-  }), ['clear', 'stash', 'apply']));
-}
+  return animore;
 
-/**
- * Returns always an array containing all the animore objects
- * @param   { Array|String|HTMLElement } el - element/s we want to animate
- * @param   { Object } opts - options object
- * @param   { Number } opts.duration - transition duration
- * @param   { String } opts.easing - transition css easing function
- * @param   { Number } opts.delay - transition delay
- * @param   { Function } opts.onEnd - on transition end callback
- * @param   { Function } opts.onStart - on transition start callback
- * @param   { Function } opts.onCancel - on transition cancel callback
- * @returns { Array }
- */
-function animore(el, opts) {
-  return $(el).map(function (e) {
-    return create(e, opts);
-  });
-}
-
-return animore;
-
 })));

lib/index.js

@@ -0,4 +1,4 @@
+import { add as addEvent, remove as removeEvent } from 'bianco.events'
+import { has as hasAttr, remove as removeAttr, set as setAttr } from 'bianco.attr'
 import $ from 'bianco.query'
-import { add as addEvent, remove as removeEvent } from 'bianco.events'
-import { has as hasAttr, set as setAttr, remove as removeAttr } from 'bianco.attr'
 
@@ -32,2 +32,3 @@ const DEFAULT_OPTIONS = {
     })
+
     this.opts[args[0].type === 'transitioncancel' ? 'onCancel' : 'onEnd'](args)
@@ -64,3 +65,3 @@
       if (hasAttr(this.el, IS_ANIMATING_ATTR)) {
-        this.el.dispatchEvent(new Event('transitionend'))
+        dispatchEvent(this.el, 'transitionend')
       }
@@ -79,2 +80,3 @@ }, this.opts.duration + TIMER_OFFSET)
  * @this animore
+ * @returns { undefined } void function :(
  */
@@ -89,2 +91,3 @@ function addEvents() {
  * @this animore
+ * @returns { undefined } void function :(
  */
@@ -116,2 +119,3 @@ function removeEvents() {
  * @param   { Object } props - new css rules to apply to the element
+ * @returns { undefined } void function :(
  */
@@ -129,2 +133,3 @@ function style(el, props) {
  * @param   { Object } opts - animation options
+ * @returns { undefined } void function :(
  */
@@ -173,2 +178,28 @@ function flip(el, props, opts) {
 /**
+ * Create a crossbrowser event Object to dispatch on a DOM node
+ * @param   { string } eventName [description]
+ * @returns { Event } event object
+ */
+function getEventObject(eventName) {
+  if (typeof(Event) === 'function'){
+    return new Event(eventName)
+  }
+
+  const event = document.createEvent('Event')
+  event.initEvent(eventName, true, true)
+
+  return event
+}
+
+/**
+ * Helper function to dispatch a DOM event
+ * @param   { HTMLElement } el - target node
+ * @param   { string } eventName - event name
+ * @returns { undefined } this is a void function :(
+ */
+function dispatchEvent(el, eventName) {
+  el.dispatchEvent(getEventObject(eventName))
+}
+
+/**
  * Factory funciton to create a single animore object
@@ -205,11 +236,11 @@ * @param   { HTMLElement } el - DOM node we need to animate
  * Returns always an array containing all the animore objects
- * @param   { Array|String|HTMLElement } el - element/s we want to animate
+ * @param   { Array|string|HTMLElement } el - element/s we want to animate
  * @param   { Object } opts - options object
- * @param   { Number } opts.duration - transition duration
- * @param   { String } opts.easing - transition css easing function
- * @param   { Number } opts.delay - transition delay
+ * @param   { number } opts.duration - transition duration
+ * @param   { string } opts.easing - transition css easing function
+ * @param   { number } opts.delay - transition delay
  * @param   { Function } opts.onEnd - on transition end callback
  * @param   { Function } opts.onStart - on transition start callback
  * @param   { Function } opts.onCancel - on transition cancel callback
- * @returns { Array }
+ * @returns { Array<animore> } animore objects
  */
@@ -216,0 +247,0 @@ export default function animore(el, opts) {

package.json

 {
   "name": "animore",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Animore makes DOM state transitions easier",
@@ -15,13 +15,13 @@ "main": "animore.js",
   "devDependencies": {
-    "babel-preset-env": "^1.6.0",
-    "eslint": "^4.5.0",
-    "eslint-config-riot": "^1.0.0",
-    "jsdom": "11.1.0",
+    "babel-preset-env": "^1.7.0",
+    "eslint": "^4.19.1",
+    "eslint-config-riot": "^2.0.0",
+    "jsdom": "11.10.0",
     "jsdom-global": "3.0.2",
-    "mocha": "^3.5.0",
-    "rollup": "^0.47.6",
-    "babel-core": "^6.26.0",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-commonjs": "^8.1.0",
-    "rollup-plugin-node-resolve": "^3.0.0"
+    "mocha": "^5.1.1",
+    "rollup": "^0.59.1",
+    "babel-core": "^6.26.3",
+    "rollup-plugin-babel": "^3.0.4",
+    "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-node-resolve": "^3.3.0"
   },
@@ -31,6 +31,6 @@ "author": "Gianluca Guarini <[e-mail]> (http://gianlucaguarini.com)",
   "dependencies": {
-    "bianco.attr": "0.0.2",
-    "bianco.events": "0.0.5",
-    "bianco.query": "0.0.6"
+    "bianco.attr": "0.0.3",
+    "bianco.events": "0.0.6",
+    "bianco.query": "0.0.7"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

36664

decreased by-3.01%

Number of package files

14

decreased by-6.67%

Lines of code

664

decreased by-3.21%

Dependency changes

• + Addedbianco.attr@0.0.3(transitive)

• + Addedbianco.events@0.0.6(transitive)

• + Addedbianco.query@0.0.7(transitive)

• - Removedbianco.attr@0.0.2(transitive)

• - Removedbianco.dom-to-array@0.0.4(transitive)

• - Removedbianco.events@0.0.5(transitive)

• - Removedbianco.query@0.0.6(transitive)

• Updatedbianco.attr@0.0.3

• Updatedbianco.events@0.0.6

• Updatedbianco.query@0.0.7