word-games-theme 3.3.6 → 3.3.7

data/assets/js/home-hub.js

@@ -0,0 +1,275 @@
+/**
+ * Home Hub - World-Class Puzzle Portal Client Scripts
+ * Blazing fast vanilla JS with instant search, filter tabs & keyboard navigation.
+ */
+(function () {
+  'use strict';
+
+  var doc = document;
+  var root = doc.documentElement;
+  root.classList.add('js');
+
+  var $ = function (s, c) { return (c || doc).querySelector(s); };
+  var $$ = function (s, c) { return Array.prototype.slice.call((c || doc).querySelectorAll(s)); };
+
+  var storage = {
+    get: function (k) { try { return localStorage.getItem(k); } catch (e) { return null; } },
+    set: function (k, v) { try { localStorage.setItem(k, v); } catch (e) {} }
+  };
+
+  /* ==========================================
+     2. Mobile Burger & Mega Menu Navigation
+     ========================================== */
+  var burger = $('#hh-burger');
+  var nav = $('#hh-nav');
+  var megaWrap = $('.hh-mega-wrap');
+  var megaTrigger = $('.hh-mega-trigger');
+
+  if (burger && nav) {
+    burger.addEventListener('click', function () {
+      var isOpen = nav.classList.toggle('is-open');
+      burger.setAttribute('aria-expanded', isOpen);
+    });
+  }
+
+  if (megaTrigger && megaWrap) {
+    megaTrigger.addEventListener('click', function (e) {
+      e.stopPropagation();
+      var isOpen = megaWrap.classList.toggle('is-open');
+      megaTrigger.setAttribute('aria-expanded', isOpen);
+    });
+
+    doc.addEventListener('click', function (e) {
+      if (!megaWrap.contains(e.target)) {
+        megaWrap.classList.remove('is-open');
+        megaTrigger.setAttribute('aria-expanded', 'false');
+      }
+    });
+  }
+
+  /* ==========================================
+     3. Interactive Search & Instant Autocomplete
+     ========================================== */
+  var cards = $$('.hh-game-card');
+  var searchInput = $('#hh-q');
+  var searchClear = $('#hh-search-clear');
+  var searchDropdown = $('#hh-search-dropdown');
+  var searchResultsList = $('#hh-search-results-list');
+  var searchCountBadge = $('#hh-search-count-badge');
+  var emptyState = $('#hh-empty');
+  var countBadge = $('#hh-count');
+  var groups = $$('.hh-group');
+  var currentTab = 'all';
+  var tabs = $$('.hh-tab-btn');
+
+  // Pre-index games for live search dropdown
+  var searchIndex = cards.map(function (card) {
+    var titleEl = $('.hh-game-card__title', card);
+    var descEl = $('.hh-game-card__desc', card);
+    var iconEl = $('.hh-game-card__icon-wrap', card);
+    return {
+      id: card.dataset.id,
+      title: titleEl ? titleEl.textContent.trim() : '',
+      desc: descEl ? descEl.textContent.trim() : '',
+      iconHtml: iconEl ? iconEl.innerHTML : '',
+      url: card.dataset.id,
+      group: card.dataset.group,
+      searchText: (card.dataset.search || '').toLowerCase()
+    };
+  });
+
+  function renderSearchDropdown(query) {
+    if (!searchDropdown || !searchResultsList) return;
+
+    if (!query) {
+      searchDropdown.hidden = true;
+      searchResultsList.innerHTML = '';
+      return;
+    }
+
+    var matches = searchIndex.filter(function (item) {
+      return item.searchText.indexOf(query) > -1;
+    });
+
+    if (searchCountBadge) {
+      searchCountBadge.textContent = matches.length + (matches.length === 1 ? ' result' : ' results');
+    }
+
+    if (matches.length === 0) {
+      searchResultsList.innerHTML = '<div style="padding: 16px; text-align: center; color: var(--text-muted); font-size: 13.5px;">No solvers found for "' + escapeHtml(query) + '".</div>';
+      searchDropdown.hidden = false;
+      return;
+    }
+
+    var html = matches.slice(0, 6).map(function (item) {
+      var highlightedTitle = highlightMatch(item.title, query);
+      return (
+        '<a href="' + item.url + '" class="hh-search-result-item">' +
+          '<div class="hh-search-result-item__icon">' + item.iconHtml + '</div>' +
+          '<div class="hh-search-result-item__text">' +
+            '<div class="hh-search-result-item__title">' + highlightedTitle + '</div>' +
+            '<div class="hh-search-result-item__desc">' + escapeHtml(item.desc) + '</div>' +
+          '</div>' +
+          '<span class="hh-search-result-item__arrow">&rarr;</span>' +
+        '</a>'
+      );
+    }).join('');
+
+    searchResultsList.innerHTML = html;
+    searchDropdown.hidden = false;
+  }
+
+  function escapeHtml(str) {
+    return str.replace(/[&<>"']/g, function (m) {
+      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[m];
+    });
+  }
+
+  function highlightMatch(text, term) {
+    var regex = new RegExp('(' + term.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'gi');
+    return escapeHtml(text).replace(regex, '<mark>$1</mark>');
+  }
+
+  function applyFilters() {
+    var term = searchInput ? searchInput.value.trim().toLowerCase() : '';
+    var visibleCount = 0;
+
+    if (searchClear) {
+      searchClear.hidden = term.length === 0;
+    }
+
+    cards.forEach(function (card) {
+      var grp = card.dataset.group;
+      var matchesTab = currentTab === 'all' || currentTab === grp;
+      var matchesQuery = !term || card.dataset.search.indexOf(term) > -1;
+      var show = matchesTab && matchesQuery;
+
+      card.classList.toggle('is-hidden', !show);
+      if (show) visibleCount++;
+    });
+
+    // Hide entire groups if no visible cards remain
+    groups.forEach(function (grp) {
+      var hasVisible = $('.hh-game-card:not(.is-hidden)', grp);
+      grp.classList.toggle('is-hidden', !hasVisible);
+    });
+
+    if (countBadge) countBadge.textContent = visibleCount;
+    if (emptyState) emptyState.hidden = visibleCount > 0;
+  }
+
+  if (searchInput) {
+    searchInput.addEventListener('input', function () {
+      var val = searchInput.value.trim().toLowerCase();
+      applyFilters();
+      renderSearchDropdown(val);
+    });
+
+    searchInput.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') {
+        searchInput.value = '';
+        applyFilters();
+        if (searchDropdown) searchDropdown.hidden = true;
+        searchInput.blur();
+      }
+      if (e.key === 'Enter') {
+        var firstMatch = $('.hh-search-result-item') || $('.hh-game-card:not(.is-hidden) .hh-game-card__inner');
+        if (firstMatch) {
+          window.location.href = firstMatch.href;
+        }
+      }
+    });
+
+    // Close dropdown on outside click
+    doc.addEventListener('click', function (e) {
+      if (searchDropdown && !searchDropdown.contains(e.target) && !searchInput.contains(e.target)) {
+        searchDropdown.hidden = true;
+      }
+    });
+  }
+
+  if (searchClear && searchInput) {
+    searchClear.addEventListener('click', function () {
+      searchInput.value = '';
+      applyFilters();
+      if (searchDropdown) searchDropdown.hidden = true;
+      searchInput.focus();
+    });
+  }
+
+  /* Global Keyboard Shortcut: Cmd/Ctrl+K to focus hub search */
+  doc.addEventListener('keydown', function (e) {
+    var tag = e.target.tagName;
+    if (((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') && tag !== 'INPUT' && tag !== 'TEXTAREA') {
+      e.preventDefault();
+      if (searchInput) {
+        searchInput.focus();
+        searchInput.select();
+        searchInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    }
+  });
+
+  /* ==========================================
+     4. Category Tab Switching
+     ========================================== */
+  tabs.forEach(function (tab) {
+    tab.addEventListener('click', function () {
+      currentTab = tab.dataset.filter;
+      tabs.forEach(function (t) {
+        var isCurrent = t === tab;
+        t.classList.toggle('is-active', isCurrent);
+        t.setAttribute('aria-selected', isCurrent ? 'true' : 'false');
+      });
+      applyFilters();
+    });
+  });
+
+  /* Popular Chips Click */
+  $$('.hh-chip').forEach(function (chip) {
+    chip.addEventListener('click', function () {
+      var query = chip.dataset.q;
+      if (searchInput) {
+        searchInput.value = query;
+        applyFilters();
+        renderSearchDropdown(query.toLowerCase());
+      }
+      var gamesSec = $('#games');
+      if (gamesSec) {
+        gamesSec.scrollIntoView({ behavior: 'smooth' });
+      }
+    });
+  });
+
+  /* Reset Button */
+  var resetBtn = $('#hh-reset');
+  if (resetBtn && searchInput) {
+    resetBtn.addEventListener('click', function () {
+      searchInput.value = '';
+      if (tabs.length > 0) tabs[0].click();
+      applyFilters();
+      if (searchDropdown) searchDropdown.hidden = true;
+      searchInput.focus();
+    });
+  }
+
+  /* ==========================================
+     5. Quick Letter Unscrambler Sanitizer
+     ========================================== */
+  var unscrambleInput = $('#hh-unscramble-input');
+  var unscrambleForm = $('#hh-unscramble-form');
+  if (unscrambleInput && unscrambleForm) {
+    unscrambleInput.addEventListener('input', function () {
+      // Allow letters, wildcards (?, *) and spaces
+      unscrambleInput.value = unscrambleInput.value.replace(/[^a-zA-Z?* ]/g, '').toUpperCase();
+    });
+  }
+
+  // Check URL params for ?q=
+  var urlParams = new URLSearchParams(window.location.search);
+  var initialQ = urlParams.get('q');
+  if (initialQ && searchInput) {
+    searchInput.value = initialQ;
+    applyFilters();
+  }
+})();

data/assets/js/home-ui.js

@@ -0,0 +1,286 @@
+/* Home UI: mega menu, theme toggle, rails, tabs, copy-on-click. No dependencies. */
+(function () {
+  'use strict';
+  var d = document;
+  var $ = function (s, c) { return (c || d).querySelector(s); };
+  var $$ = function (s, c) { return Array.prototype.slice.call((c || d).querySelectorAll(s)); };
+  var store = {
+    get: function (k) { try { return localStorage.getItem(k); } catch (e) { return null; } },
+    set: function (k, v) { try { localStorage.setItem(k, v); } catch (e) { } }
+  };
+
+  /* Mega menu */
+  var items = $$('.wg-menu__item');
+  function closeAll(except) {
+    items.forEach(function (li) {
+      if (li === except) return;
+      li.classList.remove('is-open');
+      var b = $('.wg-menu__btn', li);
+      if (b) b.setAttribute('aria-expanded', 'false');
+    });
+  }
+  items.forEach(function (li) {
+    var btn = $('.wg-menu__btn', li);
+    if (!btn) return;
+    btn.addEventListener('click', function (e) {
+      e.stopPropagation();
+      var open = !li.classList.contains('is-open');
+      closeAll(li);
+      li.classList.toggle('is-open', open);
+      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+    });
+  });
+  d.addEventListener('click', function (e) { if (!e.target.closest('.wg-menu')) closeAll(); });
+  /* desktop: hovering another item closes a menu that was opened by click */
+  var hoverMenu = window.matchMedia('(hover: hover) and (min-width: 992px)');
+  items.forEach(function (li) {
+    li.addEventListener('mouseenter', function () { if (hoverMenu.matches) closeAll(li); });
+  });
+  d.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') {
+      var open = $('.wg-menu__item.is-open .wg-menu__btn');
+      closeAll();
+      if (open) open.focus();
+    }
+  });
+
+  /* Mobile drawer (open/close itself is handled by theme.js; sync aria + scroll lock) */
+  var burger = $('#button-toggle');
+  var drawer = $('#navbarSupportedContent');
+  if (burger && drawer) {
+    burger.addEventListener('click', function () {
+      setTimeout(function () {
+        var open = drawer.classList.contains('show');
+        burger.setAttribute('aria-expanded', open ? 'true' : 'false');
+        burger.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
+        d.body.classList.toggle('wg-lock', open);
+      }, 0);
+    });
+  }
+
+  /* Rail arrows */
+  $$('.wg-section').forEach(function (sec) {
+    var rail = $('.wg-rail', sec);
+    if (!rail) return;
+    $$('[data-scroll]', sec).forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        var dir = parseInt(btn.getAttribute('data-scroll'), 10);
+        rail.scrollBy({ left: dir * rail.clientWidth * 0.8, behavior: 'smooth' });
+      });
+    });
+  });
+
+  /* Crossword tabs */
+  var tabs = $('[data-tabs]');
+  function showTab(id) {
+    if (!tabs) return;
+    $$('.wg-tab', tabs).forEach(function (t) {
+      var on = t.getAttribute('data-tab') === id;
+      t.classList.toggle('is-active', on);
+      t.setAttribute('aria-selected', on ? 'true' : 'false');
+    });
+    $$('.wg-clues', tabs).forEach(function (p) { p.hidden = p.id !== 'panel-' + id; });
+  }
+  if (tabs) {
+    $$('.wg-tab', tabs).forEach(function (t, i, all) {
+      t.addEventListener('click', function () { showTab(t.getAttribute('data-tab')); });
+      t.addEventListener('keydown', function (e) {
+        var n = e.key === 'ArrowRight' ? i + 1 : e.key === 'ArrowLeft' ? i - 1 : null;
+        if (n === null) return;
+        var next = all[(n + all.length) % all.length];
+        next.focus();
+        showTab(next.getAttribute('data-tab'));
+      });
+    });
+    $$('[data-cross-tab]').forEach(function (a) {
+      a.addEventListener('click', function () { showTab(a.getAttribute('data-cross-tab')); closeAll(); });
+    });
+  }
+
+  var seo = $('[data-seo]');
+
+  /* The word finder removes the features/how-to blocks after a search; drop the empty wrapper too */
+  if (seo) {
+    var seoBody = $('.wg-seo__body', seo);
+    if (seoBody) {
+      new MutationObserver(function () {
+        if (!$('#featureContainer', seoBody) && !$('#howContainer', seoBody)) seo.hidden = true;
+      }).observe(seoBody, { childList: true });
+    }
+  }
+
+  /* Back to top */
+  var topBtn = $('#wg-top');
+  if (topBtn) {
+    var onScroll = function () { topBtn.hidden = window.scrollY < 900; };
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+    topBtn.addEventListener('click', function () {
+      var smooth = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      window.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
+      var box = $('.serachBox .txtBox');
+      if (box) box.focus({ preventScroll: true });
+    });
+  }
+
+  /* "/" focuses the letters box (skipped while typing in a field) */
+  d.addEventListener('keydown', function (e) {
+    if (e.key !== '/' || e.ctrlKey || e.metaKey || e.altKey) return;
+    var t = e.target;
+    if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return;
+    var box = $('.serachBox .txtBox');
+    if (!box) return;
+    e.preventDefault();
+    box.focus();
+    box.scrollIntoView({ block: 'center' });
+  });
+
+  /* Letters box: live counter, quick-rack chips, filter-active badge */
+  (function () {
+    var box = $('.serachBox .txtBox');
+    if (!box) return;
+    var wrap = box.closest('.txt-box-container');
+    var count = $('.wg-char-count', wrap);
+    var max = parseInt(box.getAttribute('maxlength'), 10) || 15;
+    var reset = $('.wg-reset');
+    var fields = [box].concat($$('.fillterWrapper .filter_val'));
+    var syncReset = function () {
+      if (reset) reset.hidden = !fields.some(function (f) { return f.value !== ''; });
+    };
+    fields.forEach(function (f) { f.addEventListener('input', syncReset); });
+    if (reset) reset.addEventListener('click', function () {
+      fields.forEach(function (f) {
+        if (f.value === '') return;
+        f.value = '';
+        f.dispatchEvent(new Event('input', { bubbles: true }));
+      });
+      syncReset();
+      box.focus();
+    });
+    var sync = function () {
+      syncReset();
+      var n = box.value.length;
+      wrap.classList.toggle('has-value', n > 0);
+      if (count) {
+        count.textContent = n + '/' + max;
+        count.classList.toggle('is-full', n >= max);
+      }
+    };
+    box.addEventListener('input', sync);
+    var clear = $('.letter-close-button', wrap);
+    if (clear) clear.addEventListener('click', function () { setTimeout(sync, 0); box.focus(); });
+
+    var upd = function () { };
+    var toggle = $('.filtersOptions');
+    var inputs = $$('.fillterWrapper .filter_val');
+    if (toggle && inputs.length) {
+      var badge = d.createElement('span');
+      badge.className = 'wg-filter-badge';
+      badge.hidden = true;
+      toggle.appendChild(badge);
+      upd = function () {
+        var n = inputs.filter(function (i) { return i.value !== ''; }).length;
+        badge.textContent = n;
+        badge.hidden = n === 0;
+      };
+      inputs.forEach(function (i) { i.addEventListener('input', upd); });
+      d.addEventListener('click', function () { setTimeout(upd, 0); });
+      upd();
+    }
+    sync();
+    /* the word finder restores values from the URL without firing input events */
+    [150, 500, 1200, 2500].forEach(function (t) { setTimeout(function () { sync(); upd(); }, t); });
+    window.addEventListener('pageshow', function () { sync(); upd(); });
+  })();
+
+  /* Dictionary chip + popover (markup is server-rendered; this only wires it to the hidden select) */
+  (function () {
+    var dd = $('.wg-dd');
+    var sel = dd && $('select', dd);
+    var btn = dd && $('.wg-dd__btn', dd);
+    var menu = dd && $('.wg-dd__menu', dd);
+    if (!sel || !btn || !menu) return;
+    var short = { Dictionary: 'All dictionaries', twl06: 'US · TWL', sowpods: 'UK · SOWPODS', wwf: 'Words With Friends' };
+    var opts = $$('li', menu);
+    function paint() {
+      $('.wg-dd__label', dd).textContent = short[sel.value] || sel.options[sel.selectedIndex].textContent;
+      opts.forEach(function (li) {
+        var on = li.dataset.value === sel.value;
+        li.classList.toggle('is-on', on);
+        li.setAttribute('aria-selected', on);
+      });
+    }
+    function open(v) {
+      menu.hidden = !v;
+      btn.setAttribute('aria-expanded', v);
+      dd.classList.toggle('is-open', v);
+      if (v) { var cur = $('.is-on', menu) || menu.firstElementChild; cur.focus(); }
+    }
+    function choose(v) {
+      if (sel.value !== v) {
+        sel.value = v;
+        sel.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+      paint();
+      open(false);
+      btn.focus();
+    }
+    opts.forEach(function (li) {
+      li.addEventListener('click', function () { choose(li.dataset.value); });
+      li.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); choose(li.dataset.value); }
+        else if (e.key === 'ArrowDown') { e.preventDefault(); (li.nextElementSibling || menu.firstElementChild).focus(); }
+        else if (e.key === 'ArrowUp') { e.preventDefault(); (li.previousElementSibling || menu.lastElementChild).focus(); }
+      });
+    });
+    btn.addEventListener('click', function () { open(menu.hidden); });
+    d.addEventListener('click', function (e) { if (!menu.hidden && !dd.contains(e.target)) open(false); });
+    d.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !menu.hidden) { open(false); btn.focus(); } });
+    sel.addEventListener('change', paint);
+    paint();
+    /* the word finder can set the select from the URL without firing change */
+    [200, 800, 2000].forEach(function (t) { setTimeout(paint, t); });
+    window.addEventListener('pageshow', paint);
+  })();
+
+  /* Rails: disable arrows at the ends */
+  $$('.wg-section').forEach(function (sec) {
+    var rail = $('.wg-rail', sec);
+    if (!rail) return;
+    var prev = $('[data-scroll="-1"]', sec), next = $('[data-scroll="1"]', sec);
+    var sync = function () {
+      var max = rail.scrollWidth - rail.clientWidth - 2;
+      if (prev) prev.disabled = rail.scrollLeft <= 2;
+      if (next) next.disabled = rail.scrollLeft >= max;
+    };
+    rail.addEventListener('scroll', sync, { passive: true });
+    window.addEventListener('resize', sync);
+    sync();
+  });
+
+  /* Copy a word on click (Ctrl/Cmd/Shift-click still opens the dictionary link) */
+  var toast;
+  function say(msg) {
+    if (!toast) {
+      toast = d.createElement('div');
+      toast.className = 'wg-toast';
+      toast.setAttribute('role', 'status');
+      d.body.appendChild(toast);
+    }
+    toast.textContent = msg;
+    toast.classList.add('is-on');
+    clearTimeout(say.t);
+    say.t = setTimeout(function () { toast.classList.remove('is-on'); }, 1400);
+  }
+  d.addEventListener('click', function (e) {
+    var li = e.target.closest && e.target.closest('.list_word');
+    if (!li || e.ctrlKey || e.metaKey || e.shiftKey || e.button !== 0) return;
+    var clone = li.cloneNode(true);
+    var pts = clone.querySelector('.points');
+    if (pts) pts.remove();
+    var word = clone.textContent.trim();
+    if (!word || !navigator.clipboard) return;
+    e.preventDefault();
+    navigator.clipboard.writeText(word).then(function () { say('Copied "' + word + '"'); }, function () { });
+  });
+})();