From 9d9dfed8b2eabddd9dc8807f633eacfb4c278598 Mon Sep 17 00:00:00 2001 From: Walmik Date: Sun, 10 Jul 2016 13:46:05 -0700 Subject: [PATCH 01/13] Initial Commit --- index.html | 365 ++++++++++++++++++++++++++++++++++++++++++++ timer.jquery.min.js | 1 + 2 files changed, 366 insertions(+) create mode 100644 index.html create mode 100644 timer.jquery.min.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..977ce85 --- /dev/null +++ b/index.html @@ -0,0 +1,365 @@ + + + + jQuery timer plugin | Start an editable pretty timer inside any HTML element + + + + + + + + + + + + +
+
+

jQuery Timer

+
    +
  • Lightweight, well tested jQuery pretty timer plugin
  • +
  • Start, Pause, Resume and Remove a timer inside any HTML element.
  • +
  • Get notified at a set time or at regular intervals.
  • +
  • Click and edit time while timer is running!
  • +
+
+

Try it out

+
+
+ +
+
+ + + + +
+
+
+

+ Download plugin | + ★ Star this project on Github +

+
+
+
+
+

How to

+
+
Install:
+
+
Download the jQuery timer plugin and put it in a SCRIPT tag in your HTML page after jQuery itself. 
+
+
Start a timer:
+
+
$('#divId').timer(); //Same as $('#divId').timer('start')
+
+
Start at a particular time:
+
+
$('#divId').timer({
+    seconds: 100 //Specify start time in seconds
+});
+
+
Pause:
+
+
$('#divId').timer('pause');
+
+
Resume:
+
+
$('#divId').timer('resume');
+
+
Remove Timer:
+
+
$('#divId').timer('remove');
+
+
Get number of seconds:
+
+
$('#divId').data('seconds');
+
+
Get notified:
+
+
+//start a timer & execute a function in 5 minutes & 30 seconds
+$('#divId').timer({
+    duration: '5m30s',
+    callback: function() {
+        alert('Time up!');
+    }
+});
+
+
+
Get notified repeatedly:
+
+
+//start a timer & execute a function every 2 minutes
+$('#divId').timer({
+    duration: '2m',
+    callback: function() {
+        alert('Why, Hello there');
+    },
+    repeat: true //repeatedly calls the callback you specify
+});
+
+
+
Repeat callback & reset timer:
+
+
+//start a timer & execute a function every 30 seconds and then reset the timer at the end of 30 seconds.
+$('#divId').timer({
+    duration: '30s',
+    callback: function() {
+        console.log('Timer will reset!');
+        $('#divId').timer('reset');
+    },
+    repeat: true //repeatedly call the callback
+});
+
+
+
+ Format: + By default the timer will display a pretty output (30 sec OR 1:06). You can change this format if you like. +
+
+
// Show a digital timer instead of pretty timer:
+$('#divId').timer({
+    format: '%H:%M:%S'  Display time as 00:00:00
+});
+
+// OR
+$('#divId').timer({
+    format: '%h:%m:%s'  Display time as 0:0:0
+});
+
+// OR
+$('#divId').timer({
+    format: '%M minutes %s seconds'  Display time as 3 minutes 45 seconds
+});
+
+ +
Update frequency: By default the timer display updates every 500ms to show an accurate update of time. You can change this by specifying the update frequency in milliseconds.
+
+
$('#divId').timer({
+	updateFrequency: 2000 	// Update the timer display every 2 seconds.
+});
+
+
+ +
+ +

+ Download jQuery timer plugin +

