查看“︁Widget:GameSwitcher”︁的源代码

<script>
$(function () {
  var $switcher = $('.game-switcher');
  if (!$switcher.length) return;

  var $hero = $('#gs-hero-wrap');
  var $heroImg = $hero.find('img');
  var loaded = {};       // 内存缓存: { panelId: html }
  var prefetching = {};  // 防重复预取
  var storageKey = 'gs-cache-';

  // ============ 初始化 ============
  var $firstBtn = $switcher.find('.gs-tab-btn').first();
  if ($firstBtn.length) {
    $firstBtn.addClass('gs-active').attr('aria-selected', 'true');
    if ($heroImg.length && !$heroImg.attr('src')) {
      $heroImg.attr('src', $firstBtn.data('hero'));
    }
  }
  restoreHash();

  // ============ 点击 ============
  $switcher.on('click', '.gs-tab-btn', function () {
    activate($(this));
  });

  // ============ 键盘 ============
  $switcher.on('keydown', '.gs-tab-btn', function (e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      activate($(this));
    }
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      e.preventDefault();
      var $btns = $switcher.find('.gs-tab-btn');
      var idx = $btns.index(this);
      var next = e.key === 'ArrowRight' ? idx + 1 : idx - 1;
      if (next >= 0 && next < $btns.length) {
        $btns.eq(next).focus();
      }
    }
  });

  // ============ 悬停预加载 ============
  $switcher.on('mouseenter', '.gs-tab-btn', function () {
    var panelId = $(this).data('panel');
    var pageName = $(this).data('page');
    if (pageName && !loaded[panelId] && !prefetching[panelId]) {
      prefetch(panelId, pageName);
    }
  });

  // ============ URL hash ============
  $(window).on('hashchange', restoreHash);

  // ============ 激活面板 ============
  function activate($btn) {
    if ($btn.hasClass('gs-active')) return;

    var panelId = $btn.data('panel');
    var heroSrc = $btn.data('hero');
    var pageName = $btn.data('page');

    // 1. 头图淡入淡出
    switchHero(heroSrc);

    // 2. 按钮高亮
    $switcher.find('.gs-tab-btn')
      .removeClass('gs-active')
      .attr('aria-selected', 'false');
    $btn.addClass('gs-active').attr('aria-selected', 'true');

    // 3. 面板切换
    var $panel = $('#' + panelId);
    $switcher.find('.gs-content-panel').removeClass('gs-active');

    if (!$panel.length) {
      $panel = $('<div>', {
        id: panelId,
        class: 'gs-content-panel gs-active'
      }).appendTo('.gs-content');
      loadContent($panel, panelId, pageName);
    } else {
      $panel.addClass('gs-active');
    }

    // 4. URL hash
    setHash(panelId);

    // 5. 后台静默预取其余
    schedulePrefetchOthers();
  }

  // ============ 头图切换（预加载 + 淡入淡出） ============
  function switchHero(url) {
    if (!$hero.length || !url) return;
    var current = $heroImg.attr('src');
    if (current === url) return;

    $('<img>').on('load', function () {
      $hero.addClass('gs-hero--fade');
      setTimeout(function () {
        $heroImg.attr('src', url);
        $hero.removeClass('gs-hero--fade');
      }, 160);
    }).attr('src', url);
  }

  // ============ 内容加载 ============
  function loadContent($panel, panelId, pageName) {
    if (loaded[panelId]) {
      $panel.html(loaded[panelId]);
      return;
    }

    var stored = mw.storage.get(storageKey + panelId);
    if (stored) {
      loaded[panelId] = stored;
      $panel.html(stored);
      return;
    }

    if (!pageName) return;

    $panel.html('<div class="gs-loading">加载中...</div>');

    $.get(mw.util.wikiScript('api'), {
      action: 'parse',
      page: pageName,
      prop: 'text',
      format: 'json',
      disablelimitreport: 1
    }).then(function (data) {
      if (data.parse && data.parse.text) {
        var html = data.parse.text['*'];
        loaded[panelId] = html;
        try { mw.storage.set(storageKey + panelId, html); } catch (e) {}
        $panel.html(html);
      }
    }).fail(function () {
      $panel.html('<div class="gs-loading">加载失败，<a href="javascript:location.reload()">刷新</a>重试</div>');
    });
  }

  // ============ 预加载 ============
  function prefetch(panelId, pageName) {
    prefetching[panelId] = true;

    var stored = mw.storage.get(storageKey + panelId);
    if (stored) {
      loaded[panelId] = stored;
      prefetching[panelId] = false;
      return;
    }

    $.get(mw.util.wikiScript('api'), {
      action: 'parse',
      page: pageName,
      prop: 'text',
      format: 'json',
      disablelimitreport: 1
    }).then(function (data) {
      if (data.parse && data.parse.text) {
        var html = data.parse.text['*'];
        loaded[panelId] = html;
        try { mw.storage.set(storageKey + panelId, html); } catch (e) {}
      }
    }).always(function () {
      prefetching[panelId] = false;
    });
  }

  function schedulePrefetchOthers() {
    setTimeout(function () {
      $switcher.find('.gs-tab-btn').each(function () {
        var panelId = $(this).data('panel');
        var pageName = $(this).data('page');
        if (!loaded[panelId] && !prefetching[panelId] && pageName) {
          prefetch(panelId, pageName);
        }
      });
    }, 500);
  }

  // ============ URL hash ============
  function setHash(panelId) {
    try { history.replaceState(null, '', '#' + panelId); } catch (e) {}
  }

  function restoreHash() {
    var hash = window.location.hash.replace('#', '');
    if (hash && hash.indexOf('panel-') === 0) {
      var $btn = $switcher.find('[data-panel="' + hash + '"]');
      if ($btn.length && !$btn.hasClass('gs-active')) {
        activate($btn);
      }
    }
  }
});
</script>