wordpress-theme-aksrt/assets/widgets/frontend.js

(function () {
  'use strict';

  var config = window.aksrtWidgets || {};
  var reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function once(el, key) {
    var name = 'aksrt' + key;
    if (el.dataset[name]) return false;
    el.dataset[name] = '1';
    return true;
  }

  function moveTabFocus(event, root) {
    var current = event.target.closest('[role="tab"]');
    if (!current) return;
    var tabs = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
    var index = tabs.indexOf(current);
    var next = index;
    if (event.key === 'ArrowRight') next = (index + 1) % tabs.length;
    else if (event.key === 'ArrowLeft') next = (index - 1 + tabs.length) % tabs.length;
    else if (event.key === 'Home') next = 0;
    else if (event.key === 'End') next = tabs.length - 1;
    else return;
    event.preventDefault();
    tabs[next].focus();
    tabs[next].click();
  }

  function videoType(url) {
    if (/\.m3u8(?:\?|$)/i.test(url)) return 'hls';
    if (/\.flv(?:\?|$)/i.test(url)) return 'flv';
    if (/\.mpd(?:\?|$)/i.test(url)) return 'dash';
    return 'auto';
  }

  function initVideo(el) {
    if (!once(el, 'Video')) return;
    var fallback = el.querySelector('video');
    if (fallback) {
      fallback.addEventListener('error', function () {
        var message = el.querySelector('.aksrt-widget-media-error');
        if (message) message.hidden = false;
      });
    }
    function mountPlayer(event) {
      if (typeof window.DPlayer !== 'function' || el.aksrtPlayer) return;
      if (event) event.preventDefault();
      var holder = document.createElement('div');
      holder.className = 'aksrt-widget-video__player';
      el.insertBefore(holder, fallback || el.firstChild);
      try {
        el.aksrtPlayer = new window.DPlayer({
          container: holder,
          autoplay: el.dataset.autoplay === '1' && !reducedMotion,
          video: {
            url: el.dataset.videoUrl || '',
            pic: el.dataset.videoPoster || '',
            type: videoType(el.dataset.videoUrl || '')
          }
        });
        if (el.dataset.muted === '1' && el.aksrtPlayer.video) el.aksrtPlayer.video.muted = true;
        if (fallback) fallback.hidden = true;
      } catch (error) {
        holder.remove();
      }
    }
    if (fallback && fallback.classList.contains('lazyload')) {
      fallback.addEventListener('lazybeforeunveil', mountPlayer, { once: true });
    } else {
      mountPlayer();
    }
  }

  function initToc(toc) {
    if (!once(toc, 'Toc')) return;
    var scope = document.querySelector('.article-content, .wp-posts-content, article .entry-content');
    var headings = scope ? Array.prototype.slice.call(scope.querySelectorAll('h2,h3,h4')) : [];
    var minimum = Number(toc.dataset.minHeadings || 3);
    var list = toc.querySelector('.aksrt-widget-toc__list');
    if (headings.length < minimum || !list) {
      toc.hidden = true;
      return;
    }
    headings.forEach(function (heading, index) {
      if (!heading.id) heading.id = 'aksrt-heading-' + (index + 1);
      var item = document.createElement('li');
      item.className = 'level-' + heading.tagName.toLowerCase();
      var link = document.createElement('a');
      link.href = '#' + heading.id;
      link.textContent = heading.textContent.trim();
      link.addEventListener('click', function (event) {
        event.preventDefault();
        window.scrollTo({ top: heading.getBoundingClientRect().top + window.scrollY - Number(toc.dataset.scrollOffset || 70), behavior: reducedMotion ? 'auto' : 'smooth' });
        history.replaceState(null, '', link.href);
      });
      item.appendChild(link);
      list.appendChild(item);
    });
    var empty = toc.querySelector('.aksrt-widget-toc__empty');
    if (empty) empty.remove();
    var toggle = toc.querySelector('.aksrt-widget-toc__toggle');
    if (toggle) toggle.addEventListener('click', function () {
      var expanded = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', expanded ? 'false' : 'true');
      toc.classList.toggle('is-collapsed', expanded);
    });
  }

  function updateQuote(figure) {
    if (figure.dataset.source !== 'api' || !config.quoteUrl) return Promise.resolve();
    var button = figure.querySelector('button');
    if (button) button.disabled = true;
    return fetch(config.quoteUrl, { credentials: 'same-origin', headers: { Accept: 'application/json' } })
      .then(function (response) { if (!response.ok) throw new Error('quote'); return response.json(); })
      .then(function (data) {
        if (data && data.text) figure.querySelector('blockquote').textContent = data.text;
      })
      .catch(function () {})
      .finally(function () { if (button) button.disabled = false; });
  }

  function initQuote(figure) {
    if (!once(figure, 'Quote')) return;
    var button = figure.querySelector('button');
    if (button) button.addEventListener('click', function () { updateQuote(figure); });
    if (!reducedMotion && figure.dataset.source === 'api') {
      window.setInterval(function () { if (!document.hidden) updateQuote(figure); }, Math.max(5, Number(figure.dataset.interval || 30)) * 1000);
    }
  }

  function errorMarkup() {
    var i18n = config.i18n || {};
    return '<div class="aksrt-widget-request-error" role="alert"><span>' + (i18n.error || '加载失败，请重试。') + '</span><button type="button" data-widget-retry>' + (i18n.retry || '重试') + '</button></div>';
  }

  function itemsUrl(widget, instance, page, segment) {
    var base = String(config.restUrl || '').replace(/\/$/, '');
    var url = base + '/' + encodeURIComponent(widget) + '/items?instance=' + encodeURIComponent(instance) + '&page=' + encodeURIComponent(page);
    if (segment !== undefined && segment !== '') url += '&segment=' + encodeURIComponent(segment);
    return url;
  }

  function loadItems(container, page, append) {
    var owner = container.closest('[data-widget]') || container;
    var widget = owner.dataset.widget || container.dataset.widget;
    var instance = owner.dataset.instance || container.dataset.instance;
    var segment = container.dataset.segment || owner.dataset.segment || '';
    if (!widget || !instance || !config.restUrl || container.dataset.loading === '1') return;
    container.dataset.loading = '1';
    container.classList.add('is-loading');
		container.setAttribute('aria-busy', 'true');
    fetch(itemsUrl(widget, instance, page, segment), { credentials: 'same-origin', headers: { Accept: 'application/json' } })
      .then(function (response) { if (!response.ok) throw new Error('items'); return response.json(); })
      .then(function (data) {
        var oldPagination = container.querySelector('.aksrt-widget-pagination, .aksrt-widget-load-more');
        if (oldPagination) oldPagination.remove();
        var fragment = document.createElement('div');
        fragment.innerHTML = String(data.html || '');
        if (append) {
          var target = container.querySelector('.aksrt-widget-posts, .posts-row, .swiper-wrapper') || container;
          var source = fragment.querySelector('.aksrt-widget-posts, .posts-row, .swiper-wrapper');
          Array.prototype.slice.call((source || fragment).children).forEach(function (node) { target.appendChild(node); });
        } else {
          container.innerHTML = fragment.innerHTML;
        }
        if (data.paginate_html) container.insertAdjacentHTML('beforeend', data.paginate_html);
        container.dataset.page = String(data.page || page);
        scan(container);
      })
      .catch(function () { container.innerHTML = errorMarkup(); })
			.finally(function () {
				delete container.dataset.loading;
				container.classList.remove('is-loading');
				container.setAttribute('aria-busy', 'false');
			});
  }

  function initItems(container) {
    if (!once(container, 'Items')) return;
    if (container.classList.contains('is-loading')) loadItems(container, 1, false);
    container.addEventListener('click', function (event) {
      var retry = event.target.closest('[data-widget-retry]');
      var more = event.target.closest('.aksrt-widget-load-more');
      var pageButton = event.target.closest('[data-widget-page]');
      if (retry) loadItems(container, Number(container.dataset.page || 1), false);
      if (more) loadItems(container, Number(more.dataset.nextPage || 2), true);
      if (pageButton) loadItems(container, Number(pageButton.dataset.widgetPage || 1), false);
    });
  }

  function initTabs(tabs) {
    if (!once(tabs, 'Tabs')) return;
	tabs.addEventListener('keydown', function (event) { moveTabFocus(event, tabs); });
    tabs.addEventListener('click', function (event) {
      var button = event.target.closest('[role="tab"][data-segment]');
      if (!button) return;
		 event.preventDefault();
			tabs.querySelectorAll('[role="tab"]').forEach(function (tab) {
				tab.setAttribute('aria-selected', tab === button ? 'true' : 'false');
				tab.setAttribute('tabindex', tab === button ? '0' : '-1');
				if (tab.parentElement) tab.parentElement.classList.toggle('active', tab === button);
			});
			tabs.querySelectorAll('.tab-content > .tab-pane').forEach(function (item) {
				var active = item.id === button.getAttribute('aria-controls');
				item.classList.toggle('active', active); item.classList.toggle('in', active);
			});
			var panel = tabs.querySelector('[data-widget-items][data-segment="' + button.dataset.segment + '"]');
			if (!panel) panel = tabs.querySelector('[data-widget-items]');
      panel.dataset.segment = button.dataset.segment;
			panel.setAttribute('aria-labelledby', button.id);
			loadItems(panel, 1, false);
    });
  }

  function initFaq(faq) {
    if (!once(faq, 'Faq')) return;
    faq.addEventListener('click', function (event) {
      var button = event.target.closest('.aksrt-faq__item > button');
      if (!button) return;
      var expanded = button.getAttribute('aria-expanded') === 'true';
      button.setAttribute('aria-expanded', expanded ? 'false' : 'true');
      var panel = document.getElementById(button.getAttribute('aria-controls'));
      if (panel) panel.hidden = expanded;
    });
    var search = faq.querySelector('input[type="search"]');
    if (search) search.addEventListener('input', function () {
      var needle = search.value.trim().toLowerCase();
      faq.querySelectorAll('.aksrt-faq__item').forEach(function (item) { item.hidden = needle && String(item.dataset.search || '').toLowerCase().indexOf(needle) === -1; });
    });
  }

  function initFeatures(features) {
    if (!once(features, 'Features')) return;
		features.addEventListener('keydown', function (event) { moveTabFocus(event, features); });
    features.addEventListener('click', function (event) {
      var button = event.target.closest('[data-feature-index]');
      if (!button) return;
      var index = button.dataset.featureIndex;
			features.querySelectorAll('[data-feature-index]').forEach(function (tab) {
				tab.setAttribute('aria-selected', tab === button ? 'true' : 'false');
				tab.setAttribute('tabindex', tab === button ? '0' : '-1');
			});
      features.querySelectorAll('[data-feature-panel]').forEach(function (panel) { panel.hidden = panel.dataset.featurePanel !== index; });
    });
  }

  function initCount(el) {
    if (!once(el, 'Count') || reducedMotion) return;
    var raw = el.dataset.countUp || '';
    var match = raw.match(/-?[0-9]+(?:\.[0-9]+)?/);
    if (!match) return;
    var target = Number(match[0]);
    var prefix = raw.slice(0, match.index);
    var suffix = raw.slice(match.index + match[0].length);
    var start = performance.now();
    function frame(now) {
      var progress = Math.min(1, (now - start) / 900);
      el.textContent = prefix + Math.round(target * (1 - Math.pow(1 - progress, 3))) + suffix;
      if (progress < 1) requestAnimationFrame(frame);
    }
    requestAnimationFrame(frame);
  }

  function scan(root) {
    var scope = root || document;
    scope.querySelectorAll('.aksrt-widget-video[data-video-url]').forEach(initVideo);
    scope.querySelectorAll('.aksrt-widget-toc').forEach(initToc);
    scope.querySelectorAll('.aksrt-widget-quote').forEach(initQuote);
    scope.querySelectorAll('[data-widget-items]').forEach(initItems);
    scope.querySelectorAll('.aksrt-widget-tabs, .widget-tab-post').forEach(initTabs);
    scope.querySelectorAll('.aksrt-faq').forEach(initFaq);
    scope.querySelectorAll('.aksrt-feature-intro').forEach(initFeatures);
    scope.querySelectorAll('[data-count-up]').forEach(initCount);
    if (typeof window.VanillaTilt !== 'undefined') scope.querySelectorAll('[data-aksrt-tilt]').forEach(function (el) { if (once(el, 'Tilt')) window.VanillaTilt.init(el); });
  }

  function ready() {
    scan(document);
    if ('MutationObserver' in window) {
      new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) { mutation.addedNodes.forEach(function (node) { if (node.nodeType === 1) scan(node); }); });
      }).observe(document.body, { childList: true, subtree: true });
    }
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', ready);
  else ready();

  // AJAX 注入新内容后由 auto_fun 重扫（once() data 标记保证幂等）。
  if (window.jQuery) window.jQuery(document).on('auto_fun', function () { scan(document); });
})();