[assets] Use classes for JS files:

- Classes strictly parse code implicitly.
- Fix previously updated code.
This commit is contained in:
Fabien Basmaison 2021-04-06 09:44:59 +02:00
parent f430363be0
commit 2f2f7db086
2 changed files with 187 additions and 171 deletions

View file

@ -1,156 +1,168 @@
/* exported BookWyrm */
/* globals TabGroup */ /* globals TabGroup */
// set up javascript listeners let BookWyrm = new class {
window.onload = function() { constructor() {
// buttons that display or hide content this.initOnLoad();
document.querySelectorAll('[data-controls]') this.initEventListeners();
.forEach(t => t.onclick = toggleAction);
// javascript interactions (boost/fav)
document.querySelectorAll('.interaction')
.forEach(t => t.onsubmit = interact);
// handle aria settings on menus
document.querySelectorAll('.pulldown-menu')
.forEach(t => t.onclick = toggleMenu);
// hidden submit button in a form
document.querySelectorAll('.hidden-form input')
.forEach(t => t.onchange = revealForm);
// polling
document.querySelectorAll('[data-poll]')
.forEach(el => polling(el));
// browser back behavior
document.querySelectorAll('[data-back]')
.forEach(t => t.onclick = back);
document.querySelectorAll('.tab-group')
.forEach(t => new TabGroup(t));
};
function back(e) {
e.preventDefault();
history.back();
}
function polling(el, delay) {
delay = delay || 10000;
delay += (Math.random() * 1000);
setTimeout(function() {
fetch('/api/updates/' + el.getAttribute('data-poll'))
.then(response => response.json())
.then(data => updateCountElement(el, data));
polling(el, delay * 1.25);
}, delay, el);
}
function updateCountElement(el, data) {
const currentCount = el.innerText;
const count = data.count;
if (count != currentCount) {
addRemoveClass(el.closest('[data-poll-wrapper]'), 'hidden', count < 1);
el.innerText = count;
}
}
function revealForm(e) {
var hidden = e.currentTarget.closest('.hidden-form').getElementsByClassName('hidden')[0];
if (hidden) {
removeClass(hidden, 'hidden');
}
}
function toggleAction(e) {
var el = e.currentTarget;
var pressed = el.getAttribute('aria-pressed') == 'false';
var targetId = el.getAttribute('data-controls');
document.querySelectorAll('[data-controls="' + targetId + '"]')
.forEach(t => t.setAttribute('aria-pressed', (t.getAttribute('aria-pressed') == 'false')));
if (targetId) {
var target = document.getElementById(targetId);
addRemoveClass(target, 'hidden', !pressed);
addRemoveClass(target, 'is-active', pressed);
} }
// show/hide container initEventListeners() {
var container = document.getElementById('hide-' + targetId); // buttons that display or hide content
if (container) { document.querySelectorAll('[data-controls]')
addRemoveClass(container, 'hidden', pressed); .forEach(t => t.onclick = this.toggleAction.bind(this));
// javascript interactions (boost/fav)
document.querySelectorAll('.interaction')
.forEach(t => t.onsubmit = this.interact.bind(this));
// handle aria settings on menus
document.querySelectorAll('.pulldown-menu')
.forEach(t => t.onclick = this.toggleMenu.bind(this));
// hidden submit button in a form
document.querySelectorAll('.hidden-form input')
.forEach(t => t.onchange = this.revealForm.bind(this));
// polling
document.querySelectorAll('[data-poll]')
.forEach(el => this.polling(el));
// browser back behavior
document.querySelectorAll('[data-back]')
.forEach(t => t.onclick = this.back);
} }
// set checkbox, if appropriate initOnLoad(){
var checkbox = el.getAttribute('data-controls-checkbox'); // set up javascript listeners
if (checkbox) { window.onload = function() {
document.getElementById(checkbox).checked = !!pressed; document.querySelectorAll('.tab-group')
.forEach(t => new TabGroup(t));
};
} }
// set focus, if appropriate back(e) {
var focus = el.getAttribute('data-focus-target'); e.preventDefault();
if (focus) { history.back();
var focusEl = document.getElementById(focus); }
focusEl.focus();
setTimeout(function(){ focusEl.selectionStart = focusEl.selectionEnd = 10000; }, 0); polling(el, delay) {
let poller = this;
delay = delay || 10000;
delay += (Math.random() * 1000);
setTimeout(function() {
fetch('/api/updates/' + el.getAttribute('data-poll'))
.then(response => response.json())
.then(data => poller.updateCountElement(el, data));
poller.polling(el, delay * 1.25);
}, delay, el);
}
updateCountElement(el, data) {
const currentCount = el.innerText;
const count = data.count;
if (count != currentCount) {
this.addRemoveClass(el.closest('[data-poll-wrapper]'), 'hidden', count < 1);
el.innerText = count;
}
}
revealForm(e) {
var hidden = e.currentTarget.closest('.hidden-form').getElementsByClassName('hidden')[0];
if (hidden) {
this.removeClass(hidden, 'hidden');
}
}
toggleAction(e) {
var el = e.currentTarget;
var pressed = el.getAttribute('aria-pressed') == 'false';
var targetId = el.getAttribute('data-controls');
document.querySelectorAll('[data-controls="' + targetId + '"]')
.forEach(t => t.setAttribute('aria-pressed', (t.getAttribute('aria-pressed') == 'false')));
if (targetId) {
var target = document.getElementById(targetId);
this.addRemoveClass(target, 'hidden', !pressed);
this.addRemoveClass(target, 'is-active', pressed);
}
// show/hide container
var container = document.getElementById('hide-' + targetId);
if (container) {
this.addRemoveClass(container, 'hidden', pressed);
}
// set checkbox, if appropriate
var checkbox = el.getAttribute('data-controls-checkbox');
if (checkbox) {
document.getElementById(checkbox).checked = !!pressed;
}
// set focus, if appropriate
var focus = el.getAttribute('data-focus-target');
if (focus) {
var focusEl = document.getElementById(focus);
focusEl.focus();
setTimeout(function(){ focusEl.selectionStart = focusEl.selectionEnd = 10000; }, 0);
}
}
// @todo Only update status if the promise is successful.
interact(e) {
e.preventDefault();
this.ajaxPost(e.target);
var identifier = e.target.getAttribute('data-id');
// @todo This probably should be done with IDs.
document.querySelectorAll(`.${identifier}`)
.forEach(t => this.addRemoveClass(t, 'hidden', t.className.indexOf('hidden') == -1));
}
toggleMenu(e) {
var el = e.currentTarget;
var expanded = el.getAttribute('aria-expanded') == 'false';
el.setAttribute('aria-expanded', expanded);
var targetId = el.getAttribute('data-controls');
if (targetId) {
var target = document.getElementById(targetId);
this.addRemoveClass(target, 'is-active', expanded);
}
}
ajaxPost(form) {
fetch(form.action, {
method : "POST",
body: new FormData(form)
});
}
addRemoveClass(el, classname, bool) {
if (bool) {
this.addClass(el, classname);
} else {
this.removeClass(el, classname);
}
}
addClass(el, classname) {
var classes = el.className.split(' ');
if (classes.indexOf(classname) > -1) {
return;
}
el.className = classes.concat(classname).join(' ');
}
removeClass(el, className) {
var classes = [];
if (el.className) {
classes = el.className.split(' ');
}
const idx = classes.indexOf(className);
if (idx > -1) {
classes.splice(idx, 1);
}
el.className = classes.join(' ');
} }
} }
function interact(e) {
e.preventDefault();
ajaxPost(e.target);
var identifier = e.target.getAttribute('data-id');
// @todo This should be `querySelector`, unless there are duplicated IDs,
// which is a problem in itself.
document.querySelectorAll(`#${identifier}`)
.forEach(t => addRemoveClass(t, 'hidden', t.className.indexOf('hidden') == -1));
}
function toggleMenu(e) {
var el = e.currentTarget;
var expanded = el.getAttribute('aria-expanded') == 'false';
el.setAttribute('aria-expanded', expanded);
var targetId = el.getAttribute('data-controls');
if (targetId) {
var target = document.getElementById(targetId);
addRemoveClass(target, 'is-active', expanded);
}
}
function ajaxPost(form) {
fetch(form.action, {
method : "POST",
body: new FormData(form)
});
}
function addRemoveClass(el, classname, bool) {
if (bool) {
addClass(el, classname);
} else {
removeClass(el, classname);
}
}
function addClass(el, classname) {
var classes = el.className.split(' ');
if (classes.indexOf(classname) > -1) {
return;
}
el.className = classes.concat(classname).join(' ');
}
function removeClass(el, className) {
var classes = [];
if (el.className) {
classes = el.className.split(' ');
}
const idx = classes.indexOf(className);
if (idx > -1) {
classes.splice(idx, 1);
}
el.className = classes.join(' ');
}

View file

@ -1,28 +1,32 @@
/* exported updateDisplay */ /* exported LocalStorageTools */
/* globals addRemoveClass */ /* globals BookWyrm */
// set javascript listeners let LocalStorageTools = new class {
function updateDisplay(e) { constructor() {
// used in set reading goal // display based on localstorage vars
var key = e.target.getAttribute('data-id'); document.querySelectorAll('[data-hide]')
var value = e.target.getAttribute('data-value'); .forEach(t => this.setDisplay(t));
window.localStorage.setItem(key, value);
document.querySelectorAll('[data-hide="' + key + '"]') // update localstorage
.forEach(t => setDisplay(t)); document.querySelectorAll('.set-display')
.forEach(t => t.onclick = this.updateDisplay.bind(this));
}
// set javascript listeners
updateDisplay(e) {
// used in set reading goal
var key = e.target.getAttribute('data-id');
var value = e.target.getAttribute('data-value');
window.localStorage.setItem(key, value);
document.querySelectorAll('[data-hide="' + key + '"]')
.forEach(t => this.setDisplay(t));
}
setDisplay(el) {
// used in set reading goal
var key = el.getAttribute('data-hide');
var value = window.localStorage.getItem(key);
BookWyrm.addRemoveClass(el, 'hidden', value);
}
} }
function setDisplay(el) {
// used in set reading goal
var key = el.getAttribute('data-hide');
var value = window.localStorage.getItem(key);
addRemoveClass(el, 'hidden', value);
}
// display based on localstorage vars
document.querySelectorAll('[data-hide]')
.forEach(t => setDisplay(t));
// update localstorage
document.querySelectorAll('.set-display')
.forEach(t => t.onclick = updateDisplay);