gistfile1.txt

var stats = require('stats.js').stats;

//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇
// Toolbar
//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

var toolbar = exports.toolbar = { 
  //
  // Init
  //
  init: function() {
    this.createElements();
    this.addDomEvents();
    this.addCustomEvents();
    return this.$toolbar;
  },

  //
  // Properties
  //
  windowWidthCached: 0,
  infoboxDefaultWidth: 360,

  //
  // Elements
  //
  createElements: function() {
    this.$toolbar = document.createElement('div');
    this.$toolbar.setAttribute('id', 'toolbar');

    this.$wrapperLeft = document.createElement('div');
    this.$wrapperLeft.setAttribute('class', 'wrapper-left');
    this.$toolbar.appendChild(this.$wrapperLeft);

    this.$resetButton = Object.create(resetButton).init();
    this.$wrapperLeft.appendChild(this.$resetButton);

    this.$pauseButton = Object.create(pauseButton).init();
    this.$wrapperLeft.appendChild(this.$pauseButton);

    this.$skipButton = Object.create(skipButton).init();
    this.$wrapperLeft.appendChild(this.$skipButton);

    this.$infobox = Object.create(infobox).init();
    this.$toolbar.appendChild(this.$infobox);

    this.$wrapperRight = document.createElement('div');
    this.$wrapperRight.setAttribute('class', 'wrapper-right');
    this.$toolbar.appendChild(this.$wrapperRight);

    this.$speedButton = Object.create(speedButton).init();
    this.$wrapperRight.appendChild(this.$speedButton);

    this.$accuracyButton = Object.create(accuracyButton).init();
    this.$wrapperRight.appendChild(this.$accuracyButton);

    this.$mostTypedButton = Object.create(mostTypedButton).init();
    this.$wrapperRight.appendChild(this.$mostTypedButton);

    this.$mostMistypedButton = Object.create(mostMistypedButton).init();
    this.$wrapperRight.appendChild(this.$mostMistypedButton);
  },

  //
  // DOM events
  //
  addDomEvents: function() {
    var that = this;

    window.addEventListener('resize', function() {
      that.adjustPosition();
    });
  },

  //
  // Custom events
  //
  addCustomEvents: function() {
    var that = this;

    bind('mainWindow->widgetsLoaded', function() {
      that.adjustPosition();
    });
  },

  //
  // Adjust position of toolbar items
  //
  adjustPosition: function() {
    if (this.windowWidthCached === window.innerWidth) {
      return;
    }

    var infoboxWidth = this.$infobox.getComputedStyle('width');
    var wrapperLeftWidth = this.$wrapperLeft.getComputedStyle('width');
    var wrapperRightWidth = this.$wrapperRight.getComputedStyle('width');

    // if window is wide enough to accomodate left wrapper, right wrapper and infobox
    if (window.innerWidth > wrapperLeftWidth + this.infoboxDefaultWidth + wrapperRightWidth) {
      this.$infobox.style.setProperty('width', '360px', '');
      // if window is wide enough to accomodate centered infobox
      if (window.innerWidth/2 + this.infoboxDefaultWidth/2 < window.innerWidth - wrapperRightWidth) {
        this.$infobox.style.setProperty('-webkit-transform',  'translateX(' + (window.innerWidth/2 - this.infoboxDefaultWidth/2) + 'px)', '');
      }
      else {
        this.$infobox.style.setProperty('-webkit-transform',  'translateX(' + (window.innerWidth - this.infoboxDefaultWidth - wrapperRightWidth) + 'px)', '');
      }
    }
    else {
      this.$infobox.style.setProperty('-webkit-transform',  'translateX(' + (window.innerWidth - infoboxWidth - wrapperRightWidth) + 'px)', '');
      this.$infobox.style.setProperty('width', window.innerWidth - wrapperLeftWidth - wrapperRightWidth + 'px', '');
    }
  },
}

//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇
// Reset button
//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

