Added countdown finished callback accessible from angular callback. Triggers when countdown finishes on it's own (not when it is stopped by a user). Useful if your app should take somea action when the countdown is reached.

itslenny · itslenny · commit ef7d7484d501 · 2014-04-16T16:48:00.000-07:00
diff --git a/app/js/timer.js b/app/js/timer.js
@@ -8,7 +8,8 @@ angular.module('timer', [])
         startTimeAttr: '=startTime',
         endTimeAttr: '=endTime',
         countdownattr: '=countdown',
-        autoStart: '&autoStart'
+        autoStart: '&autoStart',
+        finishCallback: '&finishCallback'
       },
       controller: ['$scope', '$element', '$attrs', '$timeout', function ($scope, $element, $attrs, $timeout) {
 
@@ -153,6 +154,7 @@ angular.module('timer', [])
             $scope.stop();
             $scope.millis = 0;
             calculateTimeUnits();
+            if($scope.finishCallback) $scope.$eval($scope.finishCallback);
             return;
           }
           calculateTimeUnits();
@@ -170,6 +172,7 @@ angular.module('timer', [])
           }
           else if ($scope.countdown <= 0) {
             $scope.stop();
+            if($scope.finishCallback) $scope.$eval($scope.finishCallback);
           }
         };
 
diff --git a/dist/angular-timer.js b/dist/angular-timer.js
@@ -1,10 +1,3 @@
-/**
- * angular-timer - v1.0.12 - 2014-03-18 4:02 PM
- * https://github.com/siddii/angular-timer
- *
- * Copyright (c) 2014 Siddique Hameed
- * Licensed MIT <https://github.com/siddii/angular-timer/blob/master/LICENSE.txt>
- */
 angular.module('timer', [])
   .directive('timer', ['$compile', function ($compile) {
     return  {
@@ -15,7 +8,8 @@ angular.module('timer', [])
         startTimeAttr: '=startTime',
         endTimeAttr: '=endTime',
         countdownattr: '=countdown',
-        autoStart: '&autoStart'
+        autoStart: '&autoStart',
+        finishCallback: '&finishCallback'
       },
       controller: ['$scope', '$element', '$attrs', '$timeout', function ($scope, $element, $attrs, $timeout) {
 
@@ -112,14 +106,12 @@ angular.module('timer', [])
             $scope.days = Math.floor((($scope.millis / (3600000)) / 24));
             $scope.daysS = $scope.days==1 ? '' : 's';
 
-
             //add leading zero if number is smaller than 10
             $scope.sseconds = $scope.seconds < 10 ? '0' + $scope.seconds : $scope.seconds;
             $scope.mminutes = $scope.minutes < 10 ? '0' + $scope.minutes : $scope.minutes;
             $scope.hhours =  $scope.hours < 10 ? '0' + $scope.hours : $scope.hours;
             $scope.ddays =  $scope.days < 10 ? '0' + $scope.days : $scope.days;
 
-
         }
         //determine initial values of time units and add AddSeconds functionality
         if ($scope.countdownattr) {
@@ -162,6 +154,7 @@ angular.module('timer', [])
             $scope.stop();
             $scope.millis = 0;
             calculateTimeUnits();
+            if($scope.finishCallback) $scope.$eval($scope.finishCallback);
             return;
           }
           calculateTimeUnits();
@@ -179,6 +172,7 @@ angular.module('timer', [])
           }
           else if ($scope.countdown <= 0) {
             $scope.stop();
+            if($scope.finishCallback) $scope.$eval($scope.finishCallback);
           }
         };
 
diff --git a/dist/angular-timer.min.js b/dist/angular-timer.min.js
diff --git a/docs/docs.js b/docs/docs.js
@@ -34,4 +34,13 @@ angular.module('timer-demo',['timer']).controller('TimerDemoController',['$scope
             }
         });
     };
+    
+    $scope.callbackTimer={};
+    $scope.callbackTimer.status='Running';
+    $scope.callbackTimer.callbackCount=0;    
+    $scope.callbackTimer.finished=function(){
+        $scope.callbackTimer.status='COMPLETE!!';
+        $scope.callbackTimer.callbackCount++;
+        $scope.$apply();
+    };
 }]);
diff --git a/index.html b/index.html
@@ -181,6 +181,26 @@ <h3 class="plural-counter">
     </div>
 </section>
 
+
+<section id="finish-callback-timer">
+    <h3>Countdown Finished Callback</h3>
+
+    <div class="bs-docs-example">
+        <p>
+            A countdown timer that updates a value once the callback is reached
+            <code ng-non-bindable="">
+            &lt;timer countdown="3" interval="1000" finish-callback="callbackTimer.finished()"&gt;{{seconds}} second{{secondsS}}&lt;/timer&gt;
+            </code>
+
+        <h3 class="counter">
+            <timer countdown="3" interval="1000" finish-callback="callbackTimer.finished()">{{seconds}} second{{secondsS}} </timer>
+        </h3>
+        Timer: <span class="timer-status">{{callbackTimer.status}}</span>
+        Callbacks: <span class="timer-callbacks">{{callbackTimer.callbackCount}}</span>
+
+    </div>
+</section>
+
 <section id="markup">
     <h3>
         Markup</h3>
diff --git a/test/e2e/scenarios.js b/test/e2e/scenarios.js
@@ -109,5 +109,17 @@ describe('Angular Timer E2E Tests', function () {
     expect(element('#clock-timer-leading-zero timer').html()).toMatch(/00 minutes,/);
     expect(element('#clock-timer-leading-zero timer').html()).toMatch(/11 seconds./);
   });
+  
+  it('Countdown finish - Should fire callback on completion', function () {
+  
+    
+    expect(element('#finish-callback-timer .timer-status').html()).toBe('Running');
+    expect(element('#finish-callback-timer .timer-callbacks').html()).toBe('0');
+    
+    sleep(5);
+    expect(element('#finish-callback-timer .timer-status').html()).toBe('COMPLETE!!');    
+    expect(element('#finish-callback-timer .timer-callbacks').html()).toBe('1');    
+    
+  });  
 
 });
