From 0d25e1a87db76c68b10bbd2e574c7479b28dbb84 Mon Sep 17 00:00:00 2001
From: Ben Sturmfels <ben@sturm.com.au>
Date: Wed, 8 May 2024 17:23:45 +1000
Subject: [PATCH] Remove use of jQuery in conservancy.js

This is the first step towards removing jQuery from the site.
---
 conservancy/static/js/conservancy.js | 92 ++++++++++++++++------------
 1 file changed, 53 insertions(+), 39 deletions(-)

diff --git a/conservancy/static/js/conservancy.js b/conservancy/static/js/conservancy.js
index 92db96df..db482368 100644
--- a/conservancy/static/js/conservancy.js
+++ b/conservancy/static/js/conservancy.js
@@ -5,48 +5,62 @@
 **  Find a copy of GPL at https://sfconservancy.org/GPLv3
 */
 
-"use strict";
+'use strict';
 
-function qs (selector) {
+function qs (selector, parent) {
   return document.querySelector(selector);
 }
 
-function init () {
-    /* When the browser doesn't support any video source, replace it
-       with the HTML inside the <video> element. */
-    var showVideoInnerHTML = function(event) {
-        var video = event.target.parentNode;
-        var div = document.createElement('div');
-        div.classList = video.classList;
-        div.innerHTML = video.innerHTML;
-        video.parentNode.replaceChild(div, video);
-    }
-    $('video').each(function(index, video) {
-        $('source', video).last().on('error', showVideoInnerHTML);
-    });
-
-    $('input[name=on0]:radio').on('change', function(event, duration) {
-        var input = $(this);
-        var wantShirt = input.val() == "wantGiftYes";
-        var form = input.parents('form').last();
-        var tShirtSelector = $('.t-shirt-size-selector', form);
-        $('input', tShirtSelector).prop('disabled', wantShirt);
-        $('input[name=no_shipping]', form).val(wantShirt ? '2' : '0');
-        if (wantShirt) {
-            tShirtSelector.slideDown(duration);
-        } else {
-            tShirtSelector.slideUp(duration);
-        }
-    }).filter(':checked').trigger('change', 0);
-
-    // Open mobile/search menu.
-    qs('#menu-icon').addEventListener('click', function(event) {
-      qs('#navbar').classList.toggle('mobile');
-    });
-    qs('#search-icon').addEventListener('click', function(event) {
-      qs('#navbar').classList.toggle('mobile');
-      qs('#search-query').focus();
-    });
+function qsa (selector, parent) {
+  return document.querySelectorAll(selector);
 }
 
-init();
+function hide(el) {
+    el.style.display = 'none';
+}
+
+function show(el) {
+    el.style.display = '';
+}
+
+function showVideoInnerHTML (event) {
+    let video = event.target.parentNode;
+    let div = document.createElement('div');
+    div.classList = video.classList;
+    div.innerHTML = video.innerHTML;
+    video.parentNode.replaceChild(div, video);
+}
+
+function toggleShirtSize (form) {
+    let wantShirt = form.elements['on0'].value === 'wantGiftYes';
+    let shirtSizeSelector = form.elements['os0'];
+    shirtSizeSelector.disabled = !wantShirt;
+    form.elements['no_shipping'].value = wantShirt ? '2' : '0';
+    if (wantShirt) {
+        show(shirtSizeSelector);
+    } else {
+        hide(shirtSizeSelector);
+    }
+}
+
+/* When the browser doesn't support any video source, replace it
+with the HTML inside the <video> element. */
+qsa('video').forEach(function(video, _index) {
+    let last_source = Array.from(qsa('source', video)).at(-1);
+    last_source.addEventListener('error', showVideoInnerHTML);
+});
+
+/* Hide the T-shirt size selector when not needed. */
+qsa('.supporter-form').forEach(function(form) {
+    toggleShirtSize(form);  // set initial state
+    form.addEventListener('change', () => toggleShirtSize(form));
+});
+
+// Open mobile/search menu.
+qs('#menu-icon').addEventListener('click', function(event) {
+    qs('#navbar').classList.toggle('mobile');
+});
+qs('#search-icon').addEventListener('click', function(event) {
+    qs('#navbar').classList.toggle('mobile');
+    qs('#search-query').focus();
+});