init

custom/otssignange/js/theme.js

@@ -0,0 +1,74 @@
+/**
+ * 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();
+  }
+})();