maddin
60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
const STORAGE_KEY = 'stundenfuchs:settingsSection';
|
|
const DESKTOP_SYNC_MEDIA_QUERY = '(min-width: 51.26em)';
|
|
|
|
function shouldSyncGroups() {
|
|
return window.matchMedia(DESKTOP_SYNC_MEDIA_QUERY).matches;
|
|
}
|
|
|
|
function syncGroupState(section, isOpen) {
|
|
const groupName = section.dataset.syncGroup || '';
|
|
if (!groupName || !shouldSyncGroups()) {
|
|
return;
|
|
}
|
|
|
|
document.querySelectorAll(`[data-component="settings-section"][data-sync-group="${groupName}"]`).forEach((peer) => {
|
|
if (peer instanceof HTMLDetailsElement && peer !== section) {
|
|
peer.open = isOpen;
|
|
}
|
|
});
|
|
}
|
|
|
|
function openSectionById(sectionId) {
|
|
if (!sectionId) {
|
|
return;
|
|
}
|
|
const target = document.getElementById(sectionId);
|
|
if (!(target instanceof HTMLDetailsElement)) {
|
|
return;
|
|
}
|
|
target.open = true;
|
|
syncGroupState(target, true);
|
|
}
|
|
|
|
export function initSettingsSections() {
|
|
const sections = Array.from(document.querySelectorAll('[data-component="settings-section"]'));
|
|
if (sections.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const hashTarget = window.location.hash ? window.location.hash.slice(1) : '';
|
|
const storedTarget = window.sessionStorage.getItem(STORAGE_KEY) || '';
|
|
openSectionById(hashTarget || storedTarget);
|
|
if (storedTarget) {
|
|
window.sessionStorage.removeItem(STORAGE_KEY);
|
|
}
|
|
|
|
sections.forEach((section) => {
|
|
if (!(section instanceof HTMLDetailsElement) || !section.id) {
|
|
return;
|
|
}
|
|
section.addEventListener('toggle', () => {
|
|
syncGroupState(section, section.open);
|
|
});
|
|
section.querySelectorAll('form').forEach((form) => {
|
|
form.addEventListener('submit', () => {
|
|
window.sessionStorage.setItem(STORAGE_KEY, section.id);
|
|
});
|
|
});
|
|
});
|
|
}
|