diff --git a/public/assets/js/showFunctions.js b/public/assets/js/assetConstructor.js similarity index 86% rename from public/assets/js/showFunctions.js rename to public/assets/js/assetConstructor.js index 8200d456..32476e9e 100644 --- a/public/assets/js/showFunctions.js +++ b/public/assets/js/assetConstructor.js @@ -1,9 +1,9 @@ -const showFunctions = { - state: {}, - setState: function(key, value) { +const Asset = function () { + this.state = {}; + this.setState = function(key, value) { this.state[key] = value; - }, - addPlayPauseToVideo: function () { + }; + this.addPlayPauseToVideo = function () { const that = this; const video = document.getElementById('video-asset'); if (video) { @@ -18,16 +18,16 @@ const showFunctions = { } }; } - }, - playOrPause: function(video){ + }; + this.playOrPause = function(video){ if (video.paused == true) { video.play(); } else{ video.pause(); } - }, - showAsset: function () { + }; + this.showAsset = function () { this.hideAssetStatus(); this.showAssetHolder(); if (!this.state.src) { @@ -41,33 +41,33 @@ const showFunctions = { } else { this.showImage(); } - }, - showVideo: function () { + }; + this.showVideo = function () { console.log('showing video', this.state.src); const video = document.getElementById('video-asset'); const source = document.createElement('source'); source.setAttribute('src', this.state.src); video.appendChild(source); video.play(); - }, - showImage: function () { + }; + this.showImage = function () { console.log('showing image', this.state.src); const asset = document.getElementById('image-asset'); asset.setAttribute('src', this.state.src); - }, - hideAssetStatus: function () { + }; + this.hideAssetStatus = function () { const assetStatus = document.getElementById('asset-status'); assetStatus.hidden = true; - }, - showAssetHolder: function () { + }; + this.showAssetHolder =function () { const assetHolder = document.getElementById('asset-holder'); assetHolder.hidden = false; - }, - showSearchMessage: function () { + }; + this.showSearchMessage = function () { const searchMessage = document.getElementById('searching-message'); searchMessage.hidden = false; - }, - showFailureMessage: function (msg) { + }; + this.showFailureMessage = function (msg) { console.log(msg); const searchMessage = document.getElementById('searching-message'); const failureMessage = document.getElementById('failure-message'); @@ -75,8 +75,8 @@ const showFunctions = { searchMessage.hidden = true; failureMessage.hidden = false; errorMessage.innerText = msg; - }, - checkClaimAvailability: function () { + }; + this.checkClaimAvailability = function () { const that = this; const uri = `/api/local-file-available/${this.state.claimName}/${this.state.claimId}`; const xhr = new XMLHttpRequest(); @@ -100,8 +100,8 @@ const showFunctions = { } }; xhr.send(); - }, - getAsset: function() { + }; + this.getAsset = function() { const that = this; const uri = `/api/get-claim/${this.state.claimName}/${this.state.claimId}`; const xhr = new XMLHttpRequest(); @@ -120,5 +120,5 @@ const showFunctions = { } }; xhr.send(); - }, + }; }; \ No newline at end of file diff --git a/public/assets/js/progressBarConstructor.js b/public/assets/js/progressBarConstructor.js new file mode 100644 index 00000000..0673219d --- /dev/null +++ b/public/assets/js/progressBarConstructor.js @@ -0,0 +1,48 @@ +const ProgressBar = function() { + this.state = { + x: 0, + adder: 1, + bars: [], + }; + this.setState = function (key, value) { + this.state[key] = value; + }; + this.barHolder = document.getElementById('bar-holder'); + this.createProgressBar = function (size) { + this.setState('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); + this.state.bars.push(bar); + } + }; + this.startProgressBar = function () { + this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300); + }; + this.updateProgressBar = function () { + const x = this.state.x; + const adder = this.state.adder; + const size = this.state.size; + // update the appropriate bar + if (x > -1 && x < size){ + if (adder === 1){ + this.state.bars[x].setAttribute('class', 'progress-bar progress-bar--active'); + } else { + this.state.bars[x].setAttribute('class', 'progress-bar progress-bar--inactive'); + } + } + // update adder + if (x === size){ + this.setState('adder', -1); + } else if ( x === -1){ + this.setState('adder', 1); + } + // update x + this.setState('x', x + adder); + }; + this.stopProgressBar = function () { + clearInterval(this.updateInterval); + }; +}; \ No newline at end of file diff --git a/views/layouts/show.handlebars b/views/layouts/show.handlebars index a4d38fa0..fbf93b80 100644 --- a/views/layouts/show.handlebars +++ b/views/layouts/show.handlebars @@ -21,7 +21,7 @@ - + {{> navBar}} {{{ body }}} diff --git a/views/layouts/showlite.handlebars b/views/layouts/showlite.handlebars index 19208522..fb585fdc 100644 --- a/views/layouts/showlite.handlebars +++ b/views/layouts/showlite.handlebars @@ -17,7 +17,7 @@ {{ googleAnalytics }} - + {{{ body }}} diff --git a/views/partials/asset.handlebars b/views/partials/asset.handlebars index 96f06d0e..0299cea3 100644 --- a/views/partials/asset.handlebars +++ b/views/partials/asset.handlebars @@ -3,6 +3,7 @@