Skip to content

Commit e693b44

Browse files
caikecaike
authored
Merge pull request #18 from caike/allow-pause-on-click
Allow pause on click
2 parents a57e3fa + ca3e46e commit e693b44

File tree

5 files changed

+196
-40
lines changed

5 files changed

+196
-40
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@ $ bower install jquery-simple-timer
5151

5252
The plugin will be installed under *bower_components/jquery-simple-timer/jquery.simple.timer.js* unless you have a *.bowerrc* stating otherwise.
5353

54+
## Live Examples
55+
56+
Open [examples/index.html](https://rawgit.com/caike/jQuery-Simple-Timer/master/examples/index.html)
5457

5558
## Tests
5659

‎examples/index.html

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<script src="./../jquery.js"></script>
2+
<script src="./../jquery.simple.timer.js"></script>
3+
4+
<h3>Examples</h3>
5+
6+
<ul>
7+
<li>
8+
<p><strong>Default behavior</strong></div></p>
9+
<p>
10+
<pre><code>// HTML
11+
&lt;div class="timer-quick" data-seconds-left="5"&gt;&lt;/div&gt;
12+
13+
// JavaScript
14+
$(function(){
15+
$('.timer-quick').startTimer();
16+
})
17+
18+
// CSS
19+
.timeout {
20+
color: red;
21+
}
22+
</code></pre>
23+
</p>
24+
<p>
25+
<small>(defaults behavior adds <i>.timeout</i> class when complete)</small>
26+
<div class="timer-quick" data-seconds-left="5"></div>
27+
</p>
28+
</li>
29+
30+
<li>
31+
<p><strong>console.log when complete</strong></div>
32+
<p>
33+
<pre><code>//HTML
34+
&lt;div class="timer" data-seconds-left="25"&gt;&lt;/div&gt;
35+
36+
// JavaScript
37+
$(function(){
38+
$('.timer').startTimer({
39+
onComplete: function(){
40+
console.log('Complete');
41+
}
42+
});
43+
})
44+
</code></pre>
45+
</p>
46+
<p><div class="timer" data-seconds-left="25"></div></p>
47+
</li>
48+
49+
<li>
50+
<p><strong>console.log when complete and allow pause on click</strong></p>
51+
<p><pre><code>// HTML
52+
&lt;div class="timer-pause" data-minutes-left="1.5"&gt;&lt;/div&gt;
53+
54+
// JavaScript
55+
$(function(){
56+
$('.timer').startTimer({
57+
onComplete: function(){
58+
console.log('Complete');
59+
},
60+
allowPause: true
61+
});
62+
})
63+
</code></pre>
64+
<p>
65+
<small>(click on timer to pause/resume)</small>
66+
<div class="timer-pause" data-minutes-left="1.5"></div>
67+
</p>
68+
</li>
69+
</ul>
70+
<style>
71+
.days {
72+
float: left;
73+
margin-right: 4px;
74+
}
75+
.hours {
76+
float: left;
77+
}
78+
.minutes {
79+
float: left;
80+
}
81+
.seconds {
82+
float: left;
83+
}
84+
.clearDiv {
85+
clear: both;
86+
}
87+
88+
.timeout {
89+
color: red;
90+
}
91+
92+
</style>
93+
94+
<script>
95+
$(function(){
96+
97+
$('.timer-quick').startTimer();
98+
99+
$('.timer').startTimer({
100+
onComplete: function(){
101+
console.log('Complete');
102+
}
103+
});
104+
105+
$('.timer-pause').startTimer({
106+
onComplete: function(){
107+
console.log('Complete');
108+
},
109+
allowPause: true
110+
});
111+
})
112+
</script>

‎index.html

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎jquery.simple.timer.js

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
};
4545

4646
this.targetElement.each(function(_index, timerBox) {
47+
var that = this;
4748
var timerBoxElement = $(timerBox);
4849
var cssClassSnapshot = timerBoxElement.attr('class');
4950

@@ -65,6 +66,16 @@
6566
}
6667
});
6768

69+
timerBoxElement.on('pause', function() {
70+
clearInterval(timerBoxElement.intervalId);
71+
timerBoxElement.paused = true;
72+
});
73+
74+
timerBoxElement.on('resume', function() {
75+
timerBoxElement.paused = false;
76+
that.startCountdown(timerBoxElement, { secondsLeft: timerBoxElement.data('timeLeft') });
77+
});
78+
6879
createSubDivs(timerBoxElement);
6980
return this.startCountdown(timerBoxElement, options);
7081
}.bind(this));
@@ -111,8 +122,18 @@
111122
}.bind(this);
112123

113124
element.onComplete = options.onComplete || defaultComplete;
125+
element.allowPause = options.allowPause || false;
126+
if(element.allowPause){
127+
element.on('click', function() {
128+
if(element.paused){
129+
element.trigger('resume');
130+
}else{
131+
element.trigger('pause');
132+
}
133+
});
134+
}
114135

115-
var secondsLeft = this.fetchSecondsLeft(element);
136+
var secondsLeft = options.secondsLeft || this.fetchSecondsLeft(element);
116137

117138
var refreshRate = options.refreshRate || 1000;
118139
var endTime = secondsLeft + this.currentTime();
@@ -122,6 +143,7 @@
122143

123144
intervalId = setInterval((function() {
124145
timeLeft = endTime - this.currentTime();
146+
element.data('timeLeft', timeLeft);
125147
this.setFinalValue(this.formatTimeLeft(timeLeft), element);
126148
}.bind(this)), refreshRate);
127149

‎tests/tests.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,61 @@ test('Throws error when no data present', function() {
135135
function() { timerElement.startTimer(); }, 'Errors when missing data'
136136
);
137137
});
138+
139+
asyncTest('Pauses on click when allowPause is true', function () {
140+
expect(1);
141+
142+
var timerElement = $('#timer1');
143+
timerElement.data('seconds-left', 3);
144+
timerElement.startTimer({
145+
onComplete: function() {
146+
console.log('complete');
147+
},
148+
allowPause: true
149+
}).trigger('click')
150+
151+
setTimeout(function() {
152+
equal(timerElement.text(), '00:00:03', 'Timer is on pause');
153+
start();
154+
}, 3000);
155+
});
156+
157+
asyncTest('Does NOT pause on click when allowPause is not specified', function () {
158+
expect(1);
159+
160+
var timerElement = $('#timer1');
161+
timerElement.data('seconds-left', 2);
162+
timerElement.startTimer({
163+
onComplete: function() {
164+
console.log('complete');
165+
},
166+
// allowPause: true
167+
}).trigger('click')
168+
169+
timerElement.on('complete', function(){
170+
setTimeout(function() {
171+
equal(timerElement.text(), '00:00:00', 'Cleared timer');
172+
start();
173+
}, 2000);
174+
});
175+
});
176+
177+
asyncTest('Does NOT pause on click when allowPause is false', function () {
178+
expect(1);
179+
180+
var timerElement = $('#timer1');
181+
timerElement.data('seconds-left', 2);
182+
timerElement.startTimer({
183+
onComplete: function() {
184+
console.log('complete');
185+
},
186+
allowPause: false
187+
}).trigger('click')
188+
189+
timerElement.on('complete', function(){
190+
setTimeout(function() {
191+
equal(timerElement.text(), '00:00:00', 'Cleared timer');
192+
start();
193+
}, 2000);
194+
});
195+
});

0 commit comments

Comments
 (0)