Skip to content

Commit 85addb2

Browse files
siddiisiddii
committed
Examples page
1 parent 001cbcb commit 85addb2

File tree

4 files changed

+273
-79
lines changed

4 files changed

+273
-79
lines changed

‎examples.html

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Angular Timer, a simple, inter-operable AngularJS directive</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="">
8+
9+
<!-- Le styles -->
10+
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
11+
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
12+
13+
<link href="docs/css/docs.css" rel="stylesheet">
14+
<link href="docs/css/prettify.css" rel="stylesheet">
15+
16+
<style type="text/css">
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+
}
32+
}
33+
</style>
34+
<script src="jquery/jquery-1.9.1.min.js"></script>
35+
<script src="bootstrap/js/bootstrap.min.js"></script>
36+
<script src="angular/angular.min.js"></script>
37+
<script src="app/js/timer.js"></script>
38+
39+
40+
41+
42+
<script>
43+
function startTimer(sectionId) {
44+
document.getElementById(sectionId).getElementsByTagName('timer')[0].start();
45+
}
46+
47+
function stopTimer(sectionId) {
48+
document.getElementById(sectionId).getElementsByTagName('timer')[0].stop();
49+
}
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+
62+
</script>
63+
</head>
64+
65+
<body ng-app="timer">
66+
<div class="navbar navbar-inverse navbar-fixed-top">
67+
<div class="navbar-inner">
68+
<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>
69+
<div class="container">
70+
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
71+
<span class="icon-bar"></span>
72+
<span class="icon-bar"></span>
73+
<span class="icon-bar"></span>
74+
</button>
75+
<a class="brand" href="#">Angular Timer</a>
76+
<div class="nav-collapse collapse">
77+
<ul class="nav">
78+
<li class="dropdown">
79+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples <b class="caret"></b></a>
80+
<ul class="dropdown-menu">
81+
<li><a href="index.html#basic-timer">Basic Example</a></li>
82+
<li><a href="index.html#clock-timer">Clock Timer</a></li>
83+
<li><a href="index.html#progressbar-timer">Progressbar Timer</a></li>
84+
</ul>
85+
</li>
86+
<li ng-non-bindable><a href="index.html#markup">&lt;timer/&gt;</a></li>
87+
<li class="dropdown">
88+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Usage <b class="caret"></b></a>
89+
<ul class="dropdown-menu">
90+
<li><a href="examples.html#angularjs-single-timer">From AngularJS - Single Timer</a></li>
91+
<li><a href="examples.html#angularjs-multiple-timers">From AngularJS - Multiple Timers</a></li>
92+
<li><a href="#">From native JavaScript</a></li>
93+
<li><a href="#">From jQuery</a></li>
94+
</ul>
95+
</li>
96+
</ul>
97+
</div><!--/.nav-collapse -->
98+
</div>
99+
</div>
100+
</div>
101+
<div class="container page-content">
102+
<section id="angularjs-single-timer">
103+
<h3>AngularJS Example - Single Timer</h3>
104+
<ul class="nav nav-tabs" id="myTab">
105+
<li class="active"><a data-toggle="tab" href="#angularjs-example-source">index.html</a></li>
106+
<li><a data-toggle="tab" href="#angularjs-example-demo">Demo</a></li>
107+
</ul>
108+
109+
<div class="tab-content">
110+
<div class="tab-pane active" id="angularjs-example-source">
111+
<pre class="prettyprint linenums">
112+
&lt;!DOCTYPE html&gt;
113+
&lt;html&gt;
114+
&lt;head&gt;
115+
&lt;title&gt;AngularJS Example - Single Timer&lt;/title&gt;
116+
&lt;script src="../angular/angular.min.js"&gt;&lt;/script&gt;
117+
&lt;script src="../app/js/timer.js"&gt;&lt;/script&gt;
118+
&lt;script&gt;
119+
angular.module('MyApp', ['timer']);
120+
function MyAppController($scope) {
121+
$scope.timerRunning = true;
122+
123+
$scope.startTimer = function (){
124+
$scope.$broadcast('timer-start');
125+
$scope.timerRunning = true;
126+
};
127+
128+
$scope.stopTimer = function (){
129+
$scope.$broadcast('timer-stop');
130+
$scope.timerRunning = false;
131+
};
132+
}
133+
MyAppController.$inject = ['$scope'];
134+
&lt;/script&gt;
135+
&lt;/head&gt;
136+
&lt;body ng-app="MyApp"&gt;
137+
&lt;div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;"&gt;
138+
&lt;h2&gt;Single Timer&lt;/h2&gt;
139+
&lt;h3&gt;&lt;timer/&gt;&lt;/h3&gt;
140+
&lt;button ng-click="startTimer()" ng-disabled="timerRunning"&gt;Start Timer&lt;/button&gt;
141+
&lt;button ng-click="stopTimer()" ng-disabled="!timerRunning"&gt;Stop Timer&lt;/button&gt;
142+
&lt;/div&gt;
143+
&lt;br/&gt;
144+
&lt;div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;"&gt;
145+
&lt;h2&gt;Multiple Timers&lt;/h2&gt;
146+
&lt;h3&gt;Timer 1: &lt;timer interval="2000"/&gt;&lt;/h3&gt;
147+
&lt;h3&gt;Timer 2: &lt;timer&gt;{{minutes}} minutes, {{seconds}} seconds.&lt;/timer&gt;&lt;/h3&gt;
148+
&lt;button ng-click="startTimer()" ng-disabled="timerRunning"&gt;Start Timers&lt;/button&gt;
149+
&lt;button ng-click="stopTimer()" ng-disabled="!timerRunning"&gt;Stop Timers&lt;/button&gt;
150+
&lt;/div&gt;
151+
&lt;/body&gt;
152+
&lt;/html&gt;</pre>
153+
</div>
154+
<div class="tab-pane" id="angularjs-example-demo">
155+
<iframe src="examples/angularjs-single-timer.html" width="100%" height="350px"></iframe>
156+
</div>
157+
</div>
158+
</section>
159+
160+
161+
<footer>
162+
<p>&copy; Siddique Hameed 2013</p>
163+
</footer>
164+
165+
</div>
166+
167+
<script src="docs/prettify.js"></script>
168+
<script src="docs/application.js"></script>
169+
170+
171+
</body>
172+
</html>

‎examples/angular-js-example.html renamed to ‎examples/angularjs-multiple-timers.html

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Timer Directive used from AngularJS</title>
4+
<title>AngularJS Example - Multiple Timers</title>
55
<script src="../angular/angular.min.js"></script>
66
<script src="../app/js/timer.js"></script>
77
<script>
@@ -23,17 +23,11 @@
2323
</script>
2424
</head>
2525
<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/>
3326
<div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;">
3427
<h2>Multiple Timers</h2>
35-
<h3>Timer 1: <timer interval="2000"/></h3>
36-
<h3>Timer 2: <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
28+
<h3>Timer 1: <timer/></h3>
29+
<h3>Timer 2: <timer interval="2000"/></h3>
30+
<h3>Timer 3: <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
3731
<button ng-click="startTimer()" ng-disabled="timerRunning">Start Timers</button>
3832
<button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timers</button>
3933
</div>

‎examples/angularjs-single-timer.html

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

‎index.html

Lines changed: 60 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,8 @@
8787
<li class="dropdown">
8888
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Usage <b class="caret"></b></a>
8989
<ul class="dropdown-menu">
90-
<li><a href="#angularjs-example">From AngularJS</a></li>
90+
<li><a href="examples.html#angularjs-single-timer">From AngularJS - Single Timer</a></li>
91+
<li><a href="examples.html#angularjs-multiple-timers">From AngularJS - Multiple Timers</a></li>
9192
<li><a href="#">From native JavaScript</a></li>
9293
<li><a href="#">From jQuery</a></li>
9394
</ul>
@@ -144,79 +145,69 @@ <h3><timer><div class="progress progress-striped active">
144145

145146
<section id="markup">
146147
<h3>Markup</h3>
148+
<p>Timer directive can be declared using following options. By default, it will display milliseconds inside <code>span</code> tag.
149+
It can also take <em>template</em> string to display user defined display formats.</p>
150+
147151
<div class="bs-docs-example">
148-
<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>
149-
<code ng-non-bindable>&lt;timer interval="1000"&gt;&lt;div class="progress progress-striped active"&gt;
150-
&lt;div class="bar" style="width: {{seconds}}%;"&gt;&lt;/div&gt;
151-
&lt;/div&gt;&lt;/timer&gt;
152-
</code>
153-
<h3><timer><div class="progress progress-striped active">
154-
<div class="bar" style="width: {{seconds}}%;"></div>
155-
</div></timer></h3>
156-
<button type="button" class="btn" onclick="startTimer('progressbar-timer')">Start</button>
157-
<button type="button" class="btn" onclick="stopTimer('progressbar-timer')">Stop</button>
152+
<p>
153+
<code ng-nonbindable>
154+
&lt;timer interval="1000" /&gt;
155+
</code>
156+
</p>
158157
</div>
159-
</section>
160158

