https://ampainsoc.org/wp-content/themes/ampainsoc-theme/assets/js/main.js?ver=1777019793

1/* AmPainSoc — main.js
2 * Vanilla JS for: mobile burger, language pill cookie, FAQ accordion,
3 * product gallery thumbs, search toggle, compare form submit.
4 * No framework, no deps.
5 */
6(function () {
7  'use strict';
8
9  // ---------- Mobile burger ----------
10  var nav = document.querySelector('.nav');
11  var burger = document.querySelector('[data-ampainsoc-burger]');
12  if (burger && nav) {
13    burger.addEventListener('click', function () {
14      var open = nav.getAttribute('data-menu-open') === 'true';
15      nav.setAttribute('data-menu-open', open ? 'false' : 'true');
16      burger.setAttribute('aria-expanded', open ? 'false' : 'true');
17    });
18  }
19
20  // ---------- Language pill: persist via cookie ----------
21  var langLinks = document.querySelectorAll('[data-ampainsoc-lang]');
22  langLinks.forEach(function (a) {
23    a.addEventListener('click', function () {
24      var target = a.getAttribute('data-set-lang');
25      if (!target) return;
26      var maxAge = 60 * 60 * 24 * 365;
27      document.cookie = 'ampainsoc_lang=' + encodeURIComponent(target) + ';path=/;max-age=' + maxAge + ';SameSite=Lax';
28    });
29  });
30
31  // ---------- FAQ accordion (works with [faq] shortcode) ----------
32  document.querySelectorAll('.faq-item .faq-q').forEach(function (btn) {
33    btn.addEventListener('click', function () {
34      var item = btn.closest('.faq-item');
35      if (!item) return;
36      var open = item.getAttribute('aria-expanded') === 'true';
37      item.setAttribute('aria-expanded', open ? 'false' : 'true');
38      btn.setAttribute('aria-expanded', open ? 'false' : 'true');
39    });
40  });
41
42  // ---------- Product gallery: click a thumb to swap the hero ----------
43  var productHero = document.querySelector('.product-hero');
44  var thumbs = document.querySelectorAll('.product-thumbs img');
45  if (productHero && thumbs.length) {
46    thumbs.forEach(function (img, i) {
47      img.parentElement.setAttribute('role', 'button');
48      img.parentElement.setAttribute('tabindex', '0');
49      img.parentElement.setAttribute('aria-pressed', i === 0 ? 'true' : 'false');
50      var swap = function () {
51        var heroImg = productHero.querySelector('img.media-cover');
52        if (heroImg) {
53          heroImg.src = img.src;
54          if (img.srcset) heroImg.srcset = img.srcset;
55          heroImg.alt = img.alt || '';
56        }
57        document.querySelectorAll('.product-thumbs [aria-pressed]').forEach(function (el) {
58          el.setAttribute('aria-pressed', 'false');
59        });
60        img.parentElement.setAttribute('aria-pressed', 'true');
61      };
62      img.parentElement.addEventListener('click', swap);
63      img.parentElement.addEventListener('keydown', function (e) {
64        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); swap(); }
65      });
66    });
67  }
68
69  // ---------- Search toggle ----------
70  var searchForms = document.querySelectorAll('[data-search-form]');
71  searchForms.forEach(function (form) {
72    var toggle = form.querySelector('[data-search-toggle]');
73    var field  = form.querySelector('.search-field');
74    if (!toggle || !field) return;
75    toggle.addEventListener('click', function () {
76      if (field.hasAttribute('hidden')) {
77        field.removeAttribute('hidden');
78        field.focus();
79      } else if (field.value.trim() !== '') {
80        form.submit();
81      } else {
82        field.setAttribute('hidden', '');
83      }
84    });
85    field.addEventListener('keydown', function (e) {
86      if (e.key === 'Escape') {
87        field.value = '';
88        field.setAttribute('hidden', '');
89      }
90    });
91  });
92
93  // ---------- Heart toggle (visual-only favourites on product cards) ----------
94  document.querySelectorAll('.pcard-heart').forEach(function (h) {
95    h.addEventListener('click', function (e) {
96      e.preventDefault();
97      e.stopPropagation();
98      h.classList.toggle('is-on');
99      h.style.color = h.classList.contains('is-on') ? 'var(--coral)' : '';
100    });
101  });
102
103  // ---------- Sticky filter bar: update --nav-h from the real nav height ----------
104  var realNav = document.querySelector('.nav');
105  if (realNav) {
106    var setH = function () {
107      document.documentElement.style.setProperty('--nav-h', realNav.offsetHeight + 'px');
108    };
109    setH();
110    window.addEventListener('resize', setH);
111  }
112
113})();