Clean up a lot of details related to the weird CSS/JS libs I'm using.

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

Hide file tree

Showing 9 changed files with 136 additions and 123 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,14 +9,13 @@
       "source.organizeImports.ruff": "explicit"
     }
   },
-  "[html][django-html]": {
-    "editor.defaultFormatter": "monosans.djlint",
+  "[html]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll": "explicit"
     }
   },
-  "emmet.includeLanguages": {
-    "django-html": "html"
+  "files.associations": {
+    "*.dhtml": "html"
   }
 }
diff --git a/jsconfig.json b/jsconfig.json
@@ -6,5 +6,8 @@
     "allowJs": true,
     "noEmit": true
   },
-  "include": ["server/static/js/utils.js", "*.dhtml"]
+  "include": [
+    "server/static/js/surreal.js",
+    "server/static/js/css-scope-inline.js"
+  ]
 }
diff --git a/server/static/js/utils.js b/server/static/js/utils.js
diff --git a/server/vb/templates/base.dhtml b/server/vb/templates/base.dhtml
@@ -18,10 +18,9 @@
     </title>
     <link rel="stylesheet" href="{% static 'css/modern-normalize.min.css' %}">
     <link rel="stylesheet" href="{% static 'css/base.css' %}">
-    <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>
+    <script src="{% static 'js/htmx.min.js' %}"></script>
+    <script src="{% static 'js/css-scope-inline.js' %}"></script>
+    <script src="{% static 'js/surreal.js' %}"></script>
     {% django_htmx_script %}
   </head>
   <body>
@@ -30,7 +29,7 @@
       VoterBowl, coming soon.
       <div>
         <style>
