progressBarService added and logic inside _timer.js

Author: Paul Leclercq

app/js/_timer.js

@@ -13,7 +13,7 @@ var timerModule = angular.module('timer', [])
         language: '@?',
         maxTimeUnit: '='
       },
-      controller: ['$scope', '$element', '$attrs', '$timeout', 'I18nService', '$interpolate', function ($scope, $element, $attrs, $timeout, I18nService, $interpolate) {
+      controller: ['$scope', '$element', '$attrs', '$timeout', 'I18nService', '$interpolate', 'progressBarService', function ($scope, $element, $attrs, $timeout, I18nService, $interpolate, progressBarService) {
 
         // Checking for trim function since IE8 doesn't have it
         // If not a function, create tirm with RegEx to mimic native trim
@@ -40,6 +40,10 @@ var timerModule = angular.module('timer', [])
         var i18nService = new I18nService();
         i18nService.init($scope.language);
 
+        //progress bar
+        $scope.displayProgressBar = 0;
+        $scope.displayProgressActive = 'active'; //Bootstrap active effect for progress bar
+
         if ($element.html().trim().length === 0) {
           $element.append($compile('<span>' + $interpolate.startSymbol() + 'millis' + $interpolate.endSymbol() + '</span>')($scope));
         } else {
@@ -252,19 +256,30 @@ var timerModule = angular.module('timer', [])
         calculateTimeUnits();
 
         var tick = function tick() {
-
+          var typeTimer = null; // countdown or endTimeAttr
           $scope.millis = moment().diff($scope.startTime);
           var adjustment = $scope.millis % 1000;
 
           if ($scope.endTimeAttr) {
+            typeTimer = $scope.endTimeAttr;
             $scope.millis = moment($scope.endTime).diff(moment());
             adjustment = $scope.interval - $scope.millis % 1000;
           }
 
           if ($scope.countdownattr) {
+            typeTimer = $scope.countdownattr;
             $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;

app/js/progressBarService.js

@@ -0,0 +1,51 @@
+var app = angular.module('timer');
+
+app.factory('progressBarService', function() {
+
+  var ProgressBarService = function() {};
+
+  /**
+   * calculate the remaining time in a progress bar in percentage
+   * @param {momentjs} startValue in seconds
+   * @param {integer} currentCountdown, where are we in the countdown
+   * @param {integer} remainingTime, remaining milliseconds
+   * @param {integer} endTime, end time, can be undefined
+   * @param {integer} coutdown, original coutdown value, can be undefined
+   *
+   * joke : https://www.youtube.com/watch?v=gENVB6tjq_M
+   * @return {float} 0 --> 100
+   */
+  ProgressBarService.prototype.calculateProgressBar = function calculateProgressBar(startValue, remainingTime, endTimeAttr, coutdown) {
+    var displayProgressBar = 0,
+      endTimeValue,
+      initialCountdown;
+
+    remainingTime = remainingTime / 1000; //seconds
+
+
+    if(endTimeAttr !== null){
+      endTimeValue = moment(endTimeAttr);
+      initialCountdown = endTimeValue.diff(startValue, 'seconds');
+      displayProgressBar = remainingTime * 100 / initialCountdown;
+    }
+    else {
+      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
+
+    if(displayProgressBar > 100){ //security
+      displayProgressBar = 100;
+    }
+
+    return displayProgressBar;
+  };
+
+  return new ProgressBarService();
+});