diff --git a/README.md b/README.md index 69b4d38..86721b8 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ [Demo & Instructions][demo] | [Download][min] -[demo]: http://jquerytimer.com/ +[demo]: https://walmik.github.io/timer.jquery/ [min]: https://raw.githubusercontent.com/walmik/timer.jquery/master/dist/timer.jquery.min.js ## Getting started @@ -56,6 +56,7 @@ $("#div-id").timer({ repeat: {Bool}, // If duration is set, `callback` will be called repeatedly format: {String}, // Format to show time in editable: {Bool} // If click and edit time is enabled + hidden; {Bool} // If true, the timer is not displayed in the selected item. }); ``` @@ -122,7 +123,7 @@ $('#div-id').timer({ You can get the current state of timer by querying the `state` property on it's data object ```javascript -$('#div-id').data('state'); // running | paused | stopped +$('#div-id').data('state'); // running | paused | stopped | removed ``` ##### Duration Syntax diff --git a/dist/timer.jquery.js b/dist/timer.jquery.js index 0a6e81b..efdb776 100644 --- a/dist/timer.jquery.js +++ b/dist/timer.jquery.js @@ -1,12 +1,14 @@ -/*! timer.jquery 0.7.1 2017-09-27*/ -(function($) { +/*! timer.jquery 0.9.2 2024-12-13*/ +(function($) { var Constants = { PLUGIN_NAME: 'timer', TIMER_RUNNING: 'running', TIMER_PAUSED: 'paused', + TIMER_STOPPED: 'stopped', + TIMER_REMOVED: 'removed', DAYINSECONDS: 86400 }; - + /* global Constants:true */ /** * Private @@ -237,27 +239,30 @@ function intervalHandler(timerInstance) { if (timerInstance.config.countdown) { timerInstance.totalSeconds = timerInstance.config.duration - timerInstance.totalSeconds; + timerInstance.render(); + if (timerInstance.totalSeconds === 0) { clearInterval(timerInstance.intervalId); setState(timerInstance, Constants.TIMER_STOPPED); timerInstance.config.callback(); $(timerInstance.element).data('seconds'); } - - timerInstance.render(); return; } timerInstance.render(); + if (!timerInstance.config.duration) { return; } // If the timer was called with a duration parameter, - // run the callback if duration is complete + // run the callback if duration is complete or total seconds is more than duration // and remove the duration if `repeat` is not requested + if (timerInstance.totalSeconds > 0 && - timerInstance.totalSeconds % timerInstance.config.duration === 0) { + (timerInstance.totalSeconds % timerInstance.config.duration === 0 || + timerInstance.totalSeconds > timerInstance.config.duration )) { if (timerInstance.config.callback) { timerInstance.config.callback(); } @@ -281,7 +286,7 @@ var utils = { makeEditable: makeEditable, intervalHandler: intervalHandler }; - + /** * Timer function to initiate a timer on the provided element with the given config. * @param {Object} element HTML node as passed by jQuery @@ -292,6 +297,7 @@ function Timer(element, config) { this.originalConfig = $.extend({}, config); this.totalSeconds = 0; this.intervalId = null; + // A HTML element will have the html() method in jQuery to inject content, this.html = 'html'; if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') { @@ -343,7 +349,9 @@ function Timer(element, config) { Timer.prototype.start = function() { if (this.state !== Constants.TIMER_RUNNING) { utils.setState(this, Constants.TIMER_RUNNING); - this.render(); + if (this.config.hidden !== true) { + this.render(); + } this.intervalId = setInterval(utils.intervalHandler.bind(null, this), this.config.updateFrequency); } }; @@ -369,6 +377,7 @@ Timer.prototype.resume = function() { Timer.prototype.remove = function() { clearInterval(this.intervalId); + utils.setState(this, Constants.TIMER_REMOVED); $(this.element).data(Constants.PLUGIN_NAME, null); $(this.element).data('seconds', null); }; @@ -387,7 +396,7 @@ Timer.prototype.render = function() { } $(this.element).data('seconds', this.totalSeconds); }; - + /* global $:true */ $.fn.timer = function(options) { options = options || 'start'; diff --git a/dist/timer.jquery.min.js b/dist/timer.jquery.min.js index 7fa6953..37bc970 100644 --- a/dist/timer.jquery.min.js +++ b/dist/timer.jquery.min.js @@ -1 +1 @@ -!function(a){function b(a){var b;return a=a||0,b=Math.floor(a/60),{days:a>=n.DAYINSECONDS?Math.floor(a/n.DAYINSECONDS):0,hours:a>=3600?Math.floor(a%n.DAYINSECONDS/3600):0,totalMinutes:b,minutes:a>=60?Math.floor(a%3600/60):b,seconds:a%60,totalSeconds:a}}function c(a){return((a=parseInt(a,10))<10&&"0")+a}function d(){return{seconds:0,editable:!1,duration:null,callback:function(){console.log("Time up!")},repeat:!1,countdown:!1,format:null,updateFrequency:500}}function e(){return Math.round((Date.now?Date.now():(new Date).getTime())/1e3)}function f(a){var d=b(a);if(d.days)return d.days+":"+c(d.hours)+":"+c(d.minutes)+":"+c(d.seconds);if(d.hours)return d.hours+":"+c(d.minutes)+":"+c(d.seconds);return d.minutes?d.minutes+":"+c(d.seconds)+" min":d.seconds+" sec"}function g(a,d){for(var e=b(a),f=[{identifier:"%d",value:e.days},{identifier:"%h",value:e.hours},{identifier:"%m",value:e.minutes},{identifier:"%s",value:e.seconds},{identifier:"%g",value:e.totalMinutes},{identifier:"%t",value:e.totalSeconds},{identifier:"%D",value:c(e.days)},{identifier:"%H",value:c(e.hours)},{identifier:"%M",value:c(e.minutes)},{identifier:"%S",value:c(e.seconds)},{identifier:"%G",value:c(e.totalMinutes)},{identifier:"%T",value:c(e.totalSeconds)}],g=0;g0?c=Number(a.replace(/\ssec/g,"")):a.indexOf("min")>0?(a=a.replace(/\smin/g,""),b=a.split(":"),c=Number(60*b[0])+Number(b[1])):a.match(/\d{1,2}:\d{2}:\d{2}:\d{2}/)?(b=a.split(":"),c=Number(b[0]*n.DAYINSECONDS)+Number(3600*b[1])+Number(60*b[2])+Number(b[3])):a.match(/\d{1,2}:\d{2}:\d{2}/)&&(b=a.split(":"),c=Number(3600*b[0])+Number(60*b[1])+Number(b[2])),c}function j(b,c){b.state=c,a(b.element).data("state",c)}function k(b){a(b.element).on("focus",function(){b.pause()}),a(b.element).on("blur",function(){b.totalSeconds=i(a(b.element)[b.html]()),b.resume()})}function l(b){if(b.totalSeconds=e()-b.startTime,b.config.countdown)return b.totalSeconds=b.config.duration-b.totalSeconds,0===b.totalSeconds&&(clearInterval(b.intervalId),j(b,n.TIMER_STOPPED),b.config.callback(),a(b.element).data("seconds")),void b.render();b.render(),b.config.duration&&b.totalSeconds>0&&b.totalSeconds%b.config.duration==0&&(b.config.callback&&b.config.callback(),b.config.repeat||(clearInterval(b.intervalId),j(b,n.TIMER_STOPPED),b.config.duration=null))}function m(b,c){if(this.element=b,this.originalConfig=a.extend({},c),this.totalSeconds=0,this.intervalId=null,this.html="html","INPUT"!==b.tagName&&"TEXTAREA"!==b.tagName||(this.html="val"),this.config=o.getDefaultConfig(),c.duration&&(c.duration=o.durationTimeToSeconds(c.duration)),"string"!=typeof c&&(this.config=a.extend(this.config,c)),this.config.seconds&&(this.totalSeconds=this.config.seconds),this.config.editable&&o.makeEditable(this),this.startTime=o.unixSeconds()-this.totalSeconds,this.config.duration&&this.config.repeat&&this.config.updateFrequency<1e3&&(this.config.updateFrequency=1e3),this.config.countdown){if(!this.config.duration)throw new Error("Countdown option set without duration!");if(this.config.editable)throw new Error("Cannot set editable on a countdown timer!");this.config.startTime=o.unixSeconds()-this.config.duration,this.totalSeconds=this.config.duration}}var n={PLUGIN_NAME:"timer",TIMER_RUNNING:"running",TIMER_PAUSED:"paused",DAYINSECONDS:86400},o={getDefaultConfig:d,unixSeconds:e,secondsToPrettyTime:f,secondsToFormattedTime:g,durationTimeToSeconds:h,prettyTimeToSeconds:i,setState:j,makeEditable:k,intervalHandler:l};m.prototype.start=function(){this.state!==n.TIMER_RUNNING&&(o.setState(this,n.TIMER_RUNNING),this.render(),this.intervalId=setInterval(o.intervalHandler.bind(null,this),this.config.updateFrequency))},m.prototype.pause=function(){this.state===n.TIMER_RUNNING&&(o.setState(this,n.TIMER_PAUSED),clearInterval(this.intervalId))},m.prototype.resume=function(){this.state===n.TIMER_PAUSED&&(o.setState(this,n.TIMER_RUNNING),this.config.countdown?this.startTime=o.unixSeconds()-this.config.duration+this.totalSeconds:this.startTime=o.unixSeconds()-this.totalSeconds,this.intervalId=setInterval(o.intervalHandler.bind(null,this),this.config.updateFrequency))},m.prototype.remove=function(){clearInterval(this.intervalId),a(this.element).data(n.PLUGIN_NAME,null),a(this.element).data("seconds",null)},m.prototype.reset=function(){var b=this.originalConfig;this.remove(),a(this.element).timer(b)},m.prototype.render=function(){this.config.format?a(this.element)[this.html](o.secondsToFormattedTime(this.totalSeconds,this.config.format)):a(this.element)[this.html](o.secondsToPrettyTime(this.totalSeconds)),a(this.element).data("seconds",this.totalSeconds)},a.fn.timer=function(b){return b=b||"start",this.each(function(){a.data(this,n.PLUGIN_NAME)instanceof m||a.data(this,n.PLUGIN_NAME,new m(this,b));var c=a.data(this,n.PLUGIN_NAME);"string"==typeof b?"function"==typeof c[b]&&c[b]():c.start()})}}(jQuery); \ No newline at end of file +!function(a){function b(a){var b;return a=a||0,b=Math.floor(a/60),{days:a>=n.DAYINSECONDS?Math.floor(a/n.DAYINSECONDS):0,hours:a>=3600?Math.floor(a%n.DAYINSECONDS/3600):0,totalMinutes:b,minutes:a>=60?Math.floor(a%3600/60):b,seconds:a%60,totalSeconds:a}}function c(a){return((a=parseInt(a,10))<10&&"0")+a}function d(){return{seconds:0,editable:!1,duration:null,callback:function(){console.log("Time up!")},repeat:!1,countdown:!1,format:null,updateFrequency:500}}function e(){return Math.round((Date.now?Date.now():(new Date).getTime())/1e3)}function f(a){var d=b(a);if(d.days)return d.days+":"+c(d.hours)+":"+c(d.minutes)+":"+c(d.seconds);if(d.hours)return d.hours+":"+c(d.minutes)+":"+c(d.seconds);return d.minutes?d.minutes+":"+c(d.seconds)+" min":d.seconds+" sec"}function g(a,d){for(var e=b(a),f=[{identifier:"%d",value:e.days},{identifier:"%h",value:e.hours},{identifier:"%m",value:e.minutes},{identifier:"%s",value:e.seconds},{identifier:"%g",value:e.totalMinutes},{identifier:"%t",value:e.totalSeconds},{identifier:"%D",value:c(e.days)},{identifier:"%H",value:c(e.hours)},{identifier:"%M",value:c(e.minutes)},{identifier:"%S",value:c(e.seconds)},{identifier:"%G",value:c(e.totalMinutes)},{identifier:"%T",value:c(e.totalSeconds)}],g=0;g0?c=Number(a.replace(/\ssec/g,"")):a.indexOf("min")>0?(a=a.replace(/\smin/g,""),b=a.split(":"),c=Number(60*b[0])+Number(b[1])):a.match(/\d{1,2}:\d{2}:\d{2}:\d{2}/)?(b=a.split(":"),c=Number(b[0]*n.DAYINSECONDS)+Number(3600*b[1])+Number(60*b[2])+Number(b[3])):a.match(/\d{1,2}:\d{2}:\d{2}/)&&(b=a.split(":"),c=Number(3600*b[0])+Number(60*b[1])+Number(b[2])),c}function j(b,c){b.state=c,a(b.element).data("state",c)}function k(b){a(b.element).on("focus",function(){b.pause()}),a(b.element).on("blur",function(){b.totalSeconds=i(a(b.element)[b.html]()),b.resume()})}function l(b){if(b.totalSeconds=e()-b.startTime,b.config.countdown)return b.totalSeconds=b.config.duration-b.totalSeconds,b.render(),void(0===b.totalSeconds&&(clearInterval(b.intervalId),j(b,n.TIMER_STOPPED),b.config.callback(),a(b.element).data("seconds")));b.render(),b.config.duration&&b.totalSeconds>0&&(b.totalSeconds%b.config.duration==0||b.totalSeconds>b.config.duration)&&(b.config.callback&&b.config.callback(),b.config.repeat||(clearInterval(b.intervalId),j(b,n.TIMER_STOPPED),b.config.duration=null))}function m(b,c){if(this.element=b,this.originalConfig=a.extend({},c),this.totalSeconds=0,this.intervalId=null,this.html="html","INPUT"!==b.tagName&&"TEXTAREA"!==b.tagName||(this.html="val"),this.config=o.getDefaultConfig(),c.duration&&(c.duration=o.durationTimeToSeconds(c.duration)),"string"!=typeof c&&(this.config=a.extend(this.config,c)),this.config.seconds&&(this.totalSeconds=this.config.seconds),this.config.editable&&o.makeEditable(this),this.startTime=o.unixSeconds()-this.totalSeconds,this.config.duration&&this.config.repeat&&this.config.updateFrequency<1e3&&(this.config.updateFrequency=1e3),this.config.countdown){if(!this.config.duration)throw new Error("Countdown option set without duration!");if(this.config.editable)throw new Error("Cannot set editable on a countdown timer!");this.config.startTime=o.unixSeconds()-this.config.duration,this.totalSeconds=this.config.duration}}var n={PLUGIN_NAME:"timer",TIMER_RUNNING:"running",TIMER_PAUSED:"paused",TIMER_STOPPED:"stopped",TIMER_REMOVED:"removed",DAYINSECONDS:86400},o={getDefaultConfig:d,unixSeconds:e,secondsToPrettyTime:f,secondsToFormattedTime:g,durationTimeToSeconds:h,prettyTimeToSeconds:i,setState:j,makeEditable:k,intervalHandler:l};m.prototype.start=function(){this.state!==n.TIMER_RUNNING&&(o.setState(this,n.TIMER_RUNNING),!0!==this.config.hidden&&this.render(),this.intervalId=setInterval(o.intervalHandler.bind(null,this),this.config.updateFrequency))},m.prototype.pause=function(){this.state===n.TIMER_RUNNING&&(o.setState(this,n.TIMER_PAUSED),clearInterval(this.intervalId))},m.prototype.resume=function(){this.state===n.TIMER_PAUSED&&(o.setState(this,n.TIMER_RUNNING),this.config.countdown?this.startTime=o.unixSeconds()-this.config.duration+this.totalSeconds:this.startTime=o.unixSeconds()-this.totalSeconds,this.intervalId=setInterval(o.intervalHandler.bind(null,this),this.config.updateFrequency))},m.prototype.remove=function(){clearInterval(this.intervalId),o.setState(this,n.TIMER_REMOVED),a(this.element).data(n.PLUGIN_NAME,null),a(this.element).data("seconds",null)},m.prototype.reset=function(){var b=this.originalConfig;this.remove(),a(this.element).timer(b)},m.prototype.render=function(){this.config.format?a(this.element)[this.html](o.secondsToFormattedTime(this.totalSeconds,this.config.format)):a(this.element)[this.html](o.secondsToPrettyTime(this.totalSeconds)),a(this.element).data("seconds",this.totalSeconds)},a.fn.timer=function(b){return b=b||"start",this.each(function(){a.data(this,n.PLUGIN_NAME)instanceof m||a.data(this,n.PLUGIN_NAME,new m(this,b));var c=a.data(this,n.PLUGIN_NAME);"string"==typeof b?"function"==typeof c[b]&&c[b]():c.start()})}}(jQuery); \ No newline at end of file diff --git a/package.json b/package.json index e270c6c..685d83d 100644 --- a/package.json +++ b/package.json @@ -2,16 +2,16 @@ "name": "timer.jquery", "description": "Start/Stop/Resume/Remove a pretty timer inside any HTML element.", "author": "Walmik Deshpande", - "version": "0.7.1", + "version": "0.9.2", "repository": { "type": "git", "url": "git://github.com/walmik/timer.jquery.git" }, "scripts": { - "test": "./node_modules/.bin/tape ./test/utils-test.js", - "build": "./node_modules/.bin/grunt", - "watch": "./node_modules/.bin/grunt watch", - "karma": "./node_modules/.bin/karma start" + "test": "npx tape ./test/utils-test.js", + "build": "npx grunt", + "watch": "npx grunt watch", + "karma": "npx karma start" }, "engines": { "node": "> 0.10.0" diff --git a/src/Timer.js b/src/Timer.js index 76166be..20418c6 100644 --- a/src/Timer.js +++ b/src/Timer.js @@ -8,6 +8,7 @@ function Timer(element, config) { this.originalConfig = $.extend({}, config); this.totalSeconds = 0; this.intervalId = null; + // A HTML element will have the html() method in jQuery to inject content, this.html = 'html'; if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') { @@ -59,7 +60,9 @@ function Timer(element, config) { Timer.prototype.start = function() { if (this.state !== Constants.TIMER_RUNNING) { utils.setState(this, Constants.TIMER_RUNNING); - this.render(); + if (this.config.hidden !== true) { + this.render(); + } this.intervalId = setInterval(utils.intervalHandler.bind(null, this), this.config.updateFrequency); } }; @@ -85,6 +88,7 @@ Timer.prototype.resume = function() { Timer.prototype.remove = function() { clearInterval(this.intervalId); + utils.setState(this, Constants.TIMER_REMOVED); $(this.element).data(Constants.PLUGIN_NAME, null); $(this.element).data('seconds', null); }; diff --git a/src/constants.js b/src/constants.js index 31a63fd..c94f6de 100644 --- a/src/constants.js +++ b/src/constants.js @@ -2,5 +2,7 @@ var Constants = { PLUGIN_NAME: 'timer', TIMER_RUNNING: 'running', TIMER_PAUSED: 'paused', + TIMER_STOPPED: 'stopped', + TIMER_REMOVED: 'removed', DAYINSECONDS: 86400 }; diff --git a/src/utils.js b/src/utils.js index 04c64f3..9d6fbc2 100644 --- a/src/utils.js +++ b/src/utils.js @@ -228,27 +228,30 @@ function intervalHandler(timerInstance) { if (timerInstance.config.countdown) { timerInstance.totalSeconds = timerInstance.config.duration - timerInstance.totalSeconds; + timerInstance.render(); + if (timerInstance.totalSeconds === 0) { clearInterval(timerInstance.intervalId); setState(timerInstance, Constants.TIMER_STOPPED); timerInstance.config.callback(); $(timerInstance.element).data('seconds'); } - - timerInstance.render(); return; } timerInstance.render(); + if (!timerInstance.config.duration) { return; } // If the timer was called with a duration parameter, - // run the callback if duration is complete + // run the callback if duration is complete or total seconds is more than duration // and remove the duration if `repeat` is not requested + if (timerInstance.totalSeconds > 0 && - timerInstance.totalSeconds % timerInstance.config.duration === 0) { + (timerInstance.totalSeconds % timerInstance.config.duration === 0 || + timerInstance.totalSeconds > timerInstance.config.duration )) { if (timerInstance.config.callback) { timerInstance.config.callback(); }