Jump to content

User:Enterprisey/edit-section-on-hover.js

From Wikipedia, the free encyclopedia
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" ) {

        // Wrap every section in its own div
        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 = "edit-section-on-hover";
            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;
            }
        }

        mw.loader.addStyleTag( "div.edit-section-on-hover { margin-bottom: -1.6em; padding-bottom: 1.1em }" +
                "div.edit-section-on-hover .mw-editsection { display: none; }" +
                "div.edit-section-on-hover:hover .mw-editsection { display: inline; }" );
    }
} )();
// </nowiki>