MediaWiki:Common.js: Difference between revisions

← Older edit

@@ Line 111: / Line 111: @@
 /* =========================================================
-    OOO Browser controller
+    OOO Anchor navigation (tabs + browser)
     ========================================================= */
-document.addEventListener("click", function (e) {
+mw.hook('wikipage.content').add(function () {
+  if (!location.hash) return;
-   const item = e.target.closest(".ooo-browser__item");
+   const id = location.hash.slice(1);
-  if (!item) return;
-   const browser = item.closest(".ooo-browser");
+   setTimeout(function(){
-  if (!browser) return;
-  const target = item.getAttribute("data-target");
+    const item  = document.querySelector('.ooo-browser__item[data-target="'+id+'"]');
-  if (!target) return;
+    const panel = document.getElementById(id);
-  e.preventDefault();
+    if (!item || !panel) return;
-  // activate left item
+    const browser = item.closest('.ooo-browser');
-  browser.querySelectorAll(".ooo-browser__item")
+     if (!browser) return;
-     .forEach(el => el.classList.remove("is-active"));
-  item.classList.add("is-active");
+    browser.querySelectorAll('.ooo-browser__item')
+      .forEach(el => el.classList.remove('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");
+    panel.classList.add('is-active');
-   /* FIX: keep layout stable */
+   },150);
-  browser.querySelector(".ooo-browser__panel")
-    .scrollIntoView({ block: "start", behavior: "instant" });
 });
 /* =========================================================
-    OOO Browser anchor activation (for wiki links)
+    OOO Browser controller (click switching)
     ========================================================= */
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("click", function (e) {
-   const hash = window.location.hash.replace("#", "");
+   const item = e.target.closest(".ooo-browser__item");
-   if (!hash) return;
+   if (!item) return;
-   const item = document.querySelector('.ooo-browser__item[data-target="'+hash+'"]');
+   const browser = item.closest(".ooo-browser");
-   const panel = document.getElementById(hash);
+   if (!browser) return;
-   if (!item || !panel) return;
+  const target = item.getAttribute("data-target");
+   if (!target) return;
-   const browser = item.closest(".ooo-browser");
+   e.preventDefault();
-  if (!browser) return;
-  // activate item
    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");
-  // activate panel
+const panel = browser.querySelector("#" + CSS.escape(target));
-  browser.querySelectorAll(".ooo-browser__info")
+if (panel) panel.classList.add("is-active");
-    .forEach(el => el.classList.remove("is-active"));
-  panel.classList.add("is-active");
+/* update browser URL */
+history.replaceState(null, null, "#" + target);
 });