← back to Designerrepresentatives

public/js/grid-controls.js

32 lines

// Density slider + sort select. Sort hits the server via querystring (matches lib/sort.js).
// Density adjusts CSS var --cols-min on the grid; both values persist in localStorage.
(function () {
  var KEY_SORT = 'drp-sort';
  var KEY_DENS = 'drp-density';

  var grid = document.querySelector('[data-rep-grid]');
  var sortEl = document.querySelector('[data-sort]');
  var densEl = document.querySelector('[data-density]');

  if (densEl && grid) {
    try {
      var saved = localStorage.getItem(KEY_DENS);
      if (saved) { densEl.value = saved; }
    } catch (e) {}
    grid.style.setProperty('--cols-min', densEl.value + 'px');
    densEl.addEventListener('input', function () {
      grid.style.setProperty('--cols-min', densEl.value + 'px');
      try { localStorage.setItem(KEY_DENS, densEl.value); } catch (e) {}
    });
  }

  if (sortEl) {
    sortEl.addEventListener('change', function () {
      try { localStorage.setItem(KEY_SORT, sortEl.value); } catch (e) {}
      var url = new URL(window.location.href);
      url.searchParams.set('sort', sortEl.value);
      window.location.href = url.toString();
    });
  }
})();