piskel/dev/js/controller/ProgressBarController.js

(function () {
  var ns = $.namespace('pskl.controller');

  ns.ProgressBarController = function () {
    this.template = pskl.utils.Template.get('progress-bar-template');
    this.progressBar = null;
    this.progressBarStatus = null;

    this.showProgressTimer_ = 0;
  };

  ns.ProgressBarController.prototype.init = function () {
    $.subscribe(Events.SHOW_PROGRESS, $.proxy(this.showProgress_, this));
    $.subscribe(Events.UPDATE_PROGRESS, $.proxy(this.updateProgress_, this));
    $.subscribe(Events.HIDE_PROGRESS, $.proxy(this.hideProgress_, this));
  };

  ns.ProgressBarController.prototype.showProgress_ = function (event, progressInfo) {
    this.removeProgressBar_();
    this.showProgressTimer_ = window.setTimeout(this.onTimerExpired_.bind(this, progressInfo), 300);
  };

  ns.ProgressBarController.prototype.onTimerExpired_ = function (progressInfo) {
    var progressBarHtml = pskl.utils.Template.replace(this.template, {
      name : progressInfo.name,
      status : 0
    });

    var progressBarEl = pskl.utils.Template.createFromHTML(progressBarHtml);
    document.body.appendChild(progressBarEl);

    this.progressBar = document.querySelector('.progress-bar');
    this.progressBarStatus = document.querySelector('.progress-bar-status');
  };

  ns.ProgressBarController.prototype.updateProgress_ = function (event, progressInfo) {
    if (this.progressBar && this.progressBarStatus) {
      var progress = progressInfo.progress;
      var width = this.progressBar.offsetWidth;
      var progressWidth = width - ((progress * width) / 100);
      this.progressBar.style.backgroundPosition = (-progressWidth) + 'px 0';
      this.progressBarStatus.innerHTML = progress + '%';
    }
  };

  ns.ProgressBarController.prototype.hideProgress_ = function (event, progressInfo) {
    if (this.showProgressTimer_) {
      window.clearTimeout(this.showProgressTimer_);
    }
    this.removeProgressBar_();
  };

  ns.ProgressBarController.prototype.removeProgressBar_ = function () {
    var progressBarContainer = document.querySelector('.progress-bar-container');
    if (progressBarContainer) {
      progressBarContainer.parentNode.removeChild(progressBarContainer);
      this.progressBar = null;
      this.progressBarStatus = null;
    }
  };
})();