MediaWiki:SupportPage.js: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
check for currentSection being undefined (e.g. scrolling at top of page)
update scroll offset for new design
Line 32: Line 32:


// Add smooth scrolling effect
// Add smooth scrolling effect
var scrollOffset = 24, // Offset in px
var scrollOffset = 60, // Offset in px
scrollDuration = 500, // in ms
scrollDuration = 500, // in ms
smoothScroll = function(event) {
smoothScroll = function(event) {

Revision as of 16:33, 18 October 2019

/* 
 * MediaWiki:SupportPage.js
 * Loaded by MediaWiki:Common.js on support pages e.g. "Problems donating"
 */

$(function() {

    /* -- language bar code -- */
    function showHideLanguageExpand() {
        if ( $('.sp-languages ul').height() > $('.sp-languages').height() ) {
            $('.sp-languages-expand').show();
        } else if ( !$('.sp-languages').hasClass('-expanded') ) {
            $('.sp-languages-expand').hide();
        }
    }

    showHideLanguageExpand();
    $( window ).resize( showHideLanguageExpand );
    /* -- end of language bar code -- */

    /* -- table of contents code -- */
    
    // Build a list of corresponding toc links and anchors
    var toc = [];
    $('#toc > ul a').each( function() {
        var id = $(this).attr('href').replace('#', '');
        toc.push({
            link: $(this),
            anchor: $( document.getElementById(id) )
        });
    });

    // Add smooth scrolling effect
    var scrollOffset = 60, // Offset in px
        scrollDuration = 500, // in ms
        smoothScroll = function(event) {
            var offsetTop = event.data.anchor.offset().top;
            $('html, body').stop().animate({
                scrollTop: offsetTop - scrollOffset
            }, scrollDuration);
            window.location.hash = event.data.anchor.attr('id');
            event.preventDefault();
        };
    for (var i = 0; i < toc.length; i++) {
        toc[i].link.on( 'click', toc[i], smoothScroll );
    }

    // Highlight current section in toc
    var lastSection;
    function highlightCurrentSection() {
        var fromTop = $(this).scrollTop(); // Get container scroll position
        var currentSection = toc.filter(function(item) {
            return fromTop > item.anchor.offset().top - 64;
        });
        currentSection = currentSection[currentSection.length - 1];
        if ( currentSection && lastSection !== currentSection ) {
            lastSection = currentSection;
            $('#toc > ul a').removeClass('-active');
            currentSection.link.addClass('-active');
        }
    }
    highlightCurrentSection();
    $(window).scroll( highlightCurrentSection );
    /* -- end of table of contents code -- */

});