MediaWiki:Citizen.js: Difference between revisions

Line 27:

if (window.innerWidth < 768) return; // Desktop only

~~// Wait for Citizen TOC module to load~~

mw.loader.using('skins.citizen.toc').then(function() {

~~// Override onHeadingClick behavior~~

const citizenToc = require('skins.citizen.toc');

Line 35:

Line 33:

citizenToc.props.onHeadingClick = function(id) {

~~// Expand the main page section manually~~

const headingId = id.replace(/^toc-/, ''); // Remove toc- prefix

const ~~anchor~~ = ~~document.getElementById(~~id.replace(/^toc-/, '')); // Remove "toc-" prefix

if (~~anchor~~) {

const heading = document.getElementById(headingId);

~~const sectionHeading = anchor.closest~~(~~'.citizen-section-heading'~~);

if (!heading) {

~~const content = sectionHeading?.nextElementSibling~~;

if (originalOnHeadingClick) {

originalOnHeadingClick(id);

}

return;

}

if (~~content && content~~.~~hidden~~) {

const sectionHeading = heading.closest('.citizen-section-heading');

content.~~hidden = false~~; ~~// Expand parent section~~

const content = sectionHeading?.nextElementSibling;

}

~~// Scroll after a slight delay~~

if (content && content.hidden) {

~~setTimeout(~~() => {

content.hidden = false; // Expand parent section

~~anchor~~.~~scrollIntoView({ behavior: 'smooth', block: 'start' });~~

~~}, 50)~~;

}

// ~~Then call~~ the ~~original~~ behavior ~~to update TOC highlighting~~

// Scroll to the heading AFTER expanding

setTimeout(() => {

heading.scrollIntoView({ behavior: 'smooth', block: 'start' });

}, 50);

if (originalOnHeadingClick) {

originalOnHeadingClick(id);

@@ Line 27: / Line 27: @@
    if (window.innerWidth < 768) return; // Desktop only
-  // Wait for Citizen TOC module to load
    mw.loader.using('skins.citizen.toc').then(function() {
-    // Override onHeadingClick behavior
      const citizenToc = require('skins.citizen.toc');
@@ Line 35: / Line 33: @@
      citizenToc.props.onHeadingClick = function(id) {
-      // Expand the main page section manually
+       const headingId = id.replace(/^toc-/, ''); // Remove toc- prefix
-       const anchor = document.getElementById(id.replace(/^toc-/, '')); // Remove "toc-" prefix
-       if (anchor) {
+      const heading = document.getElementById(headingId);
-         const sectionHeading = anchor.closest('.citizen-section-heading');
+       if (!heading) {
-         const content = sectionHeading?.nextElementSibling;
+         if (originalOnHeadingClick) {
+          originalOnHeadingClick(id);
+         }
+        return;
+      }
-        if (content && content.hidden) {
+      const sectionHeading = heading.closest('.citizen-section-heading');
-          content.hidden = false; // Expand parent section
+      const content = sectionHeading?.nextElementSibling;
-        }
-        // Scroll after a slight delay
+      if (content && content.hidden) {
-        setTimeout(() => {
+        content.hidden = false; // Expand parent section
-          anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        }, 50);
        }
-       // Then call the original behavior to update TOC highlighting
+       // Scroll to the heading AFTER expanding
+      setTimeout(() => {
+        heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 50);
        if (originalOnHeadingClick) {
          originalOnHeadingClick(id);