Jump to content

MediaWiki:Vector-2022.js: Difference between revisions

From Climbopedia
Created div for background overlay
ULS menu theme cleanup - removed logging calls
 
(38 intermediate revisions by the same user not shown)
Line 1: Line 1:
$('body').prepend('<div class="custom-bg-overlay"></div>');
$(function() {
    // Wrap all body children to get the body size
    $('body').children().wrapAll('<div class="mw-body-wrapper"></div>');
 
    // Background body overlay (configuration finished in Vector-2022.css)
    $('body').prepend('<div class="custom-bg-overlay"></div>');
    $('.custom-bg-overlay').css({'height': $('.mw-body-wrapper').height(),
                                'position': 'absolute',
                                'pointer-events': 'none'});
 
    // Header background overlay (configuration finished in Vector-2022.css)
    $('.vector-header-container').append('<div class="custom-header-container-overlay"></div>');
    $('.custom-header-container-overlay').css({
        'height': $('.vector-header-container').height(),
        'position': 'absolute',
        'z-index': '-1'});
 
    // Update on window resize
 
    const ro_body = new ResizeObserver(([entry]) => {
        $('.custom-bg-overlay').height($('.mw-body-wrapper').height());
    });
    ro_body.observe($('.mw-body-wrapper')[0]);
 
    const ro_bar = new ResizeObserver(([entry]) => {
        $('.custom-header-container-overlay').height($('.vector-header-container').height());
    });
    ro_bar.observe($('.vector-header-container')[0]);
 
    // Clean-up universal language selector theme
    const ulsobserver = new MutationObserver(() => {
        const uls_menu = document.querySelector('div.grid.uls-menu.notheme.skin-invert');
        if (uls_menu) {
                uls_menu.classList.remove("notheme", "skin-invert");
                ulsobserver.disconnect();
    }});
 
    ulsobserver.observe(document.body, {childList: true, subtree: true});
 
});

Latest revision as of 16:35, 15 November 2025

$(function() {
    // Wrap all body children to get the body size
    $('body').children().wrapAll('<div class="mw-body-wrapper"></div>');

    // Background body overlay (configuration finished in Vector-2022.css)
    $('body').prepend('<div class="custom-bg-overlay"></div>');
    $('.custom-bg-overlay').css({'height': $('.mw-body-wrapper').height(),
                                 'position': 'absolute',
                                 'pointer-events': 'none'});

    // Header background overlay (configuration finished in Vector-2022.css)
    $('.vector-header-container').append('<div class="custom-header-container-overlay"></div>');
    $('.custom-header-container-overlay').css({
        'height': $('.vector-header-container').height(),
        'position': 'absolute',
        'z-index': '-1'});

    // Update on window resize

    const ro_body = new ResizeObserver(([entry]) => {
        $('.custom-bg-overlay').height($('.mw-body-wrapper').height());
    });
    ro_body.observe($('.mw-body-wrapper')[0]);

    const ro_bar = new ResizeObserver(([entry]) => {
        $('.custom-header-container-overlay').height($('.vector-header-container').height());
    });
    ro_bar.observe($('.vector-header-container')[0]);

    // Clean-up universal language selector theme
    const ulsobserver = new MutationObserver(() => {
        const uls_menu = document.querySelector('div.grid.uls-menu.notheme.skin-invert');
        if (uls_menu) {
                uls_menu.classList.remove("notheme", "skin-invert");
                ulsobserver.disconnect();
    }});

    ulsobserver.observe(document.body, {childList: true, subtree: true});

});