MediaWiki:Vector-2022.js: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-// create body overlay
+$(function() {
-$('body').children().wrapAll('<div class="mw-body-wrapper"></div>');
+    // Wrap all body children to get the body size
+    $('body').children().wrapAll('<div class="mw-body-wrapper"></div>');
-// create object just for packground
+    // Background body overlay (configuration finished in Vector-2022.css)
-$('.mw-body-wrapper').prepend('<div class="custom-bg-overlay"></div>');
+    $('body').prepend('<div class="custom-bg-overlay"></div>');
-$('.custom-bg-overlay').height($('.mw-body-wrapper').height());
+    $('.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});
-const ro = new ResizeObserver(([entry]) => {
-    console.log("ResizeObserver triggered! New height:", entry.contentRect.height);
-    $('.custom-bg-overlay').height($('.mw-body-wrapper').height());
 });
-ro.observe($('.mw-body-wrapper'));