ami.js/src/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>

/**
 * @module helpers/progressBar
 */

export default class HelpersProgressBar {
  constructor(container) {
    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();
  }

  free() {
    let 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);
  }

  init() {
    let progressContainer = this._domContainer();

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

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

    // start rendering loop
    this.updateUI();
  }

  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;
    }
  }

  updateUI() {
    this.requestAnimationFrameID = requestAnimationFrame(() =>{
      this.updateUI();
    });

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

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

    let 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;
  }

  _domContainer() {
    let 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;
  }

  _domBar(mode) {
    if (!(mode.hasOwnProperty('name') &&
      (mode.hasOwnProperty('color')))) {
      window.console.log('Invalid mode provided.');
      window.console.log(mode);

      return false;
    }

    let 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;
  }
}