meno-interactions 0.1.0

package/dist/meno-interactions.cjs

@@ -0,0 +1,458 @@
+const DEFAULTS = {
+  root: null,
+  activeClass: 'is-active',
+  openClass: 'is-open',
+  scrolledClass: 'is-scrolled',
+  hiddenClass: 'meno-hidden',
+  reducedMotion: false
+};
+
+const registry = new Map();
+const cleanups = new WeakMap();
+
+function on(target, event, handler, options) {
+  target.addEventListener(event, handler, options);
+  return () => target.removeEventListener(event, handler, options);
+}
+
+function emit(target, name, detail) {
+  target.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: detail || {} }));
+}
+
+function parseBool(value, fallback) {
+  if (value == null || value === '') return fallback;
+  return !/^(false|0|no|off)$/i.test(String(value));
+}
+
+function closestWithin(target, selector, root) {
+  const node = target instanceof Element ? target.closest(selector) : null;
+  return node && root.contains(node) ? node : null;
+}
+
+function setHidden(el, hidden) {
+  if (!el) return;
+  el.hidden = hidden;
+  el.classList.toggle(DEFAULTS.hiddenClass, hidden);
+}
+
+function getDefaultRoot(root) {
+  if (root) return root;
+  return typeof document !== 'undefined' ? document : null;
+}
+
+function getTarget(root, attr, fallbackSelector) {
+  const selector = root.getAttribute(attr);
+  if (selector) return document.querySelector(selector);
+  return fallbackSelector ? root.querySelector(fallbackSelector) : null;
+}
+
+function initDisclosure(root, options) {
+  const buttons = root.querySelectorAll('[data-meno-toggle], [data-action="toggle"], [data-action="toggle-disclosure"]');
+  const disposers = [];
+  buttons.forEach((button) => {
+    const selector = button.getAttribute('data-meno-target') || button.getAttribute('aria-controls');
+    const panel = selector && selector.startsWith('#') ? document.querySelector(selector) : selector ? root.querySelector(selector) : button.nextElementSibling;
+    if (!panel) return;
+    button.setAttribute('aria-expanded', button.getAttribute('aria-expanded') || 'false');
+    const handler = () => {
+      const open = !panel.classList.contains(options.openClass) && panel.hidden;
+      panel.classList.toggle(options.openClass, open);
+      setHidden(panel, !open);
+      button.setAttribute('aria-expanded', String(open));
+      emit(root, open ? 'meno:open' : 'meno:close', { trigger: button, panel });
+    };
+    disposers.push(on(button, 'click', handler));
+  });
+  return disposers;
+}
+
+function initAccordion(root, options) {
+  const accordions = root.querySelectorAll('[data-meno-accordion]');
+  const disposers = [];
+  accordions.forEach((accordion) => {
+    const single = parseBool(accordion.getAttribute('data-meno-single'), true);
+    const buttons = accordion.querySelectorAll('[data-meno-accordion-trigger], [data-action="toggle-accordion"]');
+    buttons.forEach((button) => {
+      const panel = button.getAttribute('aria-controls')
+        ? document.getElementById(button.getAttribute('aria-controls'))
+        : button.nextElementSibling;
+      if (!panel) return;
+      button.setAttribute('aria-expanded', button.getAttribute('aria-expanded') || 'false');
+      setHidden(panel, button.getAttribute('aria-expanded') !== 'true');
+      disposers.push(on(button, 'click', () => {
+        const willOpen = button.getAttribute('aria-expanded') !== 'true';
+        if (single && willOpen) {
+          buttons.forEach((other) => {
+            const otherPanel = other.getAttribute('aria-controls')
+              ? document.getElementById(other.getAttribute('aria-controls'))
+              : other.nextElementSibling;
+            other.setAttribute('aria-expanded', 'false');
+            otherPanel?.classList.remove(options.openClass);
+            setHidden(otherPanel, true);
+          });
+        }
+        button.setAttribute('aria-expanded', String(willOpen));
+        panel.classList.toggle(options.openClass, willOpen);
+        setHidden(panel, !willOpen);
+        emit(accordion, 'meno:accordion', { trigger: button, panel, open: willOpen });
+      }));
+    });
+  });
+  return disposers;
+}
+
+function initTabs(root, options) {
+  const tabsets = root.querySelectorAll('[data-meno-tabs]');
+  const disposers = [];
+  tabsets.forEach((tabset) => {
+    const buttons = tabset.querySelectorAll('[data-meno-tab], [data-action="select-tab"]');
+    const panels = tabset.querySelectorAll('[data-meno-tab-panel], [data-el="tab-panel"]');
+    const select = (id) => {
+      buttons.forEach((button) => {
+        const active = (button.getAttribute('data-meno-tab') || button.getAttribute('data-tab-id')) === id;
+        button.classList.toggle(options.activeClass, active);
+        button.setAttribute('aria-selected', String(active));
+      });
+      panels.forEach((panel) => {
+        const active = (panel.getAttribute('data-meno-tab-panel') || panel.getAttribute('data-tab-id')) === id;
+        panel.classList.toggle(options.activeClass, active);
+        setHidden(panel, !active);
+      });
+      emit(tabset, 'meno:tab', { id });
+    };
+    buttons.forEach((button, index) => {
+      const id = button.getAttribute('data-meno-tab') || button.getAttribute('data-tab-id') || String(index);
+      disposers.push(on(button, 'click', () => select(id)));
+    });
+    const initial = tabset.getAttribute('data-meno-initial-tab')
+      || buttons[0]?.getAttribute('data-meno-tab')
+      || buttons[0]?.getAttribute('data-tab-id');
+    if (initial) select(initial);
+  });
+  return disposers;
+}
+
+function initDropdown(root, options) {
+  const disposers = [];
+  const triggers = root.querySelectorAll('[data-meno-dropdown], [data-action="toggle-dropdown"]');
+  triggers.forEach((trigger) => {
+    const id = trigger.getAttribute('data-meno-dropdown') || trigger.getAttribute('data-dropdown-id');
+    const panel = id
+      ? root.querySelector(`[data-meno-dropdown-panel="${id}"], [data-el="dropdown-panel"][data-dropdown-id="${id}"]`)
+      : trigger.parentElement?.querySelector('[data-meno-dropdown-panel], [data-el="dropdown-panel"]');
+    if (!panel) return;
+    trigger.setAttribute('aria-expanded', trigger.getAttribute('aria-expanded') || 'false');
+    disposers.push(on(trigger, 'click', (event) => {
+      event.preventDefault();
+      const open = !panel.classList.contains(options.openClass);
+      root.querySelectorAll('[data-meno-dropdown-panel], [data-el="dropdown-panel"]').forEach((item) => {
+        if (item !== panel) item.classList.remove(options.openClass);
+      });
+      panel.classList.toggle(options.openClass, open);
+      trigger.setAttribute('aria-expanded', String(open));
+    }));
+  });
+  disposers.push(on(document, 'click', (event) => {
+    if (root.contains(event.target)) return;
+    root.querySelectorAll('[data-meno-dropdown-panel], [data-el="dropdown-panel"]').forEach((panel) => panel.classList.remove(options.openClass));
+    triggers.forEach((trigger) => trigger.setAttribute('aria-expanded', 'false'));
+  }));
+  return disposers;
+}
+
+function initModal(root, options) {
+  const disposers = [];
+  const modals = root.querySelectorAll('[data-meno-modal]');
+  const openModal = (modal) => {
+    modal.classList.add(options.openClass);
+    setHidden(modal, false);
+    if (typeof document !== 'undefined') document.body.style.overflow = 'hidden';
+    emit(modal, 'meno:modal-open', { modal });
+  };
+  const closeModal = (modal) => {
+    modal.classList.remove(options.openClass);
+    setHidden(modal, true);
+    if (typeof document !== 'undefined') document.body.style.overflow = '';
+    emit(modal, 'meno:modal-close', { modal });
+  };
+  modals.forEach((modal) => {
+    if (!modal.classList.contains(options.openClass)) setHidden(modal, true);
+    modal.querySelectorAll('[data-meno-close], [data-action="close-modal"]').forEach((button) => {
+      disposers.push(on(button, 'click', () => closeModal(modal)));
+    });
+    disposers.push(on(modal, 'click', (event) => {
+      if (event.target === modal && parseBool(modal.getAttribute('data-meno-backdrop-close'), true)) closeModal(modal);
+    }));
+  });
+  root.querySelectorAll('[data-meno-open-modal], [data-action="open-modal"]').forEach((button) => {
+    disposers.push(on(button, 'click', (event) => {
+      event.preventDefault();
+      const key = button.getAttribute('data-meno-open-modal') || button.getAttribute('data-modal-target') || 'default';
+      const modal = document.querySelector(`[data-meno-modal="${key}"], [data-meno-modal][id="${key}"]`);
+      if (modal) openModal(modal);
+    }));
+  });
+  disposers.push(on(document, 'keydown', (event) => {
+    if (event.key !== 'Escape') return;
+    document.querySelectorAll(`[data-meno-modal].${options.openClass}`).forEach(closeModal);
+  }));
+  return disposers;
+}
+
+function initDrawer(root, options) {
+  const disposers = [];
+  const drawers = root.querySelectorAll('[data-meno-drawer]');
+  const openDrawer = (drawer) => {
+    drawer.classList.add(options.openClass);
+    setHidden(drawer, false);
+    if (typeof document !== 'undefined') document.body.style.overflow = 'hidden';
+  };
+  const closeDrawer = (drawer) => {
+    drawer.classList.remove(options.openClass);
+    setHidden(drawer, true);
+    if (typeof document !== 'undefined') document.body.style.overflow = '';
+  };
+  drawers.forEach((drawer) => {
+    if (!drawer.classList.contains(options.openClass)) setHidden(drawer, true);
+    drawer.querySelectorAll('[data-meno-close], [data-action="close-drawer"]').forEach((button) => {
+      disposers.push(on(button, 'click', () => closeDrawer(drawer)));
+    });
+  });
+  root.querySelectorAll('[data-meno-open-drawer], [data-action="open-drawer"], [data-action="toggle-mobile-nav"]').forEach((button) => {
+    disposers.push(on(button, 'click', (event) => {
+      event.preventDefault();
+      const key = button.getAttribute('data-meno-open-drawer') || button.getAttribute('data-drawer-target') || 'default';
+      const drawer = document.querySelector(`[data-meno-drawer="${key}"], [data-meno-drawer][id="${key}"]`);
+      if (drawer) openDrawer(drawer);
+    }));
+  });
+  disposers.push(on(document, 'keydown', (event) => {
+    if (event.key !== 'Escape') return;
+    document.querySelectorAll(`[data-meno-drawer].${options.openClass}`).forEach(closeDrawer);
+  }));
+  return disposers;
+}
+
+function initCarousel(root) {
+  const disposers = [];
+  root.querySelectorAll('[data-meno-carousel]').forEach((carousel) => {
+    const track = carousel.querySelector('[data-meno-carousel-track], [data-el="carousel-track"]') || carousel;
+    const step = () => track.firstElementChild?.getBoundingClientRect().width || track.clientWidth;
+    const move = (direction) => track.scrollBy({ left: direction * step(), behavior: 'smooth' });
+    carousel.querySelectorAll('[data-meno-carousel-prev], [data-action="carousel-prev"]').forEach((button) => {
+      disposers.push(on(button, 'click', () => move(-1)));
+    });
+    carousel.querySelectorAll('[data-meno-carousel-next], [data-action="carousel-next"]').forEach((button) => {
+      disposers.push(on(button, 'click', () => move(1)));
+    });
+  });
+  return disposers;
+}
+
+function initSmoothScroll(root, options) {
+  const disposers = [];
+  root.querySelectorAll('[data-meno-smooth-scroll] a[href^="#"], a[data-meno-smooth-scroll][href^="#"]').forEach((anchor) => {
+    disposers.push(on(anchor, 'click', (event) => {
+      const id = anchor.getAttribute('href')?.slice(1);
+      const target = id ? document.getElementById(id) : null;
+      if (!target) return;
+      event.preventDefault();
+      target.scrollIntoView({ behavior: options.reducedMotion ? 'auto' : 'smooth', block: 'start' });
+      history.replaceState(null, '', `#${id}`);
+    }));
+  });
+  return disposers;
+}
+
+function initSticky(root, options) {
+  const disposers = [];
+  root.querySelectorAll('[data-meno-sticky], [data-el="site-header"]').forEach((header) => {
+    const threshold = Number(header.getAttribute('data-meno-sticky-threshold') || 8);
+    const update = () => header.classList.toggle(options.scrolledClass, window.scrollY > threshold);
+    update();
+    disposers.push(on(window, 'scroll', update, { passive: true }));
+  });
+  return disposers;
+}
+
+function initCopy(root) {
+  const disposers = [];
+  root.querySelectorAll('[data-meno-copy], [data-action="copy"]').forEach((button) => {
+    disposers.push(on(button, 'click', async () => {
+      const selector = button.getAttribute('data-meno-copy') || button.getAttribute('data-copy-target');
+      const source = selector
+        ? (selector.startsWith('#') ? document.querySelector(selector) : document.getElementById(selector) || document.querySelector(selector))
+        : button.previousElementSibling;
+      const text = source?.textContent?.trim() || button.getAttribute('data-meno-copy-text') || '';
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+        const area = document.createElement('textarea');
+        area.value = text;
+        document.body.appendChild(area);
+        area.select();
+        document.execCommand('copy');
+        area.remove();
+      }
+      const original = button.textContent;
+      button.textContent = button.getAttribute('data-meno-copied-label') || 'Copied';
+      setTimeout(() => {
+        button.textContent = original;
+      }, Number(button.getAttribute('data-meno-copy-timeout') || 1500));
+    }));
+  });
+  return disposers;
+}
+
+function initForm(root) {
+  const disposers = [];
+  root.querySelectorAll('form[data-meno-form], [data-meno-form] form').forEach((form) => {
+    const status = form.querySelector('[data-meno-form-status], [data-el="form-status"]');
+    disposers.push(on(form, 'submit', (event) => {
+      event.preventDefault();
+      const data = Object.fromEntries(new FormData(form).entries());
+      const required = form.querySelectorAll('[required]');
+      const invalid = Array.from(required).find((field) => !String(field.value || '').trim());
+      if (invalid) {
+        if (status) status.textContent = invalid.getAttribute('data-meno-error') || `${invalid.name || 'This field'} is required`;
+        invalid.focus();
+        emit(form, 'meno:form-error', { field: invalid, data });
+        return;
+      }
+      if (status) status.textContent = form.getAttribute('data-meno-success') || "Thanks! We'll be in touch.";
+      emit(form, 'meno:form-submit', { data });
+      if (parseBool(form.getAttribute('data-meno-reset-on-submit'), true)) form.reset();
+    }));
+  });
+  return disposers;
+}
+
+function initLightbox(root, options) {
+  const disposers = [];
+  const lightbox = root.querySelector('[data-meno-lightbox]');
+  const image = lightbox?.querySelector('img');
+  const close = lightbox?.querySelector('[data-meno-close]');
+  const open = (src, alt) => {
+    if (!lightbox || !image) return;
+    image.src = src;
+    image.alt = alt || '';
+    lightbox.classList.add(options.openClass);
+    setHidden(lightbox, false);
+  };
+  if (lightbox) {
+    setHidden(lightbox, !lightbox.classList.contains(options.openClass));
+    disposers.push(on(lightbox, 'click', (event) => {
+      if (event.target === lightbox) {
+        lightbox.classList.remove(options.openClass);
+        setHidden(lightbox, true);
+      }
+    }));
+    if (close) disposers.push(on(close, 'click', () => {
+      lightbox.classList.remove(options.openClass);
+      setHidden(lightbox, true);
+    }));
+  }
+  root.querySelectorAll('[data-meno-open-lightbox]').forEach((trigger) => {
+    disposers.push(on(trigger, 'click', (event) => {
+      event.preventDefault();
+      const src = trigger.getAttribute('data-meno-open-lightbox') || trigger.getAttribute('href') || trigger.querySelector('img')?.src;
+      const alt = trigger.getAttribute('data-meno-lightbox-alt') || trigger.querySelector('img')?.alt;
+      if (src) open(src, alt);
+    }));
+  });
+  return disposers;
+}
+
+function initAttributeActions(root) {
+  const disposers = [];
+  disposers.push(on(root, 'click', (event) => {
+    const toggler = closestWithin(event.target, '[data-meno-class-toggle]', root);
+    if (toggler) {
+      const className = toggler.getAttribute('data-meno-class-toggle');
+      const target = getTarget(toggler, 'data-meno-target') || toggler;
+      if (className && target) target.classList.toggle(className);
+    }
+    const adder = closestWithin(event.target, '[data-meno-class-add]', root);
+    if (adder) {
+      const className = adder.getAttribute('data-meno-class-add');
+      const target = getTarget(adder, 'data-meno-target') || adder;
+      if (className && target) target.classList.add(className);
+    }
+    const remover = closestWithin(event.target, '[data-meno-class-remove]', root);
+    if (remover) {
+      const className = remover.getAttribute('data-meno-class-remove');
+      const target = getTarget(remover, 'data-meno-target') || remover;
+      if (className && target) target.classList.remove(className);
+    }
+    const eventer = closestWithin(event.target, '[data-meno-dispatch]', root);
+    if (eventer) {
+      emit(eventer, eventer.getAttribute('data-meno-dispatch'), { source: eventer });
+    }
+  }));
+  return disposers;
+}
+
+const initializers = [
+  initDisclosure,
+  initAccordion,
+  initTabs,
+  initDropdown,
+  initModal,
+  initDrawer,
+  initCarousel,
+  initSmoothScroll,
+  initSticky,
+  initCopy,
+  initForm,
+  initLightbox,
+  initAttributeActions
+];
+
+function init(userOptions = {}) {
+  const options = { ...DEFAULTS, ...userOptions };
+  const root = getDefaultRoot(options.root);
+  if (!root) {
+    return {
+      root: null,
+      destroy: () => {},
+      refresh: () => init(options)
+    };
+  }
+  destroy(root);
+  const customInitializers = Array.from(registry.values());
+  const disposers = initializers.concat(customInitializers).flatMap((initializer) => initializer(root, options) || []);
+  cleanups.set(root, disposers);
+  return {
+    root,
+    destroy: () => destroy(root),
+    refresh: () => init(options)
+  };
+}
+
+function destroy(root = document) {
+  const disposers = cleanups.get(root) || [];
+  disposers.forEach((dispose) => dispose());
+  cleanups.delete(root);
+}
+
+function register(name, initializer) {
+  registry.set(name, initializer);
+}
+
+const MenoInteractions = {
+  init,
+  destroy,
+  register,
+  version: '0.1.0'
+};
+
+if (typeof window !== 'undefined') {
+  window.MenoInteractions = MenoInteractions;
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => init());
+  } else {
+    init();
+  }
+}
+
+module.exports = { init, destroy, register, MenoInteractions };

package/dist/meno-interactions.css

@@ -0,0 +1,54 @@
+[hidden],
+.meno-hidden {
+  display: none !important;
+}
+
+[data-meno-modal],
+[data-meno-drawer],
+[data-meno-lightbox] {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 180ms ease;
+}
+
+[data-meno-modal].is-open,
+[data-meno-drawer].is-open,
+[data-meno-lightbox].is-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+[data-meno-carousel-track],
+[data-el="carousel-track"] {
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+}
+
+[data-meno-carousel-item],
+[data-el="carousel-item"] {
+  scroll-snap-align: start;
+}
+
+[data-meno-tab],
+[data-action="select-tab"],
+[data-meno-filter-field],
+[data-meno-sort],
+[data-meno-page],
+[data-meno-load-more],
+[data-meno-clear],
+[data-meno-reset] {
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-meno-modal],
+  [data-meno-drawer],
+  [data-meno-lightbox],
+  [data-meno-carousel-track],
+  [data-el="carousel-track"] {
+    scroll-behavior: auto;
+    transition: none;
+  }
+}