// <syntaxhighlight lang="javascript">

/* 
OutlineViewImageToggler.js: provides the "Image" menu item to hide/show images 
on outline pages. 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 ImageSwitch; 
                var ImageSwitch; 

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

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

                // Core control construct:                
                // run the function corresponding to the current status
                if ( ImageStatus === "hide" ) {
                    ImageHide();
                } else {
                    ImageShow();
                }
            }
        }

        // ======================== 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 hide the Image ==============
        function ImageHide() {
            // store status so it persists across page loads
            localStorage.setItem("ImageStatus", "hide");

            // Hide images (per http://api.jquery.com/hide)
            $('.thumb').hide();


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

            // and then we create it (or its replacement) from scratch:
            ImageSwitch = mw.util.addPortletLink( 'p-tb', '#', 'Images \(show\)', 'Show images' );

            // make the menu item clickable by binding it to a click handler
            // (which activates the actions between the curly brackets when clicked):
            $( ImageSwitch ).click( function ( e ) {
                e.preventDefault();     // prevents any default action -- we want only the following action to run: 
                ImageShow();
            } );
        }
   
        // ============ Function to show search results detail ==============
        function ImageShow() {
            // store status so it persists across page loads
            localStorage.setItem("ImageStatus", "show");

            // Show images (per http://api.jquery.com/show)
            $('.thumb').show();

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

            // and then we create it (or its replacement) from scratch:
            ImageSwitch = mw.util.addPortletLink( 'p-tb', '#', 'Images \(hide\)', 'Hide images' );

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