update progressBar

Author: Paul Leclercq

app/js/_timer.js

@@ -271,15 +271,6 @@ var timerModule = angular.module('timer', [])
             $scope.millis = $scope.countdown * 1000;
           }
 
-          if(typeTimer !== null){
-            //calculate progress bar
-            $scope.progressBar = progressBarService.calculateProgressBar($scope.startTime, $scope.millis, $scope.endTime, $scope.countdownattr);
-
-            if($scope.progressBar === 100){
-              $scope.displayProgressActive = ''; //No more Bootstrap active effect
-            }
-          }
-
           if ($scope.millis < 0) {
             $scope.stop();
             $scope.millis = 0;
@@ -308,6 +299,15 @@ var timerModule = angular.module('timer', [])
               $scope.$eval($scope.finishCallback);
             }
           }
+
+          if(typeTimer !== null){
+            //calculate progress bar
+            $scope.progressBar = progressBarService.calculateProgressBar($scope.startTime, $scope.millis, $scope.endTime, $scope.countdownattr);
+
+            if($scope.progressBar === 100){
+              $scope.displayProgressActive = ''; //No more Bootstrap active effect
+            }
+          }
         };
 
         if ($scope.autoStart === undefined || $scope.autoStart === true) {

app/js/progressBarService.js

@@ -32,11 +32,6 @@ app.factory('progressBarService', function() {
       displayProgressBar = remainingTime * 100 / coutdown;
     }
 
-    if(typeof coutdown !== 'undefined') {
-      console.log("$scope.countdownattr", coutdown);
-      console.log("$scope.progressBar", displayProgressBar);
-      console.log("$scope.remainingTime", remainingTime);
-    }
     displayProgressBar = 100 - displayProgressBar; //To have 0 to 100 and not 100 to 0
     displayProgressBar = Math.round(displayProgressBar * 10) / 10; //learn more why : http://stackoverflow.com/questions/588004/is-floating-point-math-broken
 

index.html

@@ -177,13 +177,15 @@ <h3>
                 on Progressbar control.</p>
             <code ng-non-bindable="">
                 &lt;timer countdown=&quot;100&quot; interval=&quot;1000&quot;&gt;&lt;div class=&quot;progress
-                progress-striped active {{displayProgressActive}}&quot;style="height: 30px;"&gt; &lt;div class=&quot;bar&quot; style=&quot;min-width: 2em;width: {{progressBar}}%;&quot;&gt;&lt;/div&gt;
+                progress-striped active {{displayProgressActive}}&quot;style="height: 30px;"&gt;
+                Remaining time : {{countdown}} second{{secondsS}} ({{progressBar}}%). Activity? {{displayProgressActive}}
+                &lt;div class=&quot;bar&quot; style=&quot;min-width: 2em;width: {{progressBar}}%;&quot;&gt;&lt;/div&gt;
                 &lt;/div&gt;&lt;/timer&gt;
             </code>
 
             <h3>
-                <timer interval="1000" countdown="30">
-                    Remaining time : {{countdown}}
+                <timer id="countdown" interval="1000" countdown="30">
+                    Remaining time : {{countdown}} second{{secondsS}} ({{progressBar}}%). Activity? {{displayProgressActive}}
                     <div class="progress progress-striped {{displayProgressActive}}" style="height: 30px;">
                         <div class="bar" style="min-width: 2em; height: 30px; width: {{progressBar}}%;">
                             {{ progressBar }}%
@@ -199,6 +201,7 @@ <h3>
             </code>
             <h3>
                 <timer interval="1000" end-time="1451628000000">
+                    ({{progressBar}}%). Progress bar activity : {{displayProgressActive}}
                     <div class="progress progress-striped {{displayProgressActive}}" style="height: 30px;">
                         <div class="bar" style="min-width: 2em; width: {{progressBar}}%;">
                             {{ progressBar }}%</div>