Toggle search
Toggle menu
98
211
17
2.7K
GScripts
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.js: Difference between revisions

MediaWiki interface page
More actions
← Older editNewer edit →
No edit summary
No edit summary
Line 18: Line 18:


       if (content && content.classList.contains('citizen-section')) {
       if (content && content.classList.contains('citizen-section')) {
         content.hidden = 'until-found'; // collapse by default
         content.hidden = 'until-found'; // Collapse by default
       }
       }
     });
     });
Line 29: Line 29:


   let current = heading;
   let current = heading;
   while (current) {
   while (current) {
    // Expand if we find a collapsed citizen-section
     if (current.classList && current.classList.contains('citizen-section') && current.hidden) {
     if (current.classList && current.classList.contains('citizen-section') && current.hidden) {
       current.hidden = false;
       current.hidden = false; // Expand hidden section
     }
     }
    // Stop walking if we hit a section heading
     if (current.classList && current.classList.contains('citizen-section-heading')) {
     if (current.classList && current.classList.contains('citizen-section-heading')) {
       break;
       break; // Stop at section heading
     }
     }
     current = current.parentElement;
     current = current.parentElement;
   }
   }
}
}


// Helper: expand parent, wait two frames, scroll manually
// Helper: True final scroll to real heading, after layout is ready
function smoothScrollToHeading(heading) {
function smoothScrollToHeading(heading) {
   if (!heading) return;
   if (!heading) return;


   // If heading has 0px height (ghost anchor), find next real heading
   // If the heading is an invisible anchor, find the next real visible heading
   if (heading.offsetHeight === 0) {
   if (heading.offsetHeight === 0) {
     const nextHeading = heading.parentElement.querySelector('h1, h2, h3, h4, h5, h6');
     const nextHeading = heading.parentElement.querySelector('h1, h2, h3, h4, h5, h6');
Line 57: Line 52:
   }
   }


   // Wait two animation frames for DOM to reflow fully
   // Wait two animation frames to ensure layout is ready
   requestAnimationFrame(() => {
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       const rect = heading.getBoundingClientRect();
       const rect = heading.getBoundingClientRect();
       const scrollTop = window.scrollY + rect.top - 60; // 60px offset for sticky header
       const scrollTop = window.scrollY + rect.top - 60; // Adjust 60px for sticky header


       window.scrollTo({ top: scrollTop, behavior: 'smooth' });
       window.scrollTo({ top: scrollTop, behavior: 'smooth' });
Line 67: Line 62:
   });
   });
}
}


// === Handle direct URL loads with a hash (on page load) ===
// === Handle direct URL loads with a hash (on page load) ===
Line 80: Line 74:
           expandCitizenSectionFromHeading(heading);
           expandCitizenSectionFromHeading(heading);


           setTimeout(() => {
           requestAnimationFrame(() => {
             smoothScrollToHeading(heading);
             requestAnimationFrame(() => {
           }, 50);
              smoothScrollToHeading(heading);
            });
           });
         }
         }
       }, 100);
       }, 100);
Line 89: Line 85:
});
});


// === Hook into Citizen TOC (Contents Menu) clicks ===
// === Hook into Citizen TOC (Contents Menu) clicks correctly ===
mw.hook('wikipage.content').add(function() {
  if (window.innerWidth >= 768) {
    mw.loader.using('skins.citizen.toc').then(function() {
      const citizenToc = require('skins.citizen.toc');
      const originalOnHeadingClick = citizenToc.props.onHeadingClick;
 
      citizenToc.props.onHeadingClick = function(id) {
        const headingId = id.replace(/^toc-/, '');
        const heading = document.getElementById(headingId);
        if (heading) {
          expandCitizenSectionFromHeading(heading);
 
          setTimeout(() => {
            smoothScrollToHeading(heading);
          }, 50);
        }
 
        if (originalOnHeadingClick) {
          originalOnHeadingClick(id);
        }
      };
    });
  }
});
 
// === Safely intercept TOC clicks directly to fix expand timing ===
mw.hook('wikipage.content').add(function() {
mw.hook('wikipage.content').add(function() {
   if (window.innerWidth >= 768) {
   if (window.innerWidth >= 768) {
Line 121: Line 91:
       document.querySelectorAll('#mw-panel-toc a[href^="#"]').forEach(function(anchor) {
       document.querySelectorAll('#mw-panel-toc a[href^="#"]').forEach(function(anchor) {
         anchor.addEventListener('click', function(e) {
         anchor.addEventListener('click', function(e) {
          e.preventDefault(); // Block native browser jump immediately
           const hash = decodeURIComponent(this.getAttribute('href')).substring(1);
           const hash = decodeURIComponent(this.getAttribute('href')).substring(1);
           const heading = document.getElementById(hash);
           const heading = document.getElementById(hash);


           if (heading) {
           if (heading) {
            e.preventDefault(); // Prevent native jump
             expandCitizenSectionFromHeading(heading);
             expandCitizenSectionFromHeading(heading);


             setTimeout(() => {
             requestAnimationFrame(() => {
               smoothScrollToHeading(heading);
               requestAnimationFrame(() => {
             }, 50);
                smoothScrollToHeading(heading);
              });
             });
           }
           }
         });
         });
Retrieved from "https://wiki.gscripts.co/MediaWiki:Citizen.js"