dsh-desktop-kit 0.0.0-stage → 2.0.0

package/skills/wow-design/assets/kit/assets/js/kit.js

@@ -0,0 +1,550 @@
+/* ==========================================================================
+   AURORA · KIT.JS · v1.0 · 2026-11-04
+   Ванильный ES2022-модуль без зависимостей: тема, пресет, reveal, tabs,
+   модалка (Escape + focus), мобильное меню, dropdown, toast, демо-состояния.
+
+   ВАЖНО: файл написан как ES-модуль (top-level, без импортов и экспортов),
+   но подключается классическим `<script defer src>`. Причина: Chrome
+   блокирует внешние <script type="module"> на протоколе file://, а страницы
+   кита обязаны открываться двойным кликом без ошибок в консоли.
+   В любом ESM-проекте достаточно заменить тег на type="module".
+   ========================================================================== */
+(function () {
+  'use strict';
+
+  var root = document.documentElement;
+  var STORAGE = { theme: 'aurora-theme', preset: 'aurora-preset' };
+  var schemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+  /* ---------- 1. Тема (light / dark) ---------------------------------- */
+  function getTheme() {
+    return root.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+  }
+
+  function syncThemeControls() {
+    var dark = getTheme() === 'dark';
+    document.querySelectorAll('[data-theme-toggle]').forEach(function (btn) {
+      btn.setAttribute('aria-pressed', dark ? 'true' : 'false');
+      btn.setAttribute('aria-label', dark ? 'Включить светлую тему' : 'Включить тёмную тему');
+      btn.setAttribute('title', dark ? 'Светлая тема' : 'Тёмная тема');
+    });
+  }
+
+  function applyTheme(theme, persist) {
+    var next = theme === 'dark' ? 'dark' : 'light';
+    root.setAttribute('data-theme', next);
+    if (persist) {
+      try { localStorage.setItem(STORAGE.theme, next); } catch (e) { /* приватный режим */ }
+    }
+    syncThemeControls();
+    syncSwatches();
+    document.dispatchEvent(new CustomEvent('aurora:theme', { detail: { theme: next } }));
+  }
+
+  function initTheme() {
+    var stored = null;
+    try { stored = localStorage.getItem(STORAGE.theme); } catch (e) { /* ignore */ }
+    if (stored !== 'light' && stored !== 'dark') {
+      stored = schemeQuery.matches ? 'dark' : 'light';
+    }
+    applyTheme(stored, false);
+
+    document.querySelectorAll('[data-theme-toggle]').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        applyTheme(getTheme() === 'dark' ? 'light' : 'dark', true);
+      });
+    });
+    document.querySelectorAll('[data-theme-set]').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        applyTheme(btn.getAttribute('data-theme-set'), true);
+      });
+    });
+
+    schemeQuery.addEventListener('change', function (event) {
+      var hasChoice = false;
+      try { hasChoice = !!localStorage.getItem(STORAGE.theme); } catch (e) { /* ignore */ }
+      if (!hasChoice) applyTheme(event.matches ? 'dark' : 'light', false);
+    });
+  }
+
+  /* ---------- 2. Пресет (data-preset) --------------------------------- */
+  function getPreset() {
+    return root.getAttribute('data-preset') || 'aurora';
+  }
+
+  function syncPresetControls() {
+    var current = getPreset();
+    document.querySelectorAll('[data-preset-set]').forEach(function (btn) {
+      var on = btn.getAttribute('data-preset-set') === current;
+      btn.setAttribute('aria-pressed', on ? 'true' : 'false');
+    });
+    document.querySelectorAll('[data-preset-label]').forEach(function (el) {
+      el.textContent = current;
+    });
+  }
+
+  function applyPreset(preset, persist) {
+    root.setAttribute('data-preset', preset);
+    if (persist) {
+      try { localStorage.setItem(STORAGE.preset, preset); } catch (e) { /* ignore */ }
+    }
+    syncPresetControls();
+    syncSwatches();
+    document.dispatchEvent(new CustomEvent('aurora:preset', { detail: { preset: preset } }));
+  }
+
+  function initPreset() {
+    // Пресет запоминаем и восстанавливаем только на страницах с явным
+    // разрешением (витрина): у эталонных страниц пресет закреплён брифом.
+    if (root.hasAttribute('data-preset-allow')) {
+      var stored = null;
+      try { stored = localStorage.getItem(STORAGE.preset); } catch (e) { /* ignore */ }
+      if (stored) root.setAttribute('data-preset', stored);
+    }
+    syncPresetControls();
+    document.querySelectorAll('[data-preset-set]').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        applyPreset(btn.getAttribute('data-preset-set'), true);
+      });
+    });
+  }
+
+  /* ---------- 2b. Свотчи: подписи hex обновляются вместе с темой/пресетом - */
+  function syncSwatches() {
+    document.querySelectorAll('[data-swatch-var]').forEach(function (el) {
+      var name = el.getAttribute('data-swatch-var');
+      var value = window.getComputedStyle(root).getPropertyValue(name).trim();
+      if (!value) return;
+      el.textContent = value.toUpperCase();
+      var owner = el.closest('[data-copy]');
+      if (owner) owner.setAttribute('data-copy', value);
+    });
+  }
+
+  /* ---------- 3. Reveal on scroll ------------------------------------- */  function initReveal() {
+    var items = Array.prototype.slice.call(document.querySelectorAll('.reveal'));
+    if (!items.length) return;
+    if (reduceMotion.matches || !('IntersectionObserver' in window)) {
+      items.forEach(function (el) { el.classList.add('is-in'); });
+      return;
+    }
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (!entry.isIntersecting) return;
+        entry.target.classList.add('is-in');
+        observer.unobserve(entry.target);
+      });
+    }, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
+    items.forEach(function (el) { observer.observe(el); });
+  }
+
+  /* ---------- 4. Tabs ------------------------------------------------- */
+  function initTabs() {
+    document.querySelectorAll('[data-tabs]').forEach(function (group) {
+      var tabs = Array.prototype.slice.call(group.querySelectorAll('[role="tab"]'));
+      if (!tabs.length) return;
+      var panels = tabs.map(function (tab) {
+        return document.getElementById(tab.getAttribute('aria-controls'));
+      });
+
+      function select(index, focus) {
+        tabs.forEach(function (tab, i) {
+          var on = i === index;
+          tab.setAttribute('aria-selected', on ? 'true' : 'false');
+          tab.tabIndex = on ? 0 : -1;
+          if (panels[i]) panels[i].hidden = !on;
+        });
+        if (focus && tabs[index]) tabs[index].focus();
+      }
+
+      tabs.forEach(function (tab, i) {
+        tab.addEventListener('click', function () { select(i, false); });
+      });
+
+      group.addEventListener('keydown', function (event) {
+        var current = tabs.indexOf(document.activeElement);
+        if (current < 0) return;
+        var next = current;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') next = (current + 1) % tabs.length;
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') next = (current - 1 + tabs.length) % tabs.length;
+        else if (event.key === 'Home') next = 0;
+        else if (event.key === 'End') next = tabs.length - 1;
+        else return;
+        event.preventDefault();
+        select(next, true);
+      });
+
+      // гарантируем, что открыта ровно одна панель
+      var active = Math.max(0, tabs.findIndex(function (t) { return t.getAttribute('aria-selected') === 'true'; }));
+      select(active, false);
+    });
+  }
+
+  /* ---------- 5. Модальные окна --------------------------------------- */
+  var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+  var activeModal = null;
+  var lastTrigger = null;
+
+  function focusables(modal) {
+    return Array.prototype.slice.call(modal.querySelectorAll(FOCUSABLE)).filter(function (el) {
+      return el.offsetParent !== null || el === document.activeElement;
+    });
+  }
+
+  function openModal(id, trigger) {
+    var modal = document.getElementById(String(id).replace(/^#/, ''));
+    if (!modal) return;
+    if (activeModal) closeModal(activeModal);
+    lastTrigger = trigger || document.activeElement;
+    modal.classList.add('is-open');
+    modal.removeAttribute('aria-hidden');
+    document.body.classList.add('modal-open');
+    var target = modal.querySelector('[data-autofocus]') || focusables(modal)[0] || modal;
+    window.setTimeout(function () { target.focus(); }, 60);
+    activeModal = modal;
+    document.dispatchEvent(new CustomEvent('aurora:modalopen', { detail: { modal: modal } }));
+  }
+
+  function closeModal(modal) {
+    var el = typeof modal === 'string' ? document.getElementById(modal) : modal;
+    if (!el) return;
+    el.classList.remove('is-open');
+    el.setAttribute('aria-hidden', 'true');
+    document.body.classList.remove('modal-open');
+    if (activeModal === el) activeModal = null;
+    if (lastTrigger && typeof lastTrigger.focus === 'function') lastTrigger.focus();
+    lastTrigger = null;
+    document.dispatchEvent(new CustomEvent('aurora:modalclose', { detail: { modal: el } }));
+  }
+
+  function initModals() {
+    document.querySelectorAll('.modal').forEach(function (modal) {
+      modal.setAttribute('aria-hidden', modal.classList.contains('is-open') ? 'false' : 'true');
+    });
+
+    document.addEventListener('click', function (event) {
+      var opener = event.target.closest('[data-modal-open]');
+      if (opener) {
+        event.preventDefault();
+        openModal(opener.getAttribute('data-modal-open'), opener);
+        return;
+      }
+      var closer = event.target.closest('[data-modal-close]');
+      if (closer) {
+        event.preventDefault();
+        var targetId = closer.getAttribute('data-modal-close');
+        closeModal(targetId && targetId !== 'true' ? targetId : closer.closest('.modal'));
+      }
+    });
+
+    document.addEventListener('keydown', function (event) {
+      if (!activeModal) return;
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        closeModal(activeModal);
+        return;
+      }
+      if (event.key !== 'Tab') return;
+      var items = focusables(activeModal);
+      if (!items.length) return;
+      var first = items[0];
+      var last = items[items.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    });
+  }
+
+  /* ---------- 6. Мобильное меню / drawer ------------------------------ */
+  function initNav() {
+    var toggles = Array.prototype.slice.call(document.querySelectorAll('[data-nav-toggle]'));
+    if (!toggles.length) return;
+
+    toggles.forEach(function (toggle) {
+      var selector = toggle.getAttribute('data-nav-toggle');
+      var target = selector ? document.querySelector(selector) : document.getElementById('app-sidebar');
+      if (!target) return;
+      var scrim = document.querySelector('[data-nav-scrim]');
+
+      function set(open) {
+        target.classList.toggle('is-open', open);
+        if (scrim) scrim.classList.toggle('is-open', open);
+        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+        document.documentElement.classList.toggle('nav-open', open);
+      }
+
+      toggle.addEventListener('click', function () {
+        set(!target.classList.contains('is-open'));
+      });
+      if (scrim) scrim.addEventListener('click', function () { set(false); });
+      document.addEventListener('keydown', function (event) {
+        if (event.key === 'Escape' && target.classList.contains('is-open')) set(false);
+      });
+      target.querySelectorAll('a').forEach(function (link) {
+        link.addEventListener('click', function () { set(false); });
+      });
+      window.addEventListener('resize', function () {
+        if (window.innerWidth > 1024 && target.classList.contains('is-open')) set(false);
+      });
+    });
+  }
+
+  /* ---------- 7. Dropdown-меню ---------------------------------------- */
+  function initDropdowns() {
+    var dropdowns = Array.prototype.slice.call(document.querySelectorAll('[data-dropdown]'));
+    if (!dropdowns.length) return;
+
+    function closeAll(except) {
+      dropdowns.forEach(function (dd) {
+        if (dd === except) return;
+        dd.classList.remove('is-open');
+        var btn = dd.querySelector('[data-dropdown-toggle]');
+        if (btn) btn.setAttribute('aria-expanded', 'false');
+      });
+    }
+
+    dropdowns.forEach(function (dd) {
+      var btn = dd.querySelector('[data-dropdown-toggle]');
+      if (!btn) return;
+      btn.addEventListener('click', function (event) {
+        event.stopPropagation();
+        var open = !dd.classList.contains('is-open');
+        closeAll(dd);
+        dd.classList.toggle('is-open', open);
+        btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+        if (open) {
+          var firstItem = dd.querySelector('.menu__item');
+          if (firstItem) firstItem.focus();
+        }
+      });
+      dd.addEventListener('keydown', function (event) {
+        if (event.key === 'Escape' && dd.classList.contains('is-open')) {
+          dd.classList.remove('is-open');
+          btn.setAttribute('aria-expanded', 'false');
+          btn.focus();
+        }
+      });
+      dd.querySelectorAll('.menu__item').forEach(function (item) {
+        item.addEventListener('click', function () {
+          dd.classList.remove('is-open');
+          btn.setAttribute('aria-expanded', 'false');
+        });
+      });
+    });
+
+    document.addEventListener('click', function (event) {
+      if (!event.target.closest('[data-dropdown]')) closeAll(null);
+    });
+  }
+
+  /* ---------- 8. Toast ------------------------------------------------ */
+  var TOAST_ICONS = {
+    success: 'i-check-circle',
+    danger: 'i-alert-circle',
+    warning: 'i-alert-triangle',
+    info: 'i-info'
+  };
+
+  function ensureToastRegion() {
+    var region = document.querySelector('.toast-region');
+    if (!region) {
+      region = document.createElement('div');
+      region.className = 'toast-region';
+      region.setAttribute('aria-live', 'polite');
+      region.setAttribute('aria-atomic', 'false');
+      document.body.appendChild(region);
+    }
+    return region;
+  }
+
+  function toast(options) {
+    var opts = typeof options === 'string' ? { title: options } : (options || {});
+    var variant = opts.variant || 'success';
+    var region = ensureToastRegion();
+    var el = document.createElement('div');
+    el.className = 'toast toast--' + variant;
+    el.setAttribute('role', 'status');
+
+    var icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    icon.setAttribute('class', 'icon icon--sm toast__icon');
+    icon.setAttribute('viewBox', '0 0 24 24');
+    icon.setAttribute('aria-hidden', 'true');
+    var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+    use.setAttribute('href', '#' + (TOAST_ICONS[variant] || TOAST_ICONS.info));
+    icon.appendChild(use);
+
+    var body = document.createElement('div');
+    body.className = 'toast__body';
+    var title = document.createElement('span');
+    title.className = 'toast__title';
+    title.textContent = opts.title || 'Готово';
+    body.appendChild(title);
+    if (opts.text) {
+      var text = document.createElement('span');
+      text.className = 'toast__text';
+      text.textContent = opts.text;
+      body.appendChild(text);
+    }
+
+    var close = document.createElement('button');
+    close.type = 'button';
+    close.className = 'toast__close';
+    close.setAttribute('aria-label', 'Закрыть уведомление');
+    close.innerHTML = '<svg class="icon icon--sm" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-x"></use></svg>';
+    close.addEventListener('click', function () { dismiss(); });
+
+    el.appendChild(icon);
+    el.appendChild(body);
+    el.appendChild(close);
+    region.appendChild(el);
+
+    var timer = 0;
+    function dismiss() {
+      if (!el.isConnected) return;
+      window.clearTimeout(timer);
+      el.classList.add('is-leaving');
+      window.setTimeout(function () {
+        if (el.parentNode) el.parentNode.removeChild(el);
+      }, reduceMotion.matches ? 0 : 220);
+    }
+    timer = window.setTimeout(dismiss, opts.timeout || 4200);
+    return el;
+  }
+
+  /* ---------- 9. Демо-состояния и микродетали ------------------------- */
+  function initDemoStates() {
+    // Кнопка «показать загрузку»: спиннер 1,6 с, затем toast.
+    document.querySelectorAll('[data-demo-loading]').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        if (btn.classList.contains('is-loading')) return;
+        btn.classList.add('is-loading');
+        btn.setAttribute('aria-busy', 'true');
+        var done = btn.getAttribute('data-demo-loading') || 'Готово';
+        var note = btn.getAttribute('data-demo-text') || 'Демонстрация состояния загрузки завершена.';
+        window.setTimeout(function () {
+          btn.classList.remove('is-loading');
+          btn.removeAttribute('aria-busy');
+          toast({ title: done, text: note, variant: 'success' });
+        }, 1600);
+      });
+    });
+
+    // Демо-уведомления
+    document.querySelectorAll('[data-demo-toast]').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        var variant = btn.getAttribute('data-demo-toast') || 'info';
+        toast({
+          title: btn.getAttribute('data-demo-toast-title') || 'Готово',
+          text: btn.getAttribute('data-demo-toast-text') || '',
+          variant: variant
+        });
+      });
+    });
+
+    // Клик по свотчу/токену — копирование значения
+    document.querySelectorAll('[data-copy]').forEach(function (item) {
+      item.addEventListener('click', function () {
+        var value = item.getAttribute('data-copy');
+        function feedback() {
+          toast({ title: 'Скопировано', text: value, variant: 'info', timeout: 2200 });
+        }
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(value).then(feedback, feedback);
+        } else {
+          feedback();
+        }
+      });
+    });
+
+    // Год в футере
+    document.querySelectorAll('[data-year]').forEach(function (el) {
+      el.textContent = String(new Date().getFullYear());
+    });
+  }
+
+  /* ---------- 10. Sticky-шапка ---------------------------------------- */
+  function initStickyHeader() {
+    var header = document.querySelector('[data-scrolled-header]');
+    if (!header) return;
+    function onScroll() {
+      header.classList.toggle('is-scrolled', window.scrollY > 8);
+    }
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+  }
+
+  /* ---------- 11. Scrollspy для оглавлений ---------------------------- */
+  function initScrollspy() {
+    document.querySelectorAll('[data-scrollspy]').forEach(function (nav) {
+      var links = Array.prototype.slice.call(nav.querySelectorAll('a[href^="#"]'));
+      var pairs = links.map(function (link) {
+        return { link: link, section: document.getElementById(link.getAttribute('href').slice(1)) };
+      }).filter(function (pair) { return pair.section; });
+      if (!pairs.length || !('IntersectionObserver' in window)) return;
+      var observer = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (!entry.isIntersecting) return;
+          var hit = pairs.filter(function (pair) { return pair.section === entry.target; })[0];
+          if (!hit) return;
+          links.forEach(function (link) { link.removeAttribute('aria-current'); });
+          hit.link.setAttribute('aria-current', 'true');
+        });
+      }, { rootMargin: '-25% 0px -65% 0px', threshold: 0 });
+      pairs.forEach(function (pair) { observer.observe(pair.section); });
+    });
+  }
+
+  /* ---------- 12. Плавный скролл к секциям (учёт sticky-шапки) -------- */
+  function initAnchors() {
+    document.querySelectorAll('a[href^="#"]').forEach(function (link) {
+      link.addEventListener('click', function (event) {
+        var id = link.getAttribute('href');
+        if (id.length < 2) return;
+        var target = document.getElementById(id.slice(1));
+        if (!target) return;
+        event.preventDefault();
+        var reduce = reduceMotion.matches;
+        target.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
+        history.replaceState(null, '', id);
+      });
+    });
+  }
+
+  /* ---------- Запуск -------------------------------------------------- */
+  function init() {
+    initTheme();
+    initPreset();
+    syncSwatches();
+    initReveal();
+    initTabs();
+    initModals();
+    initNav();
+    initDropdowns();
+    initDemoStates();
+    initStickyHeader();
+    initScrollspy();
+    initAnchors();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+
+  // Публичный интерфейс для страниц кита.
+  window.AuroraKit = {
+    toast: toast,
+    openModal: openModal,
+    closeModal: closeModal,
+    applyTheme: function (theme) { applyTheme(theme, true); },
+    applyPreset: function (preset) { applyPreset(preset, true); },
+    getTheme: getTheme,
+    getPreset: getPreset
+  };
+})();