loadingSpinner.js

var __assign = (this && this.__assign) || function () {
  __assign = Object.assign || function(t) {
      for (var s, i = 1, n = arguments.length; i < n; i++) {
          s = arguments[i];
          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
              t[p] = s[p];
      }
      return t;
  };
  return __assign.apply(this, arguments);
};
var defaults = {
  lines: 12,
  length: 7,
  width: 5,
  radius: 10,
  scale: 1.0,
  corners: 1,
  color: '#000',
  fadeColor: 'transparent',
  animation: 'spinner-line-fade-default',
  rotate: 0,
  direction: 1,
  speed: 1,
  zIndex: 2e9,
  className: 'spinner',
  top: '50%',
  left: '50%',
  shadow: '0 0 1px transparent',
  position: 'absolute',
};
var Spinner = /** @class */ (function () {
  function Spinner(opts) {
      if (opts === void 0) { opts = {}; }
      this.opts = __assign({}, defaults, opts);
  }
  /**
   * Adds the spinner to the given target element. If this instance is already
   * spinning, it is automatically removed from its previous target by calling
   * stop() internally.
   */
  Spinner.prototype.spin = function (target) {
      this.stop();
      this.el = document.createElement('div');
      this.el.className = this.opts.className;
      this.el.setAttribute('role', 'progressbar');
      css(this.el, {
          position: this.opts.position,
          width: 0,
          zIndex: this.opts.zIndex,
          left: this.opts.left,
          top: this.opts.top,
          transform: "scale(" + this.opts.scale + ")",
      });
      if (target) {
          target.insertBefore(this.el, target.firstChild || null);
      }
      drawLines(this.el, this.opts);
      return this;
  };
  /**
   * Stops and removes the Spinner.
   * Stopped spinners may be reused by calling spin() again.
   */
  Spinner.prototype.stop = function () {
      if (this.el) {
          if (typeof requestAnimationFrame !== 'undefined') {
              cancelAnimationFrame(this.animateId);
          }
          else {
              clearTimeout(this.animateId);
          }
          if (this.el.parentNode) {
              this.el.parentNode.removeChild(this.el);
          }
          this.el = undefined;
      }
      return this;
  };
  return Spinner;
}());
export { Spinner };
/**
* Sets multiple style properties at once.
*/
function css(el, props) {
  for (var prop in props) {
      el.style[prop] = props[prop];
  }
  return el;
}
/**
* Returns the line color from the given string or array.
*/
function getColor(color, idx) {
  return typeof color == 'string' ? color : color[idx % color.length];
}
/**
* Internal method that draws the individual lines.
*/
function drawLines(el, opts) {
  var borderRadius = (Math.round(opts.corners * opts.width * 500) / 1000) + 'px';
  var shadow = 'none';
  if (opts.shadow === true) {
      shadow = '0 2px 4px #000'; // default shadow
  }
  else if (typeof opts.shadow === 'string') {
      shadow = opts.shadow;
  }
  var shadows = parseBoxShadow(shadow);
  for (var i = 0; i < opts.lines; i++) {
      var degrees = ~~(360 / opts.lines * i + opts.rotate);
      var backgroundLine = css(document.createElement('div'), {
          position: 'absolute',
          top: -opts.width / 2 + "px",
          width: (opts.length + opts.width) + 'px',
          height: opts.width + 'px',
          background: getColor(opts.fadeColor, i),
          borderRadius: borderRadius,
          transformOrigin: 'left',
          transform: "rotate(" + degrees + "deg) translateX(" + opts.radius + "px)",
      });
      var delay = i * opts.direction / opts.lines / opts.speed;
      delay -= 1 / opts.speed; // so initial animation state will include trail
      var line = css(document.createElement('div'), {
          width: '100%',
          height: '100%',
          background: getColor(opts.color, i),
          borderRadius: borderRadius,
          boxShadow: normalizeShadow(shadows, degrees),
          animation: 1 / opts.speed + "s linear " + delay + "s infinite " + opts.animation,
      });
      backgroundLine.appendChild(line);
      el.appendChild(backgroundLine);
  }
}
function parseBoxShadow(boxShadow) {
  var regex = /^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/;
  var shadows = [];
  for (var _i = 0, _a = boxShadow.split(','); _i < _a.length; _i++) {
      var shadow = _a[_i];
      var matches = shadow.match(regex);
      if (matches === null) {
          continue; // invalid syntax
      }
      var x = +matches[2];
      var y = +matches[5];
      var xUnits = matches[4];
      var yUnits = matches[7];
      if (x === 0 && !xUnits) {
          xUnits = yUnits;
      }
      if (y === 0 && !yUnits) {
          yUnits = xUnits;
      }
      if (xUnits !== yUnits) {
          continue; // units must match to use as coordinates
      }
      shadows.push({
          prefix: matches[1] || '',
          x: x,
          y: y,
          xUnits: xUnits,
          yUnits: yUnits,
          end: matches[8],
      });
  }
  return shadows;
}
/**
* Modify box-shadow x/y offsets to counteract rotation
*/
function normalizeShadow(shadows, degrees) {
  var normalized = [];
  for (var _i = 0, shadows_1 = shadows; _i < shadows_1.length; _i++) {
      var shadow = shadows_1[_i];
      var xy = convertOffset(shadow.x, shadow.y, degrees);
      normalized.push(shadow.prefix + xy[0] + shadow.xUnits + ' ' + xy[1] + shadow.yUnits + shadow.end);
  }
  return normalized.join(', ');
}
function convertOffset(x, y, degrees) {
  var radians = degrees * Math.PI / 180;
  var sin = Math.sin(radians);
  var cos = Math.cos(radians);
  return [
      Math.round((x * cos + y * sin) * 1000) / 1000,
      Math.round((-x * sin + y * cos) * 1000) / 1000,
  ];
}