Created
July 15, 2014 11:56
-
-
Save dy/5a5e26f3957499b37044 to your computer and use it in GitHub Desktop.
Kudago countdown failure
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Katherine's countdowner. | |
* It would be great to obtain docs for that. | |
*/ | |
var Digit = Mod({ | |
name: 'digit', | |
selector: '.digit', | |
init: function(){ | |
// console.log('init digit', 123) | |
this.initialValue = this.innerHTML; | |
}, | |
val:{ | |
set: function(v){ | |
return v; | |
}, | |
changed: function(value){ | |
// console.log("ch digit", value) | |
if (/[0-9]/.test(value)) this.innerHTML=value; | |
} | |
}, | |
hide: function(){ | |
$(this).hide(); | |
}, | |
digitStates:{ | |
init: "initial", | |
initial:{ | |
before: function(){ | |
} | |
} | |
} | |
}); | |
var Countdown= Mod({ | |
date: null, | |
currentDays: { | |
init:-1, | |
changed: function(value){ | |
if (this.inited){ | |
if (value<1){ | |
for(var i=this.$daysAndRelated.length; i--; i>-1) | |
this.$daysAndRelated[i].style.display="none"; | |
return; | |
} | |
if (value/100 < 1) | |
this.$daysFirst.hide(); | |
else | |
this.$daysFirst.val=Math.floor(value/100); | |
this.$daysMiddle.val=Math.floor((value%100)/10); | |
this.$daysLast.val=value%10; | |
} | |
} | |
}, | |
currentMinutes:{ | |
init:-1, | |
changed: function(value){ | |
if (this.inited){ | |
if (value<0){ value=0;} | |
value=value%60; | |
this.$minutesLast.val=value%10; | |
this.$minutesFirst.val=Math.floor(value/10); | |
} | |
} | |
}, | |
currentSeconds:{ | |
init:-1, | |
changed: function(value){ | |
if (this.inited){ | |
value=value%60; | |
// console.log("set secondsLast ---", value%10, isModInstance(this.$secondsLast)) | |
this.$secondsLast.val=value%10; | |
this.$secondsFirst.val=Math.floor(value/10); | |
} | |
} | |
}, | |
currentHours:{ | |
init:-1, | |
changed: function(value){ | |
if (this.inited){ | |
value=value%24; | |
this.$hoursLast.val=value%10; | |
this.$hoursFirst.val=Math.floor(value/10); | |
} | |
} | |
}, | |
update: function(){ | |
var currentDate = new Date(); | |
var diff= this.targetDate - currentDate; | |
if (diff<0) { this.timerState="stopped"; return;} | |
var seconds_left=(diff/1000); | |
console.log("curdays",this.currentDays, parseInt(seconds_left / 86400)) | |
this.currentDays = parseInt(seconds_left / 86400); | |
seconds_left = seconds_left % 86400; | |
this.currentHours = parseInt(seconds_left / 3600); | |
seconds_left = seconds_left % 3600; | |
this.currentMinutes= parseInt(seconds_left / 60); | |
this.currentSeconds= parseInt(seconds_left % 60); | |
}, | |
timerState:{ | |
init: "initial", | |
initial:{ | |
before: function(){ | |
this.targetDate=this.date*1000; | |
this.timerState="working"; | |
}, | |
after: function(){ | |
this.inited= true; | |
} | |
}, | |
working:{ | |
before: function(){ | |
this.update(); | |
this.removeAttribute("hidden"); | |
this._intervalId=setInterval(this.update.bind(this), 1000) | |
} | |
}, | |
stopped:{ | |
before: function(){ | |
$(this).hide(); clearInterval(this._intervalId); | |
} | |
} | |
} | |
}); | |
var EventCountdown = Countdown.extend({ | |
name: 'event-counter', | |
selector: '.event-counter', | |
currentDays: { | |
init: -1, | |
set: function(v){ | |
console.log("set curdays", v) | |
return v; | |
}, | |
changed: function(value){ | |
console.log("set cur days", value) | |
if (this.inited){ | |
if (value<1){ | |
for(var i=this.$daysAndRelated.length; i--; i>-1) | |
this.$daysAndRelated[i].style.display="none"; | |
return; | |
} | |
Countdown.currentDays.changed.apply(this, [value]); | |
this.$daysAndRelated[1].innerHTML=ngettext("day", "days", value); | |
} | |
} | |
}, | |
currentHours:{ | |
init:-1, | |
changed: function(value){ | |
if (this.inited){ | |
if (value<1 && this.currentDays<1){ | |
for(var i=this.$hoursAndRelated.length; i--; i>-1) | |
this.$hoursAndRelated[i].style.display="none"; | |
return; | |
} | |
Countdown.currentHours.changed.apply(this, [value]); | |
} | |
} | |
}, | |
timerState:{ | |
init: "initial", | |
initial:{ | |
before: function(){ | |
var digits = this.querySelectorAll('.digit'); | |
this.$daysFirst = digits[0]; | |
this.$daysMiddle = digits[1]; | |
this.$daysLast = digits[2]; | |
this.$hoursFirst = digits[3]; | |
this.$hoursLast = digits[4]; | |
this.$minutesFirst = digits[5]; | |
this.$minutesLast = digits[6]; | |
this.$secondsFirst = digits[7]; | |
this.$secondsLast = digits[8]; | |
this.$daysAndRelated= this.querySelectorAll('.days'); | |
this.$hoursAndRelated= this.querySelectorAll('.hours'); | |
Countdown.timerState.initial.before.call(this); | |
}, | |
after: function(){ | |
// console.log(ngettext("day", "days", this.currentDays)); | |
this.$daysAndRelated[1].innerHTML=ngettext("day", "days", this.currentDays); | |
Countdown.timerState.initial.after.apply(this); | |
} | |
} | |
} | |
}); | |
var ContestCountdown= Countdown.extend({ | |
name: 'contest-counter', | |
selector: '.contest-counter', | |
currentDays: { | |
init:-1, | |
changed: function(value){ | |
} | |
}, | |
currentHours:{ | |
init:-1, | |
changed: function(value){ | |
if (this.inited){ | |
if (value<1){ | |
for(var i=this.$hoursAndRelated.length; i--; i>-1) | |
this.$hoursAndRelated[i].style.display="none"; | |
return; | |
} | |
Countdown.currentHours.changed.apply(this, [value]); | |
} | |
} | |
}, | |
timerState:{ | |
init: "initial", | |
initial:{ | |
before: function(){ | |
var digits = this.querySelectorAll('.digit'); | |
this.$hoursFirst = digits[0]; | |
this.$hoursLast = digits[1]; | |
this.$minutesFirst = digits[2]; | |
this.$minutesLast = digits[3]; | |
this.$secondsFirst = digits[4]; | |
this.$secondsLast = digits[5]; | |
this.$hoursAndRelated= this.querySelectorAll('.hours'); | |
this.$secondsAndRelated= this.querySelectorAll('.seconds'); | |
Countdown.timerState.initial.before.apply(this); | |
} | |
} | |
} | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="event-counter counter bold-divider" hidden="true" date="{{ date|date:"U" }}"> | |
<span class="countdown-note">{% if lang != "en" %}{% if item.is_future %}До начала осталось{% else %}До окончания осталось{% endif %}{% endif %}</span> | |
<ul class="days"> | |
<li class="digit counter-digit-black">1</li> | |
<li class="digit counter-digit-black">1</li> | |
<li class="digit counter-digit-black">2</li> | |
</ul> | |
<span class="countdown-note days">дней,</span> | |
<ul class="hours"> | |
<li class="digit counter-digit-black">0</li> | |
<li class="digit counter-digit-black">4</li> | |
</ul> | |
<span class="divider hours">:</span> | |
<ul class="minutes"> | |
<li class="digit counter-digit-black">3</li> | |
<li class="digit counter-digit-black">3</li> | |
</ul> | |
<span class="divider">:</span> | |
<ul class="seconds"> | |
<li class="digit counter-digit-black">3</li> | |
<li class="digit counter-digit-black">3</li> | |
</ul> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment