Skip to content

Commit d34961e

Browse files
siddiisiddii
committed
resume method
1 parent 0b172e9 commit d34961e

File tree

2 files changed

+45
-38
lines changed

2 files changed

+45
-38
lines changed

‎app/js/timer.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ angular.module('timer', [])
66
scope: {interval: '=interval'},
77
controller: function ($scope, $element) {
88
if ($element.html().trim().length === 0) {
9-
$element.append($compile('<span>{{timeTaken}}</span>')($scope));
9+
$element.append($compile('<span>{{millis}}</span>')($scope));
1010
}
1111

1212
$scope.startTime = null;
@@ -47,10 +47,10 @@ angular.module('timer', [])
4747
});
4848

4949
var tick = function (){
50-
$scope.timeTaken = new Date() - $scope.startTime;
51-
$scope.minutes = Math.floor($scope.timeTaken / (1000 * 60));
52-
$scope.seconds = Math.floor(($scope.timeTaken - ($scope.minutes * 60)) / 1000) % 60;
53-
50+
$scope.millis = new Date() - $scope.startTime;
51+
$scope.seconds = Math.floor(($scope.millis / 1000) % 60) ;
52+
$scope.minutes = Math.floor((($scope.millis / (1000*60)) % 60));
53+
$scope.hours = Math.floor((($scope.millis / (1000*60*60)) % 24));
5454
$scope.timeoutId = $timeout(function () {
5555
tick();
5656
}, $scope.interval);

‎index.html

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,25 @@
4040

4141

4242
<script>
43-
function startTimer(timerId, btn) {
44-
document.getElementById(timerId).start();
43+
function startTimer(sectionId) {
44+
document.getElementById(sectionId).getElementsByTagName('timer')[0].start();
4545
}
4646

47-
function stopTimer(timerId, btn) {
48-
document.getElementById(timerId).stop();
47+
function stopTimer(sectionId) {
48+
document.getElementById(sectionId).getElementsByTagName('timer')[0].stop();
4949
}
50+
51+
function stopResumeTimer(sectionId, btn) {
52+
if (btn.innerHTML === 'Stop') {
53+
document.getElementById(sectionId).getElementsByTagName('timer')[0].stop();
54+
btn.innerHTML = 'Resume';
55+
}
56+
else {
57+
document.getElementById(sectionId).getElementsByTagName('timer')[0].resume();
58+
btn.innerHTML = 'Stop';
59+
}
60+
}
61+
5062
</script>
5163
</head>
5264

@@ -67,12 +79,12 @@
6779
<li class="dropdown">
6880
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples <b class="caret"></b></a>
6981
<ul class="dropdown-menu">
70-
<li><a href="#basic-example">Basic Example</a></li>
71-
<li><a href="#timer-with-interval">Timer with interval</a></li>
72-
<li><a href="#formatted-timer">Formatted Timer</a></li>
82+
<li><a href="index.html#basic-timer">Basic Example</a></li>
83+
<li><a href="index.html#clock-timer">Clock timer</a></li>
84+
<li><a href="index.html#progressbar-timer">Progressbar Timer</a></li>
7385
</ul>
7486
</li>
75-
<li><a href="#introduction">Markup Reference</a></li>
87+
<li><a href="#introduction">Markup</a></li>
7688
<li class="dropdown">
7789
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Usage <b class="caret"></b></a>
7890
<ul class="dropdown-menu">
@@ -93,49 +105,44 @@ <h1>Introduction</h1>
93105
<p>Directives in <a target="_new" href="http://angularjs.org">AngularJS</a> is a powerful way of building reusable <em>UI components</em>.
94106
This simple project will serve as a sample/reference implementation demonstrating its
95107
flexibilities by making it <em>inter-operable</em> across runtime (AngularJS, plain simple JavaScript & jQuery)</p>
108+
<p>For basic understanding of how directives work in AngularJS, please head to this <a target="_new" href="http://docs.angularjs.org/guide/directive">developer guide</a>.</p>
96109
</section>
97110

98-
<section id="basic-example">
111+
<section id="basic-timer">
99112
<h3>Basic Example</h3>
100113
<div class="bs-docs-example">
101114
<p>This simple directive <code>&lt;timer /&gt;</code> will start the timer with the default option of ticking every 1 millisecond</p>
102-
<h3><timer id="timer1"/></h3>
103-
<button type="button" class="btn" onclick="startTimer('timer1', this)">Start</button>
104-
<button type="button" class="btn" onclick="stopTimer('timer1', this)">Stop</button>
115+
<h3><timer/></h3>
116+
<button type="button" class="btn" onclick="startTimer('basic-timer')">Start</button>
117+
<button type="button" class="btn" onclick="stopTimer('basic-timer')">Stop</button>
105118
</div>
106119
</section>
107120

108-
<section id="progress-bar-example">
109-
<h3>Progressbar Example</h3>
121+
<section id="clock-timer">
122+
<h3>Timer with hours, minutes & seconds</h3>
110123
<div class="bs-docs-example">
111-
<p>This simple directive <code>&lt;timer /&gt;</code> will start the timer with the default option of ticking every 1 millisecond</p>
112-
<h3><timer id="timer3"><div class="progress progress-striped active">
113-
<div class="bar" style="width: {{seconds}}%;"></div>
114-
</div></timer></h3>
115-
<button type="button" class="btn" onclick="startTimer('timer1', this)">Start</button>
116-
<button type="button" class="btn" onclick="stopTimer('timer1', this)">Stop</button>
124+
<p>This markup <code ng-non-bindable>&lt;timer interval="1000"&gt;{{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.&lt;/timer&gt;</code> will run the clock timer ticking every second</p>
125+
<h3><timer interval="1000">{{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer></h3>
126+
<button type="button" class="btn" onclick="stopResumeTimer('clock-timer', this)">Stop</button>
117127
</div>
118128
</section>
119129

120-
<section id="timer-with-interval">
121-
<h3>Timer with interval example</h3>
130+
<section id="progressbar-timer">
131+
<h3>Progressbar Timer</h3>
122132
<div class="bs-docs-example">
123-
<p>This directive <code>&lt;timer interval="1000" id="timer2"/&gt;</code> markup code will run the timer tick every second</p>
124-
<h3><timer interval="1000" id="timer2"/></h3>
133+
<p>Timer directive along with <a target="_new" href="http://twitter.github.io/bootstrap/components.html#progress">Twitter Bootstrap's Progressbar</a> will set the timer on Progressbar control.</p>
134+
<code ng-non-bindable>&lt;timer interval="1000"&gt;&lt;div class="progress progress-striped active"&gt;
135+
&lt;div class="bar" style="width: {{seconds}}%;"&gt;&lt;/div&gt;
136+
&lt;/div&gt;&lt;/timer&gt;
137+
</code>
138+
<h3><timer><div class="progress progress-striped active">
139+
<div class="bar" style="width: {{seconds}}%;"></div>
140+
</div></timer></h3>
125141
<button type="button" class="btn" onclick="startTimer('timer1', this)">Start</button>
126142
<button type="button" class="btn" onclick="stopTimer('timer1', this)">Stop</button>
127143
</div>
128144
</section>
129145

130-
<section id="formatted-timer">
131-
<h3>Formatted timer</h3>
132-
<div class="bs-docs-example">
133-
<p>This directive <code>&lt;timer interval="1000" id="timer3"/&gt;</code> markup code will run the timer tick every second</p>
134-
<h3><timer id="timer3">{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
135-
<button type="button" class="btn" onclick="startTimer('timer3', this)">Start</button>
136-
<button type="button" class="btn" onclick="stopTimer('timer3', this)">Stop</button>
137-
</div>
138-
</section>
139146
<h3>Examples</h3>
140147
<section id="angularjs-example">
141148
<h4>Using timer directive from Angular</h4>

0 commit comments

Comments
 (0)