magic-snowflakes/dist/snowflakes.light.js

/*! Snowflakes | © 2019 Denis Seleznev | MIT License | https://github.com/hcodes/snowflakes/ */
(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.Snowflakes = factory());
}(this, (function () { 'use strict';

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
    return;
  }

  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

var animationPrefix = '';

if (typeof window !== 'undefined') {
  animationPrefix = Array.prototype.slice.call(window.getComputedStyle(document.documentElement, '')).join(',').search(/,animation/) > -1 ? '' : 'Webkit';
}
/**
 * Set inline style.
 *
 * @param {DOMElement} dom
 * @param {Object} props
 */


function setStyle(dom, props) {
  Object.keys(props).forEach(function (originalKey) {
    var key = originalKey;

    if (animationPrefix && originalKey.search('animation') > -1) {
      key = animationPrefix + originalKey[0].toUpperCase() + originalKey.substr(1);
    }

    dom.style[key] = props[originalKey];
  });
}
/**
 * Show DOM element.
 *
 * @param {DOMElement} dom
 */

function showElement(dom) {
  setStyle(dom, {
    display: 'block'
  });
}
/**
 * Hide DOM element.
 *
 * @param {DOMElement} dom
 */

function hideElement(dom) {
  setStyle(dom, {
    display: 'none'
  });
}
/**
 * Get window height.
 *
 * @returns {number}
 */

function getWindowHeight() {
  var body = document.body,
      docElement = document.documentElement;
  var height;

  if (window.innerHeight) {
    height = window.innerHeight;
  } else if (docElement && docElement.clientHeight) {
    height = docElement.clientHeight;
  } else if (body) {
    height = body.clientHeight;
  }

  return height;
}
/**
 * Get window height.
 *
 * @param {string} style
 * @param {DOMNode} styleNode
 *
 * @returns {DOMNode}
 */

function injectStyle(style, styleNode) {
  if (!styleNode) {
    styleNode = document.createElement('style');
    document.body.appendChild(styleNode);
  }

  if (styleNode.styleSheet) {
    // IE
    styleNode.styleSheet.cssText = style;
  } else if ('textContent' in styleNode) {
    styleNode.textContent = style;
  } else {
    styleNode.innerHTML = style;
  }

  return styleNode;
}
/**
 * Remove DOM node.
 *
 * @param {DOMNode} node
 *
 */

function removeNode(node) {
  if (node && node.parentNode) {
    node.parentNode.removeChild(node);
  }
}
/**
 * A DOM node is body.
 *
 * @param {DOMNode} node
 *
 * @returns {boolean}
 */

function isBody(node) {
  return node === document.body;
}
/**
 * Add classname for a node.
 *
 * @param {DOMNode} node
 * @param {string} classname
 */

function addClass(node, classname) {
  node.classList.add(classname);
}
/**
 * Remove classname for a node.
 *
 * @param {DOMNode} node
 * @param {string} classname
 */

function removeClass(node, classname) {
  node.classList.remove(classname);
}

/**
 * Get random number.
 *
 * @param {number} from
 * @param {number} max
 *
 * @returns {number}
 */
function getRandom(from, max) {
  return from + Math.floor(Math.random() * (max - from));
}
/**
 * Linear interpolation.
 *
 * @param {number} x
 * @param {number} x1
 * @param {number} x2
 * @param {number} y1
 * @param {number} y2
 *
 * @returns {number}
 */

function interpolation(x, x1, x2, y1, y2) {
  return y1 + (y2 - y1) * (x - x1) / (x2 - x1);
}

var Flake =
/*#__PURE__*/
function () {
  /**
   * @constructor
   *
   * @param {DOMElement} container
   * @param {number} containerHeight
   * @param {Object} params
   * @param {number} [params.count]
   * @param {number} [params.speed]
   * @param {boolean} [params.rotation]
   * @param {number} [params.minOpacity]
   * @param {number} [params.maxOpacity]
   * @param {number} [params.minSize]
   * @param {number} [params.maxSize]
   * @param {number} [params.types]
   * @param {number} [params.wind]
   * @param {number} [params.zIndex]
   */
  function Flake(container, containerHeight, params) {
    _classCallCheck(this, Flake);

    var isEqual = params.minSize === params.maxSize;
    this.innerSize = isEqual ? 0 : getRandom(0, Flake.maxInnerSize);
    this.size = Flake.calcSize(this.innerSize, params);
    var flake = document.createElement('div'),
        innerFlake = document.createElement('div'),
        animationProps = this.getAnimationProps(containerHeight, params),
        styleProps = {
      animationDelay: animationProps.animationDelay,
      animationDuration: animationProps.animationDuration,
      left: Math.random() * 99 + '%',
      marginTop: -Math.sqrt(2) * this.size + 'px',
      width: this.size + 'px',
      height: this.size + 'px'
    };

    if (!isEqual) {
      styleProps.zIndex = params.zIndex + this.size * 10;
      styleProps.opacity = interpolation(this.size, params.minSize, params.maxSize, params.minOpacity, params.maxOpacity);
    }

    setStyle(flake, styleProps);
    setStyle(innerFlake, {
      animationName: 'snowflake_x_' + this.innerSize,
      animationDelay: Math.random() + 's'
    });
    addClass(flake, 'snowflake');
    addClass(innerFlake, 'snowflake__inner');

    if (params.types) {
      addClass(innerFlake, 'snowflake__inner_type_' + getRandom(0, params.types));
    }

    if (params.wind) {
      addClass(innerFlake, 'snowflake__inner_wind');
    }

    if (params.rotation) {
      addClass(innerFlake, 'snowflake__inner_rotation' + (Math.random() > 0.5 ? '' : '_reverse'));
    }

    flake.appendChild(innerFlake);
    this._elem = flake;
    container.appendChild(flake);
  }
  /**
   * Calc size.
   *
   * @param {number} innerSize
   * @param {Object} params
   *
   * @returns {number}
   */


  _createClass(Flake, [{
    key: "getAnimationProps",

    /**
     * Get animation properties.
     *
     * @param {number} containerHeight
     * @param {Object} params
     *
     * @returns {Object}
     */
    value: function getAnimationProps(containerHeight, params) {
      var speedMax = containerHeight / 50 / params.speed,
          speedMin = speedMax / 3;
      return {
        animationDelay: Math.random() * speedMax + 's',
        animationDuration: interpolation(this.size, params.minSize, params.maxSize, speedMax, speedMin) + 's'
      };
    }
    /**
     * Resize a flake.
     *
     * @param {number} containerHeight
     * @param {Object} params
     */

  }, {
    key: "resize",
    value: function resize(containerHeight, params) {
      var props = this.getAnimationProps(containerHeight, params);
      setStyle(this._elem, props);
    }
    /**
     * Destroy a flake.
     */

  }, {
    key: "destroy",
    value: function destroy() {
      delete this._elem;
    }
  }], [{
    key: "calcSize",
    value: function calcSize(innerSize, params) {
      return Math.floor(interpolation(innerSize, 0, Flake.maxInnerSize, params.minSize, params.maxSize));
    }
  }]);

  return Flake;
}();

_defineProperty(Flake, "maxInnerSize", 20);

var mainStyle = '.snowflake{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;-webkit-animation:snowflake_y 10s linear infinite;animation:snowflake_y 10s linear infinite;will-change:transform}.snowflake__inner,.snowflake__inner:before{position:absolute;top:0;right:0;bottom:0;left:0}.snowflake__inner:before{content:"";background-size:100% 100%}.snowflake__inner_wind{-webkit-animation:snowflake_x_8 1s ease-in-out infinite alternate;animation:snowflake_x_8 1s ease-in-out infinite alternate}.snowflake__inner_rotation:before{-webkit-animation:snowflake_rotation 2s linear infinite;animation:snowflake_rotation 2s linear infinite}.snowflake__inner_rotation_reverse:before{-webkit-animation:snowflake_rotation_reverse 2s linear infinite;animation:snowflake_rotation_reverse 2s linear infinite}.snowflakes{pointer-events:none}.snowflakes_paused .snowflake,.snowflakes_paused .snowflake__inner,.snowflakes_paused .snowflake__inner:before{-webkit-animation-play-state:paused;animation-play-state:paused}.snowflakes_body{position:fixed;top:0;left:0;width:100%;height:1px}@-webkit-keyframes snowflake_rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes snowflake_rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes snowflake_rotation_reverse{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}@keyframes snowflake_rotation_reverse{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}';
var imagesStyle = '';

var Snowflakes =
/*#__PURE__*/
function () {
  /**
   * @constructor
   *
   * @param {Object} params
   *
   * @param {DOMElem} [params.container=document.body]
   * @param {number} [params.count=50]
   * @param {number} [params.color="#5ECDEF"]
   * @param {number} [params.minOpacity=0.6]
   * @param {number} [params.maxOpacity=1]
   * @param {number} [params.minSize=8]
   * @param {number} [params.maxSize=18]
   * @param {boolean} [params.rotation=true]
   * @param {number} [params.speed=1]
   * @param {boolean} [params.stop=false]
   * @param {number} [params.types=6]
   * @param {number} [params.width=width of container]
   * @param {number} [params.height=height of container]
   * @param {boolean} [params.wind=true]
   * @param {number} [params.zIndex=9999]
   */
  function Snowflakes(params) {
    var _this = this;

    _classCallCheck(this, Snowflakes);

    this.params = this._setParams(params);
    this._flakes = [];
    this._isBody = isBody(this.params.container);
    var container = this._container = document.createElement('div');
    addClass(container, 'snowflakes');
    this._isBody && addClass(container, 'snowflakes_body');
    setStyle(container, {
      zIndex: this.params.zIndex
    });
    this.params.container.appendChild(container);

    if (this.params.stop) {
      this.stop();
    }

    if (!Snowflakes._mainStyleNode) {
      Snowflakes._mainStyleNode = injectStyle(mainStyle);
      Snowflakes._count = (Snowflakes._count || 0) + 1;
    }

    this._winHeight = getWindowHeight();

    this._onResize = function () {
      _this._winHeight = getWindowHeight();

      var height = _this._height();

      hideElement(container);

      _this._flakes.forEach(function (flake) {
        return flake.resize(height, _this.params);
      });

      _this._updateAnimationStyle();

      showElement(container);
    };

    if (imagesStyle) {
      this._imagesStyleNode = injectStyle(imagesStyle.replace(/\{color\}/g, encodeURIComponent(this.params.color)));
    }

    this._animationStyleNode = injectStyle(this._getAnimationStyle());
    window.addEventListener('resize', this._onResize, false);

    for (var i = 0; i < this.params.count; i++) {
      this._flakes.push(new Flake(container, this._height(), this.params));
    }
  }
  /**
   * Destroy flakes.
   */


  _createClass(Snowflakes, [{
    key: "destroy",
    value: function destroy() {
      this._removeStyle();

      removeNode(this._container);
      delete this._container;
      window.removeEventListener('resize', this._onResize, false);

      this._flakes.forEach(function (flake) {
        return flake.destroy();
      });

      delete this._flakes;
      delete this.params;
    }
    /**
     * Start CSS animation.
     */

  }, {
    key: "start",
    value: function start() {
      removeClass(this._container, 'snowflakes_paused');
    }
    /**
     * Stop CSS animation.
     */

  }, {
    key: "stop",
    value: function stop() {
      addClass(this._container, 'snowflakes_paused');
    }
  }, {
    key: "_setParams",
    value: function _setParams(params) {
      params = params || {};
      var result = {};
      [['color', '#5ECDEF'], ['container', document.body], ['count', 50], ['speed', 1], ['stop', false], ['rotation', true], ['minOpacity', 0.6], ['maxOpacity', 1], ['minSize', 8], ['maxSize', 18], ['types', 6], ['width'], ['height'], ['wind', true], ['zIndex', 9999]].forEach(function (item) {
        var _item = _slicedToArray(item, 2),
            name = _item[0],
            defaultValue = _item[1];

        if (typeof defaultValue === 'boolean') {
          result[name] = name in params ? params[name] : defaultValue;
        } else {
          result[name] = params[name] || defaultValue;
        }
      });
      return result;
    }
  }, {
    key: "_getAnimationStyle",
    value: function _getAnimationStyle() {
      var height = this._height() + this.params.maxSize + 'px';
      var css = "@-webkit-keyframes snowflake_y{from{-webkit-transform:translateY(0px)}to{-webkit-transform:translateY(".concat(height, ");}}\n@keyframes snowflake_y{from{transform:translateY(0px)}to{transform:translateY(").concat(height, ")}}");

      for (var i = 0; i <= Flake.maxInnerSize; i++) {
        var left = (Flake.calcSize(i, this.params) - this.params.minSize) * 4 + 'px';
        css += "@-webkit-keyframes snowflake_x_".concat(i, "{from{-webkit-transform:translateX(0px)}to{-webkit-transform:translateX(").concat(left, ");}}\n@keyframes snowflake_x_").concat(i, "{from{transform:translateX(0px)}to{transform:translateX(").concat(left, ")}}");
      }

      return css;
    }
  }, {
    key: "_updateAnimationStyle",
    value: function _updateAnimationStyle() {
      injectStyle(this._getAnimationStyle(), this._animationStyleNode);
    }
  }, {
    key: "_removeStyle",
    value: function _removeStyle() {
      Snowflakes._count--;

      if (Snowflakes._count <= 0) {
        Snowflakes._count = 0;
        removeNode(Snowflakes._mainStyleNode);
        delete Snowflakes._mainStyleNode;
      }

      removeNode(this._animationStyleNode);
      delete this._animationStyleNode;
      removeNode(this._imagesStyleNode);
      delete this._imagesStyleNode;
    }
  }, {
    key: "_height",
    value: function _height() {
      return this.params.height || (this._isBody ? this._winHeight : this.params.container.offsetHeight + this.params.maxSize);
    }
  }]);

  return Snowflakes;
}();

function index (params) {
  return new Snowflakes(params);
}

return index;

})));