ami-cjs.js/lib/helpers/helpers.progressbar.eventbased.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; }; }();

var _core = require('../core/core.utils');

var _core2 = _interopRequireDefault(_core);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

/**
 * Event Based progressbar
 * @module helpers/progressBar
 *
 * @example
 *
 * let loader = new LoadersVolume();
 * const domContainer = document.getElementById('progressbar');
 * const pb = new HelpersProgressBarEventBased(loader, domContainer);
 */

var HelpersProgressBarEventBased = function () {
  function HelpersProgressBarEventBased(emitter, domTarget) {
    _classCallCheck(this, HelpersProgressBarEventBased);

    if (!emitter || !this._isFunction(emitter.emit)) {
      console.error('please give the this._emitter instance');
      return;
    }

    if (_core2.default.isString(domTarget)) {
      this._dom = document.getElementById(domTarget);
    } else {
      this._dom = domTarget;
    }

    if (!_core2.default.isElement(this._dom)) {
      console.error('please give the id of container dom or directly a dom instance');
      return;
    }
    this._emitter = emitter;
    this.initContainerDom();
    this.initEventListenner();
    this.loaded = 0;
    this.totalFile = 0;
  }

  _createClass(HelpersProgressBarEventBased, [{
    key: '_isFunction',
    value: function _isFunction(fn) {
      return Object.prototype.toString.call(fn) === '[object Function]';
    }
  }, {
    key: 'initEventListenner',
    value: function initEventListenner() {
      var self = this;

      this._emitter.on('load-start', function (event) {
        var totalFiles = event.totalFiles;
        self.totalFile = totalFiles;
        self._domTotalFile.innerHTML = totalFiles;
      });

      this._emitter.on('fetch-start', function (event) {
        var fetchLi = document.createElement('li');

        var fileTag = document.createElement('div');
        fileTag.innerHTML = 'file: ' + event.file;
        fileTag.style.color = '#ffffff';
        fetchLi.append(fileTag);

        fetchLi.className = 'fetch-file';
        fetchLi.id = 'file-' + event.file;
        fetchLi.style.marginBottom = '7px';
        fetchLi.style.border = '1px solid #ffffff;';
        fetchLi.style.width = '60%';
        var fetchprogress = document.createElement('div');
        fetchprogress.id = 'file-fetch-' + event.file;
        fetchprogress.style.width = '0%';
        fetchLi.append(fetchprogress);
        self._domProcessList.append(fetchLi);
      });

      this._emitter.on('fetch-progress', function (event) {
        var id = 'file-fetch-' + event.file;
        var fileFetchDom = document.getElementById(id);
        fileFetchDom.style.width = event.loaded / event.total * 100 + '%';
        fileFetchDom.style.border = '1px solid red';
      });

      this._emitter.on('fetch-success', function (event) {
        // show result
        var liParent = document.getElementById('file-' + event.file);
        var result = document.createElement('div');
        result.id = 'file-result-' + event.file;
        result.innerHTML = 'fetch-success';
        result.style.color = '#ffffff';
        liParent.append(result);
      });

      this._emitter.on('fetch-error', function (event) {
        // console.log(event);
      });

      this._emitter.on('fetch-abort', function (event) {
        // console.log(event);
      });

      this._emitter.on('fetch-end', function (event) {
        // console.log(event);
      });

      this._emitter.on('fetch-timeout', function (event) {
        // console.log(event);
      });

      this._emitter.on('parse-start', function (event) {
        var liParent = document.getElementById('file-' + event.file);
        var parseprogress = document.createElement('div');
        parseprogress.id = 'file-parse-' + event.file;
        parseprogress.style.width = '0%';
        liParent.append(parseprogress);
      });

      this._emitter.on('parsing', function (event) {
        var id = 'file-parse-' + event.file;
        var fileParseDom = document.getElementById(id);
        fileParseDom.style.width = event.parsed / event.total * 100 + '%';
        fileParseDom.style.border = '1px solid yellow';
      });

      this._emitter.on('parse-success', function (event) {
        self.loaded += 1;
        self._domCurrentFile.innerHTML = self.loaded;
        self._domCurrentProgress.style.width = self.loaded / self.totalFile * 100 + '%';
        // show result
        var liParent = document.getElementById('file-' + event.file);
        var result = document.createElement('div');
        result.id = 'file-result-' + event.file;
        result.innerHTML = 'parse-success';
        result.style.color = '#ffffff';
        liParent.append(result);
      });
    }
  }, {
    key: 'initContainerDom',
    value: function initContainerDom() {
      var containerDom = "<div id='ami-progress-bar-container' style='background-color: rgb(33, 33, 33); color: #ffffff;'>" + "<div>" + "<label for='progress-bar' id='progress-label' style='width: 60%; border: 1px solid #ffffff; text-align: center;'>" + "<span id='current-file-index'>0</span>" + "/" + "<span id='total-file'>0</span>" + "</label>" + "<div id='progress-bar' style='width: 60%; border: 1px solid #ffffff; text-align: center;'>" + "<div id='current-progress' style='border: 1px solid red; width: 0%;'></div>" + "</div>" + "</div>" + "<ul id='process-list' style='list-style-type: none; padding: 0; overflow-y: auto;'>" +
      // "<li class='fetch-file'>" +
      // "<div id='file-fetch-xxxxxid'></div>" +
      // "<div id='file-parse-xxxxxid'></div>" +
      // "</li>" +
      "</ul>" + "</div>";
      var wrap = document.createElement('div');
      wrap.innerHTML = containerDom;
      this._dom.append(wrap);
      // dom interface
      this._domCurrentFile = document.getElementById('current-file-index');
      this._domTotalFile = document.getElementById('total-file');
      this._domProcessList = document.getElementById('process-list');
      this._domCurrentProgress = document.getElementById('current-progress');
    }
  }]);

  return HelpersProgressBarEventBased;
}();

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