This was formally written by Pragmatic Mates - a big shout out to them. I just made it into a simple angularjs directive.
(Still a work in progress)
Check out the original demo by pragmatic mates:
- http://final-countdown.pragmaticmates.com/demo/index.html
- http://final-countdown.pragmaticmates.com/demo/data-attributes.html
- jQuery http://jquery.com
- Kinetic http://kineticjs.com
- AngularJS https://angularjs.org/
$scope.config = {
countdown_from: 10 // 10 - 9 - 8 - 7 - ...
animate_colors: false
};
// ...
$scope.$broadcast('start-count-down');
//..
// If need be...
$scope.$broadcast('stop-couunt-down');
<final-countdown config="config"></final-countdown>
var defaults = {
countdown_from: 10,
faces: [{
display: 'S',
id: 'canvas-seconds',
_class: 'clock-seconds'
}, {
display: 'M',
id: 'canvas-minutes',
_class: 'clock-minutes'
}, {
display: 'H',
id: 'canvas-hours',
_class: 'clock-hours'
}, {
display: 'D',
id: 'canvas-days',
_class: 'clock-days'
}],
selectors: {
value_seconds: '.clock-seconds .val',
canvas_seconds: 'canvas-seconds',
value_minutes: '.clock-minutes .val',
canvas_minutes: 'canvas-minutes',
value_hours: '.clock-hours .val',
canvas_hours: 'canvas-hours',
value_days: '.clock-days .val',
canvas_days: 'canvas-days'
},
seconds: {
borderColor: '#7995D5',
borderWidth: '6'
},
minutes: {
borderColor: '#ACC742',
borderWidth: '6'
},
hours: {
borderColor: '#ECEFCB',
borderWidth: '6'
},
days: {
borderColor: '#FF9900',
borderWidth: '6'
}
};
Data attributes cannot be used for now unfortunately.