161-
<h3>Examples</h3>
162-
<section id="angularjs-example">
163-
<h4>Using timer directive from Angular</h4>
164-
<ul class="nav nav-tabs" id="myTab">
165-
<li class="active"><a data-toggle="tab" href="#angularjs-example-source">index.html</a></li>
166-
<li><a data-toggle="tab" href="#angularjs-example-demo">Demo</a></li>
167-
</ul>
168-
169-
<div class="tab-content">
170-
<div class="tab-pane active" id="angularjs-example-source">
171-
<pre class="prettyprint linenums">
172-
&lt;!DOCTYPE html&gt;
173-
&lt;html&gt;
174-
&lt;head&gt;
175-
&lt;title&gt;Timer Directive used from AngularJS&lt;/title&gt;
176-
&lt;script src="angular/angular.min.js"&gt;&lt;/script&gt;
177-
&lt;script src="app/js/timer.js"&gt;&lt;/script&gt;
178-
&lt;script&gt;
179-
angular.module('MyApp', ['timer']);
180-
function MyAppController($scope) {
181-
$scope.timerRunning = true;
182-
183-
$scope.startTimer = function (){
184-
$scope.$broadcast('timer-start');
185-
$scope.timerRunning = true;
186-
};
187-
188-
$scope.stopTimer = function (){
189-
$scope.$broadcast('timer-stop');
190-
$scope.timerRunning = false;
191-
};
192-
}
193-
MyAppController.$inject = ['$scope'];
194-
&lt;/script&gt;
195-
&lt;/head&gt;
196-
&lt;body ng-app="MyApp"&gt;
197-
&lt;div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;"&gt;
198-
&lt;h2&gt;Single Timer&lt;/h2&gt;
199-
&lt;h3&gt;&lt;timer/&gt;&lt;/h3&gt;
200-
&lt;button ng-click="startTimer()" ng-disabled="timerRunning"&gt;Start Timer&lt;/button&gt;
201-
&lt;button ng-click="stopTimer()" ng-disabled="!timerRunning"&gt;Stop Timer&lt;/button&gt;
202-
&lt;/div&gt;
203-
&lt;br/&gt;
204-
&lt;div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;"&gt;
205-
&lt;h2&gt;Multiple Timers&lt;/h2&gt;
206-
&lt;h3&gt;Timer 1: &lt;timer interval="2000"/&gt;&lt;/h3&gt;
207-
&lt;h3&gt;Timer 2: &lt;timer&gt;{{minutes}} minutes, {{seconds}} seconds.&lt;/timer&gt;&lt;/h3&gt;
208-
&lt;button ng-click="startTimer()" ng-disabled="timerRunning"&gt;Start Timers&lt;/button&gt;
209-
&lt;button ng-click="stopTimer()" ng-disabled="!timerRunning"&gt;Stop Timers&lt;/button&gt;
210-
&lt;/div&gt;
211-
&lt;/body&gt;
212-
&lt;/html&gt;</pre>
213-
</div>
214-
<div class="tab-pane" id="angularjs-example-demo">
215-
<iframe src="examples/angular-js-example.html" width="100%" height="350px"></iframe>
216-
</div>
159+
<div class="bs-docs-example">
160+
<p>
161+
<code ng-non-bindable>&lt;timer interval="1000"&gt;{{hours}} hours, {{minutes}} minutes, {{seconds}} seconds, {{millis}} milliseconds.&lt;/timer&gt;</code>
162+
</p>
217163
</div>
218-
</section>
219164

165+
<h4>Attributes</h4>
166+
<table class="table table-bordered table-striped">
167+
<thead>
168+
<tr>
169+
<th>Name</th>
170+
<th>Required</th>
171+
<th>Default value</th>
172+
</tr>
173+
</thead>
174+
<tr>
175+
<td>
176+
interval
177+
</td>
178+
<td>
179+
false
180+
</td>
181+
<td>
182+
1 millisecond
183+
</td>
184+
</tr>
185+
</table>
186+
187+
188+
<h4>Events</h4>
189+
<p>Following events can be triggered to timer directive</p>
190+
<table class="table table-bordered table-striped">
191+
<thead>
192+
<tr>
193+
<th>Event name</th>
194+
<th>Description</th>
195+
</tr>
196+
</thead>
197+
<tr>
198+
<td>start</td>
199+
<td>Triggered to start the timer. Will reset the start time</td>
200+
</tr>
201+
<tr>
202+
<td>stop</td>
203+
<td>Triggered to stop the timer.</td>
204+
</tr>
205+
<tr>
206+
<td>resume</td>
207+
<td>Triggered to resume the timer. Will NOT reset the start time</td>
208+
</tr>
209+
</table>
210+
</section>
220211

221212
<footer>
222213
<p>&copy; Siddique Hameed 2013</p>

0 commit comments

Comments
 (0)