Emoji u1f384.svg
Merry Christmas from the IIWiki Team! Have a happy new year!

MediaWiki:Gadget-SidebarTOC.js: Difference between revisions

Jump to navigation Jump to search
No edit summary
mNo edit summary
Line 1: Line 1:
mw.loader.using( 'mediawiki.toc', function () {
function customizeToC() {
$( function () {
    var $toc = $( '#toc' );
var $window, $floatTOC, scrollHandler,
tocLimit, headingOffsets, headingThreshold,
$toc = $( '.toc' );


if ( !$toc.length ) {
    if ( !$toc.length ) {
return;
        return;
}
    }


$window = $( window );
    var $mwContent = $( '#mw-content-text' );
headingThreshold = $window.height() / 5.0;
    var $floatTOC = $toc
$floatTOC = $toc
        .clone()
.clone()
        .removeAttr( 'id' )
.removeAttr( 'id' )
        .addClass( 'floatTOC' )
.addClass( 'floatTOC' )
        .appendTo( $mwContent )
.appendTo( '.vector-body' )
        .css( {
.css( {
            height: $mwContent.height(), // Set ToC height to match article height
visibility: 'hidden',
            overflowY: 'auto' // Enable vertical scrolling if ToC exceeds article height
opacity: 0
        } );
} );


// Show the ToC ul even if its hidden
    // Update scrollHandler function to use $mwContent instead of window
$floatTOC.find( 'ul' ).show();
    var scrollHandler = function () {
        var scrollTop = $mwContent.scrollTop(); // Use scrollTop of $mwContent


// Hijack links so that we can scroll to the content
        if ( scrollTop > 0 ) { // Adjust condition based on scroll position
$floatTOC.find( 'a' ).click( function ( e ) {
            $floatTOC.css( 'visibility', 'visible' );
$( 'html, body' ).animate( {
        } else {
scrollTop: $( this.hash.replace( /\./g, '\\.' ) ).offset().top - headingThreshold
            $floatTOC.css( 'visibility', 'hidden' );
} );
        }
return false;
    };
} );


tocLimit = $toc.offset().top + $toc.height();
    // Update event binding to use $mwContent instead of window
headingOffsets = [];
    $mwContent.on( 'scroll', $.throttle( 250, scrollHandler ) );
}


// Get all heading positions
// Call the customizeToC function when jQuery and its dependencies are ready
        $toc.find('a').each(function () {
mw.loader.using( ['jquery', 'jquery.throttle-debounce'], customizeToC );
            var href = $(this).attr('href');
            if (href && href.charAt(0) === '#') {
                var id = href.substring(1);
                var $heading = $('#' + id);
                if ($heading.length) {
                    headingOffsets.push([$heading, $heading.offset().top]);
                }
            }
        });
 
        // For the window scroll event
        scrollHandler = function () {
            var $current,
                scrollTop = $window.scrollTop();
 
            if (scrollTop > tocLimit) {
                $floatTOC.css({
                    visibility: 'visible',
                    opacity: 1
                });
 
                // Highlight current
                var highlight = false;
                // Current section is above the first heading below the top of the screen
                $.each(headingOffsets, function (i, v) {
                    if (i !== 0 && (scrollTop + headingThreshold) < v[1]) {
                        highlight = headingOffsets[i - 1][0].attr('id');
                        return false;
                    }
                });
 
                if (highlight) {
                    $current = $floatTOC.find('a[href="#' + highlight + '"]');
                    $floatTOC.find('a').not($current).css('font-weight', '');
                    $current.css('font-weight', 'bold');
                }
 
            } else {
                $floatTOC.css({
                    visibility: 'hidden',
                    opacity: 0
                });
            }
        };
 
        $window.on('scroll', $.throttle(250, scrollHandler));
    });
});

Revision as of 07:17, 22 February 2024

function customizeToC() {
    var $toc = $( '#toc' );

    if ( !$toc.length ) {
        return;
    }

    var $mwContent = $( '#mw-content-text' );
    var $floatTOC = $toc
        .clone()
        .removeAttr( 'id' )
        .addClass( 'floatTOC' )
        .appendTo( $mwContent )
        .css( {
            height: $mwContent.height(), // Set ToC height to match article height
            overflowY: 'auto' // Enable vertical scrolling if ToC exceeds article height
        } );

    // Update scrollHandler function to use $mwContent instead of window
    var scrollHandler = function () {
        var scrollTop = $mwContent.scrollTop(); // Use scrollTop of $mwContent

        if ( scrollTop > 0 ) { // Adjust condition based on scroll position
            $floatTOC.css( 'visibility', 'visible' );
        } else {
            $floatTOC.css( 'visibility', 'hidden' );
        }
    };

    // Update event binding to use $mwContent instead of window
    $mwContent.on( 'scroll', $.throttle( 250, scrollHandler ) );
}

// Call the customizeToC function when jQuery and its dependencies are ready
mw.loader.using( ['jquery', 'jquery.throttle-debounce'], customizeToC );