+ + +
+
+ +
+ +
+ + + + + + diff --git a/timer.jquery.min.js b/timer.jquery.min.js new file mode 100644 index 0000000..b8e11fc --- /dev/null +++ b/timer.jquery.min.js @@ -0,0 +1 @@ +/*! timer.jquery 0.6.1 2016-06-16*/!function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={exports:{},id:d,loaded:!1};return a[d].call(e.exports,e,e.exports,b),e.loaded=!0,e.exports}var c={};return b.m=a,b.c=c,b.p="",b(0)}([function(a,b,c){"use strict";function d(a){return a&&a.__esModule?a:{"default":a}}var e=c(1),f=d(e),g=c(2),h=d(g);!function(){$.fn.timer=function(a){return a=a||"start",this.each(function(){$.data(this,h["default"].PLUGIN_NAME)instanceof f["default"]||$.data(this,h["default"].PLUGIN_NAME,new f["default"](this,a));var b=$.data(this,h["default"].PLUGIN_NAME);"string"==typeof a?"function"==typeof b[a]&&b[a]():b.start()})}}()},function(a,b,c){"use strict";function d(a){return a&&a.__esModule?a:{"default":a}}function e(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(b,"__esModule",{value:!0});var f=function(){function a(a,b){for(var c=0;c=f["default"].DAYINSECONDS&&(b=Math.floor(a/f["default"].DAYINSECONDS)),a>=f["default"].THIRTYSIXHUNDRED&&(c=Math.floor(a%f["default"].DAYINSECONDS/f["default"].THIRTYSIXHUNDRED)),a>=f["default"].SIXTY&&(e=Math.floor(a%f["default"].THIRTYSIXHUNDRED/f["default"].SIXTY)),g=a%f["default"].SIXTY,{days:b,hours:c,minutes:e,totalMinutes:d,seconds:g,totalSeconds:a}},h=function(a){return a=parseInt(a,10),10>a?"0"+a:a},i=function(){return{seconds:0,editable:!1,duration:null,callback:function(){console.log("Time up!")},repeat:!1,countdown:!1,format:null,updateFrequency:500}},j=function(){return Math.round(Date.now()/1e3)},k=function(a){var b=g(a);if(b.days)return b.days+":"+h(b.hours)+":"+h(b.minutes)+":"+h(b.seconds);if(b.hours)return b.hours+":"+h(b.minutes)+":"+h(b.seconds);var c="";return c=b.minutes?b.minutes+":"+h(b.seconds)+" min":b.seconds+" sec"},l=function(a,b){var c=g(a),d=[{identifier:"%d",value:c.days},{identifier:"%h",value:c.hours},{identifier:"%m",value:c.minutes},{identifier:"%s",value:c.seconds},{identifier:"%g",value:c.totalMinutes},{identifier:"%t",value:c.totalSeconds},{identifier:"%D",value:h(c.days)},{identifier:"%H",value:h(c.hours)},{identifier:"%M",value:h(c.minutes)},{identifier:"%S",value:h(c.seconds)},{identifier:"%G",value:h(c.totalMinutes)},{identifier:"%T",value:h(c.totalSeconds)}];return d.forEach(function(a){b=b.replace(a.identifier,a.value)}),b},m=function(a){if(!a)throw new Error("durationTimeToSeconds expects a string argument!");if(!isNaN(Number(a)))return a;a=a.toLowerCase();var b=a.match(/\d{1,2}d/),c=a.match(/\d{1,2}h/),d=a.match(/\d{1,2}m/),e=a.match(/\d{1,2}s/);if(!(b||c||d||e))throw new Error("Invalid string passed in durationTimeToSeconds!");var g=0;return b&&(g+=Number(b[0].replace("d","")*f["default"].DAYINSECONDS)),c&&(g+=Number(c[0].replace("h","")*f["default"].THIRTYSIXHUNDRED)),d&&(g+=Number(d[0].replace("m",""))*f["default"].SIXTY),e&&(g+=Number(e[0].replace("s",""))),g},n=function(a){var b=void 0,c=void 0;return a.indexOf("sec")>0?c=Number(a.replace(/\ssec/g,"")):a.indexOf("min")>0?(a=a.replace(/\smin/g,""),b=a.split(":"),c=Number(b[0]*f["default"].SIXTY)+Number(b[1])):a.match(/\d{1,2}:\d{2}:\d{2}:\d{2}/)?(b=a.split(":"),c=Number(b[0]*f["default"].DAYINSECONDS)+Number(b[1]*f["default"].THIRTYSIXHUNDRED)+Number(b[2]*f["default"].SIXTY)+Number(b[3])):a.match(/\d{1,2}:\d{2}:\d{2}/)&&(b=a.split(":"),c=Number(b[0]*f["default"].THIRTYSIXHUNDRED)+Number(b[1]*f["default"].SIXTY)+Number(b[2])),c},o=function(a,b){a.state=b,$(a.element).data("state",b)},p=function(a){$(a.element).on("focus",function(){a.pause()}),$(a.element).on("blur",function(){a.totalSeconds=n($(a.element)[a.html]()),a.resume()})},q=function(a){return a.totalSeconds=j()-a.startTime,a.config.countdown?(a.totalSeconds=a.config.duration-a.totalSeconds,0===a.totalSeconds&&(clearInterval(a.intervalId),o(a,f["default"].TIMER_STOPPED),a.config.callback(),$(a.element).data("seconds")),void a.render()):(a.render(),void(a.config.duration&&a.totalSeconds>0&&a.totalSeconds%a.config.duration===0&&(a.config.callback&&a.config.callback(),a.config.repeat||(clearInterval(a.intervalId),o(a,f["default"].TIMER_STOPPED),a.config.duration=null))))};b["default"]={getDefaultConfig:i,unixSeconds:j,secondsToPrettyTime:k,secondsToFormattedTime:l,durationTimeToSeconds:m,prettyTimeToSeconds:n,setState:o,makeEditable:p,intervalHandler:q}}]); \ No newline at end of file From 0c301a4835755ad47c559be4851b02a3866be46c Mon Sep 17 00:00:00 2001 From: Walmik Date: Sun, 10 Jul 2016 15:41:12 -0700 Subject: [PATCH 02/13] Added GA --- index.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/index.html b/index.html index 977ce85..4a49578 100644 --- a/index.html +++ b/index.html @@ -361,5 +361,14 @@

How to

}); })(); + From d7ea8c6fc24f840ceb1d44ffcdf9a07701467dc9 Mon Sep 17 00:00:00 2001 From: Walmik Deshpande Date: Sun, 10 Jul 2016 15:42:34 -0700 Subject: [PATCH 03/13] Create CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..ebf7810 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +jquerytimer.com \ No newline at end of file From e68be5b702a86ce4071251e727dfbc85da022ea3 Mon Sep 17 00:00:00 2001 From: Walmik Deshpande Date: Sun, 10 Jul 2016 19:14:04 -0700 Subject: [PATCH 04/13] Delete CNAME --- CNAME | 1 - 1 file changed, 1 deletion(-) delete mode 100644 CNAME diff --git a/CNAME b/CNAME deleted file mode 100644 index ebf7810..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -jquerytimer.com \ No newline at end of file From 85e4be89b8264ef8d4618ba2aa1937ebe3eb6128 Mon Sep 17 00:00:00 2001 From: Walmik Date: Sun, 10 Jul 2016 19:43:07 -0700 Subject: [PATCH 05/13] CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..ebf7810 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +jquerytimer.com \ No newline at end of file From b711e7a4ed9140c0fe237ac4fe3193eb48585e3e Mon Sep 17 00:00:00 2001 From: Walmik Date: Tue, 9 Aug 2016 22:32:06 -0700 Subject: [PATCH 06/13] Fixed download link --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 4a49578..0dcef26 100644 --- a/index.html +++ b/index.html @@ -182,7 +182,7 @@

