MediaWiki:Gadget-SidebarTOC.js

mw.loader.using( 'mediawiki.toc', function () {
	$( function () {
		var $window, $mwPanel, $floatTOC, scrollHandler,
			tocLimit, headingOffsets, headingThreshold,
			$toc = $( '.toc' );

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

		$window = $( window );
		$mwPanel = $( '#mw-panel' );
		headingThreshold = $window.height() / 5.0;
		$floatTOC = $toc
			.clone()
			.removeAttr( 'id' )
			.addClass( 'floatTOC' )
			.appendTo( 'body' )
			.css( {
				visibility: 'hidden',
				opacity: 0
			} );

		// Show the ToC ul even if it's hidden
		$floatTOC.find( 'ul' ).show();

		// Hijack links so that we can scroll to the content
		$floatTOC.find( 'a' ).click( function ( e ) {
			var target = $( this.hash.replace( /\./g, '\\.' ));
			if (target.length) {
				$( 'html, body' ).animate( {
					scrollTop: target.offset().top - headingThreshold
				} );
			}
			return false;
		} );


        tocLimit = $toc.offset().top + $toc.height();
        headingOffsets = [];

        // Get all heading positions
        $toc.find('a').each(function () {
            var id = $(this).attr('href').substring(1);
            var $heading = $('#' + id);
            if ($heading.length) {
                headingOffsets.push([id, $heading.offset().top]);
            }
        });

        // For the window scroll event
        scrollHandler = function () {
            var $current,
                scrollTop = $window.scrollTop();

            if (scrollTop > tocLimit) {
                $floatTOC.css({
                    visibility: 'visible',
                    opacity: 1
                });
                $mwPanel.hide();

                // Highlight current
                var highlight = false;
                // Current section is above the first heading below the top of the screen
                $.each(headingOffsets, function (i, v) {
                    // Skip first as there's no previous heading before the first
                    if (i !== 0 && (scrollTop + headingThreshold) < v[1]) {
                        highlight = headingOffsets[i - 1][0];
                        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
                });
                $mwPanel.show();
            }
        }

        $window.on('scroll', $.throttle(250, scrollHandler));
    });
});