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: Line 5:


$(function() {
$(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() {
/* -- language bar code -- */
if ( languageSwitcherButton.ariaExpanded === 'true' ) {
function showHideLanguageExpand() {
hideLanguageSwitcher();
if ( $('.sp-languages ul').height() > $('.sp-languages').height() ) {
$('.sp-languages-expand').show();
} else {
} else {
$('.sp-languages-expand').hide();
showLanguageSwitcher();
checkScroll();
}
}
});

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


function showLanguageSwitcher() {
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);
/* -- End of new language switcher code -- */


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


// Add smooth scrolling effect
// Add smooth scrolling effect
var scrollOffset = 24, // Offset in px
var scrollOffset = 88, // Offset in px
scrollDuration = 500, // in ms
scrollDuration = 500, // in ms
smoothScroll = function(event) {
smoothScroll = function(event) {
Line 39: Line 67:
scrollTop: offsetTop - scrollOffset
scrollTop: offsetTop - scrollOffset
}, scrollDuration);
}, scrollDuration);
window.location.hash = event.data.anchor.attr('id');
event.preventDefault();
event.preventDefault();
};
};
Line 44: Line 73:
toc[i].link.on( 'click', toc[i], smoothScroll );
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
// Highlight current section in toc
var lastSection;
var lastSection;
$(window).scroll(function() {
function scrollFunction() {
var fromTop = $(this).scrollTop(); // Get container scroll position
var fromTop = $(this).scrollTop(); // Get container scroll position
var currentSection = toc.filter(function(item) {
var currentSection = toc.filter(function(item) {
return fromTop > item.anchor.offset().top - 64;
return fromTop > item.anchor.offset().top - 64;
});
});
currentSection = currentSection[currentSection.length - 1];
currentSection = currentSection[currentSection.length - 1];
if ( lastSection !== currentSection ) {
if ( currentSection && lastSection !== currentSection ) {
lastSection = currentSection;
lastSection = currentSection;
$('#toc > ul a').removeClass('-active');
$('#toc > ul a').removeClass('-active');
currentSection.link.addClass('-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 -- */
/* -- 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();
    });

});