var resetButton = { 
  //
  // Properties
  //
  id: 'reset-button',
  clickEventName: 'resetButton->clicked',

  //
  // Init
  //
  init: function() {
    this.createElements();
    this.addDomEvents();
    this.addCustomEvents();
    return this.$button;
  },

  //
  // Elements
  //
  createElements: function() {
    this.$button = document.createElement('div');
    this.$button.setAttribute('id', this.id);
    this.$button.dataset.isPressed = 'false';
    this.$button.dataset.isDisabled = 'false';
  },

  //
  // DOM events
  //
  addDomEvents: function() {
    var that = this;

    this.$button.addEventListener('click', function() {
      if (that.$button.dataset.isDisabled === 'false') {
        trigger(that.clickEventName);
      }
    });

    this.$button.addEventListener('mousedown', function() {
      if (that.$button.dataset.isDisabled === 'false') {
        that.$button.dataset.isPressed = 'true';
      }
    });

    this.$button.addEventListener('mouseup', function() {
      if (that.$button.dataset.isDisabled === 'false') {
        that.$button.dataset.isPressed = 'false';
      }
    });

    this.$button.addEventListener('mouseout', function() {
      if (that.$button.dataset.isDisabled === 'false') {
        that.$button.dataset.isPressed = 'false';
      }
    });
  },

  //
  // Custom events
  //
  addCustomEvents: function() {
    var that = this;

    bind('main->startedExercise', function() {
      that.$button.dataset.isDisabled = 'false';
    });

    bind('main->loadedExercise', function() {
      that.$button.dataset.isDisabled = 'true';
    });

    bind('main->resetExercise', function() {
      that.$button.dataset.isDisabled = 'true';
    });

    bind('main->loadedLesson', function() {
      that.$button.dataset.isDisabled = 'true';
    });
  },

  //
  // Disable the button
  //
  disableButton: function() {
    this.$button.dataset.isDisabled = 'true';
  },

  //
  // Enable the button
  //
  enableButton: function() {
    this.$button.dataset.isDisabled = 'false';
  },
}

//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇
// Skip button
//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

var skipButton = Object.extend(resetButton, {
  id: 'skip-button',
  clickEventName: 'skipButton->clicked',

  //
  // Custom events
  //
  addCustomEvents: function() {
    var that = this;

    bind('main->startedExercise', function() {
      that.$button.dataset.isDisabled = 'false';
    });

    bind('main->loadedExercise', function() {
      that.$button.dataset.isDisabled = 'false';
    });

    bind('main->finishedExercise', function() {
      that.$button.dataset.isDisabled = 'true';
    });

    bind('main->loadedLesson', function() {
      that.disableButton();
    });

    bind('main->pressedEnterOnLessonInfo', function() {
      that.enableButton();
    });
  }
});


//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇
// Play/pause button
//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

