96 lines
2.8 KiB
JavaScript
96 lines
2.8 KiB
JavaScript
export function initSidebarToggle(options = {}) {
|
|
const {
|
|
buttonSelector = '#toggle-aside',
|
|
asideSelector = '#app-sidebar',
|
|
containerSelector = '.app-container',
|
|
storageKey = 'app-sidebar-collapsed'
|
|
} = options;
|
|
|
|
const aside = document.querySelector(asideSelector);
|
|
if (!aside) return null;
|
|
|
|
const buttons = Array.from(document.querySelectorAll(buttonSelector));
|
|
const container = document.querySelector(containerSelector);
|
|
const root = document.documentElement;
|
|
|
|
const readStored = () => {
|
|
try {
|
|
return window.localStorage.getItem(storageKey);
|
|
} catch (error) {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const writeStored = (collapsed) => {
|
|
try {
|
|
window.localStorage.setItem(storageKey, collapsed ? '1' : '0');
|
|
} catch (error) {
|
|
// ignore storage errors
|
|
}
|
|
};
|
|
|
|
const applyState = (collapsed, { persist = false } = {}) => {
|
|
aside.classList.toggle('is-collapsed', collapsed);
|
|
if (container) {
|
|
container.classList.toggle('is-sidebar-collapsed', collapsed);
|
|
}
|
|
if (root) {
|
|
root.classList.toggle('sidebar-collapsed', collapsed);
|
|
}
|
|
buttons.forEach((button) => {
|
|
if (!button.getAttribute('aria-controls')) {
|
|
button.setAttribute('aria-controls', aside.id || 'app-sidebar');
|
|
}
|
|
button.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
|
|
});
|
|
if (persist) {
|
|
writeStored(collapsed);
|
|
}
|
|
};
|
|
|
|
const isCollapsed = () => aside.classList.contains('is-collapsed');
|
|
|
|
const getInitialState = () => {
|
|
const stored = readStored();
|
|
if (stored === '1' || stored === '0') {
|
|
return stored === '1';
|
|
}
|
|
return root?.classList.contains('sidebar-collapsed') ?? false;
|
|
};
|
|
|
|
const controller = {
|
|
isCollapsed,
|
|
open: ({ persist = true } = {}) => applyState(false, { persist }),
|
|
close: ({ persist = true } = {}) => applyState(true, { persist }),
|
|
toggle: ({ persist = true } = {}) => applyState(!isCollapsed(), { persist }),
|
|
apply: (collapsed, { persist = false } = {}) => applyState(!!collapsed, { persist })
|
|
};
|
|
|
|
applyState(getInitialState(), { persist: false });
|
|
|
|
buttons.forEach((button) => {
|
|
button.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
controller.toggle({ persist: true });
|
|
});
|
|
});
|
|
|
|
document.addEventListener('app:sidebar', (event) => {
|
|
const detail = event.detail || {};
|
|
const action = detail.action;
|
|
const persist = detail.persist ?? false;
|
|
if (action === 'open') controller.open({ persist });
|
|
if (action === 'close') controller.close({ persist });
|
|
if (action === 'toggle') controller.toggle({ persist });
|
|
});
|
|
|
|
window.AppSidebar = controller;
|
|
return controller;
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', () => initSidebarToggle());
|
|
} else {
|
|
initSidebarToggle();
|
|
}
|