Skip to content

Commit 29c93b0

Browse files
siddiisiddii
committed
Merge branch 'master' of https://github.com/siddii/angular-timer 
2 parents 723e159 + 1466be1 commit 29c93b0

File tree

11 files changed

+164
-159
lines changed

11 files changed

+164
-159
lines changed

‎app/js/timer.js

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,37 @@ angular.module('timer', [])
66
scope: {interval: '=interval'},
77
controller: function ($scope, $element) {
88
if ($element.html().trim().length === 0) {
9-
var template = $compile('<h3>{{timeTaken}}</h3>')($scope);
10-
$element.parent().append(template);
9+
$element.append($compile('<span>{{timeTaken}}</span>')($scope));
1110
}
1211

1312
$scope.startTime = null;
1413
$scope.timeoutId = null;
1514

15+
$scope.$on('timer-start', function (){
16+
$scope.start();
17+
});
18+
19+
$scope.$on('timer-resume', function (){
20+
$scope.resume();
21+
});
22+
23+
$scope.$on('timer-stop', function (){
24+
$scope.stop();
25+
});
26+
1627
$scope.start = $element[0].start = function () {
1728
$scope.startTime = new Date();
18-
updateTime();
19-
updateLater();
29+
tick();
30+
};
31+
32+
$scope.resume = $element[0].resume = function () {
33+
tick();
2034
};
2135

2236
$scope.stop = $element[0].stop = function () {
2337
$timeout.cancel($scope.timeoutId);
2438
};
2539

26-
function updateTime() {
27-
$scope.timeTaken = new Date() - $scope.startTime;
28-
$scope.minutes = Math.floor($scope.timeTaken / (1000 * 60));
29-
$scope.seconds = Math.floor(($scope.timeTaken - ($scope.minutes * 60)) / 1000) % 60;
30-
}
31-
32-
function updateLater() {
33-
$scope.timeoutId = $timeout(function () {
34-
updateTime();
35-
updateLater();
36-
}, $scope.interval);
37-
}
3840

3941
$element[0].stop = function () {
4042
$timeout.cancel($scope.timeoutId);
@@ -44,6 +46,16 @@ angular.module('timer', [])
4446
$timeout.cancel($scope.timeoutId);
4547
});
4648

49+
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+
54+
$scope.timeoutId = $timeout(function () {
55+
tick();
56+
}, $scope.interval);
57+
};
58+
4759
$scope.start();
4860
}
4961
};

‎config/karma-e2e.conf.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
basePath = '../';
22

33
files = [
4+
'jquery/jquery-1.9.1.min.js',
45
ANGULAR_SCENARIO,
56
ANGULAR_SCENARIO_ADAPTER,
67
'test/e2e/**/*.js'

‎examples/angular-js-example.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Timer Directive used from AngularJS</title>
5+
<script src="../angular/angular.min.js"></script>
6+
<script src="../app/js/timer.js"></script>
7+
<script>
8+
angular.module('MyApp', ['timer']);
9+
function MyAppController($scope) {
10+
$scope.timerRunning = true;
11+
12+
$scope.startTimer = function (){
13+
$scope.$broadcast('timer-start');
14+
$scope.timerRunning = true;
15+
};
16+
17+
$scope.stopTimer = function (){
18+
$scope.$broadcast('timer-stop');
19+
$scope.timerRunning = false;
20+
};
21+
}
22+
MyAppController.$inject = ['$scope'];
23+
</script>
24+
</head>
25+
<body ng-app="MyApp">
26+
<div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;">
27+
<h2>Single Timer</h2>
28+
<h3><timer/></h3>
29+
<button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
30+
<button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
31+
</div>
32+
<br/>
33+
<div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;">
34+
<h2>Multiple Timers</h2>
35+
<h3>Timer 1: <timer interval="2000"/></h3>
36+
<h3>Timer 2: <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
37+
<button ng-click="startTimer()" ng-disabled="timerRunning">Start Timers</button>
38+
<button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timers</button>
39+
</div>
40+
</body>
41+
</html>

‎images/icon-fork-me.png

7.96 KB
Loading

‎index.html

Lines changed: 72 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,35 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Angular Timer Directive, a simple AngularJS directive demonstrating its usefulness</title>
5+
<title>Angular Timer, a simple, inter-operable AngularJS directive</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta name="description" content="">
88

99
<!-- Le styles -->
1010
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
11+
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
12+
1113
<link href="docs/css/docs.css" rel="stylesheet">
1214
<link href="docs/css/prettify.css" rel="stylesheet">
1315

1416
<style type="text/css">
15-
body {
16-
padding-top: 60px;
17-
padding-bottom: 40px;
17+
.page-content {
18+
padding-top: 15px;
19+
}
20+
.navbar .brand {
21+
padding-left: 75px;
22+
}
23+
24+
#fork-me {
25+
position: absolute;
26+
}
27+
28+
@media (max-width: 979px) {
29+
#fork-me {
30+
display: none;
31+
}
1832
}
1933
</style>
20-
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
2134
<script src="jquery/jquery-1.9.1.min.js"></script>
2235
<script src="bootstrap/js/bootstrap.min.js"></script>
2336
<script src="angular/angular.min.js"></script>
@@ -38,9 +51,9 @@
3851
</head>
3952