var pauseButton = {

  //
  // Init
  //
  init: function() {
    this.createElements();
    this.addDomEvents();
    this.addCustomEvents();
    return this.$button;
  },

  //
  // Elements
  //
  createElements: function() {
    this.$button = document.createElement('div');
    this.$button.setAttribute('id', 'pause-button');
    this.$button.dataset.isPushed = 'false';
    this.$button.dataset.isPressed = 'false';
    this.$button.dataset.isDisabled = 'false';
  },

  //
  // DOM events
  //
  addDomEvents: function() {
    var that = this;
  
    this.$button.addEventListener('mousedown', function() {
      if (that.$button.dataset.isDisabled === 'true') {
        return;
      }
      else {
        that.$button.dataset.isPressed = 'true';
      }
    });

    this.$button.addEventListener('mouseup', function() {
      that.handleMouseupEvent();
    });

    this.$button.addEventListener('mouseout', function() {
      that.$button.dataset.isPressed = 'false';
    });
  },

  //
  // Custom events
  //
  addCustomEvents: function() {
    var that = this;

    bind('main->resetExercise', function() {
      that.pushPauseButtonOff(false);
    });

    bind('main->loadedExercise', function() {
      that.pushPauseButtonOff(false);
      that.enableButton();
    });

    bind('main->pressedEnterOnLessonInfo', function() {
      that.enableButton();
    });

    bind('main->loadedLesson', function() {
      that.disableButton();
    });

    bind('main->startedExercise', function() {
      that.enableButton();
      that.pushPauseButtonOff(false);
    });

    bind('main->pausedExercise', function() {
      that.pushPauseButtonOn(false);
    });

    bind('main->resumedExercise', function() {
      that.pushPauseButtonOff(false);
    });

    bind('main->finishedExercise', function() {
      that.disableButton();
    });
  },

  //
  // Handle mouseup event
  //
  handleMouseupEvent: function() {
    if (this.$button.dataset.isDisabled === 'true') {
      return;
    }
    else if (this.$button.dataset.isPushed === 'false') {
      this.pushPauseButtonOn(true);
      this.$button.dataset.isPressed = 'false';
    }
    else if (this.$button.dataset.isPushed === 'true') {
      this.pushPauseButtonOff(true);
      this.$button.dataset.isPressed = 'false';
    }
  },

  //
  // Push pause button on
  //
  pushPauseButtonOn: function(triggerEvent) {
    if (this.$button.dataset.isPushed === 'false') {
      this.$button.dataset.isPushed = 'true';
      if (triggerEvent === true) {
        trigger('pauseButton->pushedOn');
      }
    }
  },

  //
  // Push pause button off
  //
  pushPauseButtonOff: function(triggerEvent) {
    if (this.$button.dataset.isPushed === 'true') {
      this.$button.dataset.isPushed = 'false';
      if (triggerEvent === true) {
        trigger('pauseButton->pushedOff');
      }
    }
  },

  //
  // Disable the button
  //
  disableButton: function() {
    this.$button.dataset.isDisabled = 'true';
  },

  //
  // Enable the button
  //
  enableButton: function() {
    this.$button.dataset.isDisabled = 'false';
  },

}

//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇
// 'Most typed' button
//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

var mostTypedButton = { 
  //
  // Init
  //
  init: function() {
    this.createElements();
    this.addEvents();
    return this.$button;
  },

  //
  // Properties
  //
  labelText: 'Most Typed',
  id: 'most-typed-button',
  clickEventName: 'mostTypedButton->clicked',

  //
  // Create elements
  //
  createElements: function() {
    this.$button = document.createElement('div');
    this.$button.setAttribute('id', this.id);
    this.$button.dataset.isPressed = 'false';
    this.$button.dataset.isDisabled = 'false';

    this.$image = document.createElement('div');
    this.$image.setAttribute('class', 'image');

    this.$label = document.createElement('div');
    this.$label.setAttribute('class', 'label');
    this.$label.innerHTML = this.labelText;

    this.$button.appendChild(this.$image);  
    this.$button.appendChild(this.$label);    
  },

  //
  // Add events
  //
  addEvents: function() {
    var that = this;

    this.$button.addEventListener('click', function() {
      trigger(that.clickEventName);
    });

    this.$button.addEventListener('mousedown', function() {
      that.$button.dataset.isPressed = 'true';
    });

    this.$button.addEventListener('mouseup', function() {
      that.$button.dataset.isPressed = 'false';
    });

    this.$button.addEventListener('mouseout', function() {
      that.$button.dataset.isPressed = 'false';
    });    
  },
}

//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇
// 'Most mistyped' button
//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

var mostMistypedButton = Object.extend(mostTypedButton, {
  labelText: 'Most Mistyped',
  id: 'most-mistyped-button',
  clickEventName: 'mostMistypedButton->clicked',
});

//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇
// 'Speed' button
//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

var speedButton = Object.extend(mostTypedButton, {
  labelText: 'Speed chart',
  id: 'speed-button',
  clickEventName: 'speedButton->clicked',
});

//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇
// 'Accuracy' button
//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

var accuracyButton = Object.extend(mostTypedButton, {
  labelText: 'Accuracy chart',
  id: 'accuracy-button',
  clickEventName: 'accuracyButton->clicked',
});

//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇
// Infobox
//▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇

