forked from siddii/angular-timer
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
346 additions
and
420 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,5 @@ | ||
| # angular-timer — A simple AngularJS directive demonstrating re-usability & interoperability | ||
|
|
||
| Added intervalEvent attribute and an example | ||
|
|
||
| Added intervalEvent which broadcasts a named event for each timer on the | ||
| $rootScope every interval. | ||
|
|
||
| This allows periodic events that can be consumed, for instance, to save | ||
| a document occasionally. | ||
|
|
||
| Sample AngularJS directive | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,98 +1,82 @@ | ||
| angular.module('timer', []) | ||
| .directive('timer', function ($rootScope, $timeout, $compile) { | ||
| return { | ||
| restrict: 'E', | ||
| replace: false, | ||
| scope: { | ||
| interval: '=interval', | ||
| countdownattr: '=countdown', | ||
| intervaleventattr: '=intervalevent' | ||
| }, | ||
| controller: function ($rootScope, $scope, $element) { | ||
| if ($element.html().trim().length === 0) { | ||
| $element.append($compile('<span>{{millis}}</span>')($scope)); | ||
| } | ||
| .directive('timer', function ($timeout, $compile) { | ||
| return { | ||
| restrict: 'E', | ||
| replace: false, | ||
| 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.isRunning = false; | ||
| $scope.intervalEventCount = 0; | ||
| $scope.intervalEvent = $scope.intervaleventattr; | ||
| $scope.startTime = null; | ||
| $scope.timeoutId = null; | ||
| $scope.countdown = $scope.countdownattr && parseInt($scope.countdownattr, 10) > 0 ? parseInt($scope.countdownattr, 10) : undefined; | ||
| $scope.isRunning = false; | ||
|
|
||
| $scope.$on('timer-start', function (){ | ||
| $scope.start(); | ||
| }); | ||
| $scope.$on('timer-start', function () { | ||
| $scope.start(); | ||
| }); | ||
|
|
||
| $scope.$on('timer-resume', function (){ | ||
| $scope.resume(); | ||
| }); | ||
| $scope.$on('timer-resume', function () { | ||
| $scope.resume(); | ||
| }); | ||
|
|
||
| $scope.$on('timer-stop', function (){ | ||
| $scope.stop(); | ||
| }); | ||
|
|
||
| //example only: consume specific events in your controller | ||
| //$scope.$on('event:save', function () { | ||
| //$scope.$on('event:refreshData', function () { | ||
| $scope.$on($scope.intervalEvent, function () { | ||
| $scope.intervalEventCount++; | ||
| $scope.intervalEventName = $scope.intervalEvent | ||
| }); | ||
|
|
||
| function resetTimeout() { | ||
| if ($scope.timeoutId) { | ||
| $timeout.cancel($scope.timeoutId); | ||
| } | ||
| } | ||
| $scope.$on('timer-stop', function () { | ||
| $scope.stop(); | ||
| }); | ||
|
|
||
| $scope.start = $element[0].start = function () { | ||
| $scope.startTime = new Date(); | ||
| resetTimeout(); | ||
| tick(); | ||
| }; | ||
| function resetTimeout() { | ||
| if ($scope.timeoutId) { | ||
| $timeout.cancel($scope.timeoutId); | ||
| } | ||
| } | ||
|
|
||
| $scope.resume = $element[0].resume = function () { | ||
| resetTimeout(); | ||
| $scope.startTime = new Date() - ($scope.stoppedTime - $scope.startTime); | ||
| tick(); | ||
| }; | ||
| $scope.start = $element[0].start = function () { | ||
| $scope.startTime = new Date(); | ||
| resetTimeout(); | ||
| tick(); | ||
| }; | ||
|
|
||
| $scope.stop = $element[0].stop = function () { | ||
| $scope.stoppedTime = new Date(); | ||
| $timeout.cancel($scope.timeoutId); | ||
| $scope.timeoutId = null; | ||
| }; | ||
| $scope.resume = $element[0].resume = function () { | ||
| resetTimeout(); | ||
| $scope.startTime = new Date() - ($scope.stoppedTime - $scope.startTime); | ||
| tick(); | ||
| }; | ||
|
|
||
| $element.bind('$destroy', function () { | ||
| $timeout.cancel($scope.timeoutId); | ||
| }); | ||
| $scope.stop = $element[0].stop = function () { | ||
| $scope.stoppedTime = new Date(); | ||
| $timeout.cancel($scope.timeoutId); | ||
| $scope.timeoutId = null; | ||
| }; | ||
|
|
||
| var tick = function (){ | ||
| if ($scope.countdown > 0) { | ||
| $scope.countdown--; | ||
| } | ||
| else if ($scope.countdown <= 0) { | ||
| $scope.stop(); | ||
| } | ||
| $element.bind('$destroy', function () { | ||
| $timeout.cancel($scope.timeoutId); | ||
| }); | ||
|
|
||
| $scope.millis = new Date() - $scope.startTime; | ||
| $scope.seconds = Math.floor(($scope.millis / 1000) % 60) ; | ||
| $scope.minutes = Math.floor((($scope.millis / (1000*60)) % 60)); | ||
| $scope.hours = Math.floor((($scope.millis / (1000*60*60)) % 24)); | ||
|
|
||
| if($scope.intervalEvent != undefined) { | ||
| $rootScope.$broadcast($scope.intervalEvent); | ||
| } | ||
|
|
||
| $scope.timeoutId = $timeout(function () { | ||
| tick(); | ||
| }, $scope.interval); | ||
| var tick = function () { | ||
| if ($scope.countdown > 0) { | ||
| $scope.countdown--; | ||
| } | ||
| else if ($scope.countdown <= 0) { | ||
| $scope.stop(); | ||
| } | ||
|
|
||
| $scope.$emit('timer-tick', {timeoutId: $scope.timeoutId, millis: $scope.millis}); | ||
| }; | ||
| $scope.millis = new Date() - $scope.startTime; | ||
| $scope.seconds = Math.floor(($scope.millis / 1000) % 60); | ||
| $scope.minutes = Math.floor((($scope.millis / (1000 * 60)) % 60)); | ||
| $scope.hours = Math.floor((($scope.millis / (1000 * 60 * 60)) % 24)); | ||
| $scope.timeoutId = $timeout(function () { | ||
| tick(); | ||
| }, $scope.interval); | ||
|
|
||
| $scope.$emit('timer-tick', {timeoutId: $scope.timeoutId, millis: $scope.millis}); | ||
| }; | ||
|
|
||
| $scope.start(); | ||
| } | ||
| }; | ||
| }); | ||
| $scope.start(); | ||
| } | ||
| }; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.