wordpress-theme-aksrt/assets/js/page-template.js

/**
 * AKSRT Page Template
 *
 * Handles template-scoped content interactions: lightbox,
 * expandable article bodies, and one-shot query cleanup banners.
 *
 * @package AKSRT
 */

(function () {
  'use strict';

  function initLightbox() {
    var overlay = document.getElementById('lightbox-overlay');
    var content = document.querySelector(".wp-posts-content[data-aksrt-lightbox='1'], .entry-content[data-aksrt-lightbox='1']");
    if (!overlay || !content || overlay.dataset.aksrtLightboxBound === '1') return;

    overlay.dataset.aksrtLightboxBound = '1';

    var image = overlay.querySelector('.lightbox-img');
    var caption = overlay.querySelector('.lightbox-caption');
    var closeBtn = overlay.querySelector('.lightbox-close');

    function close() {
      overlay.classList.remove('is-open');
      overlay.setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
      if (image) {
        image.src = '';
        image.alt = '';
      }
    }

    content.querySelectorAll('img').forEach(function (img) {
      var link = img.closest('a[href]');
      var linkHref = link ? link.href : '';
      var linksToImage = /\.(?:avif|gif|jpe?g|png|svg|webp)(?:[?#].*)?$/i.test(linkHref);
      if (img.closest('[data-no-lightbox]') || (link && !linksToImage)) return;

      img.classList.add('aksrt-lightbox-target');
      img.addEventListener('click', function (event) {
        if (!image) return;
        if (linksToImage) event.preventDefault();

        image.src = linksToImage
          ? linkHref
          : (img.getAttribute('data-src') || img.getAttribute('data-lazy-src') || img.currentSrc || img.src);
        image.alt = img.alt || '';

        if (caption) {
          var figure = img.closest('figure');
          var figureCaption = figure ? figure.querySelector('figcaption') : null;
          caption.textContent = img.alt || (figureCaption ? figureCaption.textContent : '') || '';
        }

        overlay.classList.add('is-open');
        overlay.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
        if (closeBtn) closeBtn.focus();
      });
    });

    overlay.addEventListener('click', function (event) {
      if (event.target === overlay || event.target === closeBtn || (event.target.closest && event.target.closest('.lightbox-close'))) {
        close();
      }
    });

    document.addEventListener('keydown', function (event) {
      if (event.key === 'Escape' && overlay.classList.contains('is-open')) {
        close();
      }
    });
  }

  function initContentExpand() {
    // legacy-style: inject .read-more inside .limit-height and expand on click.
    document.querySelectorAll('.wp-posts-content.limit-height, .limit-height[data-nav]').forEach(function (content) {
      if (content.dataset.aksrtExpandBound === '1') return;
      content.dataset.aksrtExpandBound = '1';

      var customMax = parseInt(content.getAttribute('data-maxheight') || content.dataset.maxheight || '0', 10);
      // data-maxheight may be maxheight-80 (legacy) or absolute maxheight; prefer style max-height.
      var styleMax = 0;
      if (content.style && content.style.maxHeight) {
        styleMax = parseInt(content.style.maxHeight, 10) || 0;
      }
      var limit = styleMax > 0 ? styleMax : (customMax > 0 ? customMax + 80 : 0);
      if (!(limit > 0) && customMax > 0) {
        limit = customMax;
      }
      if (!(limit > 0)) {
        content.classList.remove('limit-height');
        return;
      }

      if (content.scrollHeight <= limit + 40) {
        content.classList.remove('limit-height');
        content.style.maxHeight = '';
        return;
      }

      content.classList.add('limit-height');
      content.style.maxHeight = limit + 'px';

      if (content.querySelector('.read-more')) return;

      var wrap = document.createElement('div');
      wrap.className = 'read-more';
      var link = document.createElement('a');
      link.href = 'javascript:;';
      link.className = 'read-more-open';
      link.innerHTML = '展开阅读全文<i class="fa ml10 fa-angle-down" aria-hidden="true"></i>';
      wrap.appendChild(link);
      content.appendChild(wrap);

      link.addEventListener('click', function (event) {
        event.preventDefault();
        content.classList.remove('limit-height');
        content.style.maxHeight = '';
        wrap.remove();
      });
    });

    // Compatibility: old external expand buttons.
    document.addEventListener('click', function (event) {
      var open = event.target.closest && event.target.closest('.read-more-open');
      if (!open) return;
      var limitBox = open.closest('.limit-height');
      if (!limitBox) return;
      event.preventDefault();
      limitBox.classList.remove('limit-height');
      limitBox.style.maxHeight = '';
      var more = open.closest('.read-more');
      if (more) more.remove();
    });
  }

  function initFlashQueryCleanup() {
    document.querySelectorAll('[data-aksrt-flash-query]').forEach(function (node) {
      var queryKey = node.getAttribute('data-aksrt-flash-query');
      if (!queryKey || !window.history || typeof window.history.replaceState !== 'function') return;

      var url = new URL(window.location.href);
      if (!url.searchParams.has(queryKey)) return;

      url.searchParams.delete(queryKey);
      window.history.replaceState({}, '', url.toString());
    });
  }

  function init() {
    initLightbox();
    initContentExpand();
    initFlashQueryCleanup();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();