ami-cjs.js/lib/helpers/helpers.progressbar.js

<p align="center"> <img src="https://cloud.githubusercontent.com/assets/214063/23213764/78ade038-f90c-11e6-8208-4fcade5f3832.png" width="60%"> </p>

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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

/**
 * @module helpers/progressBar
 */

var HelpersProgressBar = function () {
  function HelpersProgressBar(container) {
    _classCallCheck(this, HelpersProgressBar);

    this._container = container;
    this._modes = {
      'load': {
        'name': 'load',
        'color': '#FFF56F'
      },
      'parse': {
        'name': 'parse',
        'color': '#2196F3'
      }
    };

    this.requestAnimationFrameID = null;

    this._mode = null;
    this._value = null;
    this._total = null;

    this.init();
  }

  _createClass(HelpersProgressBar, [{
    key: 'free',
    value: function free() {
      var progressContainers = this._container.getElementsByClassName('progress container');
      if (progressContainers.length > 0) {
        progressContainers[0].parentNode.removeChild(progressContainers[0]);
      }
      progressContainers = null;
      // stop rendering loop
      window.cancelAnimationFrame(this.requestAnimationFrameID);
    }
  }, {
    key: 'init',
    value: function init() {
      var progressContainer = this._domContainer();

      for (var mode in this._modes) {
        if (this._modes.hasOwnProperty(mode)) {
          var bar = this._domBar(this._modes[mode]);
          progressContainer.appendChild(bar);
          bar = null;
        }
      }

      this._container.appendChild(progressContainer);
      progressContainer = null;

      // start rendering loop
      this.updateUI();
    }
  }, {
    key: 'update',
    value: function update(value, total, mode) {
      this._mode = mode;
      this._value = value;
      // depending on CDN, total return to XHTTPRequest can be 0.
      // In this case, we generate a random number to animate the progressbar
      if (total === 0) {
        this._total = value;
        this._value = Math.random() * value;
      } else {
        this._total = total;
      }
    }
  }, {
    key: 'updateUI',
    value: function updateUI() {
      var _this = this;

      this.requestAnimationFrameID = requestAnimationFrame(function () {
        _this.updateUI();
      });

      if (!(this._modes.hasOwnProperty(this._mode) && this._modes[this._mode].hasOwnProperty('name') && this._modes[this._mode].hasOwnProperty('color'))) {
        return false;
      }

      var message = '';
      var progress = Math.round(this._value / this._total * 100);
      var color = this._modes[this._mode].color;

      var progressBar = this._container.getElementsByClassName('progress ' + this._modes[this._mode].name);
      if (progressBar.length > 0) {
        progressBar[0].style.borderColor = color;
        progressBar[0].style.width = progress + '%';
      }
      progressBar = null;
    }
  }, {
    key: '_domContainer',
    value: function _domContainer() {
      var container = document.createElement('div');

      // class it
      container.classList.add('progress');
      container.classList.add('container');

      // style it
      container.style.width = '100%';
      container.style.height = '8px';
      container.style.position = 'absolute';
      container.style.backgroundColor = 'rgba(158, 158, 158, 0.5)';
      container.style.top = '0';
      container.style.zIndex = '1';

      return container;
    }
  }, {
    key: '_domBar',
    value: function _domBar(mode) {
      if (!(mode.hasOwnProperty('name') && mode.hasOwnProperty('color'))) {
        window.console.log('Invalid mode provided.');
        window.console.log(mode);

        return false;
      }

      var bar = document.createElement('div');

      // class it
      bar.classList.add(mode.name);
      bar.classList.add('progress');

      // style it
      bar.style.border = '2px solid ' + mode.color;
      bar.style.width = '0%';

      return bar;
    }
  }]);

  return HelpersProgressBar;
}();

exports.default = HelpersProgressBar;
module.exports = exports['default'];