Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove use of jQuery in conservancy.js

Browse source 
This is the first step towards removing jQuery from the site.
This commit is contained in:
Ben Sturmfels 2024-05-08 17:23:45 +10:00
parent 7b1ffebcfb
commit 0d25e1a87d
Signed by: bsturmfels
GPG key ID: 023C05E2C9C068F0
1 changed files with 53 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
conservancy/static/js/conservancy.js
View file

@ -5,48 +5,62 @@
** Find a copy of GPL at https://sfconservancy.org/GPLv3 ** 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); return document.querySelector(selector);
} }
function init () { function qsa (selector, parent) {
/* When the browser doesn't support any video source, replace it return document.querySelectorAll(selector);
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();
});
} }
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();
});