WM Expanding Panels – Mobile Open New Page

<!-- @tuanphan - Expanding Panels Mobile Click-Through -->
<script>
window.ExpandingPanelsMobileConfig = {
  breakpoint: 767,
  requireTouch: false,
  disableExpandOnMobile: true
};
</script>
<script>
(function () {
  const cfg = window.ExpandingPanelsMobileConfig;
  if (!cfg) return;

  const style = document.createElement('style');
  style.textContent = '.wm-ep-mobile .wm-panel{cursor:pointer;}';
  document.head.appendChild(style);

  const mqWidth = window.matchMedia('(max-width:' + cfg.breakpoint + 'px)');
  const mqHover = window.matchMedia('(hover:none)');

  function isMobile() {
    return mqWidth.matches && (!cfg.requireTouch || mqHover.matches);
  }

  function blockHover(e) {
    if (isMobile() && cfg.disableExpandOnMobile) e.stopPropagation();
  }

  function getLinkData(panel) {
    const anchor = panel.querySelector('a.wm-panel-link') || panel.querySelector('a.wm-button');
    if (!anchor) return null;
    const href = anchor.getAttribute('href');
    if (!href || href === '#') return null;
    return {href: href, blank: anchor.getAttribute('target') === '_blank'};
  }

  function handleClick(e) {
    if (!isMobile()) return;
    if (e.target.closest('a')) return;
    const panel = e.target.closest('.wm-panel');
    if (!panel) return;
    const data = getLinkData(panel);
    if (!data) return;
    e.preventDefault();
    e.stopPropagation();
    if (data.blank) {
      window.open(data.href, '_blank', 'noopener');
    } else {
      window.location.href = data.href;
    }
  }

  function syncState(root) {
    const mobile = isMobile();
    root.classList.toggle('wm-ep-mobile', mobile);
    if (mobile && cfg.disableExpandOnMobile) {
      root.querySelectorAll('.wm-panel').forEach(function (panel) {
        panel.classList.remove('panel-active');
        panel.classList.remove('panel-inactive');
      });
    }
  }

  function initContainer(el) {
    if (!el.dataset.wmEpMobileDone) {
      el.dataset.wmEpMobileDone = 'true';
      el.addEventListener('mouseover', blockHover, true);
      el.addEventListener('mouseout', blockHover, true);
      el.addEventListener('click', handleClick, true);
    }
    syncState(el);
  }

  function initAll() {
    document.querySelectorAll('[data-wm-plugin="expanding-panels"]').forEach(initContainer);
  }

  let resizeTimer;
  window.addEventListener('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(initAll, 150);
  });

  initAll();
  window.addEventListener('load', initAll);
  setTimeout(initAll, 500);
  setTimeout(initAll, 1500);
  window.addEventListener('mercury:load', initAll);
})();
</script>

 

Buy me a coffee