MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 111: / Line 111: @@
 /* =========================================================
-    OOO Browser controller
+    OOO Browser anchor activation
     ========================================================= */
-document.addEventListener("click", function (e) {
+mw.hook('wikipage.content').add(function () {
-   const item = e.target.closest(".ooo-browser__item");
+   const hash = window.location.hash.replace('#','');
-   if (!item) return;
+   if (!hash) return;
-   const browser = item.closest(".ooo-browser");
+  const item = document.querySelector('.ooo-browser__item[data-target="'+hash+'"]');
+  const panel = document.getElementById(hash);
+  if (!item || !panel) return;
+   const browser = item.closest('.ooo-browser');
    if (!browser) return;
-  const target = item.getAttribute("data-target");
+   browser.querySelectorAll('.ooo-browser__item')
-  if (!target) return;
+     .forEach(el => el.classList.remove('is-active'));
-  e.preventDefault();
-  // activate left item
-   browser.querySelectorAll(".ooo-browser__item")
-     .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");
+   panel.classList.add('is-active');
-   /* FIX: keep layout stable */
+   setTimeout(() => {
-  browser.querySelector(".ooo-browser__panel")
+     panel.scrollIntoView({ block: "start" });
-     .scrollIntoView({ block: "start", behavior: "instant" });
+  }, 200);
 });