Skip to content

Instantly share code, notes, and snippets.

@wallacemaxters

wallacemaxters/example.html

Last active April 25, 2017 20:13
Show Gist options
  • Save wallacemaxters/e1bbbeaad7f5ce4efe5304d7f6a7c45c to your computer and use it in GitHub Desktop.
Save wallacemaxters/e1bbbeaad7f5ce4efe5304d7f6a7c45c to your computer and use it in GitHub Desktop.
Download ZIP
Simple countdown written for angularJS
Raw
example.html
<!DOCTYPE html>
<html>
<head>
<title>Countdown Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="wm-countdown.js"></script>
<script>
angular.module('app', ['wm.countdown'])
.controller('TimeoutController', function ($scope, Countdown) {
$scope.defaultTimeoutValue = 10;
$scope.startTimeout = function () {
$scope.countdown = new Countdown($scope.defaultTimeoutValue);
$scope.countdown.start();
$scope.countdown.result.then(function success () {
$scope.completed = true;
}, function reject(data) {
console.log(data);
}, function notify (data) {
console.log(data)
})
};
})
</script>
</head>
<body ng-app="app">
<main class="container-fluid">
<div ng-controller="TimeoutController">
<div class="form-group">
<h4>Timeout Controls</h4>
<div class="input-group">
<input type="number" min="3" ng-model="defaultTimeoutValue" class='form-control'>
<div class="input-group-btn">
<button ng-click="startTimeout(defaultTimeoutValue)" class="btn btn-primary">
{{ defaultTimeoutValue }} timeout
</button>
<button ng-click="countdown[countdown.isPending() ? 'pause' : 'start']()" ng-disabled="!countdown.isStarted()" class='btn btn-default'>
{{ countdown.isPending() ? "Pausar" : "Continuar" }}
</button>
<button ng-disabled='!countdown.isBlocked()' ng-click='countdown.cancel()' class='btn btn-danger'>
Cancelar
</button>
</div>
</div>
</div>
<div style="font-size: 40px; font-family: Arial;">
{{ countdown.currentValue() }}
</div>
<p ng-if="completed" class='alert alert-success'>
Countdown concluído
</p>
<div class="help-block">
{{ countdown.$$state }}
</div>
</div>
</main>
</body>
</html>
Raw
wm-countdown.js
angular.module('wm.countdown', []).service('Countdown', ['$interval', '$q', function($interval, $q) {
/**
* The Countdown Object
* @param {Number} initialValue An initial value for countdown
* @param {Number=1000} milliseconds The interval for countdown in milliseconds
*/
function Countdown(initialValue, milliseconds) {
if (! angular.isNumber(initialValue)) {
throw Error("argument 'initialValue' #1 of Countdown excepts type Number");
}
milliseconds = milliseconds || 1000;
if (! angular.isNumber(milliseconds)) {
throw Error("argument 'milliseconds' #2 of Countdown excepts type Number");
}
this.$$initialValue = initialValue;
this.$$currentValue = initialValue;
this.$$milliseconds = milliseconds;
this.$$interval = null;
this.$$state = 'initialized';
this.$$deferred = $q.defer();
this.result = this.$$deferred.promise;
};
var proto = Countdown.prototype;
/**
* Start the countdown
*
* @return {Countdown}
*/
proto.start = function() {
var that = this;
if (that.isBlocked()) return;
that.$$state = 'pending';
that.$$interval = $interval(function() {
that.$$currentValue -= 1;
if (that.$$currentValue === 0) {
that.$$clearInterval();
that.$$state = 'completed';
return that.$$deferred.resolve();
}
that.$$notify();
}, that.$$milliseconds);
return this;
};
/**
* Check if "pause" method was called
*
* @return {Boolean}
*/
proto.isPaused = function() {
return this.$$state === 'paused';
};
/**
* Check if "start" method was called
*
* @return {Boolean}
*/
proto.isStarted = function() {
return this.$$state !== 'initialized';
};
/**
* Checks if interval is running
*
* @return {Boolean}
*/
proto.isPending = function() {
return this.$$state === 'pending';
};
/**
* Check if "cancel" method was called
*
* @return {Boolean}
*/
proto.isCanceled = function() {
return this.$$state === 'canceled';
};
/**
* Check if countdown is completed
*
* @return {Boolean} [description]
*/
proto.isCompleted = function () {
return this.$$state === 'completed';
};
proto.isBlocked = function () {
return ['completed', 'canceled', 'pending'].indexOf(this.$$state) >= 0;
};
/**
* Pause the interval. The countdown is frozen at the current position
*
* @return {Countdown}
*/
proto.pause = function() {
this.$$state = 'paused';
this.$$clearInterval().$$notify();
return this;
};
/**
* Cancel the interval. The countdown is set to initial value
*
* @return {Countdown}
*/
proto.cancel = function() {
this.$$clearInterval();
this.$$state = 'canceled';
this.$$deferred.reject({count: this.$$currentValue, state: this.$$state});
return this;
};
/**
* Gets the current value of Countdown
*
* @return {Number}
*/
proto.currentValue = function() {
return this.$$currentValue;
};
/**
* Interval notify shortcut
* @return {Countdown}
*/
proto.$$notify = function () {
this.$$deferred.notify({
counter: this.$$currentValue,
state: this.$$state,
paused: this.isPaused(),
});
return this;
};
/**
* shortcut to clearInteraval
*
* @return {Countdown} [description]
*/
proto.$$clearInterval = function () {
$interval.cancel(this.$$interval);
this.$$interval = null;
return this;
};
return Countdown;
}]);
Raw
wm-countdown.min.js
angular.module("wm.countdown",[]).service("Countdown",["$interval","$q",function(d,a){function b(e,f){if(!angular.isNumber(e)){throw Error("argument 'initialValue' #1 of Countdown excepts type Number");
}f=f||1000;if(!angular.isNumber(f)){throw Error("argument 'milliseconds' #2 of Countdown excepts type Number");}this.$$initialValue=e;this.$$currentValue=e;
this.$$milliseconds=f;this.$$interval=null;this.$$state="initialized";this.$$deferred=a.defer();this.result=this.$$deferred.promise;}var c=b.prototype;
c.start=function(){var e=this;if(e.isBlocked()){return;}e.$$state="pending";e.$$interval=d(function(){e.$$currentValue-=1;if(e.$$currentValue===0){e.$$clearInterval();
e.$$state="completed";return e.$$deferred.resolve();}e.$$notify();},e.$$milliseconds);return this;};c.isPaused=function(){return this.$$state==="paused";
};c.isStarted=function(){return this.$$state!=="initialized";};c.isPending=function(){return this.$$state==="pending";};c.isCanceled=function(){return this.$$state==="canceled";
};c.isCompleted=function(){return this.$$state==="completed";};c.isBlocked=function(){return["completed","canceled","pending"].indexOf(this.$$state)>=0;
};c.pause=function(){this.$$state="paused";this.$$clearInterval().$$notify();return this;};c.cancel=function(){this.$$clearInterval();this.$$state="canceled";
this.$$deferred.reject({count:this.$$currentValue,state:this.$$state});return this;};c.currentValue=function(){return this.$$currentValue;};c.$$notify=function(){this.$$deferred.notify({counter:this.$$currentValue,state:this.$$state,paused:this.isPaused(),});
return this;};c.$$clearInterval=function(){d.cancel(this.$$interval);this.$$interval=null;return this;};return b;}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment