yul/bookwyrm-mastodon
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Uses js pattern for tabs

Browse Source
This commit is contained in:
Mouse Reeve
2021-01-17 20:19:09 -08:00
parent aba5c48af9
commit 3f136c40da
5 changed files with 61 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
bookwyrm/static/js/shared.js
View File

@ -13,8 +13,6 @@ window.onload = function() {
.forEach(t => t.onclick = selectAll);
// toggle between tabs
Array.from(document.getElementsByClassName('tab-change-nested'))
.forEach(t => t.onclick = tabChangeNested);
Array.from(document.getElementsByClassName('tab-change'))
.forEach(t => t.onclick = tabChange);
@ -50,6 +48,7 @@ function setDisplay(el) {
}
}
function toggleAction(e) {
var el = e.currentTarget;
var pressed = el.getAttribute('aria-pressed') == 'false';
@ -92,7 +91,11 @@ function addRemoveClass(el, classname, bool) {
}
function addClass(el, classname) {
el.className = el.className.split(' ').concat(classname).join(' ');
var classes = el.className.split(' ');
if (classes.indexOf(classname) > -1) {
return
}
el.className = classes.concat(classname).join(' ');
}
function removeClass(el, className) {
@ -128,35 +131,32 @@ function selectAll(e) {
.forEach(t => t.checked=true);
}
function tabChangeNested(e) {
var target = e.target.closest('li')
var parentElement = target.parentElement.closest('li').parentElement;
handleTabChange(target, parentElement)
}
function tabChange(e) {
var target = e.target.closest('li')
var parentElement = target.parentElement;
handleTabChange(target, parentElement)
}
var el = e.currentTarget;
var parentElement = el.closest('[role="tablist"]');
function handleTabChange(target, parentElement) {
parentElement.querySelectorAll('[aria-selected="true"]')
.forEach(t => t.setAttribute("aria-selected", false));
target.querySelector('[role="tab"]').setAttribute("aria-selected", true);
el.setAttribute("aria-selected", true);
parentElement.querySelectorAll('li')
.forEach(t => t.className='');
target.className = 'is-active';
.forEach(t => removeClass(t, 'is-active'));
addClass(el, 'is-active');
var tabId = el.getAttribute('data-tab');
Array.from(document.getElementsByClassName(el.getAttribute('data-category')))
.forEach(t => addRemoveClass(t, 'hidden', t.id != tabId))
}
function toggleMenu(e) {
var el = e.currentTarget;
var expanded = el.getAttribute('aria-expanded') == 'false';
el.setAttribute('aria-expanded', expanded);
var target = document.getElementById(el.getAttribute('data-controls'));
addRemoveClass(target, 'is-active', expanded);
var targetId = el.getAttribute('data-controls');
if (targetId) {
var target = document.getElementById(targetId);
addRemoveClass(target, 'is-active', expanded);
}
}
function ajaxPost(form) {