var infobox = {
  //
  // Init
  //
  init: function() {
    this.createElements();
    this.addCustomEvents();
    return this.$infobox;
  },

  //
  // Elements
  //
  createElements: function() {
    this.$infobox = document.createElement('div');
    this.$infobox.setAttribute('id', 'infobox');

    this.$infoboxInner = document.createElement('div');
    this.$infoboxInner.setAttribute('class', 'inner');
    this.$infobox.appendChild(this.$infoboxInner);

    this.$rowTop = document.createElement('div');
    this.$rowTop.setAttribute('class', 'row-top');
    this.$infoboxInner.appendChild(this.$rowTop);
    
    this.$rowBottom = document.createElement('div');
    this.$rowBottom.setAttribute('class', 'row-bottom');
    this.$infoboxInner.appendChild(this.$rowBottom);

    this.$progressbarWrapper = document.createElement('div');
    this.$progressbarWrapper.setAttribute('id', 'progressbar-wrapper');
    this.$infoboxInner.appendChild(this.$progressbarWrapper);

    this.$progressbar = document.createElement('div');
    this.$progressbar.setAttribute('id', 'progressbar');
    this.$progressbarWrapper.appendChild(this.$progressbar);

    this.$progressbarValue = document.createElement('div');
    this.$progressbarValue.setAttribute('id', 'progressbar-value');
    this.$progressbar.appendChild(this.$progressbarValue);
  },

  //
  // Custom events
  //
  addCustomEvents: function() {
    var that = this;

    bind('main->loadedLesson', function() {
      that.hideProgressbar();
      that.$rowTop.innerHTML = 'Dificulty level: <strong>' + that.getLevel() + '</strong>';
      that.$rowBottom.innerHTML = 'Press <strong>Enter</strong> to continue.';
    });

    bind('main->loadedExercise', function() {
      that.hideProgressbar();
      that.updateProgressbar(0);
      that.$rowTop.innerHTML = 'Dificulty level: <strong>' + that.getLevel() + '</strong>';
      that.$rowBottom.innerHTML = 'Type first letter to start the excersise.';
    });

    bind('main->startedExercise', function() {
      that.$rowBottom.innerHTML = null;
      that.updateProgressbar(0);
      that.showProgressbar();
    });

    bind('main->pausedExercise', function() {
      that.$rowBottom.innerHTML = 'Press <strong>ESC</strong> to resume, <strong>Enter</strong> to skip, <strong>R</strong> to retry.';
      that.hideProgressbar();
    });

    bind('main->resumedExercise', function() {
      that.$rowBottom.innerHTML = null;
      that.showProgressbar();
    });

    bind('main->resetExercise', function() {
      that.hideProgressbar();
      that.$rowBottom.innerHTML = 'Type first letter to start the excersise.';
    });

    bind('main->finishedExercise', function() {
      that.hideProgressbar();
      that.$rowBottom.innerHTML = 'Press <strong>Enter</strong> to continue, <strong>R</strong> to retry.';
    });

    bind('main->pressedEnterOnLessonInfo', function() {
      that.$rowBottom.innerHTML = 'Type first letter to start the excersise.';
    });

    bind('textfield->movedCursor', function() {
      var progress = stats.getProgress();
      that.updateProgressbar(progress);
    });
  },

  //
  // Update progressbar
  //
  updateProgressbar: function(progress) {
    this.$progressbarValue.style.setProperty('width', progress + '%', '');
  },

  //
  // Hide progressbar
  //
  hideProgressbar: function() {
    this.$progressbar.style.setProperty('-webkit-transform', 'translateY(-999px)', '');
  },

  //
  // Show progressbar
  //
  showProgressbar: function() {
    this.$progressbar.style.setProperty('-webkit-transform', 'translateY(0px)', '');
  },

  //
  // Get level
  //
  getLevel: function() {
    var level = exercise.level;
    if (level !== undefined) {
      if (level === exercise.maxLevel) {
        level += ' (Max)';
      }
    }
    else {
      level = 'N/A';
    }
    return level;
  },
}