User:Enterprisey/hover-edit-section.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

// vim: ts=4 sw=4 et ai
// <nowiki>
( function () {
    if( mw.config.get( "wgAction" ) === "view" ) {

        // If someone's already using the "D" access key, clear that
        mw.loader.using( [ "mediawiki.util" ], function () {
            var hasOurAccessKey = document.querySelectorAll( "a[accesskey=d]" );
            for( var i = 0; i < hasOurAccessKey.length; i   ) {
                hasOurAccessKey[i].setAttribute( "accesskey", "" );
                $( hasOurAccessKey[i] ).updateTooltipAccessKeys();
            }
        } );

        // Wrap every section in its own div
        var linkMapping = {}; // zone IDs to link elements
        var editSectionSpans = document.querySelectorAll( "span.mw-editsection" );
        if( !editSectionSpans.length ) return;
        var headerEl, currEl, container;
        for( var i = 0; i < editSectionSpans.length; i   ) {

            headerEl = editSectionSpans[i].parentNode;
            if( headerEl.matches( "h1.firstHeading" ) ) continue;

            // Insert container into DOM
            container = document.createElement( "div" );
            container.className = "hover-edit-section";
            container.dataset.hoverId = i;
            headerEl.parentNode.insertBefore( container, headerEl );

            // Insert all elements in the section into our container
            var currEl = headerEl.nextSibling;
            container.appendChild( headerEl );
            var nextEl;
            while( currEl && ( currEl.nodeType !== 1 || currEl.tagName.toLowerCase().indexOf( "h" ) !== 0 ) ) {
                nextEl = currEl.nextSibling;
                container.appendChild( currEl );
                currEl = nextEl;
            }

            // Register "edit section" link
            linkMapping[i] = editSectionSpans[i].children[ editSectionSpans[i].children.length - 2 ];
        }

        mw.loader.addStyleTag( "div.hover-edit-section { margin-bottom: -1.6em; padding-bottom: 1.1em }" );

        $( "body" ).append( $( "<a>" )
            .attr( { href: "#", accesskey: "d" } )
            .css( { position: "fixed", opacity: "0" } )
            .text( "hover-edit-section" )
            .click( function ( e ) {
                e.preventDefault();
                var hoverId = document.querySelector( "div.hover-edit-section:hover" ).dataset.hoverId;
                linkMapping[ hoverId ].click();
                return false;
            } ) );
        }
} )();
// </nowiki>