diff --git a/Readme.md b/Readme.md index 01daefb..c7dcd69 100644 --- a/Readme.md +++ b/Readme.md @@ -73,6 +73,11 @@ A lightweight JavaScript library that creates customisable progress bars for HTM ## Changelog +### v1.0.0 + +- Support for common module systems +- Remove long-deprecated v0.1.0 API + ### v0.4.0 - More precise progress bar @@ -91,11 +96,11 @@ A lightweight JavaScript library that creates customisable progress bars for HTM ### v0.2.0 -- Changed API for creating new instance of Progessor +- Changed API for creating new instance of Progressor - Multiple instances of Progressor now supported - Audio is now paused when scrubbing for better performance - Progressor instances can now be deleted -- Added deprecation message for backwards compatibiliy +- Added deprecation message for backwards compatibly - Progress bars must now be styled by class, not id ## Development diff --git a/bower.json b/bower.json index ab487c5..a706ae8 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "progressor", "main": "progressor.js", - "version": "0.3.0", + "version": "1.0.0", "homepage": "https://github.com/ejb/progressor", "authors": [ "ejb " diff --git a/package.json b/package.json index 4f7ffda..ea0b1fe 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "progressor.js", "description": "Lightweight, customisable progress bars for HTML5 video & audio", - "version": "0.3.0", + "version": "1.0.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 4504be1..64d5530 100644 --- a/progressor.js +++ b/progressor.js @@ -1,131 +1,133 @@ -function Progressor( options ){ - this._media = options.media; - this._bar = options.bar; - this._text = options.text; - this._time = options.time; - this.initProgressBar(); - this.initMedia(); -}; +(function(name, definition) { + if (typeof module != 'undefined') module.exports = definition(); + else if (typeof define == 'function' && typeof define.amd == 'object') define(definition); + else this[name] = definition(); +}('progressor', function() { + function Progressor( options ){ + this._media = options.media; + this._bar = options.bar; + this._text = options.text; + this._time = options.time; + this.initProgressBar(); + this.initMedia(); + }; -Progressor.prototype.initMedia = function() { - this._media.addEventListener('timeupdate', this.updateProgress.bind(this), false); - this._media.addEventListener('timeupdate', this.updateTimeCount.bind(this), false); - this.addClickEvents(); - this.updateTimeCount(this._media); -}; + Progressor.prototype.initMedia = function() { + this._media.addEventListener('timeupdate', this.updateProgress.bind(this), false); + this._media.addEventListener('timeupdate', this.updateTimeCount.bind(this), false); + this.addClickEvents(); + this.updateTimeCount(this._media); + }; -Progressor.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"; + Progressor.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._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 ); -}; + this._bar.style.webkitUserSelect = "none"; + this._bar.style.userSelect = "none"; + this._bar.appendChild ( this._textBox ); + this._bar.appendChild( this._progress ); + }; -Progressor.prototype.updateProgress = function() { - this.updateTimeCount(); - var value = 0; - if (this._media.currentTime > 0) { - value =(100 / this._media.duration) * this._media.currentTime; - } - // this._bar.getElementsByTagName('div')[0].clientWidth = value + "%"; - this._bar.getElementsByTagName('div')[0].style.width = value + "%"; -}; - -Progressor.prototype.formatTime = function ( time ) { - var minutes = Math.floor(time / 60); - var seconds = ("0" + Math.round( time - minutes * 60 ) ).slice(-2); - return minutes+":"+seconds; -} + Progressor.prototype.updateProgress = function() { + this.updateTimeCount(); + var value = 0; + if (this._media.currentTime > 0) { + value =(100 / this._media.duration) * this._media.currentTime; + } + // this._bar.getElementsByTagName('div')[0].clientWidth = value + "%"; + this._bar.getElementsByTagName('div')[0].style.width = value + "%"; + }; -Progressor.prototype.updateTimeCount = function(){ - if ( this._time ) { - var currTime = this.formatTime ( this._media.currentTime ); - var totalTime = this.formatTime ( this._media.duration ); - if ( isNaN( this._media.duration ) === true ) { totalTime = "00:00" }; - this._time.innerHTML = currTime + "/" + totalTime; + Progressor.prototype.formatTime = function ( time ) { + var minutes = Math.floor(time / 60); + var seconds = ("0" + Math.round( time - minutes * 60 ) ).slice(-2); + return minutes+":"+seconds; } -}; + Progressor.prototype.updateTimeCount = function(){ + if ( this._time ) { + var currTime = this.formatTime ( this._media.currentTime ); + var totalTime = this.formatTime ( this._media.duration ); + if ( isNaN( this._media.duration ) === true ) { totalTime = "00:00" }; + this._time.innerHTML = currTime + "/" + totalTime; + } + }; -Progressor.prototype.timeFromCursorPosition = function(element, event, duration){ - var dimensions = element.getBoundingClientRect(); - var pixelsOfBar = event.clientX - dimensions.left; - var percentToSecs = pixelsOfBar / dimensions.width; - return percentToSecs * duration; -}; -Progressor.prototype.setMediaProgress = function(event){ - this._media.currentTime = this.timeFromCursorPosition( - this._bar, - event, - this._media.duration - ); - this.updateProgress(); - -}; + Progressor.prototype.timeFromCursorPosition = function(element, event, duration){ + var dimensions = element.getBoundingClientRect(); + var pixelsOfBar = event.clientX - dimensions.left; + var percentToSecs = pixelsOfBar / dimensions.width; + return percentToSecs * duration; + }; -Progressor.prototype.remove = function(){ - function clearEvents(oldElement){ - var newElement = oldElement.cloneNode(true); - oldElement.parentNode.replaceChild(newElement, oldElement); - } - 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"); - clearEvents( this._bar ); - clearEvents( this._media ); -} + Progressor.prototype.setMediaProgress = function(event){ + this._media.currentTime = this.timeFromCursorPosition( + this._bar, + event, + this._media.duration + ); + this.updateProgress(); + + }; -Progressor.prototype.addClickEvents = function(){ - var isMouseDown = false, - wasPlaying = false, - mouseEventRefresh = ''; - var mouseDown = function(e){ - isMouseDown = true; - wasPlaying = !this._media.paused; - this._media.pause(); - this.setMediaProgress(e); - } - var mouseUp = function(e){ - clearInterval(mouseEventRefresh); - isMouseDown = false; - if (wasPlaying == true) { - this._media.play(); - wasPlaying = false; - }; - } - var mouseMove = function(e){ - if ( isMouseDown === true ) { - mouseEventRefresh = setInterval( this.setMediaProgress(e) , 1000 ); + Progressor.prototype.remove = function(){ + function clearEvents(oldElement){ + var newElement = oldElement.cloneNode(true); + oldElement.parentNode.replaceChild(newElement, oldElement); } + 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"); + clearEvents( this._bar ); + clearEvents( this._media ); } - this._bar.addEventListener("mousedown", mouseDown.bind(this) ); - document.addEventListener("mouseup", mouseUp.bind(this) ); - document.addEventListener("mousemove", mouseMove.bind(this) ); -}; -var progressor = { - init : function(){ - console.error("'progressor.init()' is deprecated. Please use 'Progressor()'."); - } -} \ No newline at end of file + Progressor.prototype.addClickEvents = function(){ + var isMouseDown = false, + wasPlaying = false, + mouseEventRefresh = ''; + var mouseDown = function(e){ + isMouseDown = true; + wasPlaying = !this._media.paused; + this._media.pause(); + this.setMediaProgress(e); + } + var mouseUp = function(e){ + clearInterval(mouseEventRefresh); + isMouseDown = false; + if (wasPlaying == true) { + this._media.play(); + wasPlaying = false; + }; + } + var mouseMove = function(e){ + if ( isMouseDown === true ) { + mouseEventRefresh = setInterval( this.setMediaProgress(e) , 1000 ); + } + } + this._bar.addEventListener("mousedown", mouseDown.bind(this) ); + document.addEventListener("mouseup", mouseUp.bind(this) ); + document.addEventListener("mousemove", mouseMove.bind(this) ); + }; + + return Progressor; +})); diff --git a/progressor.min.js b/progressor.min.js index 092b1f6..758fdc8 100644 --- a/progressor.min.js +++ b/progressor.min.js @@ -1 +1 @@ -function Progressor(a){this._media=a.media,this._bar=a.bar,this._text=a.text,this._time=a.time,this.initProgressBar(),this.initMedia()}Progressor.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)},Progressor.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)},Progressor.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+"%"},Progressor.prototype.formatTime=function(a){var b=Math.floor(a/60),c=("0"+Math.round(a-60*b)).slice(-2);return b+":"+c},Progressor.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}},Progressor.prototype.timeFromCursorPosition=function(a,b,c){var d=a.getBoundingClientRect(),e=b.clientX-d.left,f=e/d.width;return f*c},Progressor.prototype.setMediaProgress=function(a){this._media.currentTime=this.timeFromCursorPosition(this._bar,a,this._media.duration),this.updateProgress()},Progressor.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)},Progressor.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))};var progressor={init:function(){console.error("'progressor.init()' is deprecated. Please use 'Progressor()'.")}}; \ 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 diff --git a/test/requirejs.test.html b/test/requirejs.test.html new file mode 100644 index 0000000..b6319d9 --- /dev/null +++ b/test/requirejs.test.html @@ -0,0 +1,11 @@ + + + \ No newline at end of file