4053
<body ng-app="timer">
41-
4254
<div class="navbar navbar-inverse navbar-fixed-top">
4355
<div class="navbar-inner">
56+
<div id="fork-me"><a href="https://github.com/siddii/angular-timer/fork" title="Fork me on GitHub"><img alt="Fork me on GitHub" src="images/icon-fork-me.png"></a></div>
4457
<div class="container">
4558
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
4659
<span class="icon-bar"></span>
@@ -50,7 +63,7 @@
5063
<a class="brand" href="#">Angular Timer</a>
5164
<div class="nav-collapse collapse">
5265
<ul class="nav">
53-
<li class="active"><a href="#introduction">Home</a></li>
66+
<!--<li class="active"><a href="#introduction">Home</a></li>-->
5467
<li class="dropdown">
5568
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples <b class="caret"></b></a>
5669
<ul class="dropdown-menu">
@@ -59,6 +72,7 @@
5972
<li><a href="#formatted-timer">Formatted Timer</a></li>
6073
</ul>
6174
</li>
75+
<li><a href="#introduction">Markup Reference</a></li>
6276
<li class="dropdown">
6377
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Usage <b class="caret"></b></a>
6478
<ul class="dropdown-menu">
@@ -73,19 +87,19 @@
7387
</div>
7488
</div>
7589

