Allow pause on click

README.md

@@ -51,6 +51,9 @@ $ bower install jquery-simple-timer
 
 The plugin will be installed under *bower_components/jquery-simple-timer/jquery.simple.timer.js* unless you have a *.bowerrc* stating otherwise.
 
+## Live Examples
+
+Open [examples/index.html](https://rawgit.com/caike/jQuery-Simple-Timer/master/examples/index.html)
 
 ## Tests
 

examples/index.html

@@ -0,0 +1,112 @@
+<script src="./../jquery.js"></script>
+<script src="./../jquery.simple.timer.js"></script>
+
+<h3>Examples</h3>
+
+<ul>
+  <li>
+  <p><strong>Default behavior</strong></div></p>
+  <p>
+    <pre><code>// HTML
+&lt;div class="timer-quick" data-seconds-left="5"&gt;&lt;/div&gt;
+
+// JavaScript
+$(function(){
+    $('.timer-quick').startTimer();
+})
+
+// CSS
+.timeout {
+  color: red;
+}
+    </code></pre>
+  </p>
+  <p>
+  <small>(defaults behavior adds <i>.timeout</i> class when complete)</small>
+  <div class="timer-quick" data-seconds-left="5"></div>
+  </p>
+</li>
+
+<li>
+  <p><strong>console.log when complete</strong></div>
+  <p>
+    <pre><code>//HTML
+&lt;div class="timer" data-seconds-left="25"&gt;&lt;/div&gt;
+
+// JavaScript
+$(function(){
+    $('.timer').startTimer({
+      onComplete: function(){
+        console.log('Complete');
+      }
+    });
+})
+    </code></pre>
+  </p>
+    <p><div class="timer" data-seconds-left="25"></div></p>
+</li>
+
+<li>
+  <p><strong>console.log when complete and allow pause on click</strong></p>
+  <p><pre><code>// HTML
+&lt;div class="timer-pause" data-minutes-left="1.5"&gt;&lt;/div&gt;
+
+// JavaScript
+    $(function(){
+    $('.timer').startTimer({
+      onComplete: function(){
+        console.log('Complete');
+      },
+      allowPause: true
+    });
+})
+    </code></pre>
+  <p>
+    <small>(click on timer to pause/resume)</small>
+    <div class="timer-pause" data-minutes-left="1.5"></div>
+  </p>
+</li>
+</ul>
+<style>
+.days {
+  float: left;
+  margin-right: 4px;
+}
+.hours {
+  float: left;
+}
+.minutes {
+  float: left;
+}
+.seconds {
+  float: left;
+}
+.clearDiv {
+  clear: both;
+}
+
+.timeout {
+  color: red;
+}
+
+</style>
+
+<script>
+$(function(){
+
+    $('.timer-quick').startTimer();
+
+    $('.timer').startTimer({
+      onComplete: function(){
+        console.log('Complete');
+      }
+    });
+
+    $('.timer-pause').startTimer({
+      onComplete: function(){
+        console.log('Complete');
+      },
+      allowPause: true
+    });
+})
+</script>

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);
 

tests/tests.js

@@ -135,3 +135,61 @@ test('Throws error when no data present', function() {
     function() { timerElement.startTimer(); }, 'Errors when missing data'
   );
 });
+
+asyncTest('Pauses on click when allowPause is true', function () {
+  expect(1);
+
+  var timerElement = $('#timer1');
+  timerElement.data('seconds-left', 3);
+  timerElement.startTimer({
+    onComplete: function() {
+      console.log('complete');
+    },
+    allowPause: true
+  }).trigger('click')
+
+  setTimeout(function() {
+    equal(timerElement.text(), '00:00:03', 'Timer is on pause');
+    start();
+  }, 3000);
+});
+
+asyncTest('Does NOT pause on click when allowPause is not specified', function () {
+  expect(1);
+
+  var timerElement = $('#timer1');
+  timerElement.data('seconds-left', 2);
+  timerElement.startTimer({
+    onComplete: function() {
+      console.log('complete');
+    },
+    // allowPause: true
+  }).trigger('click')
+
+  timerElement.on('complete', function(){
+    setTimeout(function() {
+      equal(timerElement.text(), '00:00:00', 'Cleared timer');
+      start();
+    }, 2000);
+  });
+});
+
+asyncTest('Does NOT pause on click when allowPause is false', function () {
+  expect(1);
+
+  var timerElement = $('#timer1');
+  timerElement.data('seconds-left', 2);
+  timerElement.startTimer({
+    onComplete: function() {
+      console.log('complete');
+    },
+    allowPause: false
+  }).trigger('click')
+
+  timerElement.on('complete', function(){
+    setTimeout(function() {
+      equal(timerElement.text(), '00:00:00', 'Cleared timer');
+      start();
+    }, 2000);
+  });
+});