mirror of
https://github.com/pierre42100/comunic
synced 2024-09-29 03:22:49 +00:00
191 lines
5.5 KiB
JavaScript
Executable File
191 lines
5.5 KiB
JavaScript
Executable File
(function( $ ) {
|
|
$.widget("metro.times", {
|
|
|
|
version: "1.0.0",
|
|
|
|
options: {
|
|
style: {
|
|
background: "bg-dark",
|
|
foreground: "fg-white",
|
|
divider: "fg-dark"
|
|
},
|
|
blink: true,
|
|
alarm: {
|
|
h: 0,
|
|
m: 0,
|
|
s: 0
|
|
},
|
|
ontick: function(h, m, s){},
|
|
onalarm: function(){}
|
|
},
|
|
|
|
wrappers: {},
|
|
|
|
_interval: 0,
|
|
|
|
_create: function(){
|
|
var that = this, element = this.element;
|
|
|
|
$.each(['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(element);
|
|
|
|
if(this!="Seconds"){
|
|
element.append('<span class="divider"></span>');
|
|
}
|
|
});
|
|
|
|
this.wrappers = this.element.find('.digit-wrapper');
|
|
|
|
if (element.data('blink') != undefined) {
|
|
this.options.blink = element.data('blick');
|
|
}
|
|
|
|
if (element.data('styleBackground') != undefined) {
|
|
this.options.style.background = element.data('styleBackground');
|
|
}
|
|
|
|
if (element.data('styleForeground') != undefined) {
|
|
this.options.style.foreground = element.data('styleForeground');
|
|
}
|
|
|
|
if (element.data('styleDivider') != undefined) {
|
|
this.options.style.divider = element.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 (element.data('alarm') != undefined) {
|
|
var _alarm = element.data('alarm').split(":");
|
|
this.options.alarm.h = _alarm[0] != undefined ? _alarm[0] : 0;
|
|
this.options.alarm.m = _alarm[1] != undefined ? _alarm[1] : 0;
|
|
this.options.alarm.s = _alarm[2] != undefined ? _alarm[2] : 0;
|
|
}
|
|
|
|
if (element.data('onalarm') != undefined) {
|
|
}
|
|
|
|
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 _date = new Date();
|
|
|
|
var h, m, s;
|
|
|
|
h = _date.getHours();
|
|
that.updateDuo(0, 1, h);
|
|
|
|
m = _date.getMinutes();
|
|
that.updateDuo(2, 3, m);
|
|
|
|
s = _date.getSeconds();
|
|
that.updateDuo(4, 5, s);
|
|
|
|
// Calling an optional user supplied callback
|
|
that.options.ontick(h, m, s);
|
|
|
|
that.blinkDivider();
|
|
|
|
var alarm = that.options.alarm;
|
|
|
|
if (alarm) {
|
|
if (
|
|
(alarm.h != undefined && alarm.h == h)
|
|
&& (alarm.m != undefined && alarm.m == m)
|
|
&& (alarm.s != undefined && alarm.s == s)
|
|
) {
|
|
|
|
that.options.onalarm();
|
|
that._trigger('alarm');
|
|
}
|
|
}
|
|
|
|
// Scheduling another call of this function in 1s
|
|
}, 1000);
|
|
},
|
|
|
|
blinkDivider: function(){
|
|
if (this.options.blink)
|
|
this.element.find(".divider").toggleClass("no-visible");
|
|
},
|
|
|
|
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',opacity:0},'fast',function(){
|
|
digit.remove();
|
|
});
|
|
|
|
replacement
|
|
.delay(100)
|
|
.animate({top:0,opacity:1},'fast');
|
|
|
|
return true;
|
|
}
|
|
});
|
|
})( jQuery );
|
|
|
|
|