Experiment with pause on click

caike · caike · commit d8ae5af4f42d · 2015-04-24T16:04:29.000-04:00
diff --git a/examples/timer-with-pause.html b/examples/timer-with-pause.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<body>
+  <head>
+    <link href="style.css" rel="stylesheet" type="text/css" media="all">
+  </head>
+
+  <body>
+    <div class='container'>
+      <h1 class='timer' data-seconds-left=5></h1>
+      <section class='actions'></section>
+    </div>
+  </body>
+
+  <script src="../jquery.js"></script>
+  <script src="../jquery.simple.timer.js"></script>
+  <script src="timer-with-pause.js"></script>
+</body>
diff --git a/examples/timer-with-pause.js b/examples/timer-with-pause.js
@@ -0,0 +1,8 @@
+$(function(){
+  $('.timer').startTimer({
+    onComplete: function(element){
+      $('html, body').addClass('bodyTimeoutBackground');
+    },
+    allowPause: true // click events will pause/resume timer
+  })
+})
diff --git a/jquery.simple.timer.js b/jquery.simple.timer.js
@@ -44,6 +44,7 @@
     };
 
     this.targetElement.each(function(_index, timerBox) {
+      var that = this;
       var timerBoxElement = $(timerBox);
       var cssClassSnapshot = timerBoxElement.attr('class');
 
@@ -65,6 +66,16 @@
         }
       });
 
+      timerBoxElement.on('pause', function() {
+        clearInterval(timerBoxElement.intervalId);
+        timerBoxElement.paused = true;
+      });
+
+      timerBoxElement.on('resume', function() {
+        timerBoxElement.paused = false;
+        that.startCountdown(timerBoxElement, { secondsLeft: timerBoxElement.data('timeLeft') });
+      });
+
       createSubDivs(timerBoxElement);
       return this.startCountdown(timerBoxElement, options);
     }.bind(this));
@@ -111,8 +122,18 @@
     }.bind(this);
 
     element.onComplete = options.onComplete || defaultComplete;
+    element.allowPause = options.allowPause || false;
+    if(element.allowPause){
+      element.on('click', function() {
+        if(element.paused){
+          element.trigger('resume');
+        }else{
+          element.trigger('pause');
+        }
+      });
+    }
 
-    var secondsLeft = this.fetchSecondsLeft(element);
+    var secondsLeft = options.secondsLeft || this.fetchSecondsLeft(element);
 
     var refreshRate = options.refreshRate || 1000;
     var endTime = secondsLeft + this.currentTime();
@@ -122,6 +143,7 @@
 
     intervalId = setInterval((function() {
       timeLeft = endTime - this.currentTime();
+      element.data('timeLeft', timeLeft);
       this.setFinalValue(this.formatTimeLeft(timeLeft), element);
     }.bind(this)), refreshRate);
 