-          self {
+          me {
             background: blue;
             color: white;
           }

diff --git a/server/vb/templates/components/countdown.dhtml b/server/vb/templates/components/countdown.dhtml
@@ -1,6 +1,6 @@
 <div>
   <style>
-    self {
+    me {
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -9,7 +9,7 @@
       padding-top: 1em;
     }
 
-    self .countdown {
+    me .countdown {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -20,79 +20,104 @@
       height: 34px !important;
     }
 
-    self .countdown span {
+    me .countdown span {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100%;
       width: 27px;
     }
 
-    self p {
+    me p {
       text-transform: uppercase;
     }
   </style>
-  {# djlint:off #}
-  <style>
-    self .countdown span.number {
-      color: {{ school.logo.action_text_color }};
-      background-color: {{ school.logo.action_color }};
-    }
+  <p>{{ contest.name }} ends in</p>
+  <div class="countdown" data-end-at="{{ contest.end_at|date:'c' }}"
+    data-number-color="{{ school.logo.action_text_color }}" data-number-bg-color="{{ school.logo.action_color }}"
+    data-colon-color="{{ school.logo.bg_text_color }}">
+    <style>
+      me {
+        --number-color: transparent;
+        --number-bg-color: transparent;
+        --colon-color: transparent;
+      }
 
-    self .countdown span.colon {
-      color: {{ school.logo.bg_text_color }};
-      background-color: transparent;
-    }
-</style>
-  {# djlint:on #}
-  <script>
-      function countdown() {
-          const deadline = new Date("{{ contest.end_at|date:'c' }}").getTime();
-          const h0 = document.querySelector('.number[data-number=h0]');
-          const h1 = document.querySelector('.number[data-number=h1]');
-          const m0 = document.querySelector('.number[data-number=m0]');
-          const m1 = document.querySelector('.number[data-number=m1]');
-          const s0 = document.querySelector('.number[data-number=s0]');
-          const s1 = document.querySelector('.number[data-number=s1]');
-          const numbers = [h0, h1, m0, m1, s0, s1];
+      me span.number {
+        /* Variables are set in script. */
+        color: var(--number-color);
+        background-color: var(--number-bg-color);
+      }
 
-          function updateCountdown() {
-              const now = new Date().getTime();
-              const diff = deadline - now;
+      me span.colon {
+        /* Variables are set in script. */
+        color: var(--colon-color);
+        background-color: transparent;
+      }
+    </style>
+    <script>
+      /**
+       * Countdown to a deadline.
+       * 
+       * @param {HTMLElement} self element containing the countdown.
+       * @returns {void}
+       */
+      function countdown(self) {
+        // compute the deadline
+        const deadline = new Date(self.dataset.endAt);
+        const deadlineTime = deadline.getTime();
 
-              if (diff <= 0) {
-                  clearInterval(interval);
-                  numbers.forEach(number => number.textContent = '0');
-                  return;
-              }
+        // set the number and colon colors
+        self.style.setProperty('--number-color', self.dataset.numberColor);
+        self.style.setProperty('--number-bg-color', self.dataset.numberBgColor);
+        self.style.setProperty('--colon-color', self.dataset.colonColor);
 
-              const hours = Math.floor(diff / (1000 * 60 * 60));
-              const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-              const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+        // get the number elements
+        const h0 = self.querySelector('[data-number=h0]');
+        const h1 = self.querySelector('[data-number=h1]');
+        const m0 = self.querySelector('[data-number=m0]');
+        const m1 = self.querySelector('[data-number=m1]');
+        const s0 = self.querySelector('[data-number=s0]');
+        const s1 = self.querySelector('[data-number=s1]');
+        const numbers = [h0, h1, m0, m1, s0, s1];
 
-              const h0digit = Math.floor(hours / 10);
-              const h1digit = hours % 10;
-              const m0digit = Math.floor(minutes / 10);
-              const m1digit = minutes % 10;
-              const s0digit = Math.floor(seconds / 10);
-              const s1digit = seconds % 10;
+        /** Update the countdown. */
+        function updateCountdown() {
+          const now = new Date().getTime();
+          const diff = deadlineTime - now;
 
-              numbers[0].innerText = h0digit.toString();
-              numbers[1].innerText = h1digit.toString();
-              numbers[2].innerText = m0digit.toString();
-              numbers[3].innerText = m1digit.toString();
-              numbers[4].innerText = s0digit.toString();
-              numbers[5].innerText = s1digit.toString();
+          if (diff <= 0) {
+            clearInterval(interval);
+            numbers.forEach(number => number.textContent = '0');
+            return;
           }
 
-          updateCountdown();
-          const interval = setInterval(updateCountdown, 1000);
+          const hours = Math.floor(diff / (1000 * 60 * 60));
+          const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+          const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+          const h0digit = Math.floor(hours / 10);
+          const h1digit = hours % 10;
+          const m0digit = Math.floor(minutes / 10);
+          const m1digit = minutes % 10;
+          const s0digit = Math.floor(seconds / 10);
+          const s1digit = seconds % 10;
+
+          numbers[0].innerText = h0digit.toString();
+          numbers[1].innerText = h1digit.toString();
+          numbers[2].innerText = m0digit.toString();
+          numbers[3].innerText = m1digit.toString();
+          numbers[4].innerText = s0digit.toString();
+          numbers[5].innerText = s1digit.toString();
+        }
+
+        updateCountdown();
+        const interval = setInterval(updateCountdown, 1000);
       }
 
-      $vb.onReady(countdown);
-  </script>
-  <p>{{ contest.name }} ends in</p>
-  <div class="countdown">
+      const self = me();
+      onloadAdd(() => countdown(self));
+    </script>
     <span class="number" data-number="h0">&nbsp;</span>
     <span class="number" data-number="h1">&nbsp;</span>
     <span class="colon">:</span>
@@ -102,4 +127,4 @@
     <span class="number" data-number="s0">&nbsp;</span>
     <span class="number" data-number="s1">&nbsp;</span>
   </div>
-</div>
+</div>
diff --git a/server/vb/templates/components/logo_specimen.dhtml b/server/vb/templates/components/logo_specimen.dhtml
@@ -1,25 +1,25 @@
 {% with width=width|default:"32px" height=height|default:"32px" %}
   <div>
     <style>
-      self {
+      me {
         display: flex;
         gap: 0.5rem;
       }
 
-      self .bubble {
+      me .bubble {
         display: flex;
         align-items: center;
         overflow: hidden;
       }
 
-      self .bubble img {
+      me .bubble img {
         display: block;
         margin: 0 auto;
         max-width: 80%;
         max-height: 80%;
       }
 
-      self .bg {
+      me .bg {
         display: flex;
         font-weight: 600;
         align-items: center;
@@ -28,7 +28,7 @@
         padding-right: 0.5rem;
       }
 
-      self .action {
+      me .action {
         cursor: pointer;
         display: flex;
         font-weight: 600;
@@ -39,7 +39,7 @@
         transition: opacity 0.2s;
       }
 
-      self .action:hover {
+      me .action:hover {
         opacity: 0.7;
         transition: opacity 0.2s ease-in-out;
       }

diff --git a/server/vb/templates/home.dhtml b/server/vb/templates/home.dhtml
@@ -7,7 +7,7 @@
 {% block body %}
   <div>
     <style>
-      self h1 {
+      me h1 {
         font-weight: 200;
       }
     </style>