76-
<div class="container">
90+
<div class="container page-content">
7791
<section id="introduction">
7892
<h1>Introduction</h1>
7993
<p>Directives in <a target="_new" href="http://angularjs.org">AngularJS</a> is a powerful way of building reusable <em>UI components</em>.
8094
This simple project will serve as a sample/reference implementation demonstrating its
81-
flexibilities by making it usable across runtime (AngularJS, plain simple JavaScript & jQuery)</p>
82-
95+
flexibilities by making it <em>inter-operable</em> across runtime (AngularJS, plain simple JavaScript & jQuery)</p>
8396
</section>
97+
8498
<section id="basic-example">
8599
<h3>Basic Example</h3>
86100
<div class="bs-docs-example">
87-
<p>This simple directive <code>&lt;timer /&gt;</code> markup code will start the timer with the default option of ticking every 1 millisecond</p>
88-
<div><timer id="timer1"/></div>
101+
<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>
89103
<button type="button" class="btn" onclick="startTimer('timer1', this)">Start</button>
90104
<button type="button" class="btn" onclick="stopTimer('timer1', this)">Stop</button>
91105
</div>
@@ -95,7 +109,7 @@ <h3>Basic Example</h3>
95109
<h3>Timer with interval example</h3>
96110
<div class="bs-docs-example">
97111
<p>This directive <code>&lt;timer interval="1000" id="timer2"/&gt;</code> markup code will run the timer tick every second</p>
98-
<div><timer interval="1000" id="timer2"/></div>
112+
<h3><timer interval="1000" id="timer2"/></h3>
99113
<button type="button" class="btn" onclick="startTimer('timer1', this)">Start</button>
100114
<button type="button" class="btn" onclick="stopTimer('timer1', this)">Stop</button>
101115
</div>
@@ -105,16 +119,14 @@ <h3>Timer with interval example</h3>
105119
<h3>Formatted timer</h3>
106120
<div class="bs-docs-example">
107121
<p>This directive <code>&lt;timer interval="1000" id="timer3"/&gt;</code> markup code will run the timer tick every second</p>
108-
<div><timer id="timer3"/>{{minutes}} minutes, {{seconds}} seconds.</div>
122+
<h3><timer id="timer3">{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
109123
<button type="button" class="btn" onclick="startTimer('timer3', this)">Start</button>
110124
<button type="button" class="btn" onclick="stopTimer('timer3', this)">Stop</button>
111125
</div>
112126
</section>
113-
114-
<hr>
115-
<h2>Examples</h2>
127+
<h3>Examples</h3>
116128
<section id="angularjs-example">
117-
<h3>Using timer directive from Angular</h3>
129+
<h4>Using timer directive from Angular</h4>
118130
<ul class="nav nav-tabs" id="myTab">
119131
<li class="active"><a data-toggle="tab" href="#angularjs-example-source">index.html</a></li>
120132
<li><a data-toggle="tab" href="#angularjs-example-demo">Demo</a></li>
@@ -123,13 +135,50 @@ <h3>Using timer directive from Angular</h3>
123135
<div class="tab-content">
124136
<div class="tab-pane active" id="angularjs-example-source">
125137
<pre class="prettyprint linenums">
126-
<code>
127-
&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;
128-
</code>
129-
</pre>
138+
&lt;!DOCTYPE html&gt;
139+
&lt;html&gt;
140+
&lt;head&gt;
141+
&lt;title&gt;Timer Directive used from AngularJS&lt;/title&gt;
142+
&lt;script src="angular/angular.min.js"&gt;&lt;/script&gt;
143+
&lt;script src="app/js/timer.js"&gt;&lt;/script&gt;
144+
&lt;script&gt;
145+
angular.module('MyApp', ['timer']);
146+
function MyAppController($scope) {
147+
$scope.timerRunning = true;
148+
149+
$scope.startTimer = function (){
150+
$scope.$broadcast('timer-start');
151+
$scope.timerRunning = true;
152+
};
153+
154+
$scope.stopTimer = function (){
155+
$scope.$broadcast('timer-stop');
156+
$scope.timerRunning = false;
157+
};
158+
}
159+
MyAppController.$inject = ['$scope'];
160+
&lt;/script&gt;
161+
&lt;/head&gt;
162+
&lt;body ng-app="MyApp"&gt;
163+
&lt;div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;"&gt;
164+
&lt;h2&gt;Single Timer&lt;/h2&gt;
165+
&lt;h3&gt;&lt;timer/&gt;&lt;/h3&gt;
166+
&lt;button ng-click="startTimer()" ng-disabled="timerRunning"&gt;Start Timer&lt;/button&gt;
167+
&lt;button ng-click="stopTimer()" ng-disabled="!timerRunning"&gt;Stop Timer&lt;/button&gt;
168+
&lt;/div&gt;
169+
&lt;br/&gt;
170+
&lt;div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;"&gt;
171+
&lt;h2&gt;Multiple Timers&lt;/h2&gt;
172+
&lt;h3&gt;Timer 1: &lt;timer interval="2000"/&gt;&lt;/h3&gt;
173+
&lt;h3&gt;Timer 2: &lt;timer&gt;{{minutes}} minutes, {{seconds}} seconds.&lt;/timer&gt;&lt;/h3&gt;
174+
&lt;button ng-click="startTimer()" ng-disabled="timerRunning"&gt;Start Timers&lt;/button&gt;
175+
&lt;button ng-click="stopTimer()" ng-disabled="!timerRunning"&gt;Stop Timers&lt;/button&gt;
176+
&lt;/div&gt;
177+
&lt;/body&gt;
178+
&lt;/html&gt;</pre>
130179
</div>
131180
<div class="tab-pane" id="angularjs-example-demo">
132-
<h1>Demo</h1>
181+
<iframe src="examples/angular-js-example.html" width="100%" height="350px"></iframe>
133182
</div>
134183
</div>
135184
</section>

‎test/e2e/scenarios.js

Lines changed: 6 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,16 @@
22

33
/* http://docs.angularjs.org/guide/dev_guide.e2e-testing */
44

5-
describe('my app', function() {
5+
describe('timer directive', function() {
66

77
beforeEach(function() {
8-
browser().navigateTo('../../app/index.html');
8+
browser().navigateTo('../../index.html');
99
});
1010

11-
12-
it('should automatically redirect to /view1 when location hash/fragment is empty', function() {
13-
expect(browser().location().url()).toBe("/view1");
14-
});
15-
16-
17-
describe('view1', function() {
18-
19-
beforeEach(function() {
20-
browser().navigateTo('#/view1');
21-
});
22-
23-
24-
it('should render view1 when user navigates to /view1', function() {
25-
expect(element('[ng-view] p:first').text()).
26-
toMatch(/partial for view 1/);
27-
});
28-
11+
it('Simple timer', function() {
12+
sleep(2);
13+
var basicExample = angular.element('#timer1');
14+
console.log('######## basicExample = ', basicExample.html());
2915
});
3016

31-
32-
describe('view2', function() {
33-
34-
beforeEach(function() {
35-
browser().navigateTo('#/view2');
36-
});
37-
38-
39-
it('should render view2 when user navigates to /view2', function() {
40-
expect(element('[ng-view] p:first').text()).
41-
toMatch(/partial for view 2/);
42-
});
43-
44-
});
4517
});

‎test/lib/angular/version.txt

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎test/unit/controllersSpec.js

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

0 commit comments

Comments
 (0)