MediaWiki:Common.js: Difference between revisions

mNo edit summary
Tag: Manual revert
mNo edit summary
 
(11 intermediate revisions by the same user not shown)
Line 111: Line 111:


/* =========================================================
/* =========================================================
   OOO Browser controller
  OOO Anchor navigation (tabs + browser)
  ========================================================= */
 
mw.hook('wikipage.content').add(function () {
 
  if (!location.hash) return;
 
  const id = location.hash.slice(1);
 
  setTimeout(function(){
 
    const item  = document.querySelector('.ooo-browser__item[data-target="'+id+'"]');
    const panel = document.getElementById(id);
 
    if (!item || !panel) return;
 
    const browser = item.closest('.ooo-browser');
    if (!browser) return;
 
    browser.querySelectorAll('.ooo-browser__item')
      .forEach(el => el.classList.remove('is-active'));
 
    browser.querySelectorAll('.ooo-browser__info')
      .forEach(el => el.classList.remove('is-active'));
 
    item.classList.add('is-active');
    panel.classList.add('is-active');
 
  },150);
 
});
 
/* =========================================================
   OOO Browser controller (click switching)
   ========================================================= */
   ========================================================= */


Line 127: Line 160:
   e.preventDefault();
   e.preventDefault();


  // activate left item
   browser.querySelectorAll(".ooo-browser__item")
   browser.querySelectorAll(".ooo-browser__item")
     .forEach(el => el.classList.remove("is-active"));
     .forEach(el => el.classList.remove("is-active"));


  item.classList.add("is-active");
  // activate panel
   browser.querySelectorAll(".ooo-browser__info")
   browser.querySelectorAll(".ooo-browser__info")
     .forEach(el => el.classList.remove("is-active"));
     .forEach(el => el.classList.remove("is-active"));


   const panel = browser.querySelector("#" + CSS.escape(target));
   item.classList.add("is-active");
  if (panel) panel.classList.add("is-active");
 
const panel = browser.querySelector("#" + CSS.escape(target));
if (panel) panel.classList.add("is-active");


  /* FIX: keep layout stable */
/* update browser URL */
  browser.querySelector(".ooo-browser__panel")
history.replaceState(null, null, "#" + target);
    .scrollIntoView({ block: "start", behavior: "instant" });


});
});
/* V2 Level Progression Accordion */
(function () {
    function initLevelCards() {
        document.querySelectorAll('.ooo-v2-level-heading').forEach(function (heading) {
            if (heading.dataset.levelInitialized) return;
            heading.dataset.levelInitialized = '1';
            var card = heading.closest('.ooo-v2-level-card');
            if (!card) return;
            card.classList.remove('is-open');
            heading.setAttribute('aria-expanded', 'false');
            function toggle() {
                var isOpen = card.classList.toggle('is-open');
heading.setAttribute('aria-expanded', String(isOpen));
var detailsLabel = heading.querySelector('.ooo-v2-level-arrow');
if (detailsLabel) {
    detailsLabel.textContent = isOpen ? 'Hide Details' : 'Details';
}
            }
            heading.addEventListener('click', toggle);
            heading.addEventListener('keydown', function (event) {
                if (event.key === 'Enter' || event.key === ' ') {
                    event.preventDefault();
                    toggle();
                }
            });
        });
    }
    mw.hook('wikipage.content').add(initLevelCards);
})();