← back to Designtradelive

public/app.js

58 lines

(function () {
  'use strict';

  // Theme toggle
  const root = document.documentElement;
  const toggle = document.querySelector('[data-theme-toggle]');
  if (toggle) {
    toggle.addEventListener('click', () => {
      const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
      root.setAttribute('data-theme', next);
      try { localStorage.setItem('dtl-theme', next); } catch (e) {}
    });
  }

  // Sort: persist + reload with new ?sort=
  const sortSel = document.querySelector('[data-sort]');
  if (sortSel) {
    try {
      const stored = localStorage.getItem('dtl-sort');
      if (stored && !new URLSearchParams(location.search).has('sort')) {
        sortSel.value = stored;
      }
    } catch (e) {}
    sortSel.addEventListener('change', () => {
      try { localStorage.setItem('dtl-sort', sortSel.value); } catch (e) {}
      const url = new URL(window.location);
      url.searchParams.set('sort', sortSel.value);
      window.location = url.toString();
    });
  }

  // Density slider — controls min card width
  const grid = document.querySelector('[data-grid]');
  const slider = document.querySelector('[data-density]');
  if (grid && slider) {
    function applyDensity(px) {
      grid.style.setProperty('--col-min', px + 'px');
      document.documentElement.style.setProperty('--col-min', px + 'px');
    }
    try {
      const stored = parseInt(localStorage.getItem('dtl-density') || '0', 10);
      if (stored >= 220 && stored <= 460) {
        slider.value = stored;
        applyDensity(stored);
      } else {
        applyDensity(parseInt(slider.value, 10));
      }
    } catch (e) {
      applyDensity(parseInt(slider.value, 10));
    }
    slider.addEventListener('input', () => {
      const v = parseInt(slider.value, 10);
      applyDensity(v);
      try { localStorage.setItem('dtl-density', String(v)); } catch (e) {}
    });
  }
})();