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

86
conservancy/static/js/conservancy.js
View file

@ -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');
function qsa (selector, parent) {
return document.querySelectorAll(selector);
}
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);
}
$('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 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();
});