From 8972178abe8776514298bbe5aebc7039bfaf4d11 Mon Sep 17 00:00:00 2001 From: Joachim Meyer Date: Mon, 24 Jul 2023 20:24:18 -0600 Subject: [PATCH 1/4] Splashpage - 'Defer' javascript resource loading. This is an attempt to fix countdown issues with Safari, but also a general better approach for loading content dependent JS. From the MDN docs: This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes --- {{ cookiecutter.repo_directory }}/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/{{ cookiecutter.repo_directory }}/index.html b/{{ cookiecutter.repo_directory }}/index.html index a08f1ae4..6f44f04d 100644 --- a/{{ cookiecutter.repo_directory }}/index.html +++ b/{{ cookiecutter.repo_directory }}/index.html @@ -584,11 +584,11 @@

Our Sponsors

- - - - - + + + + + From 708c766bec4e5ecf71e665b6ed3d16045ff39822 Mon Sep 17 00:00:00 2001 From: Joachim Meyer Date: Mon, 24 Jul 2023 20:25:47 -0600 Subject: [PATCH 2/4] Splashpage JS - Wait for the DOM ready event before execution This wraps the countdown start and the automatic schedule day selection to wait for the DOM to be fully parsed. --- {{ cookiecutter.repo_directory }}/assets/js/main.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/{{ cookiecutter.repo_directory }}/assets/js/main.js b/{{ cookiecutter.repo_directory }}/assets/js/main.js index 84718927..ade14787 100644 --- a/{{ cookiecutter.repo_directory }}/assets/js/main.js +++ b/{{ cookiecutter.repo_directory }}/assets/js/main.js @@ -123,8 +123,6 @@ function startCountDown(counterDiv) { } } -startCountDown(counterDiv); - /* === Select schedule tab of current day */ function today(){ @@ -141,4 +139,7 @@ function selectScheduleDay() { if(tab) { tab.click() } } -selectScheduleDay() +document.addEventListener("DOMContentLoaded", () => { + selectScheduleDay() + startCountDown(counterDiv); +}); From 865209ab5bc12818271c857520672f5ea78d5eda Mon Sep 17 00:00:00 2001 From: Joachim Meyer Date: Mon, 24 Jul 2023 21:12:34 -0600 Subject: [PATCH 3/4] Splashpage JS - Optimize event countdown a bit Deliver the static HTML content via cookiecutter and only update the relevant numbers in the counter. Before it was updating almost the entire countdown every second. --- .../assets/js/main.js | 32 +++++++------------ {{ cookiecutter.repo_directory }}/index.html | 6 ++++ 2 files changed, 17 insertions(+), 21 deletions(-) diff --git a/{{ cookiecutter.repo_directory }}/assets/js/main.js b/{{ cookiecutter.repo_directory }}/assets/js/main.js index ade14787..390bcb4e 100644 --- a/{{ cookiecutter.repo_directory }}/assets/js/main.js +++ b/{{ cookiecutter.repo_directory }}/assets/js/main.js @@ -72,18 +72,6 @@ const spy = new Gumshoe('#navigation a', { offset: yOffset }); // variables for time units const counterDiv = document.getElementById("countdown-box"); const endDate = new Date(counterDiv.getAttribute('data-start-date')); -let days, hours, minutes, seconds; - -function createCountdownSpans(className) { - const span = document.createElement("SPAN"); - span.className = className; - return span -} - -function updateCountdownHTML(span, value, unit) { - span.innerHTML = '' + value + '' + - '' + unit + ''; -} function timeLeft() { // find the amount of "seconds" between now and target @@ -91,6 +79,13 @@ function timeLeft() { return (endDate - currentDate) / 1000; } +function updateCounterNumberSpan(counterDiv, selector, number) { + const span = counterDiv.querySelectorAll(selector + ' span.number')[0]; + if (span.innerHTML !== number.toString()) { + span.innerHTML = number; + } +} + function updateCounter(counterDiv) { let secondsLeft = timeLeft() let days = parseInt(secondsLeft / 86400); @@ -103,19 +98,14 @@ function updateCounter(counterDiv) { let seconds = parseInt(secondsLeft % 60); // format countdown string + set tag value. - updateCountdownHTML(counterDiv.getElementsByClassName('days')[0], days, 'Days'); - updateCountdownHTML(counterDiv.getElementsByClassName('hours')[0], hours, 'Hours'); - updateCountdownHTML(counterDiv.getElementsByClassName('minutes')[0], minutes, 'Mins'); - updateCountdownHTML(counterDiv.getElementsByClassName('secs')[0], seconds, 'Secs'); + updateCounterNumberSpan(counterDiv, 'span.days', days); + updateCounterNumberSpan(counterDiv, 'span.hours', hours); + updateCounterNumberSpan(counterDiv, 'span.minutes', minutes); + updateCounterNumberSpan(counterDiv, 'span.seconds', seconds); } function startCountDown(counterDiv) { if (timeLeft() > 0) { - counterDiv.appendChild(createCountdownSpans('days')) - counterDiv.appendChild(createCountdownSpans('hours')) - counterDiv.appendChild(createCountdownSpans('minutes')) - counterDiv.appendChild(createCountdownSpans('secs')) - // update the counter every 1 second setInterval(updateCounter, 1000, counterDiv); } else { diff --git a/{{ cookiecutter.repo_directory }}/index.html b/{{ cookiecutter.repo_directory }}/index.html index 6f44f04d..bc246331 100644 --- a/{{ cookiecutter.repo_directory }}/index.html +++ b/{{ cookiecutter.repo_directory }}/index.html @@ -148,6 +148,12 @@

+ {% for unit in ['days', 'hours', 'minutes', 'seconds'] %} + + + {{ unit.capitalize() }} + + {% endfor %}
From 536964182fd23d408a13b44d84e4b54eefa7577f Mon Sep 17 00:00:00 2001 From: Joachim Meyer Date: Tue, 25 Jul 2023 14:16:16 -0600 Subject: [PATCH 4/4] Splashpage - Use precise event time for countdown Use the exact time of the first session for the event countdown. --- cookiecutter.yaml | 2 ++ {{ cookiecutter.repo_directory }}/index.html | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/cookiecutter.yaml b/cookiecutter.yaml index afd60b70..3afb4db0 100644 --- a/cookiecutter.yaml +++ b/cookiecutter.yaml @@ -11,6 +11,8 @@ banner: title: Event Jupyter Book new_window: true image: https://github.com/ICESAT-2HackWeek/icesat-2hackweek.github.io/raw/2022.03.01/assets/images/banner.jpg +# The opening session of the event with UTC offset +event_countdown: "2023-08-07T08:30:00-07:00" about: description: Hackweeks are participant-driven events that strive to create welcoming spaces for participants to learn new things, build community and gain hands-on experience diff --git a/{{ cookiecutter.repo_directory }}/index.html b/{{ cookiecutter.repo_directory }}/index.html index bc246331..c8850828 100644 --- a/{{ cookiecutter.repo_directory }}/index.html +++ b/{{ cookiecutter.repo_directory }}/index.html @@ -147,7 +147,7 @@

+ data-start-date="{{ cookiecutter.event_countdown }}"> {% for unit in ['days', 'hours', 'minutes', 'seconds'] %}