mirror of
https://github.com/pierre42100/comunic
synced 2024-09-29 03:22:49 +00:00
201 lines
5.8 KiB
JavaScript
Executable File
201 lines
5.8 KiB
JavaScript
Executable File
(function( $ ) {
|
|
$.widget("metro.countdown", {
|
|
|
|
version: "1.0.0",
|
|
|
|
options: {
|
|
style: {
|
|
background: "bg-dark",
|
|
foreground: "fg-white",
|
|
divider: "fg-dark"
|
|
},
|
|
blink: true,
|
|
days: 1,
|
|
stoptimer: 0,
|
|
ontick: function(d, h, m, s){},
|
|
onstop: function(){}
|
|
},
|
|
|
|
wrappers: {},
|
|
|
|
_interval: 0,
|
|
|
|
_create: function(){
|
|
var that = this, countdown = this.element;
|
|
|
|
$.each(['Days','Hours','Minutes','Seconds'],function(){
|
|
$('<span class="count'+this+'">').html(
|
|
'<span class="digit-wrapper">\
|
|
<span class="digit">0</span>\
|
|
</span>\
|
|
<span class="digit-wrapper">\
|
|
<span class="digit">0</span>\
|
|
</span>'
|
|
).appendTo(countdown);
|
|
|
|
if(this!="Seconds"){
|
|
countdown.append('<span class="divider"></span>');
|
|
}
|
|
});
|
|
|
|
this.wrappers = this.element.find('.digit-wrapper');
|
|
|
|
if (countdown.data('blink') != undefined) {
|
|
this.options.blink = countdown.data('blick');
|
|
}
|
|
|
|
if (countdown.data('styleBackground') != undefined) {
|
|
this.options.style.background = countdown.data('styleBackground');
|
|
}
|
|
|
|
if (countdown.data('styleForeground') != undefined) {
|
|
this.options.style.foreground = countdown.data('styleForeground');
|
|
}
|
|
|
|
if (countdown.data('styleDivider') != undefined) {
|
|
this.options.style.divider = countdown.data('styleDivider');
|
|
}
|
|
|
|
if (this.options.style.background != "default") {
|
|
this.element.find(".digit").addClass(this.options.style.background);
|
|
}
|
|
|
|
if (this.options.style.foreground != "default") {
|
|
this.element.find(".digit").addClass(this.options.style.foreground);
|
|
}
|
|
|
|
if (this.options.style.divider != "default") {
|
|
this.element.find(".divider").addClass(this.options.style.divider);
|
|
}
|
|
|
|
if (countdown.data('stoptimer') != undefined) {
|
|
this.options.stoptimer = new Date(countdown.data('stoptimer'));
|
|
}
|
|
|
|
if (this.options.stoptimer == 0) {
|
|
this.options.stoptimer = (new Date()).getTime() + this.options.days*24*60*60*1000;
|
|
}
|
|
|
|
setTimeout( function(){
|
|
that.tick()
|
|
}, 1000);
|
|
},
|
|
|
|
_destroy: function(){
|
|
|
|
},
|
|
|
|
_setOption: function(key, value){
|
|
this._super('_setOption', key, value);
|
|
},
|
|
|
|
tick: function(){
|
|
var that = this;
|
|
|
|
this._interval = setInterval(function(){
|
|
var days = 24*60*60,
|
|
hours = 60*60,
|
|
minutes = 60;
|
|
|
|
var left, d, h, m, s;
|
|
|
|
left = Math.floor((that.options.stoptimer - (new Date())) / 1000);
|
|
|
|
if(left < 0){
|
|
left = 0;
|
|
}
|
|
|
|
// Number of days left
|
|
d = Math.floor(left / days);
|
|
that.updateDuo(0, 1, d);
|
|
left -= d*days;
|
|
|
|
// Number of hours left
|
|
h = Math.floor(left / hours);
|
|
that.updateDuo(2, 3, h);
|
|
left -= h*hours;
|
|
|
|
// Number of minutes left
|
|
m = Math.floor(left / minutes);
|
|
that.updateDuo(4, 5, m);
|
|
left -= m*minutes;
|
|
|
|
// Number of seconds left
|
|
s = left;
|
|
that.updateDuo(6, 7, s);
|
|
|
|
// Calling an optional user supplied ontick
|
|
that.options.ontick(d, h, m, s);
|
|
|
|
that.blinkDivider();
|
|
|
|
// Scheduling another call of this function in 1s
|
|
if (d === 0 && h === 0 && m === 0 && s === 0) {
|
|
that.options.onstop();
|
|
that.stopDigit();
|
|
that._trigger('alarm');
|
|
clearInterval(that._interval);
|
|
}
|
|
}, 1000);
|
|
},
|
|
|
|
blinkDivider: function(){
|
|
if (this.options.blink)
|
|
this.element.find(".divider").toggleClass("no-visible");
|
|
},
|
|
|
|
stopDigit: function(){
|
|
this.wrappers.each(function(){
|
|
$(this).children(".digit").addClass("stop");
|
|
})
|
|
},
|
|
|
|
updateDuo: function(minor, major, value){
|
|
this.switchDigit(this.wrappers.eq(minor),Math.floor(value/10)%10);
|
|
this.switchDigit(this.wrappers.eq(major),value%10);
|
|
},
|
|
|
|
switchDigit: function(wrapper, number){
|
|
var digit = wrapper.find('.digit');
|
|
|
|
if(digit.is(':animated')){
|
|
return false;
|
|
}
|
|
|
|
if(wrapper.data('digit') == number){
|
|
// We are already showing this number
|
|
return false;
|
|
}
|
|
|
|
wrapper.data('digit', number);
|
|
|
|
var replacement = $('<span>',{
|
|
'class':'digit',
|
|
css:{
|
|
top:'-2.1em',
|
|
opacity:0
|
|
},
|
|
html:number
|
|
});
|
|
|
|
replacement.addClass(this.options.style.background);
|
|
replacement.addClass(this.options.style.foreground);
|
|
|
|
digit
|
|
.before(replacement)
|
|
.removeClass('static')
|
|
.animate({top:'2.5em'},'fast',function(){
|
|
digit.remove();
|
|
});
|
|
|
|
replacement
|
|
.delay(100)
|
|
.animate({top:0,opacity:1},'fast');
|
|
|
|
return true;
|
|
}
|
|
});
|
|
})( jQuery );
|
|
|
|
|