MediaWiki:Citizen.js

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

/* Amberfall Wiki: progressive enhancement for the main page only. */
(function () {
  'use strict';
  function initialize(root) {
    if (!root || root.dataset.afInitialized === '1') { return; }
    root.dataset.afInitialized = '1';
    var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var names = { all: 'Все', world: 'Мир', character: 'Персонаж', mechanics: 'Механики', guide: 'Новичкам' };
    var filters = root.querySelectorAll('.af-filter');
    var entries = root.querySelectorAll('.af-entry');
    function setFilter(which) {
      Array.prototype.forEach.call(filters, function (f) {
        var active = f.classList.contains('af-filter--' + which);
        f.classList.toggle('is-active', active);
        f.setAttribute('aria-pressed', active ? 'true' : 'false');
      });
      Array.prototype.forEach.call(entries, function (card) {
        var visible = which === 'all' || card.classList.contains('af-cat--' + which);
        card.classList.toggle('is-hidden', !visible);
      });
    }
    Array.prototype.forEach.call(filters, function (f) {
      var name = Object.keys(names).filter(function (n) { return f.classList.contains('af-filter--' + n); })[0];
      if (!name) { return; }
      f.setAttribute('role', 'button');
      f.setAttribute('tabindex', '0');
      f.setAttribute('aria-label', 'Показать: ' + names[name]);
      f.addEventListener('click', function () { setFilter(name); });
      f.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setFilter(name); }
      });
    });
    setFilter('all');
    if (reduceMotion) { return; }
    var hero = root.querySelector('.af-hero');
    if (hero && window.matchMedia && window.matchMedia('(pointer:fine)').matches) {
      var pending = false, relX = 0, relY = 0, pX = 0, pY = 0;
      hero.addEventListener('pointermove', function (event) {
        var rect = hero.getBoundingClientRect();
        relX = ((event.clientX - rect.left) / rect.width - .5) * 2;
        relY = ((event.clientY - rect.top) / rect.height - .5) * 2;
        pX = (event.clientX - rect.left) / rect.width * 100;
        pY = (event.clientY - rect.top) / rect.height * 100;
        if (!pending) {
          pending = true;
          window.requestAnimationFrame(function () {
            hero.style.setProperty('--af-pointer-x', pX.toFixed(1) + '%');
            hero.style.setProperty('--af-pointer-y', pY.toFixed(1) + '%');
            hero.style.setProperty('--af-art-x', (relX * -13).toFixed(1) + 'px');
            hero.style.setProperty('--af-art-y', (relY * -7).toFixed(1) + 'px');
            pending = false;
          });
        }
      }, { passive:true });
      hero.addEventListener('pointerleave', function () {
        hero.style.setProperty('--af-art-x','0px');
        hero.style.setProperty('--af-art-y','0px');
      });
      Array.prototype.forEach.call(entries, function (card) {
        card.addEventListener('pointermove', function (event) {
          var rect = card.getBoundingClientRect();
          card.style.setProperty('--af-card-x', (event.clientX - rect.left) + 'px');
          card.style.setProperty('--af-card-y', (event.clientY - rect.top) + 'px');
        }, { passive:true });
      });
    }
    // Do not hide whole sections while waiting for scroll events. The wiki must remain readable.
    root.classList.add('af-js-ready');
  }
  function mount() { initialize(document.querySelector('.af-vanguard')); }
  if (typeof mw !== 'undefined' && mw.hook) { mw.hook('wikipage.content').add(mount); }
  if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', mount); }
  else { mount(); }
})();