Annoying.

front-seat · Apr 17, 2024 · 3041e6d · 3041e6d
1 parent eb05489
commit 3041e6d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 11 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -15,5 +15,8 @@
     "editor.codeActionsOnSave": {
       "source.fixAll": "explicit"
     }
+  },
+  "emmet.includeLanguages": {
+    "django-html": "html"
   }
 }
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "CommonJS",
+    "checkJs": true,
+    "allowJs": true,
+    "noEmit": true
+  },
+  "include": ["server/static/js/utils.js", "*.dhtml"]
+}
diff --git a/server/static/js/utils.js b/server/static/js/utils.js
@@ -0,0 +1,24 @@
+/**
+ * VoterBowl utility functions accessible globally via $vb.
+ * 
+ * @namespace $vb
+ */
+globalThis.$vb = {
+  /** 
+   * Invoke the callback exactly once, when the DOM is ready.
+   * 
+   * @param {Function} callback
+   * @returns {void}
+   */
+  onReady: (callback) => {
+    if (document.readyState !== 'loading') {
+      callback();
+    } else {
+      const listener = () => {
+        document.removeEventListener('DOMContentLoaded', listener);
+        callback();
+      }
+      document.addEventListener('DOMContentLoaded', listener);
+    }
+  }
+};
diff --git a/server/vb/templates/base.dhtml b/server/vb/templates/base.dhtml
@@ -21,6 +21,7 @@
     <script src="{% static 'js/htmx.min.js' %}" defer></script>
     <script src="{% static 'js/css-scope-inline.js' %}" defer></script>
     <script src="{% static 'js/surreal.js' %}" defer></script>
+    <script src="{% static 'js/utils.js' %}" defer></script>
     {% django_htmx_script %}
   </head>
   <body>

diff --git a/server/vb/templates/components/countdown.dhtml b/server/vb/templates/components/countdown.dhtml
@@ -46,14 +46,6 @@
 </style>
   {# djlint:on #}
   <script>
-      function runWhenReady(f) {
-          if (document.readyState === 'loading') {
-              document.addEventListener('DOMContentLoaded', f);
-          } else {
-              f();
-          }
-      }
-
       function countdown() {
           const deadline = new Date("{{ contest.end_at|date:'c' }}").getTime();
           const h0 = document.querySelector('.number[data-number=h0]');
@@ -64,8 +56,6 @@
           const s1 = document.querySelector('.number[data-number=s1]');
           const numbers = [h0, h1, m0, m1, s0, s1];
 
-          console.log(numbers);
-
           function updateCountdown() {
               const now = new Date().getTime();
               const diff = deadline - now;
@@ -99,7 +89,7 @@
           const interval = setInterval(updateCountdown, 1000);
       }
 
-      runWhenReady(countdown);
+      $vb.onReady(countdown);
   </script>
   <p>{{ contest.name }} ends in</p>
   <div class="countdown">