59 lines
2.9 KiB
JavaScript
59 lines
2.9 KiB
JavaScript
/* ─────────────────────────── UI behaviors ──────────────────────────────
|
|
* Минимальный JS для sidebar collapse, theme toggle, modals.
|
|
* Подключай <script src="app.js"></script> в конце body,
|
|
* или импортируй в фреймворк как обычно.
|
|
* ─────────────────────────────────────────────────────────────────────── */
|
|
|
|
(function () {
|
|
const STORAGE_THEME = 'app-theme';
|
|
const STORAGE_SIDEBAR = 'app-sb';
|
|
|
|
// ── Modal helpers (globals, т.к. вызываются из onclick атрибутов) ────
|
|
window.openModal = function (id) {
|
|
document.getElementById(id)?.classList.add('open');
|
|
};
|
|
window.closeModal = function (id) {
|
|
document.getElementById(id)?.classList.remove('open');
|
|
};
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Escape') {
|
|
document.querySelectorAll('.overlay.open').forEach(function (m) {
|
|
m.classList.remove('open');
|
|
});
|
|
}
|
|
});
|
|
|
|
// ── Theme ───────────────────────────────────────────────────────────
|
|
const MOON = '<circle cx="8" cy="8" r="5"/><path d="M8 1c-3.9 1.4-5 4.5-3.5 7.5S8.1 13.5 12 13c-3 1.2-7 .2-8.7-3S2 3.4 8 1z"/>';
|
|
const SUN = '<circle cx="8" cy="8" r="3"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.2 3.2l1.4 1.4M11.4 11.4l1.4 1.4M3.2 12.8l1.4-1.4M11.4 4.6l1.4-1.4"/>';
|
|
|
|
function applyTheme(dark) {
|
|
document.body.classList.toggle('dark', dark);
|
|
document.querySelectorAll('[data-theme-icon]').forEach(function (el) {
|
|
el.innerHTML = dark ? MOON : SUN;
|
|
});
|
|
}
|
|
window.toggleTheme = function () {
|
|
const dark = !document.body.classList.contains('dark');
|
|
try { localStorage.setItem(STORAGE_THEME, dark ? 'dark' : 'light'); } catch (e) {}
|
|
applyTheme(dark);
|
|
};
|
|
try { applyTheme(localStorage.getItem(STORAGE_THEME) === 'dark'); } catch (e) {}
|
|
|
|
// ── Sidebar collapse ────────────────────────────────────────────────
|
|
window.toggleSidebar = function () {
|
|
const sb = document.getElementById('main-sidebar');
|
|
const mn = document.querySelector('.main');
|
|
if (!sb || !mn) return;
|
|
const collapsed = sb.classList.toggle('sb-collapsed');
|
|
mn.classList.toggle('sb-collapsed', collapsed);
|
|
try { localStorage.setItem(STORAGE_SIDEBAR, '' + collapsed); } catch (e) {}
|
|
};
|
|
try {
|
|
if (localStorage.getItem(STORAGE_SIDEBAR) === 'true') {
|
|
document.getElementById('main-sidebar')?.classList.add('sb-collapsed');
|
|
document.querySelector('.main')?.classList.add('sb-collapsed');
|
|
}
|
|
} catch (e) {}
|
|
})();
|