spee.ch/public/assets/js/progressBarConstructor.js

45 lines
1.5 KiB
JavaScript
Raw Normal View History

const ProgressBar = function() {
2017-12-05 20:47:34 +01:00
this.data = {
x: 0,
adder: 1,
bars: [],
};
this.barHolder = document.getElementById('bar-holder');
this.createProgressBar = function (size) {
2017-12-05 20:47:34 +01:00
this.data['size'] = size;
for (var i = 0; i < size; i++) {
const bar = document.createElement('span');
bar.innerText = '| ';
bar.setAttribute('class', 'progress-bar progress-bar--inactive');
this.barHolder.appendChild(bar);
2017-12-05 20:47:34 +01:00
this.data.bars.push(bar);
}
};
this.startProgressBar = function () {
this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300);
};
this.updateProgressBar = function () {
2017-12-05 20:47:34 +01:00
const x = this.data.x;
const adder = this.data.adder;
const size = this.data.size;
// update the appropriate bar
if (x > -1 && x < size){
if (adder === 1){
2017-12-05 20:47:34 +01:00
this.data.bars[x].setAttribute('class', 'progress-bar progress-bar--active');
} else {
2017-12-05 20:47:34 +01:00
this.data.bars[x].setAttribute('class', 'progress-bar progress-bar--inactive');
}
}
// update adder
if (x === size){
2017-12-05 20:47:34 +01:00
this.data['adder'] = -1;
} else if ( x === -1){
2017-12-05 20:47:34 +01:00
this.data['adder'] = 1;
}
// update x
2017-12-05 20:47:34 +01:00
this.data['x'] = x + adder;
};
this.stopProgressBar = function () {
clearInterval(this.updateInterval);
};
};