MediaWiki:SupportPage.js: Difference between revisions

From Donate
Jump to navigation Jump to search
Content deleted Content added
add code to show language expander only if needed
check for languageSwitcherBackdrop
 
(27 intermediate revisions by the same user not shown)
Line 5:
 
$(function() {
/* -- New language barswitcher code -- */
var languageSwitcherButton = document.querySelector('.language-switcher__button'),
languageSwitcher = document.querySelector('.language-switcher__content'),
languageSwitcherBackdrop = document.querySelector('.dropdown-backdrop');
 
languageSwitcherButton.addEventListener('click', function() {
/* -- language bar code -- */
if ( languageSwitcherButton.ariaExpanded === 'true' ) {
function showHideLanguageExpand() {
hideLanguageSwitcher();
if ( $('.sp-languages ul').height() > $('.sp-languages').height() ) {
$('.sp-languages-expand').show();
} else {
$('.sp-languages-expand').hideshowLanguageSwitcher();
checkScroll();
}
});
 
if ( languageSwitcherBackdrop ) {
languageSwitcherBackdrop.addEventListener('click', hideLanguageSwitcher);
}
 
function showHideLanguageExpandshowLanguageSwitcher() {
showHideLanguageExpand();
languageSwitcherButton.ariaExpanded = 'true';
$( window ).resize( showHideLanguageExpand );
languageSwitcher.hidden = false;
/* -- end of language bar code -- */
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);
/* -- endEnd of new language barswitcher code -- */
 
/* -- 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({
Line 32 ⟶ 60:
 
// Add smooth scrolling effect
var scrollOffset = 2488, // Offset in px
scrollDuration = 500, // in ms
smoothScroll = function(event) {
Line 39 ⟶ 67:
scrollTop: offsetTop - scrollOffset
}, scrollDuration);
window.location.hash = event.data.anchor.attr('id');
event.preventDefault();
};
Line 44 ⟶ 73:
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;
$(window).scroll(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();
});
 
});

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();
    });

});