Binding values with $scope.minutes = 1 to ng-bind="minutes" not working when I add scope: {finishcallback: "&"}, to my directive.
I'm trying to implement a countdown timer with Angular directives but cannot set the value of the remaining minute and second to the child span element when I define a scope function in the directive.
<time id="countdown_{{order.Id}}" ng-if="order.StatusCode == 1" countdown="{{order.RemainingTimeToPrepareOrder}}" finishcallback="vm.countdownfinished(parameter)" callbackparameter="{{order.Id}}" countdownfinished="toggle()">
<b> <span class="value" ng-bind="minutes"></span> dakika <span class="value" ng-bind="seconds">--</span> saniye</b>
</time>
And here is my directive code.
function countdown() {
return {
restrict: 'A',
scope: {
finishcallback: "&"
},
controller: function ($scope, $attrs, $timeout) {
$attrs.$observe('countdown', function (value) {
var ds = new Date();
ds.setTime(value * 1000);
$scope.days = '-';
$scope.hours = $scope.minutes = $scope.seconds = '--';
$scope.timeout = $timeout(update, 1000);
function update() {
now = +new Date();
$scope.delta = Math.round((ds - now) / 1000);
if ($scope.delta >= 0) {
$timeout(update, 1000);
} else if ($attrs.countdownfinished) {
$scope.$apply($attrs.countdownfinished);
}
}
});
},
link: function ($scope, $element, $attrs) {
$scope.$watch('delta', function (delta) {
if (typeof delta === 'undefined') return;
if (delta < 0) {
delta = 0;
}
$scope.days = Math.floor(delta / 86400);
$scope.hours = forceTwoDigits(Math.floor(delta / 3600) % 24);
$scope.minutes = forceTwoDigits(Math.floor(delta / 60) % 60);
$scope.seconds = forceTwoDigits(delta % 60);
});
$scope.toggle = function () {
$scope.finishcallback({ parameter: $attrs.callbackparameter });
}
function forceTwoDigits(num) {
return String(num < 10 ? '0' + num : num);
}
}
}
}
All the functionality is working until I add finishcallback: "&" scope variable in my directive. I added this to enable custom function calls when the countdown finished. But when I add this my assignments like $scope.minutes stopped to change values in my spans.
How do I change span values dynamically even I define a scope in my directive ?
I'd recommend to just use a template:
function countdown($timeout) {
return {
restrict: 'A',
scope: {
finishcallback: "&"
},
template: `<b> <span class="value" ng-bind="minutes"></span> dakika <span class="value" ng-bind="seconds">--</span> saniye</b>`,
controller: function($scope, $attrs) {
$attrs.$observe('countdown', function(value) {
var ds = new Date();
ds.setTime(value * 1000);
$scope.days = '-';
$scope.hours = $scope.minutes = $scope.seconds = '--';
$scope.timeout = $timeout(update, 1000);
function update() {
now = +new Date();
$scope.delta = Math.round((ds - now) / 1000);
if ($scope.delta >= 0) {
$timeout(update, 1000);
} else if ($attrs.countdownfinished) {
$scope.$apply($attrs.countdownfinished);
}
}
});
},
link: function($scope, $element, $attrs) {
$scope.$watch('delta', function(delta) {
if (typeof delta === 'undefined') return;
if (delta < 0) {
delta = 0;
}
$scope.days = Math.floor(delta / 86400);
$scope.hours = forceTwoDigits(Math.floor(delta / 3600) % 24);
$scope.minutes = forceTwoDigits(Math.floor(delta / 60) % 60);
$scope.seconds = forceTwoDigits(delta % 60);
});
$scope.toggle = function() {
$scope.finishcallback({
parameter: $attrs.callbackparameter
});
}
function forceTwoDigits(num) {
return String(num < 10 ? '0' + num : num);
}
}
}
}
angular.module('app', [])
.controller('ctrl', function($scope, $interval) {
$scope.order = {
Id: 1,
StatusCode: 1,
RemainingTimeToPrepareOrder: Date.now() + 5 * 60 * 1000,
};
$scope.countdownfinished = function(parameter) {
console.log(parameter);
}
$scope.toggle = function() {
console.log("Toggle");
}
$interval(function() {
$scope.order.RemainingTimeToPrepareOrder -= 1000;
}, 1000);
})
.directive('countdown', countdown);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<time id="countdown_{{order.Id}}" ng-if="order.StatusCode == 1" countdown="{{order.RemainingTimeToPrepareOrder}}" finishcallback="countdownfinished(parameter)" callbackparameter="{{order.Id}}" countdownfinished="toggle()">
</time>
</div>
Related
I have two timepicker inputs that has a total that I need to calculate.
The code in my directive works fine but the problem comes when I have more than one of the directives on the page.
I tried setting the watches in my directive's controller or in the link function but the watches are only working on the last instantiated directive.
What am I possibly missing?
Edit: Sorry wrong plunkr
Here's a plunkr: https://plnkr.co/edit/uC38NIbYsy9Vv3S38xHh?p=preview
Directive code:
myApp.directive('myTimepicker', function() {
return {
restrict: 'A',
scope: {
tmodel: '=',
ttitle: '#'
},
link: function(scope, $element, attr) {
console.log(scope);
scope.tform = scope.tmodel;
scope.$watch('tform.on', function(newValue, oldValue) {
// console.log("calc on"+scope.ttitle);
_calctotal();
});
scope.$watch('tform.off', function(newValue, oldValue) {
// console.log("calc off");
_calctotal();
});
_calctotal = function() {
var on = new Date(scope.tform.on);
var off = new Date(scope.tform.off);
var total = off.getHours() - on.getHours();
var totalmin = off.getMinutes() - on.getMinutes();
if (totalmin < 0) {
total = total - 1;
totalmin = totalmin * -1;
}
if (total < 0) {
total = "Invalid";
totalmin = "";
}
if (totalmin < 10) totalmin = "0" + totalmin;
scope.tform.total = total + ":" + totalmin;
};
_calctotal();
},
controller: function($scope) {
// console.log($scope);
},
templateUrl: "mytimepicker.html"
}
});
Try using ng-change instead of $watch, it's cleaner and easier to follow.
Its with your _calc function declaration without a var.
link: function(scope, $element, attr) {
console.log(scope);
scope.tform = scope.tmodel;
var _calctotal = function() {
var on = new Date(scope.tform.on);
var off = new Date(scope.tform.off);
var total = off.getHours() - on.getHours();
var totalmin = off.getMinutes() - on.getMinutes();
if (totalmin < 0) {
total = total - 1;
totalmin = totalmin * -1;
}
if (total < 0) {
total = "Invalid";
totalmin = "";
}
if (totalmin < 10) totalmin = "0" + totalmin;
scope.tform.total = total + ":" + totalmin;
};
scope.$watch('tform.on', function(newValue, oldValue) {
// console.log("calc on"+scope.ttitle);
_calctotal();
});
scope.$watch('tform.off', function(newValue, oldValue) {
// console.log("calc off");
_calctotal();
});
_calctotal();
},
Working sample on Plnkr
I am a JavaScript newbie. I am using a template which has the code below. It shows a countdown timer. I can't understand why it does not work. I have provided it the value of 90 days. Please guide. Thanks
// Generated by CoffeeScript 1.4.0
/*
countdown is a simple jquery plugin for countdowns
Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
and GPL-3.0 (http://opensource.org/licenses/GPL-3.0) licenses.
#source: http://github.com/rendro/countdown/
#autor: Robert Fleischmann
#version: 1.0.1
*/
(function () {
(function ($) {
$.countdown = function (el, options) {
var getDateData,
_this = this;
this.el = el;
this.$el = $(el);
this.$el.data("countdown", this);
this.init = function () {
_this.options = $.extend({}, $.countdown.defaultOptions, options);
if (_this.options.refresh) {
_this.interval = setInterval(function () {
return _this.render();
}, _this.options.refresh);
}
_this.render();
return _this;
};
getDateData = function (endDate) {
var dateData, diff;
endDate = Date.parse($.isPlainObject(_this.options.date) ? _this.options.date : new Date(_this.options.date));
diff = (endDate - Date.parse(new Date)) / 1000;
if (diff <= 0) {
diff = 0;
if (_this.interval) {
_this.stop();
}
_this.options.onEnd.apply(_this);
}
dateData = {
years: 90,
days: 90,
hours: 0,
min: 0,
sec: 90,
millisec: 0
};
if (diff >= (365.25 * 86400)) {
dateData.years = Math.floor(diff / (365.25 * 86400));
diff -= dateData.years * 365.25 * 86400;
}
if (diff >= 86400) {
dateData.days = Math.floor(diff / 86400);
diff -= dateData.days * 86400;
}
if (diff >= 3600) {
dateData.hours = Math.floor(diff / 3600);
diff -= dateData.hours * 3600;
}
if (diff >= 60) {
dateData.min = Math.floor(diff / 60);
diff -= dateData.min * 60;
}
dateData.sec = diff;
return dateData;
};
this.leadingZeros = function (num, length) {
if (length == null) {
length = 2;
}
num = String(num);
while (num.length < length) {
num = "0" + num;
}
return num;
};
this.update = function (newDate) {
_this.options.date = newDate;
return _this;
};
this.render = function () {
_this.options.render.apply(_this, [getDateData(_this.options.date)]);
return _this;
};
this.stop = function () {
if (_this.interval) {
clearInterval(_this.interval);
}
_this.interval = null;
return _this;
};
this.start = function (refresh) {
if (refresh == null) {
refresh = _this.options.refresh || $.countdown.defaultOptions.refresh;
}
if (_this.interval) {
clearInterval(_this.interval);
}
_this.render();
_this.options.refresh = refresh;
_this.interval = setInterval(function () {
return _this.render();
}, _this.options.refresh);
return _this;
};
return this.init();
};
$.countdown.defaultOptions = {
date: "June 7, 2087 15:03:25",
refresh: 1000,
onEnd: $.noop,
render: function (date) {
return $(this.el).html("" + date.years + " years, " + date.days + " days, " + (this.leadingZeros(date.hours)) + " hours, " + (this.leadingZeros(date.min)) + " min and " + (this.leadingZeros(date.sec)) + " sec");
}
};
$.fn.countdown = function (options) {
return $.each(this, function (i, el) {
var $el;
$el = $(el);
if (!$el.data('countdown')) {
return $el.data('countdown', new $.countdown(el, options));
}
});
};
return void 0;
})(jQuery);
}).call(this);
Just change
endDate = Date.parse($.isPlainObject(_this.options.date)
? _this.options.date : new Date(_this.options.date));
to
endDate = Date.parse($.isPlainObject(_this.options.date)
? _this.options.date : new Date(year,month,date));
example:
endDate = Date.parse($.isPlainObject(_this.options.date)
? _this.options.date : new Date(2017,02,15));
I have some extremely weird interference between two angular functions in my application that I cannot explain. The end result of the problem causes this to happen:
I have a countdown directive embedded in one of my pages which is also the domain of an angular controller. Here is the countdown directive:
(function() {
var app = angular.module('app');
app.directive('countdown', ['$interval', function($interval) {
return {
restrict: 'E',
scope: {
specificity: '=',
countdownTo: '=',
callback: '&?'
},
link: function($scope, elem, attrs) {
$scope.isLaunchExact = ($scope.specificity == 6 || $scope.specificity == 7);
$scope.$watch('specificity', function(newValue) {
$scope.isLaunchExact = (newValue == 6 || newValue == 7);
});
var countdownProcessor = function() {
var launchUnixSeconds = $scope.launchUnixSeconds;
var currentUnixSeconds = Math.floor(Date.now() / 1000);
if (launchUnixSeconds >= currentUnixSeconds) {
$scope.secondsAwayFromLaunch = launchUnixSeconds - currentUnixSeconds;
var secondsBetween = $scope.secondsAwayFromLaunch;
// Calculate the number of days, hours, minutes, seconds
$scope.days = Math.floor(secondsBetween / (60 * 60 * 24));
secondsBetween -= $scope.days * 60 * 60 * 24;
$scope.hours = Math.floor(secondsBetween / (60 * 60));
secondsBetween -= $scope.hours * 60 * 60;
$scope.minutes = Math.floor(secondsBetween / 60);
secondsBetween -= $scope.minutes * 60;
$scope.seconds = secondsBetween;
$scope.daysText = $scope.days == 1 ? 'Day' : 'Days';
$scope.hoursText = $scope.hours == 1 ? 'Hour' : 'Hours';
$scope.minutesText = $scope.minutes == 1 ? 'Minute' : 'Minutes';
$scope.secondsText = $scope.seconds == 1 ? 'Second' : 'Seconds';
} else {
}
if (attrs.callback) {
$scope.callback();
}
};
// Countdown here
if ($scope.isLaunchExact) {
$scope.launchUnixSeconds = moment($scope.countdownTo).unix();
$interval(countdownProcessor, 1000);
} else {
$scope.countdownText = $scope.countdownTo;
}
},
templateUrl: '/js/templates/countdown.html'
}
}]);
})();
Here is the Angular controller that is being interfered with:
(function() {
var app = angular.module('app', []);
//app.value('duScrollDuration', 1000);
app.controller("homeController", ['$scope', 'Statistic', function($scope, Statistic) {
$scope.statistics = [];
$scope.activeStatistic = false;
$scope.goToClickedStatistic = function(statisticType) {
history.replaceState('', document.title, '#' + statisticType);
$scope.activeStatistic = statisticType;
};
$scope.goToNeighborStatistic = function(index) {
if (index >= 0 && index < $scope.statistics.length) {
var stat = $scope.statistics[index];
history.replaceState('', document.title, '#' + stat.camelCaseType); // WhyIsThisFlashing
$scope.activeStatistic = stat.camelCaseType;
return stat.camelCaseType;
} else {
$scope.goHome();
}
};
$scope.goToFirstStatistic = function() {
};
$scope.goHome = function() {
history.replaceState('', document.title, window.location.pathname);
$scope.activeStatistic = false;
return 'home';
};
/*$window.on('scroll',
$.debounce(100, function() {
$('div[data-stat]').fracs('max', 'visible', function(best) {
$scope.activeStatistic($(best).data('stat'));
});
})
);*/
(function() {
laravel.statistics.forEach(function(statistic) {
$scope.statistics.push(new Statistic(statistic));
});
if (window.location.hash) {
$scope.activeStatistic = window.location.hash.substring(1);
}
})();
}]);
app.factory('Statistic', function() {
return function(statistic) {
var self = {};
self.changeSubstatistic = function(newSubstatistic) {
self.activeSubstatistic = newSubstatistic;
};
statistic.forEach(function(substatistic) {
if (!self.substatistics) {
self.substatistics = [];
self.activeSubstatistic = substatistic;
self.type = substatistic.type;
self.camelCaseType = self.type.replace(" ", "");
}
self.substatistics.push(substatistic);
});
return self;
}
});
})();
Each time my countdown directive's countdownProcessor function present in the $interval is run, goToNeighborStatistic in my angular controller is, somehow, called. I don't have a clue why.
If I step through my countdown directive, after stepping through the countdownProcessor function, an "Anonymous Script" named SCRIPT0 is called with the following contents:
"use strict";
var fn=function(s,l,a,i){var v0,v1,v2,v3=l&&('goToNeighborStatistic' in l),v4,v5,v6=l&&('\u0024index' in l);v2=v3?l:s;if(!(v3)){if(s){v1=s.goToNeighborStatistic;}}else{v1=l.goToNeighborStatistic;}if(v1!=null){ensureSafeFunction(v1,text);if(!(v6)){if(s){v5=s.$index;}}else{v5=l.$index;}v4=ifDefined(v5,0)-ifDefined(1,0);ensureSafeObject(v2,text);v0=ensureSafeObject(v2.goToNeighborStatistic(ensureSafeObject(ifDefined(v5,0)-ifDefined(1,0),text)),text);}else{v0=undefined;}return v0;};return fn;
Why is "goToNeighborStatistic" present in this? Why is this script even present? From there, goToNeighborStatistic() runs, at which point, the countdown is called again and everything repeats. What's going on here?
EDIT:
In Chrome, stepping through everything produces different results. At the end of the countdownProcessor function, stepping into produces this:
Am having a stopwatch with different titles, when I start a watch it runs and after 10 seconds it pops an alert.I can filter the watch on top of title, when I reset the filter the running watch is not displaying the time but it pops an alert at 10 seconds. Why the binding is not working after filter?What am doing wrong here?How can I fix it?
Find the plunker here Complete code and HTML is in plunker.
Clicking play will start the watch, pause will pause it and stop - stops the watch.
< script type = "text/javascript" > angular.module('App', [])
.controller('MainCtrl', function ($scope, $interval) {
$interval(function () {
$scope.sharedTime = new Date();
}, 500);
})
.directive('stopwatch', function () {
return {
restrict: 'AE',
templateUrl: 'stopwatch.html',
scope: {
// Set title in the isolate scope from the title attribute on the directive's element.
title: '#title',
// Set up a bi-directional binding between currentTime on the local scope and the parent
// scope's variable containing the current time that's the value of the time attribute.
currentTime: '=time'
},
link: function (scope, element, attrs, ctrl) {},
controllerAs: 'swctrl',
controller: function ($scope, $interval) {
var self = this;
var time = 0;
var mode = 1;
var status = 0;
var timer_id;
self.play = 1;
self.start = function (interval) {
self.play = 0;
var timeRet;
interval = 1000;
if (status == 0) {
status = 1;
function timeRun() {
if (time < 86400) {
time++;
timeRet = self.getElapsedMs();
if (time == 10) {
alert("Its 10 seconds")
}
if (typeof (callback) === 'function') callback(timeRet);
}
};
return timer_id = setInterval(timeRun, interval);
}
};
self.pause = function () {
self.play = 1;
if (status == 1) {
status = 0;
clearInterval(timer_id);
}
};
self.stop = function () {
self.play = 1;
sec = (typeof (sec) !== 'undefined') ? sec : 0;
time = sec;
if (status == 1) {
status = 0;
clearInterval(timer_id);
}
};
self.getTime = function () {
return time;
};
self.getElapsedMs = function () {
var second = time % 60;
var minute = Math.floor(time / 60) % 60;
var hour = Math.floor(time / 3600) % 60;
second = (second < 10) ? '0' + second : second;
minute = (minute < 10) ? '0' + minute : minute;
hour = (hour < 10) ? '0' + hour : hour;
var timeObj = hour + ":" + minute + ":" + second
return timeObj;
};
}
}
}); < /script>
How to reproduce: Activate one, then type in "two" in the textbox, then erase it. You'll see that the one timer is showing 00:00:00
Filter in ng-repeat applies your filtering keyword on the array and returns a new subset, thus destroying previously created directives.
From the docs:
Selects a subset of items from array and returns it as a new array.
If you place inside the link function:
scope.$on("$destroy", function () {
console.log("destroying");
});
You'll see that it logs for every stopwatch that is eliminated due to the filtering.
Therefore, I'd just hide the entire div of the stopwatch instead of using the filter:
<div ng-show="!filter || title.indexOf(filter) > -1">
<div class="timer" >{{title}}<br>
{{swctrl.getElapsedMs() | limitTo:6}}<span class="sec">
{{swctrl.getElapsedMs() | limitTo:-2}}</span>
</div>
Play
Pause
<a href="" id="timerStop" class="stop" ng-click="swctrl.stop();" >Stop</a>
</div>
And your usage becomes:
<div ng-repeat="item in arr">
<div stopwatch title="{{item}}" filter="filters" time="sharedTime">
</div>
Plunker
Omri Aharon explained what the issue is. Personally I'd move the stopwatch functionality into a factory and pass instances of this into your directive.
.factory('StopWatch', function() {
function StopWatch(name) {
this.name = name;
this.time = 0;
this.mode = 1;
this.status = 0;
this.play = 1;
}
StopWatch.prototype.start = function(interval) {
var self = this;
self.play = 0;
var timeRet;
interval = 1000;
if(self.status == 0)
{
self.status = 1;
function timeRun()
{
if(self.time < 86400)
{
self.time++;
timeRet = self.getElapsedMs();
if(self.time == 10)
{
alert("Its 10 seconds")
}
if(typeof(callback) === 'function') callback(timeRet);
}
};
return self.timer_id = setInterval(timeRun, interval);
}
};
StopWatch.prototype.pause = function() {
this.play = 1;
if(this.status == 1)
{
this.status = 0;
clearInterval(this.timer_id);
}
};
StopWatch.prototype.stop = function() {
this.play = 1;
var sec = (typeof(sec) !== 'undefined') ? sec : 0;
this.time = sec;
if(this.status == 1)
{
this.status = 0;
clearInterval(this.timer_id);
}
};
StopWatch.prototype.getTime = function() {
return this.time;
};
StopWatch.prototype.getElapsedMs = function() {
var second = this.time % 60;
var minute = Math.floor(this.time / 60) % 60;
var hour = Math.floor(this.time / 3600) % 60;
second = (second < 10) ? '0'+second : second;
minute = (minute < 10) ? '0'+minute : minute;
hour = (hour < 10) ? '0'+hour : hour;
var timeObj = hour+":"+minute+":"+second
return timeObj;
};
return StopWatch;
})
So you'd create the stopwatches:
$scope.timers = [
new StopWatch('one'),
new StopWatch('two'),
new StopWatch('three'),
new StopWatch('four')
];
Then repeat and pass into the directive:
<div ng-repeat="item in timers | filter:filter_">
{{item.name}}
<div stopwatch="item"></div>
</div>
Plunker
I've searched all over the web, and all I'm getting is results to make new countdowns and not integrate in timezones into my jquery countdown which isn't what I'm looking for, since I'm looking to integrate the new js into my current countdown design.
Below is my js and html code I currently have which counts down from the users computer time, not from a specific timezone time.
Can someone tell me what code to input to make it based on a specified time zone (eg +8:00)
Thanks in advance:
HTML:
<div id="counter" class="counter" data-date="July 13, 2015">
<div class="timer-col"> <span id="days"></span> <span class="timer-type">d</span> </div>
<div class="timer-col"> <span id="hours"></span> <span class="timer-type">h</span> </div>
<div class="timer-col"> <span id="minutes"></span> <span class="timer-type">m</span> </div>
<div class="timer-col"> <span id="seconds"></span> <span class="timer-type">s</span> </div>
</div>
JS:
(function($) {
$.fn.countdown = function(toDate, callback) {
var handlers = ['seconds', 'minutes', 'hours', 'days', 'weeks', 'daysLeft'];
function delegate(scope, method) {
return function() { return method.call(scope) }
}
return this.each(function() {
// Convert
if(!(toDate instanceof Date)) {
if(String(toDate).match(/^[0-9]*$/)) {
toDate = new Date(toDate);
} else if( toDate.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2,4})\s([0-9]{1,2})\:([0-9]{2})\:([0-9] {2})/) ||
toDate.match(/([0-9]{2,4})\/([0-9]{1,2})\/([0-9]{1,2})\s([0-9]{1,2})\:([0-9]{2})\:([0-9]{2})/)
) {
toDate = new Date(toDate);
} else if(toDate.match(/([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2,4})/) ||
toDate.match(/([0-9]{2,4})\/([0-9]{1,2})\/([0-9]{1,2})/)
) {
toDate = new Date(toDate)
} else {
throw new Error("Doesn't seen to be a valid date object or string")
}
}
var $this = $(this),
values = {},
lasting = {},
interval = $this.data('countdownInterval'),
currentDate = new Date(),
secondsLeft = Math.floor((toDate.valueOf() - currentDate.valueOf()) / 1000);
function triggerEvents() {
secondsLeft--;
if(secondsLeft < 0) {
secondsLeft = 0;
}
lasting = {
seconds : secondsLeft % 60,
minutes : Math.floor(secondsLeft / 60) % 60,
hours : Math.floor(secondsLeft / 60 / 60) % 24,
days : Math.floor(secondsLeft / 60 / 60 / 24),
weeks : Math.floor(secondsLeft / 60 / 60 / 24 / 7),
daysLeft: Math.floor(secondsLeft / 60 / 60 / 24) % 7
}
for(var i=0; i<handlers.length; i++) {
var eventName = handlers[i];
if(values[eventName] != lasting[eventName]) {
values[eventName] = lasting[eventName];
dispatchEvent(eventName);
}
}
if(secondsLeft == 0) {
stop();
dispatchEvent('finished');
}
}
triggerEvents();
function dispatchEvent(eventName) {
var event = $.Event(eventName);
event.date = new Date(new Date().valueOf() + secondsLeft);
event.value = values[eventName] || "0";
event.toDate = toDate;
event.lasting = lasting;
switch(eventName) {
case "seconds":
case "minutes":
case "hours":
event.value = event.value < 10 ? '0'+event.value.toString() : event.value.toString();
break;
default:
if(event.value) {
event.value = event.value.toString();
}
break;
}
callback.call($this, event);
}
$this.bind('remove', function() {
stop(); // If the selector is removed clear the interval for memory sake!
dispatchEvent('removed');
});
function stop() {
clearInterval(interval);
}
function start() {
$this.data('countdownInterval', setInterval(delegate($this, triggerEvents), 1000));
interval = $this.data('countdownInterval');
}
if(interval) stop();
start();
});
}
// Wrap the remove method to trigger an event when called
var removeEvent = new $.Event('remove'),
removeFunction = $.fn.remove;
$.fn.remove = function() {
$(this).trigger(removeEvent);
return removeFunction.apply(this, arguments);
}
})(jQuery);