diff --git a/core/static/core/countdown.js b/core/static/core/countdown.js index b943642..322fc62 100644 --- a/core/static/core/countdown.js +++ b/core/static/core/countdown.js @@ -1,66 +1,69 @@ -const e = document.getElementById("countdown") +const countdown = document.getElementById("countdown") const eTextPre = document.getElementById("countdown-text-pre") const eTextPost = document.getElementById("countdown-text-post") -function assertClass(classList, className, contains) { - if (contains) { - if (!classList.contains(className)) classList.add(className) - } else { - if (classList.contains(className)) classList.remove(className) - } +function updateColours(classList, className, contains) { + if (contains) { + if (!classList.contains(className)) classList.add(className) + } else { + if (classList.contains(className)) classList.remove(className) + } } -const newCalculateTime = (start, end, startsPre, startsPost, endsPre, endsPost, ended) => () => { - /* - starts: before start - ends: after start before end (during) - ended: after end +const sanitizeStart = (text) => text.startsWith('__') ? '' : text; +const sanitizeEnd = (text) => text.startsWith('__') ? '' : text; +const newCalculateTime = (start, end, beforeStartPre, beforeStartPost, endsPre, endsPost, endedPre, endedPost) => () => { + /* + beforeStart: before start + ends: after start before end (during) + ended: after end - */ - let started = false - let finished = false - let d = Math.floor((end - Date.now()) / 1000) - //console.log("Initial d:", d); - if (d < 0) { - d = Math.floor((start - Date.now()) / 1000); - finished = d < 0 - started = true - } + */ + let started = false + let finished = false + let tillStart = Math.floor((start - Date.now()) / 1000) + let tillEnd = Math.floor((end - Date.now()) / 1000); + //console.log("Initial display:", display); + if (tillStart < 0) { // has started + started = true + } + if (tillEnd < 0) { // has ended + finished = true + } + let display = started ? tillEnd : tillStart + if (display < 0 && finished) { + display = Math.abs(display) + } /*console.log("End:", end); console.log("Start:", start); console.log("Now:", Date.now()); console.log("d:", d);*/ - const day = Math.floor(d / 86400) - const hour = Math.floor((d - day * 86400) / 3600) - const minute = Math.floor((d - day * 86400 - hour * 3600) / 60) - const second = d % 60 - let s = '' - if (day == 1) s += '1 day, ' - else if (day == 0) {} - else { - s += `${day} days, ` - } - s += ('0' + hour).slice(-2) + ':' - s += ('0' + minute).slice(-2) + ':' - s += ('0' + second).slice(-2) - e.innerText = s - if (d > 0) { - assertClass(e.classList, "soon-very1", d < 60*5 && d >= 60) - assertClass(e.classList, "soon-very2", d < 60 && d >= 10) - assertClass(e.classList, "soon-very3", d < 10) - } - assertClass(e.classList, "ending-5m", display < 60*5 && display >= 60) - assertClass(e.classList, "ending-1m", display < 60 && display >= 10) - assertClass(e.classList, "ending-10s", display < 10) - // TODO: js i18n - startsPre = startsPre.startsWith('__') ? '' : startsPre - startsPost = startsPost.startsWith('__') ? '' : startsPost - endsPre = endsPre.endsWith('__') ? '' : endsPre - endsPost = endsPost.endsWith('__') ? '' : endsPost - eTextPre.innerText = started ? startsPre : (finished ? ended : endsPre) - eTextPost.innerText = started ? startsPost : (finished ? ended : endsPost) + const day = Math.floor(display / 86400) + const hour = Math.floor((display - day * 86400) / 3600) + const minute = Math.floor((display - day * 86400 - hour * 3600) / 60) + const second = display % 60 + let s = '' + if (day === 1) { + s += '1 day, ' + } else if (day === 0) { + } else { + s += `${day} days, ` + } + s += ('0' + hour).slice(-2) + ':' + s += ('0' + minute).slice(-2) + ':' + s += ('0' + second).slice(-2) + console.log("s:", s); + countdown.innerText = s + if (display > 0) { // before the end + updateColours(countdown.classList, "ending-5m", display < 60 * 5 && display >= 60) + updateColours(countdown.classList, "ending-1m", display < 60 && display >= 10) + updateColours(countdown.classList, "ending-10s", display < 10) + } + // TODO: js i18n + eTextPre.innerText = started ? (finished ? endedPre : sanitizeEnd(endsPre)) : sanitizeStart(beforeStartPre) + eTextPost.innerText = started ? (finished ? endedPost : sanitizeEnd(endsPost)) : sanitizeStart(beforeStartPost) } export default newCalculateTime diff --git a/core/templates/core/base.html b/core/templates/core/base.html index 59e9775..9dfa032 100644 --- a/core/templates/core/base.html +++ b/core/templates/core/base.html @@ -3,99 +3,98 @@ {% load base %} - - {% block title %}{% endblock %} - - - - - - - - {% if START_BEFORE or END_BEFORE %} - - {% endif %} - {% block head_end %}{% endblock %} - - -
- - -
- {% comment %} TODO: consider merging header and title {% endcomment %} - {% if messages %} - - {% endif %} -
-
-
-

{% block header %}{% endblock %}

- {% block body %}{% endblock %} -
-
- {% if START_BEFORE or END_BEFORE %} - + setInterval(calculateTime, 1000) + + {% block head_end %}{% endblock %} + + +
+ + +
+ {% comment %} TODO: consider merging header and title {% endcomment %} + {% if messages %} + {% endif %} - {% comment %} NOTE: (below) workaround for fixed positon {% endcomment %} -
+
+
+

{% block header %}{% endblock %}

+ {% block body %}{% endblock %} +
+
+ +{% comment %} NOTE: (below) workaround for fixed position {% endcomment %} + - +