74 lines
2.0 KiB
JavaScript
74 lines
2.0 KiB
JavaScript
|
/**
|
||
|
|
* OTS Signage Modern Theme - Client-Side Utilities
|
||
|
|
* Sidebar toggle, theme persistence, and UI interactions
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function() {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
const STORAGE_KEYS = {
|
||
|
|
sidebarCollapsed: 'otsTheme:sidebarCollapsed',
|
||
|
|
themeMode: 'otsTheme:mode'
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Initialize sidebar toggle functionality
|
||
|
|
*/
|
||
|
|
function initSidebarToggle() {
|
||
|
|
const toggleBtn = document.querySelector('[data-action="toggle-sidebar"]');
|
||
|
|
const shell = document.querySelector('.ots-shell');
|
||
|
|
|
||
|
|
if (!toggleBtn || !shell) return;
|
||
|
|
|
||
|
|
const isCollapsed = localStorage.getItem(STORAGE_KEYS.sidebarCollapsed) === 'true';
|
||
|
|
if (isCollapsed) {
|
||
|
|
shell.classList.add('ots-sidebar-collapsed');
|
||
|
|
}
|
||
|
|
|
||
|
|
toggleBtn.addEventListener('click', function() {
|
||
|
|
shell.classList.toggle('ots-sidebar-collapsed');
|
||
|
|
const collapsed = shell.classList.contains('ots-sidebar-collapsed');
|
||
|
|
localStorage.setItem(STORAGE_KEYS.sidebarCollapsed, collapsed);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Initialize theme toggle (light/dark mode)
|
||
|
|
*/
|
||
|
|
function initThemeToggle() {
|
||
|
|
const themeBtn = document.querySelector('[data-action="toggle-theme"]');
|
||
|
|
const html = document.documentElement;
|
||
|
|
|
||
|
|
if (!themeBtn) return;
|
||
|
|
|
||
|
|
// Restore theme preference
|
||
|
|
const savedTheme = localStorage.getItem(STORAGE_KEYS.themeMode);
|
||
|
|
if (savedTheme) {
|
||
|
|
html.setAttribute('data-theme', savedTheme);
|
||
|
|
themeBtn.setAttribute('aria-pressed', savedTheme === 'dark');
|
||
|
|
}
|
||
|
|
|
||
|
|
themeBtn.addEventListener('click', function() {
|
||
|
|
const currentTheme = html.getAttribute('data-theme') || 'light';
|
||
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||
|
|
|
||
|
|
html.setAttribute('data-theme', newTheme);
|
||
|
|
localStorage.setItem(STORAGE_KEYS.themeMode, newTheme);
|
||
|
|
themeBtn.setAttribute('aria-pressed', newTheme === 'dark');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Initialize page on DOM ready
|
||
|
|
*/
|
||
|
|
function init() {
|
||
|
|
initSidebarToggle();
|
||
|
|
initThemeToggle();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (document.readyState === 'loading') {
|
||
|
|
document.addEventListener('DOMContentLoaded', init);
|
||
|
|
} else {
|
||
|
|
init();
|
||
|
|
}
|
||
|
|
})();
|