Comrade:CriticalResist/sandbox/Hyperlink buttons on headings documentation

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

In september 2023 I added some simple JavaScript to Common.js to add a hyperlink icon on the Citizen skin next to all headings and subheadings.

At this time however I disabled the code on level 1 headings because clicking on the hyperlink button somehow made the heading collapse as well (which is the normal behaviour from this skin, you can collapse level 1 headings, but not when you click on the button. Anyway, this is the only code needed:

(function($, mw) {

   // Wait for the DOM to be ready

   $(document).ready(function() {

       // Loop through all the section headings and subheadings

       /*$('.section-heading .mw-headline, .section-subheading .mw-headline').each(function() {*/

       $('.section-subheading .mw-headline').each(function() {

           // Get the section title

           var sectionTitle = $(this).text();

           

           // Replace spaces with underscores in the section title

           var sectionTitleWithUnderscores = sectionTitle.replace(/ /g, '_');

           

           // Create the HTML for the hyperlink button

           var hyperlinkButton = '<a class="heading-hyperlink mw-editsection-visualeditor citizen-editsection-icon mw-ui-icon-wikimedia-link" href="/wiki/' + mw.config.get('wgPageName') + '#' + sectionTitleWithUnderscores + '" title="' + sectionTitle + '"></a>';

           // Insert the button HTML after the section heading or subheading

           $(this).after(hyperlinkButton);

       });

   });

})(jQuery, mediaWiki);

Pretty self-explanatory, the only catch is this:

       /*$('.section-heading .mw-headline, .section-subheading .mw-headline').each(function() {*/

Which has been commented out. Once we figure out how to make it work with level 1 headings, you can bring back '.section-heading .mw-headline, in the function -- the line right below this commented out piece of code is the exact same just without the level 1 headings included.

Known issues

  • had to disable lvl1 headings because if you click on the icon, it collapses the section for some reason (the button should take priority over the collapsing)
  • If headings have the same name (such as Notes) it will take you to the first instance. Should be fixable easily by appending _2, _3 etc for each new instance which is what MediaWiki does.