countdown feature

Author: siddii

app/js/timer.js

@@ -3,14 +3,18 @@ angular.module('timer', [])
     return  {
       restrict: 'E',
       replace: false,
-      scope: {interval: '=interval'},
+      scope: {
+          interval: '=interval',
+          countdownattr: '=countdown'
+      },
       controller: function ($scope, $element) {
         if ($element.html().trim().length === 0) {
           $element.append($compile('<span>{{millis}}</span>')($scope));
         }
 
         $scope.startTime = null;
         $scope.timeoutId = null;
+        $scope.countdown = $scope.countdownattr && parseInt($scope.countdownattr, 10) > 0 ? parseInt($scope.countdownattr, 10) : undefined;
 
         $scope.$on('timer-start', function (){
           $scope.start();
@@ -44,6 +48,12 @@ angular.module('timer', [])
         });
 
         var tick = function (){
+            if ($scope.countdown > 0) {
+                $scope.countdown--;
+            }
+            else if ($scope.countdown <= 0) {
+                $scope.stop();
+            }
             $scope.millis = new Date() - $scope.startTime;
             $scope.seconds = Math.floor(($scope.millis / 1000) % 60) ;
             $scope.minutes = Math.floor((($scope.millis / (1000*60)) % 60));

index.html

@@ -81,6 +81,7 @@
                             <li><a href="index.html#basic-timer">Basic Example</a></li>
                             <li><a href="index.html#clock-timer">Clock Timer</a></li>
                             <li><a href="index.html#progressbar-timer">Progressbar Timer</a></li>
+                            <li><a href="index.html#countdown-timer">Countdown Timer</a></li>
                         </ul>
                     </li>
                     <li ng-non-bindable><a href="index.html#markup">&lt;timer/&gt;</a></li>
@@ -150,6 +151,15 @@ <h3><timer><div class="progress progress-striped active">
         </div>
     </section>
 
+    <section id="countdown-timer">
+        <h3>Countdown Timer</h3>
+        <div class="bs-docs-example">
+            <p>The countdown timer <code ng-non-bindable>&lt;timer interval="1000" countdown="100"/&gt;</code> will start its countdown from 100 until it reaches 0 by ticking every second</p>
+            <h3><timer interval="1000" countdown="100">{{countdown}}</timer></h3>
+        </div>
+    </section>
+
+
     <section id="markup">
         <h3>Markup</h3>
         <p>Timer directive can be declared using following options. By default, it will display milliseconds inside <code>span</code> tag.
@@ -189,6 +199,17 @@ <h4>Attributes</h4>
                     1 millisecond
                 </td>
             </tr>
+            <tr>
+                <td>
+                    countdown
+                </td>
+                <td>
+                    false
+                </td>
+                <td>
+
+                </td>
+            </tr>
         </table>
 
 
@@ -204,15 +225,15 @@ <h4>Methods</h4>
             </thead>
             <tr>
                 <td>start</td>
-                <td>Triggered to start the timer. Will reset the start time</td>
+                <td>Starts the timer</td>
             </tr>
             <tr>
                 <td>stop</td>
-                <td>Triggered to stop the timer.</td>
+                <td>Stops the timer</td>
             </tr>
             <tr>
                 <td>resume</td>
-                <td>Triggered to resume the timer. Will NOT reset the start time</td>
+                <td>Resumes the timer. Will NOT reset the start time</td>
             </tr>
         </table>
     </section>