MediaWiki:Vector-2022.js: Difference between revisions

(14 intermediate revisions by the same user not shown)

Line 1:

$(function() {

// ~~create~~ body ~~overlay~~

// Wrap all body children to get the body size

$('body').children().wrapAll('<div class="mw-body-wrapper"></div>');

// ~~create object just for backgrounds~~

// 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').css('height': $('.mw-body-wrapper').height(),

$('.custom-bg-overlay').css({'height': $('.mw-body-wrapper').height(),

'position': 'absolute',

'pointer-events': 'none');

'pointer-events': 'none'});

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

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

$('.~~custom-~~custom-header-container-overlay').css('height':$('.vector-header-container').height,

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

'position': 'absolute');

$('.custom-header-container-overlay').css({

'height': $('.vector-header-container').height(),

'position': 'absolute',

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

const ro = new ResizeObserver(([entry]) => {

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

~~ro.observe($('.mw-body-wrapper')[0]);~~

});

@@ Line 1: / Line 1: @@
 $(function() {
-     // create body overlay
+     // Wrap all body children to get the body size
      $('body').children().wrapAll('<div class="mw-body-wrapper"></div>');
-     // create object just for backgrounds
+     // 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').css('height': $('.mw-body-wrapper').height(),
+     $('.custom-bg-overlay').css({'height': $('.mw-body-wrapper').height(),
-                                'position': 'absolute',
+                                 'position': 'absolute',
-                                'pointer-events': 'none');
+                                 'pointer-events': 'none'});
-     $('.vector-header-container').prepend('<div class="custom-header-container-overlay"></div>');
+    // Header background overlay (configuration finished in Vector-2022.css)
-     $('.custom-custom-header-container-overlay').css('height':$('.vector-header-container').height,
+     $('.vector-header-container').append('<div class="custom-header-container-overlay"></div>');
-                                                     'position': 'absolute');
+     $('.custom-header-container-overlay').css({
+        'height': $('.vector-header-container').height(),
+        'position': 'absolute',
+        'z-index': '-1'});
-     const ro = new ResizeObserver(([entry]) => {
+    // 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});
-    ro.observe($('.mw-body-wrapper')[0]);
 });