Try it out


- Download plugin | + Download plugin | ★ Star this project on Github

From 7e74493be78782a2d8d7db8ffcd47391a87b61d3 Mon Sep 17 00:00:00 2001 From: Walmik Deshpande Date: Wed, 12 Apr 2017 14:50:56 -0700 Subject: [PATCH 07/13] Add recipe for time format update --- index.html | 35 +++++++++++++++++++++++++++-------- timer.jquery.min.js | 1 - 2 files changed, 27 insertions(+), 9 deletions(-) delete mode 100644 timer.jquery.min.js diff --git a/index.html b/index.html index 0dcef26..e14bc14 100644 --- a/index.html +++ b/index.html @@ -35,11 +35,6 @@ } em { color: #999; font-size: 12px; } - .top-bar { - background: #000; - padding: 10px 0; - } - .dark { padding-bottom: 30px; margin-bottom: 30px; @@ -253,7 +248,6 @@

How to

$('#divId').timer({ duration: '30s', callback: function() { - console.log('Timer will reset!'); $('#divId').timer('reset'); }, repeat: true //repeatedly call the callback @@ -281,12 +275,37 @@

How to

}); + +
+ Change display format dynamically: If you'd like to change the format of the timer display, you can do so by defining a callback function that udpates the timer's format after a specific duration. +
+
+
$('#divId')..timer({
+	duration: '61s', //since 3599 is divisible by 59 or 61
+	seconds: 3590, //simulation purposes
+	format: '%M:%S',
+	callback: function() {
+
+		var total = timerWithCallDuration.data('seconds');
+
+		if(total === 3599) { //change to hour format (3600 - 1 to prevent display bug)
+			this.format = '%H:%M:%S';
+		}
+	}
+});
+
+ + +
Update frequency: By default the timer display updates every 500ms to show an accurate update of time. You can change this by specifying the update frequency in milliseconds.
-
+
$('#divId').timer({
 	updateFrequency: 2000 	// Update the timer display every 2 seconds.
 });
+ + +

@@ -306,7 +325,7 @@

How to

- + + From def164cb93800f2d2fc6b0950e31435444533fa1 Mon Sep 17 00:00:00 2001 From: Walmik Deshpande Date: Tue, 28 Aug 2018 13:13:43 -0700 Subject: [PATCH 12/13] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 2b57c35..d467a1a 100644 --- a/index.html +++ b/index.html @@ -439,7 +439,7 @@

How to

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - ga('create', 'UA-8347688-18', 'auto'); + ga('create', 'UA-8347688-21', 'auto'); ga('require', 'outboundLinkTracker'); ga('send', 'pageview'); From fca8a5f9a200e1046f5e696683c7d396f90daf5e Mon Sep 17 00:00:00 2001 From: Walmik Deshpande Date: Sun, 26 Apr 2020 11:35:54 -0700 Subject: [PATCH 13/13] Delete CNAME --- CNAME | 1 - 1 file changed, 1 deletion(-) delete mode 100644 CNAME diff --git a/CNAME b/CNAME deleted file mode 100644 index ebf7810..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -jquerytimer.com \ No newline at end of file