/* WA Dev Tools — Shared JS (sidebar, theme, tailwind config) */ /* Tailwind config */ if (typeof tailwind !== 'undefined') { tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { mono: ['JetBrains Mono', 'monospace'], sans: ['Manrope', 'sans-serif'], }, colors: { surface: { 900: '#060c18', 800: '#091020', 700: '#0d1828', 600: '#162040' }, accent: { DEFAULT: '#0054e6', dim: '#0043b8', bright: '#6b9fff' }, warn: '#ffd600', danger: '#ff5252', } } } }; } /* Sidebar tools definition */ const WA_TOOLS = [ { id: 'home', path: '/', title: 'Главная', icon: '' }, { id: 'compress', path: '/compress', title: 'Картинки', icon: '' }, { id: 'md', path: '/md', title: 'Markdown', icon: '' }, { id: 'placeholder', path: '/placeholder', title: 'Placeholder', icon: '' }, { id: 'parser', path: '/parser', title: 'Parser', icon: '' }, { id: 'password', path: '/password', title: 'Password', icon: '' }, { id: 'sanitizer', path: '/sanitizer', title: 'Sanitizer', icon: '' }, { id: 'converter', path: '/converter', title: 'Converter', icon: '' }, { id: 'formatter', path: '/formatter', title: 'Formatter', icon: '' }, { id: 'editor', path: '/editor', title: 'Editor', icon: '' }, { id: 'httpclient', path: '/httpclient', title: 'HTTP Client', icon: '' }, { id: 'redirects', path: '/redirects', title: 'Redirects', icon: '' }, { id: 'svgeditor', path: '/svgeditor', title: 'SVG Editor', icon: '' }, { id: 'logs', path: '/logs', title: 'Logs', icon: '' }, ]; /* Build sidebar SVG icon */ function _svgIcon(innerPath) { return `${innerPath}`; } /* Inject sidebar into the page */ function initSidebar(activeId) { // Determine active tool from activeId or URL if (!activeId) { const path = window.location.pathname; const match = WA_TOOLS.find(t => t.path !== '/' && path.startsWith(t.path)); activeId = match ? match.id : 'home'; } const links = WA_TOOLS.map(t => `${_svgIcon(t.icon)}` ).join('\n '); const nav = document.createElement('nav'); nav.className = 'sidebar'; nav.innerHTML = ` `; document.body.prepend(nav); _updateThemeIcons(); } /* Theme management */ function initTheme() { const html = document.documentElement; const saved = localStorage.getItem('theme'); if (saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) { html.classList.add('dark'); } else if (saved === '') { html.classList.remove('dark'); } document.addEventListener('click', (e) => { const toggle = e.target.closest('#themeToggle'); if (!toggle) return; const isDark = html.classList.toggle('dark'); localStorage.setItem('theme', isDark ? 'dark' : ''); _updateThemeIcons(); }); } function _updateThemeIcons() { const isDark = document.documentElement.classList.contains('dark'); document.querySelectorAll('.wa-sun-icon').forEach(el => el.style.display = isDark ? 'none' : 'block'); document.querySelectorAll('.wa-moon-icon').forEach(el => el.style.display = isDark ? 'block' : 'none'); } /* Auto-init on DOM ready */ document.addEventListener('DOMContentLoaded', () => { initSidebar(window.WA_TOOL_ID); }); /* Init theme immediately (before DOM ready to prevent flash) */ initTheme();