").append(x.parseHTML(e)).find(r):e)}).complete(n&&function(e,t){s.each(n,o||[e.responseText,t,e])}),this},x.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){x.fn[t]=function(e){return this.on(t,e)}}),x.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:Ut,type:"GET",isLocal:Kt.test(Xt[1]),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":sn,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":x.parseJSON,"text xml":x.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?cn(cn(e,x.ajaxSettings),t):cn(x.ajaxSettings,e)},ajaxPrefilter:un(rn),ajaxTransport:un(on),ajax:function(e,t){"object"==typeof e&&(t=e,e=undefined),t=t||{};var n,r,i,o,s,a,u,l,c=x.ajaxSetup({},t),p=c.context||c,f=c.context&&(p.nodeType||p.jquery)?x(p):x.event,h=x.Deferred(),d=x.Callbacks("once memory"),g=c.statusCode||{},m={},y={},v=0,b="canceled",T={readyState:0,getResponseHeader:function(e){var t;if(2===v){if(!o){o={};while(t=Qt.exec(i))o[t[1].toLowerCase()]=t[2]}t=o[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return 2===v?i:null},setRequestHeader:function(e,t){var n=e.toLowerCase();return v||(e=y[n]=y[n]||e,m[e]=t),this},overrideMimeType:function(e){return v||(c.mimeType=e),this},statusCode:function(e){var t;if(e)if(2>v)for(t in e)g[t]=[g[t],e[t]];else T.always(e[T.status]);return this},abort:function(e){var t=e||b;return n&&n.abort(t),k(0,t),this}};if(h.promise(T).complete=d.add,T.success=T.done,T.error=T.fail,c.url=((e||c.url||Ut)+"").replace(Gt,"").replace(en,Xt[1]+"//"),c.type=t.method||t.type||c.method||c.type,c.dataTypes=x.trim(c.dataType||"*").toLowerCase().match(w)||[""],null==c.crossDomain&&(a=tn.exec(c.url.toLowerCase()),c.crossDomain=!(!a||a[1]===Xt[1]&&a[2]===Xt[2]&&(a[3]||("http:"===a[1]?"80":"443"))===(Xt[3]||("http:"===Xt[1]?"80":"443")))),c.data&&c.processData&&"string"!=typeof c.data&&(c.data=x.param(c.data,c.traditional)),ln(rn,c,t,T),2===v)return T;u=c.global,u&&0===x.active++&&x.event.trigger("ajaxStart"),c.type=c.type.toUpperCase(),c.hasContent=!Zt.test(c.type),r=c.url,c.hasContent||(c.data&&(r=c.url+=(Vt.test(r)?"&":"?")+c.data,delete c.data),c.cache===!1&&(c.url=Jt.test(r)?r.replace(Jt,"$1_="+Yt++):r+(Vt.test(r)?"&":"?")+"_="+Yt++)),c.ifModified&&(x.lastModified[r]&&T.setRequestHeader("If-Modified-Since",x.lastModified[r]),x.etag[r]&&T.setRequestHeader("If-None-Match",x.etag[r])),(c.data&&c.hasContent&&c.contentType!==!1||t.contentType)&&T.setRequestHeader("Content-Type",c.contentType),T.setRequestHeader("Accept",c.dataTypes[0]&&c.accepts[c.dataTypes[0]]?c.accepts[c.dataTypes[0]]+("*"!==c.dataTypes[0]?", "+sn+"; q=0.01":""):c.accepts["*"]);for(l in c.headers)T.setRequestHeader(l,c.headers[l]);if(c.beforeSend&&(c.beforeSend.call(p,T,c)===!1||2===v))return T.abort();b="abort";for(l in{success:1,error:1,complete:1})T[l](c[l]);if(n=ln(on,c,t,T)){T.readyState=1,u&&f.trigger("ajaxSend",[T,c]),c.async&&c.timeout>0&&(s=setTimeout(function(){T.abort("timeout")},c.timeout));try{v=1,n.send(m,k)}catch(C){if(!(2>v))throw C;k(-1,C)}}else k(-1,"No Transport");function k(e,t,o,a){var l,m,y,b,w,C=t;2!==v&&(v=2,s&&clearTimeout(s),n=undefined,i=a||"",T.readyState=e>0?4:0,l=e>=200&&300>e||304===e,o&&(b=pn(c,T,o)),b=fn(c,b,T,l),l?(c.ifModified&&(w=T.getResponseHeader("Last-Modified"),w&&(x.lastModified[r]=w),w=T.getResponseHeader("etag"),w&&(x.etag[r]=w)),204===e||"HEAD"===c.type?C="nocontent":304===e?C="notmodified":(C=b.state,m=b.data,y=b.error,l=!y)):(y=C,(e||!C)&&(C="error",0>e&&(e=0))),T.status=e,T.statusText=(t||C)+"",l?h.resolveWith(p,[m,C,T]):h.rejectWith(p,[T,C,y]),T.statusCode(g),g=undefined,u&&f.trigger(l?"ajaxSuccess":"ajaxError",[T,c,l?m:y]),d.fireWith(p,[T,C]),u&&(f.trigger("ajaxComplete",[T,c]),--x.active||x.event.trigger("ajaxStop")))}return T},getJSON:function(e,t,n){return x.get(e,t,n,"json")},getScript:function(e,t){return x.get(e,undefined,t,"script")}}),x.each(["get","post"],function(e,t){x[t]=function(e,n,r,i){return x.isFunction(n)&&(i=i||r,r=n,n=undefined),x.ajax({url:e,type:t,dataType:i,data:n,success:r})}});function pn(e,t,n){var r,i,o,s,a=e.contents,u=e.dataTypes;while("*"===u[0])u.shift(),r===undefined&&(r=e.mimeType||t.getResponseHeader("Content-Type"));if(r)for(i in a)if(a[i]&&a[i].test(r)){u.unshift(i);break}if(u[0]in n)o=u[0];else{for(i in n){if(!u[0]||e.converters[i+" "+u[0]]){o=i;break}s||(s=i)}o=o||s}return o?(o!==u[0]&&u.unshift(o),n[o]):undefined}function fn(e,t,n,r){var i,o,s,a,u,l={},c=e.dataTypes.slice();if(c[1])for(s in e.converters)l[s.toLowerCase()]=e.converters[s];o=c.shift();while(o)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!u&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u=o,o=c.shift())if("*"===o)o=u;else if("*"!==u&&u!==o){if(s=l[u+" "+o]||l["* "+o],!s)for(i in l)if(a=i.split(" "),a[1]===o&&(s=l[u+" "+a[0]]||l["* "+a[0]])){s===!0?s=l[i]:l[i]!==!0&&(o=a[0],c.unshift(a[1]));break}if(s!==!0)if(s&&e["throws"])t=s(t);else try{t=s(t)}catch(p){return{state:"parsererror",error:s?p:"No conversion from "+u+" to "+o}}}return{state:"success",data:t}}x.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/(?:java|ecma)script/},converters:{"text script":function(e){return x.globalEval(e),e}}}),x.ajaxPrefilter("script",function(e){e.cache===undefined&&(e.cache=!1),e.crossDomain&&(e.type="GET")}),x.ajaxTransport("script",function(e){if(e.crossDomain){var t,n;return{send:function(r,i){t=x("
+
+
+
+
+
+
+
+ AngularJS - Single Timer
+
+
+
+
+
+<!DOCTYPE html>
+<html>
+<head>
+ <title>AngularJS Example - Single Timer Example</title>
+ <script src="../angular/angular.min.js"></script>
+ <script src="../app/js/timer.js"></script>
+ <script>
+ angular.module('MyApp', ['timer']);
+ function MyAppController($scope) {
+ $scope.timerRunning = true;
+
+ $scope.startTimer = function (){
+ $scope.$broadcast('timer-start');
+ $scope.timerRunning = true;
+ };
+
+ $scope.stopTimer = function (){
+ $scope.$broadcast('timer-stop');
+ $scope.timerRunning = false;
+ };
+
+ $scope.$on('timer-stopped', function (event, data){
+ console.log('Timer Stopped - data = ', data);
+ });
+ }
+ MyAppController.$inject = ['$scope'];
+ </script>
+</head>
+<body ng-app="MyApp">
+ <div ng-controller="MyAppController">
+ <h1>AngularJS - Single Timer Example</h1>
+ <h3><timer/></h3>
+ <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
+ <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
+ </div>
+ <br/>
+</body>
+</html>
+
+
+
+
+
+
+
+ AngularJS - Multiple Timer
+
+
+
+
+
+<!DOCTYPE html>
+<html>
+<head>
+ <title>AngularJS Example - Multiple Timers Example</title>
+ <script src="../angular/angular.min.js"></script>
+ <script src="../app/js/timer.js"></script>
+ <script>
+ angular.module('MyApp', ['timer']);
+ function MyAppController($scope) {
+ $scope.timerRunning = true;
+
+ $scope.startTimer = function (){
+ $scope.$broadcast('timer-start');
+ $scope.timerRunning = true;
+ };
+
+ $scope.stopTimer = function (){
+ $scope.$broadcast('timer-stop');
+ $scope.timerRunning = false;
+ };
+ }
+ MyAppController.$inject = ['$scope'];
+ </script>
+</head>
+<body ng-app="MyApp">
+ <div ng-controller="MyAppController">
+ <h2>AngularJS - Multiple Timers Example</h2>
+ <h3>Timer 1: <timer/></h3>
+ <h3>Timer 2: <timer interval="2000"/></h3>
+ <h3>Timer 3: <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
+ <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timers</button>
+ <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timers</button>
+ </div>
+</body>
+</html>
+
+
+
+
+
+
+
+ AngularJS - Polling Timers
+
+
+
+
+
+<!DOCTYPE html>
+<html>
+<head>
+ <title>AngularJS Example - Polling Timer Example</title>
+ <script src="../angular/angular.min.js"></script>
+ <script src="../app/js/timer.js"></script>
+ <script>
+ angular.module('MyApp', ['timer']);
+ function PollingController($scope) {
+ $scope.timerRunning = true;
+ $scope.timerConsole = '';
+
+ $scope.timerType = '';
+
+ $scope.startTimer = function (){
+ $scope.$broadcast('timer-start');
+ $scope.timerRunning = true;
+ };
+
+ $scope.stopTimer = function (){
+ $scope.$broadcast('timer-stop');
+ $scope.timerRunning = false;
+ };
+
+ $scope.$on('timer-tick', function (event, args) {
+ $scope.timerConsole += $scope.timerType + ' - event.name = '+ event.name + ', timeoutId = ' + args.timeoutId + ', millis = ' + args.millis +'\n';
+ });
+ }
+
+ PollingController.$inject = ['$scope'];
+ </script>
+</head>
+<body ng-app="MyApp">
+ <div>
+ <h1>AngularJS - Polling Timer Example using <code>timer-tick</code> event</h1>
+ <div ng-init="timerType = 'Polling Server'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px;margin:15px">
+ <h2>Polling Server every 5 seconds</h2>
+ <h3><timer interval="5000"/></h3>
+ <textarea style="height: 100px;" row=20 cols="200">{{timerConsole}}</textarea>
+ <br/>
+ <button ng-click="startTimer('poll-server')" ng-disabled="timerRunning">Start Timer</button>
+ <button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning">Stop Timer</button>
+ </div>
+ <br/>
+
+ <div ng-init="timerType = 'Saving Documents'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px">
+ <h2>Saving Document every 3 seconds</h2>
+ <h3><timer interval="3000"/></h3>
+ <textarea style="height: 100px;" row=20 cols="200">{{timerConsole}}</textarea>
+ <br/>
+ <button ng-click="startTimer('poll-server')" ng-disabled="timerRunning">Start Timer</button>
+ <button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning">Stop Timer</button>
+ </div>
+
+ </div>
+ <br/>
+</body>
+</html>
+
+
+
+
+
+
+
+ JQuery Timer
+
+
+
+
+
+<!DOCTYPE html>
+<html>
+<head>
+ <title>JQuery Timer Example</title>
+ <script src="../jquery/jquery-1.9.1.min.js"></script>
+ <script src="../angular/angular.min.js"></script>
+ <script src="../app/js/timer.js"></script>
+ <script>
+ function startTimer() {
+ $('timer')[0].start();
+ }
+
+ function stopTimer() {
+ $('timer')[0].stop();
+ }
+ </script>
+</head>
+<body>
+<div ng-controller="MyAppController">
+ <h2>JQuery - Timer Example</h2>
+ <h3 ng-app="timer"><timer/></h3>
+ <button onclick="startTimer()">Start Timer</button>
+ <button onclick="stopTimer()">Stop Timer</button>
+</div>
+<br/>
+</body>
+</html>
+
+
+
+
+
+
+
+ Plain JavaScript
+
+
+
+
+
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Plain Javascript Timer Example</title>
+ <script src="../angular/angular.min.js"></script>
+ <script src="../app/js/timer.js"></script>
+ <script>
+ function startTimer() {
+ document.getElementsByTagName('timer')[0].start();
+ }
+
+ function stopTimer() {
+ document.getElementsByTagName('timer')[0].stop();
+ }
+ </script>
+</head>
+<body>
+<div>
+ <h2>Plain JavaScript - Timer Example</h2>
+ <h3><timer ng-app="timer"/></h3>
+ <button onclick="startTimer()">Start Timer</button>
+ <button onclick="stopTimer()">Stop Timer</button>
+</div>
+<br/>
+</body>
+</html>
+
+
+
+
+
+
+
+
+ © Siddique Hameed 2013
+
+
+
+
+
diff --git a/dist/examples/angularjs-add-countdown-seconds.html b/dist/examples/angularjs-add-countdown-seconds.html
new file mode 100644
index 0000000..ce18d25
--- /dev/null
+++ b/dist/examples/angularjs-add-countdown-seconds.html
@@ -0,0 +1,28 @@
+
+
+
+
AngularJS Example - Single Timer Example
+
+
+
+
+
+
+
+
+
+
+
AngularJS - Add Countdown Seconds Example
+ {{countdown}} Add 5 Seconds
+
+
+
+
\ No newline at end of file
diff --git a/dist/examples/angularjs-multiple-timers.html b/dist/examples/angularjs-multiple-timers.html
new file mode 100644
index 0000000..f1c7218
--- /dev/null
+++ b/dist/examples/angularjs-multiple-timers.html
@@ -0,0 +1,42 @@
+
+
+
+
AngularJS Example - Multiple Timers Example
+
+
+
+
+
+
+
+
+
+
+
AngularJS - Multiple Timers Example
+ Timer 1:
+ Timer 2:
+ Timer 3: {{minutes}} minutes, {{seconds}} seconds.
+ Start Timers
+ Stop Timers
+
+
+
\ No newline at end of file
diff --git a/dist/examples/angularjs-polling-timer.html b/dist/examples/angularjs-polling-timer.html
new file mode 100644
index 0000000..9edcf47
--- /dev/null
+++ b/dist/examples/angularjs-polling-timer.html
@@ -0,0 +1,62 @@
+
+
+
+
AngularJS Example - Polling Timer Example
+
+
+
+
+
+
+
+
+
+
+
AngularJS - Polling Timer Example using timer-tick event
+
+
Polling Server every 5 seconds
+ Start Timer
+ Stop Timer
+
+
+
+
+
Saving Document every 3 seconds
+ Start Timer
+ Stop Timer
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/examples/angularjs-reset-timer b/dist/examples/angularjs-reset-timer
new file mode 100644
index 0000000..03b28c2
--- /dev/null
+++ b/dist/examples/angularjs-reset-timer
@@ -0,0 +1,92 @@
+
+
+
+
+
AngularJS Example - Reset Countdown
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{millis | date:'mm:ss'}}
+
+
+ Start/Resume
+ Stop
+ Reset
+
+
+
+
+
+
+
+
diff --git a/dist/examples/angularjs-single-timer.html b/dist/examples/angularjs-single-timer.html
new file mode 100644
index 0000000..e5694f0
--- /dev/null
+++ b/dist/examples/angularjs-single-timer.html
@@ -0,0 +1,41 @@
+
+
+
+
AngularJS Example - Single Timer Example
+
+
+
+
+
+
+
+
+
+
+
AngularJS - Single Timer Example
+ Start Timer
+ Stop Timer
+
+
+
+
\ No newline at end of file
diff --git a/dist/examples/jquery-timer.html b/dist/examples/jquery-timer.html
new file mode 100644
index 0000000..2342567
--- /dev/null
+++ b/dist/examples/jquery-timer.html
@@ -0,0 +1,30 @@
+
+
+
+
JQuery Timer Example
+
+
+
+
+
+
+
+
+
+
+
JQuery - Timer Example
+ Start Timer
+ Stop Timer
+
+
+
+
\ No newline at end of file
diff --git a/dist/examples/plain-javascript.html b/dist/examples/plain-javascript.html
new file mode 100644
index 0000000..8f6aaf7
--- /dev/null
+++ b/dist/examples/plain-javascript.html
@@ -0,0 +1,30 @@
+
+
+
+
Plain Javascript Timer Example
+
+
+
+
+
+
+
+
+
+
+
Plain JavaScript - Timer Example
+ Start Timer
+ Stop Timer
+
+
+
+
\ No newline at end of file
diff --git a/dist/examples/timer-with-autostart-false-and-starttime.html b/dist/examples/timer-with-autostart-false-and-starttime.html
new file mode 100644
index 0000000..0fc02cb
--- /dev/null
+++ b/dist/examples/timer-with-autostart-false-and-starttime.html
@@ -0,0 +1,19 @@
+
+
+
+
Start Time and Auto Start set - Timer Example
+
+
+
+
+
+
+
+
+
+
Start Time and Auto Start set - Timer Example
+
+
+
+
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
new file mode 100644
index 0000000..9c586b4
--- /dev/null
+++ b/dist/index.html
@@ -0,0 +1,547 @@
+
+
+
+
+
+
Angular Timer, a simple, inter-operable AngularJS directive
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Introduction
+
+
+ Directives in AngularJS is a powerful way of building
+ reusable UI components . This simple project will serve as a sample/reference implementation
+ demonstrating its flexibilities by making it inter-operable across runtime (AngularJS, plain simple
+ JavaScript & jQuery)
+
+
+ For basic understanding of how directives work in AngularJS, please head to this developer guide .
+
+
+
+ Basic Example
+
+
+
+ This simple directive <timer /> will start the timer with the default option of
+ ticking every 1 millisecond
+
+
+
+
Start
+
Stop
+
+
+ Timer with start time and auto start set
+
+
+
This will start a timer with 1410914940000 milliseconds and stopped
+
+
+
+
+
+
+ Timer with hours, minutes & seconds
+
+
+
+ This markup <timer interval="1000">{{hours}} hour{{hoursS}}, {{minutes}}
+ minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer> will run the clock timer ticking every second
+
+
+ {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.
+
+
Stop
+
+
+
+ Timer i18n
+
+
+
+ This markup <timer interval="1000" language="fr" >{{yearUnit}} will run the clock timer ticking every second.
+
+
+ You can use a controller variable as the language attribut or a string. If a scope variable is used, the value will be watched, that is to say if your app language changes, the change will also affects the timer.
+
+
+ Based on HumanizeDuration with more than 16 languages available.
+
+
+
Spanish
+
+
Year max unit time : {{yearUnit}}
+ Hour max unit time: {{hourUnit}}
+ Second max unit time: {{secondUnit}}
+
+
+
+
French
+
+
Year max unit time : {{yearUnit}}
+ Hour max unit time: {{hourUnit}}
+ Second max unit time: {{secondUnit}}
+
+
+
Available units
+
+ secondUnit : 8 164 816 secondsminuteUnit : 136 089 minutes, 16 secondshourUnit : 18 126 hours,9 minutes, 16 secondsdayUnit : 755 days, 6 hours, 9 minutes, 16 secondsmonthUnit : 25 month, 5 days, 6 hours, 9 minutes, 16 secondsyearUnit : 2 years, 1 month, 5 days, 6 hours, 9 minutes, 16 seconds
+
+
+
+ Timer with leading zero
+
+
+
+ This markup <timer interval="1000">{{hhours}} hour{{hhoursS}}, {{mminutes}}
+ minute{{minutesS}}, {{sseconds}} second{{secondsS}}.</timer> will run the clock timer ticking every second with an additional zero at the beginning if unit is smaller than 10
+
+
+ {{hhours}} hour{{hoursS}}, {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}
+
+
Stop
+
+
+
+ Timer initialised with some predefined start time.
+
+
+
+ Following is the timer clock setting for the days, hours, minutes & seconds elapsed since January 1, 2013 (GMT-6)
+
(01 Jan 2013 06:00:00 GMT = 1357020000000 milliseconds)
+
<timer start-time="1357020000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
+
+ {{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.
+
+
Stop
+
+
+
+ Timer initialised with some predefined end time.
+
+
+
+ Following is the countdown timer setting for the days, hours, minutes & seconds to January 1, 2016 (GMT-6)
+
(01 Jan 2016 06:00:00 GMT = 1451628000000 milliseconds)
+
<timer end-time="1451628000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
+
+ {{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.
+
+
+
+
+ Progressbar Timer
+
+
+
+ Timer directive along with Twitter Bootstrap's Progressbar will set the timer
+ on Progressbar control.
+
+ <timer countdown="30" interval="1000"><div class="progress
+ progress-striped active {{displayProgressActive}}"style="height: 30px;">
+
+
+ Remaining time : {{countdown}} second{{secondsS}} ({{progressBar}}%). Activity? {{displayProgressActive}}
+
+
+ <div class="bar" style="min-width: 2em;width: {{progressBar}}%;"></div>
+
+
+ </div></timer>
+
+
+
+
+ Remaining time : {{countdown}} second{{secondsS}} ({{progressBar}}%). Activity? {{displayProgressActive}}
+
+
+ {{ progressBar }}%
+
+
+
+
+
+ <timer end-time="1451628000000" interval="1000"><div class="progress
+ progress-striped active {{displayProgressActive}}"style="height: 30px;">
+
+
+ <div class="bar" style="min-width: 2em;width: {{progressBar}}%;"></div>
+
+
+ </div></timer>
+
+
+
+ ({{progressBar}}%). Progress bar activity : {{displayProgressActive}}
+
+
+
+
Start
+
Stop
+
+
+
+ Countdown Timer
+
+
+
+ The countdown timer <timer interval="1000" countdown="100">{{countdown}}</timer>
+ will start its countdown from 100 until it reaches 0 by ticking every second
+
+
+ {{countdown}}
+
+
Add 10 Seconds
+
+
+
+ Timer with autostart = false
+
+
+
+ Click on the start button to start the timer. <timer autostart="false" interval="1000">{{seconds}}</timer>
+
+ {{seconds}}
+
+
Start
+
+
+
+ Plural / Singular units
+
+
+
+ Two stopped countdown timers to illustrate how to handle pluralization of time units.
+
+ <timer autostart="false" countdown="90061">{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer>
+
+
+ {{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.
+
+
+ <timer autostart="false" countdown="190061">{{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer>
+
+
+ {{days}} day{{daysS}}, {{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.
+
+
+
+
+ Countdown time display according to specified max-time-unit
+
+
+
+ This markup will display countdown time in minute and seconds only. This attribute can be applied to regular clock timer as well.
+
+ <timer countdown="10041" max-time-unit="'minute'" interval="1000">{{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}</timer>
+
+
+
countdown Time with max time unit option - year
+
+ {{yyears}} year{{yearsS}}, {{mmonths}} month{{monthsS}}, {{ddays}} day{{daysS}}, {{hhours}} hour{{hoursS}}, {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}
+
+
countdown Time with max time unit option - minute
+
+ {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}
+
+
+
countdown Time with max time unit option - second
+
+ {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}
+
+
+
countdown Time without max time unit option - minute
+
+ {{ddays}} day{{daysS}}, {{hhours}} hour{{hoursS}}, {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}
+
+
+
+
+
+ Countdown Finished Callback
+
+
+
+ A countdown timer that updates a value once the callback is reached
+
+ <timer countdown="3" interval="1000" finish-callback="callbackTimer.finished()">{{seconds}} second{{secondsS}}</timer>
+
+
+
+ {{seconds}} second{{secondsS}}
+
+ Timer:
{{callbackTimer.status}}
+ Callbacks:
{{callbackTimer.callbackCount}}
+
+
+
+
+
+ Markup
+
+
+ Timer directive can be declared using following options. By default, it will display milliseconds inside
+ span tag. It can also take template string to display user-defined formats.
+
+
+
+ <timer interval="1000" />
+
+
+ <timer interval="1000">{{hours}} hours, {{minutes}} minutes,
+ {{seconds}} seconds, {{millis}} milliseconds.</timer>
+
+ Attributes
+
+
+
+
+ Name
+
+
+ Required
+
+
+ Default value
+
+
+
+
+
+
+ interval
+
+
+ false
+
+
+ 1 millisecond
+
+
+
+
+ autostartFormerly called 'auto-start'. Please see this issue
+
+
+ false
+
+
+ true
+
+
+
+
+ countdown
+
+
+ false
+
+
+
+
+
+
+ start-time
+
+
+ false
+
+ starts the timer with predefined time (in milliseconds).
+
+
+
+
+ end-time
+
+
+ false
+
+ Sets the countdown based on predefined end time (in milliseconds).
+
+
+
+
+ max-time-unit
+
+
+ false
+
+ no default value. But you can give value, 'minute', 'second', or 'hour'.
+
+
+
+
+ language
+
+
+ false
+
+ 'en' for English. Please see supported languages .
+
+
+
+
+
+ Methods
+
+
+ Following DOM methods can be invoked to timer . Append to timer- for scope based
+ events when calling from AngularJS controllers.
+
+
+
+
+ Method name
+
+
+ Description
+
+
+
+
+
+
+ start
+
+
+ Starts the timer
+
+
+
+
+ stop
+
+
+ Stops the timer
+
+
+
+
+ clear
+
+
+ Same as stop . But, without the event being triggered
+
+
+
+
+ resume
+
+
+ Resumes the timer. Will NOT reset the start time
+
+
+
+
+ addCDSeconds
+
+
+ Add seconds to running countdown
+
+
+
+
+
+ Events
+
+
+
+
+
+ Event name
+
+
+ Description
+
+
+
+
+
+
+ timer-tick
+
+
+ Tick event that gets emitted for every timer tick for specified interval. Please refer to Polling Timer
+ example for its usage.
+
+
+
+
+ timer-stopped
+
+
+ Tick event that gets emitted when the timer stops. Please refer to Single Timer
+ example for its usage.
+
+
+
+
+
+
+
+ Install using Bower
+
+ bower install angular-timer
+
+
+
+
+ Contributions welcome!
+
+
+ We welcome any or all kinds of contributions! Please submit pull requests or create issues to contribute to this
+ project :)
+
+
+
+ © Siddique Hameed 2013
+
+
+
+
diff --git a/dist/navbar.html b/dist/navbar.html
new file mode 100644
index 0000000..d46e31e
--- /dev/null
+++ b/dist/navbar.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
diff --git a/examples.html b/examples.html
index e0d4732..e95664c 100644
--- a/examples.html
+++ b/examples.html
@@ -4,15 +4,12 @@
Angular Timer, a simple, inter-operable AngularJS directive
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
@@ -293,8 +290,5 @@
Plain JavaScript
