MediaWiki:SupportPage.js: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
remove old language bar code
check for languageSwitcherBackdrop
 
(One intermediate revision by the same user not shown)
Line 20:
});
 
if ( languageSwitcherBackdrop ) {
languageSwitcherBackdrop.addEventListener('click', hideLanguageSwitcher);
}
 
function showLanguageSwitcher() {
Line 47 ⟶ 49:
/* -- table of contents code -- */
// Build a list of corresponding tocfragment links and anchors
var toc = [];
$('.sp-page [href^="#toc > ul a"]').each( function() {
var id = $(this).attr('href').replace('#', '');
toc.push({

Latest revision as of 11:40, 11 June 2024

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

$(function() {
    
    /* -- New language switcher code -- */
    var languageSwitcherButton = document.querySelector('.language-switcher__button'),
        languageSwitcher = document.querySelector('.language-switcher__content'),
        languageSwitcherBackdrop = document.querySelector('.dropdown-backdrop');

    languageSwitcherButton.addEventListener('click', function() {
        if ( languageSwitcherButton.ariaExpanded === 'true' ) {
            hideLanguageSwitcher();
        } else {
            showLanguageSwitcher();
            checkScroll();
        }
    });

    if ( languageSwitcherBackdrop ) {
        languageSwitcherBackdrop.addEventListener('click', hideLanguageSwitcher);
    }

    function showLanguageSwitcher() {
        languageSwitcherButton.ariaExpanded = 'true';
        languageSwitcher.hidden = false;
        document.body.dataset.dropdownOpen = 'true';
    }

    function hideLanguageSwitcher() {
        languageSwitcherButton.ariaExpanded = 'false';
        languageSwitcher.hidden = true;
        document.body.dataset.dropdownOpen = 'false';
    }

    function checkScroll() {
        if ( languageSwitcher.offsetHeight + languageSwitcher.scrollTop >= languageSwitcher.scrollHeight ) {
            languageSwitcher.classList.remove('scroll-shadow');
        } else {
            languageSwitcher.classList.add('scroll-shadow');
        }
    }

    languageSwitcher.addEventListener('scroll', checkScroll);
    /* -- End of new language switcher code -- */

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

    // Add smooth scrolling effect
    var scrollOffset = 88, // 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 );
    }

    // fix inbound fragment links
    function delayedFragmentTargetOffset() {
        var offset = $(':target').offset();
        if (offset) {
            var scrollto = offset.top - scrollOffset;
            $('html, body').animate({ scrollTop: scrollto }, 0);
        }
    }
    setTimeout(delayedFragmentTargetOffset, 200);


    // Highlight current section in toc
    var lastSection;
    function scrollFunction() {
        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');
        }
        
        if ( fromTop === 0 ) {
        	$('.sp-top-nav').removeClass('pinned');
        } else {
        	$('.sp-top-nav').addClass('pinned');
        }
    }
    scrollFunction();
    $(window).scroll( scrollFunction );
    /* -- end of table of contents code -- */
    
    // Collapsible continents/countries on Ways to Give
    mw.loader.using('jquery.makeCollapsible', function() {
        $('.mw-collapsible').makeCollapsible();
    });

});