diff --git a/Readme.md b/Readme.md index c7dcd69..0da4896 100644 --- a/Readme.md +++ b/Readme.md @@ -29,7 +29,7 @@ A lightweight JavaScript library that creates customisable progress bars for HTM text : "Cool song", // text to go inside progress bar (optional) time : document.getElementById('timestamps') // element to contain live-updating time (optional) }); - Or do it jQuery style: @@ -40,7 +40,7 @@ A lightweight JavaScript library that creates customisable progress bars for HTM text : "Cool song", // text to go inside progress bar (optional) time : $('timestamps')[0] // element to contain live-updating time (optional) }); - 4. The bar and its internal progress bar are given CSS classes '.progressor' and '.progressor-progress'. Make sure to add a height, width and background to the bar: @@ -73,6 +73,14 @@ A lightweight JavaScript library that creates customisable progress bars for HTM ## Changelog +### v1.1.0 + +- Add `hours` option + +### v1.0.1 + +- Bugfix: work as a global + ### v1.0.0 - Support for common module systems diff --git a/package.json b/package.json index ea0b1fe..fba9b64 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "progressor.js", "description": "Lightweight, customisable progress bars for HTML5 video & audio", - "version": "1.0.0", + "version": "1.1.0", "homepage": "https://github.com/ejb/progressor.js", "author": "Elliot Bentley (http://ejb.github.io)", "keywords": [ diff --git a/progressor.js b/progressor.js index 64d5530..779b0ec 100644 --- a/progressor.js +++ b/progressor.js @@ -2,12 +2,13 @@ if (typeof module != 'undefined') module.exports = definition(); else if (typeof define == 'function' && typeof define.amd == 'object') define(definition); else this[name] = definition(); -}('progressor', function() { +}('Progressor', function() { function Progressor( options ){ this._media = options.media; this._bar = options.bar; this._text = options.text; this._time = options.time; + this._hours = options.hours; this.initProgressBar(); this.initMedia(); }; @@ -52,9 +53,19 @@ }; Progressor.prototype.formatTime = function ( time ) { - var minutes = Math.floor(time / 60); - var seconds = ("0" + Math.round( time - minutes * 60 ) ).slice(-2); - return minutes+":"+seconds; + var hours = Math.floor(time / 3600).toString(); + if (this._hours) { + var minutes = ("0" + Math.floor(time / 60) % 60).slice(-2); + var seconds = ("0" + Math.floor( time % 60 )).slice(-2); + if (hours !== '0') { + return hours + ":" + minutes + ":" + seconds; + } + return minutes + ":" + seconds; + } else { + var minutes = Math.floor(time / 60); + var seconds = ("0" + Math.round( time - minutes * 60 ) ).slice(-2); + return minutes+":"+seconds; + } } Progressor.prototype.updateTimeCount = function(){ diff --git a/progressor.min.js b/progressor.min.js index 758fdc8..bac5e87 100644 --- a/progressor.min.js +++ b/progressor.min.js @@ -1 +1 @@ -!function(a,b){"undefined"!=typeof module?module.exports=b():"function"==typeof define&&"object"==typeof define.amd?define(b):this[a]=b()}("progressor",function(){function a(a){this._media=a.media,this._bar=a.bar,this._text=a.text,this._time=a.time,this.initProgressBar(),this.initMedia()}return a.prototype.initMedia=function(){this._media.addEventListener("timeupdate",this.updateProgress.bind(this),!1),this._media.addEventListener("timeupdate",this.updateTimeCount.bind(this),!1),this.addClickEvents(),this.updateTimeCount(this._media)},a.prototype.initProgressBar=function(){this._textBox=document.createElement("span"),this._textBox.textContent=this._text||"",this._bar.style.position="relative",this._bar.style.zIndex=1,this._bar.className=this._bar.className+" progressor",this._progress=document.createElement("div"),this._progress.className="progressor-progress",this._progress.style.width="0%",this._progress.style.height="100%",this._progress.style.position="absolute",this._progress.style.top=0,this._progress.style.zIndex=-1,this._bar.style.webkitUserSelect="none",this._bar.style.userSelect="none",this._bar.appendChild(this._textBox),this._bar.appendChild(this._progress)},a.prototype.updateProgress=function(){this.updateTimeCount();var a=0;this._media.currentTime>0&&(a=100/this._media.duration*this._media.currentTime),this._bar.getElementsByTagName("div")[0].style.width=a+"%"},a.prototype.formatTime=function(a){var b=Math.floor(a/60),c=("0"+Math.round(a-60*b)).slice(-2);return b+":"+c},a.prototype.updateTimeCount=function(){if(this._time){var a=this.formatTime(this._media.currentTime),b=this.formatTime(this._media.duration);isNaN(this._media.duration)===!0&&(b="00:00"),this._time.innerHTML=a+"/"+b}},a.prototype.timeFromCursorPosition=function(a,b,c){var d=a.getBoundingClientRect(),e=b.clientX-d.left,f=e/d.width;return f*c},a.prototype.setMediaProgress=function(a){this._media.currentTime=this.timeFromCursorPosition(this._bar,a,this._media.duration),this.updateProgress()},a.prototype.remove=function(){function a(a){var b=a.cloneNode(!0);a.parentNode.replaceChild(b,a)}this._time.innerHTML="",this._bar.removeChild(this._textBox),this._bar.removeChild(this._progress),this._bar.style.position="",this._bar.style.zIndex="",this._bar.style.webkitUserSelect="",this._bar.style.userSelect="",this._bar.classList.remove("progressor"),a(this._bar),a(this._media)},a.prototype.addClickEvents=function(){var a=!1,b=!1,c="",d=function(c){a=!0,b=!this._media.paused,this._media.pause(),this.setMediaProgress(c)},e=function(){clearInterval(c),a=!1,1==b&&(this._media.play(),b=!1)},f=function(b){a===!0&&(c=setInterval(this.setMediaProgress(b),1e3))};this._bar.addEventListener("mousedown",d.bind(this)),document.addEventListener("mouseup",e.bind(this)),document.addEventListener("mousemove",f.bind(this))},a}); \ No newline at end of file +!function(a,b){"undefined"!=typeof module?module.exports=b():"function"==typeof define&&"object"==typeof define.amd?define(b):this[a]=b()}("Progressor",function(){function a(a){this._media=a.media,this._bar=a.bar,this._text=a.text,this._time=a.time,this.initProgressBar(),this.initMedia()}return a.prototype.initMedia=function(){this._media.addEventListener("timeupdate",this.updateProgress.bind(this),!1),this._media.addEventListener("timeupdate",this.updateTimeCount.bind(this),!1),this.addClickEvents(),this.updateTimeCount(this._media)},a.prototype.initProgressBar=function(){this._textBox=document.createElement("span"),this._textBox.textContent=this._text||"",this._bar.style.position="relative",this._bar.style.zIndex=1,this._bar.className=this._bar.className+" progressor",this._progress=document.createElement("div"),this._progress.className="progressor-progress",this._progress.style.width="0%",this._progress.style.height="100%",this._progress.style.position="absolute",this._progress.style.top=0,this._progress.style.zIndex=-1,this._bar.style.webkitUserSelect="none",this._bar.style.userSelect="none",this._bar.appendChild(this._textBox),this._bar.appendChild(this._progress)},a.prototype.updateProgress=function(){this.updateTimeCount();var a=0;this._media.currentTime>0&&(a=100/this._media.duration*this._media.currentTime),this._bar.getElementsByTagName("div")[0].style.width=a+"%"},a.prototype.formatTime=function(a){var b=Math.floor(a/60),c=("0"+Math.round(a-60*b)).slice(-2);return b+":"+c},a.prototype.updateTimeCount=function(){if(this._time){var a=this.formatTime(this._media.currentTime),b=this.formatTime(this._media.duration);isNaN(this._media.duration)===!0&&(b="00:00"),this._time.innerHTML=a+"/"+b}},a.prototype.timeFromCursorPosition=function(a,b,c){var d=a.getBoundingClientRect(),e=b.clientX-d.left,f=e/d.width;return f*c},a.prototype.setMediaProgress=function(a){this._media.currentTime=this.timeFromCursorPosition(this._bar,a,this._media.duration),this.updateProgress()},a.prototype.remove=function(){function a(a){var b=a.cloneNode(!0);a.parentNode.replaceChild(b,a)}this._time.innerHTML="",this._bar.removeChild(this._textBox),this._bar.removeChild(this._progress),this._bar.style.position="",this._bar.style.zIndex="",this._bar.style.webkitUserSelect="",this._bar.style.userSelect="",this._bar.classList.remove("progressor"),a(this._bar),a(this._media)},a.prototype.addClickEvents=function(){var a=!1,b=!1,c="",d=function(c){a=!0,b=!this._media.paused,this._media.pause(),this.setMediaProgress(c)},e=function(){clearInterval(c),a=!1,1==b&&(this._media.play(),b=!1)},f=function(b){a===!0&&(c=setInterval(this.setMediaProgress(b),1e3))};this._bar.addEventListener("mousedown",d.bind(this)),document.addEventListener("mouseup",e.bind(this)),document.addEventListener("mousemove",f.bind(this))},a}); \ No newline at end of file