MediaWiki:Vector-2022.js: Difference between revisions

(5 intermediate revisions by the same user not shown)

Line 10:

// Header background overlay (configuration finished in Vector-2022.css)

$('.vector-header-container').~~prepend~~('<div class="custom-header-container-overlay"></div>');

$('.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'};

'z-index': '-1'});

// Update on window resize

$(~~window).on('resize', function~~() {

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

});

@@ Line 10: / Line 10: @@
      // Header background overlay (configuration finished in Vector-2022.css)
-     $('.vector-header-container').prepend('<div class="custom-header-container-overlay"></div>');
+     $('.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'};
+         'z-index': '-1'});
      // Update on window resize
-     $(window).on('resize', function() {
+     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});
 });