@edsilv/ami.js/src/helpers/helpers.progressbar.js

<p align="center"> <img src="https://user-images.githubusercontent.com/214063/46479857-4cd66e80-c7f0-11e8-9585-5748409c9490.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._totalFiles = 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();
  }

  // url can be used in child class to show overall progress bar
  update(value, total, mode, url = '') {
    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 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;
  }

  set totalFiles(totalFiles) {
    this._totalFiles = totalFiles;
  }

  get totalFiles() {
    return this._totalFiles;
  }
}