User:The Transhumanist/OutlineViewConventional.js

// <syntaxhighlight lang="javascript">

/* 
OutlineViewConventional.js: provides the "ConView" menu item to turn on/off the 
coversion of headings to list items. The script operates in the Vector skin only.

Version 0.9 -- under development.

This script is based on ]:
https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/StripSearch.js&oldid=809395804
which in turn used the core control structure and subroutines from
]:
https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/OutlineViewAnnotationToggler.js&oldid=807301505

Brief comments are provided within the sourcecode below. For extensive explanatory 
notes on what the source code does and how it works, see the Script's workshop on 
the talk page. (Not ready yet.)

*/

// ============== Set up ==============

// Start off with a bodyguard function to reserve the aliases mw and $
( function ( mw, $ ) {

    // we can now rely on mw and $ within the safety of our “bodyguard” function, to mean 
    // "mediawiki" and "jQuery", respectively (they follow the closing curly bracket - see the end of the script)

    // ============== Load dependencies ============== 
    mw.loader.using( , function () {
    
    // ============== ready() event listener/handler ==============
    // below is jQuery short-hand for $(document).ready(function() { ... });
    // it makes the rest of the script wait until the page's DOM is loaded and ready
    $(function() {
        
        // ============== activation filters ==============
        // Only activate on Vector skin
        if ( mw.config.get( 'skin' ) === 'vector' ) {

            // Run this script only if "Outline of " is in the page title
            if (document.title.indexOf("Outline of ") != -1) {

                // End of set up
            
                // =================== Prep work =====================
                
                // Variable declarations, etc., go here

                var ConventionalSwitch; 
				// OVConv stands for OutlineViewConventional (to avoid conflicts with other scripts)
				var OVConvCont = document.getElementById('mw-content-text');

                // ================== Core program =================== 

                // get the value of our status variable from memory
                // (this tells us what mode to start in)
                var ConventionalStatus = localStorage.getItem('ConventionalStatus');

                // Core control construct:                
                // run the function corresponding to the current status
                if ( ConventionalStatus === "on" ) {
                    ConventionalTurnOn();
                } else {
                    ConventionalTurnOff();
                }
            }
        }

        // ======================== Subroutines ===========================
        // Functions (aka subroutines) are activated only when they are called.
        // Below are the functions called in the core control structure of the program above.
        // They are placed at the end of the program, so that the script's flow 
        // is easier to follow.

        // ============ Function to turn off the conventional outline view ==============
        function ConventionalTurnOff() {
            // store status so it persists across page loads
            localStorage.setItem("ConventionalStatus", "off");

            // Turn off the conventional outline view by
			// changing the classed ul wrappers back to heading wrappers
			OVConvCont.outerHTML = OVConvCont.outerHTML.replace(/<ul class=\"(h)\">(.*?)<\/ul>/g,'<$1>$2<\/$1>');


            // now we have to update the menu item 
            // (referred to in this script as "ConventionalSwitch"). 
            // To do that, first we remove it (if it exists):  
            if ( ConventionalSwitch ) {
                ConventionalSwitch.parentNode.removeChild(ConventionalSwitch);
            }

            // and then we create it (or its replacement) from scratch:
            ConventionalSwitch = mw.util.addPortletLink( 'p-tb', '#', 'ConView \(turn on\)', 'Show outline in conventional outline format' );

            // make the menu item clickable by binding it to a click handler
            // (which activates the actions between the curly brackets when clicked):
            $( ConventionalSwitch ).click( function ( e ) {
                e.preventDefault();     // prevents any default action -- we want only the following action to run: 
                ConventionalTurnOn();
            } );
        }
   
        // ============ Function to turn on conventional outline view ==============
		// This function converts headings to list items (an outline is a list - 
		// this function folds headings into list format along with the rest of the items)

        function ConventionalTurnOn() {
            // store status so it persists across page loads
            localStorage.setItem("ConventionalStatus", "on");

            // Turn on the conventional outline view by
			// changing the heading wrappers to classed ul wrappers
			OVConvCont.outerHTML = OVConvCont.outerHTML.replace(/<(h)>(.*?)(<\/h>)/g,'<ul class=$1>$2<\/ul>');

            // now we have to update the menu item 
            // (referred to in this script as "ConventionalSwitch"). 
            // To do that, first we remove it (if it exists):  
            if ( ConventionalSwitch ) {
                ConventionalSwitch.parentNode.removeChild(ConventionalSwitch);
            }

            // and then we create it (or its replacement) from scratch:
            ConventionalSwitch = mw.util.addPortletLink( 'p-tb', '#', 'ConView \(turn off\)', 'Disable conventional view, and show outlines in heading format' );

            $( ConventionalSwitch ).click( function ( e ) {
                e.preventDefault();     //prevents any default action -- we want only the following action to run:
                ConventionalTurnOff();
            } );
        }
    } );
    } );
}( mediaWiki, jQuery ) );
// </syntaxhighlight>