MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */


$(function() {
	managePersonalIconVis();
    sortPFCheckboxes();
    infoboxEvenOdd();
    showPageFooter();
});

window.addEventListener('resize', infoboxEvenOdd);

function managePersonalIconVis(){
  if (mw.config.get('wgUserId') !== null) {
	const personal = document.getElementById('p-personal');
	document.querySelector('#pane4').appendChild(personal);
  } else {
	const personalIcon = document.querySelector('.personal-tools-icon');
	if (personalIcon) {
		personalIcon.classList.add('d-none');
	}
  }
}

function sortPFCheckboxes() {
  const containers = document.querySelectorAll(".checkboxesSpan");

  containers.forEach(container => {
    const labels = Array.from(container.querySelectorAll("label.checkboxLabel"));

    const getText = el =>
      (el.querySelector("t").textContent || el.textContent).trim();

    labels.sort((a, b) =>
      getText(a).localeCompare(getText(b), undefined, {
        numeric: true,
        sensitivity: "base"
      })
    );
    labels.forEach(label => container.appendChild(label));
  });
}

function infoboxEvenOdd() {
  const containers = document.querySelectorAll('.infobox-row');
  if (!containers.length) return;

  containers.forEach(container => {
    const items = Array.from(container.children).filter(
      el => el.nodeType === Node.ELEMENT_NODE
    );

    items.sort((a, b) =>
      a.getBoundingClientRect().top - b.getBoundingClientRect().top
    );

    items.forEach((el, idx) => {
      el.classList.remove('even', 'odd');
      el.classList.add(idx % 2 === 0 ? 'even' : 'odd');
    });
  });
}

function showPageFooter(){
	const catlinks = document.getElementById('catlinks');
	const footers = document.querySelectorAll('.page-footer');

	footers.forEach(el => {
		catlinks.parentNode.insertBefore(el, catlinks);
	});
}

(function () {
  'use strict';

  var observedWrappers = new WeakSet();
  var resizeObserver = 'ResizeObserver' in window
    ? new ResizeObserver(function (entries) {
        entries.forEach(function (entry) {
          resizeWrapper(entry.target);
        });
      })
    : null;
  var mutationObserver = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      resizeWrapper(mutation.target.closest('.embedvideo-wrapper'));
    });
  });

  function getAspectRatio(wrapper) {
    var container = wrapper.closest('.featured-video');
    var value = container
      ? container.getAttribute('data-aspect-ratio')
      : null;
    var parts = value ? value.split('/') : [];
    var width = Number(parts[0]);
    var height = Number(parts[1]);

    return width > 0 && height > 0 ? width / height : 16 / 9;
  }

  function resizeWrapper(wrapper) {
    if (!wrapper) {
      return;
    }

    wrapper.style.width = '100%';
    wrapper.style.maxWidth = '100%';

    var width = wrapper.getBoundingClientRect().width;
    if (width <= 0) {
      return;
    }

    var height = width / getAspectRatio(wrapper);
    if (Math.abs(wrapper.getBoundingClientRect().height - height) > 0.5) {
      wrapper.style.height = height + 'px';
    }

    wrapper.querySelectorAll('iframe, img').forEach(function (element) {
      element.style.display = 'block';
      element.style.width = '100%';
      element.style.height = '100%';
      element.style.maxWidth = '100%';

      if (element.tagName === 'IMG') {
        element.style.objectFit = 'contain';
      }
    });
  }

  function initialise(root) {
    root.querySelectorAll('.featured-video .embedvideo-wrapper').forEach(
      function (wrapper) {
        resizeWrapper(wrapper);

        if (!observedWrappers.has(wrapper)) {
          observedWrappers.add(wrapper);
          if (resizeObserver) {
            resizeObserver.observe(wrapper);
          }
          mutationObserver.observe(wrapper, {
            childList: true,
            subtree: true
          });
        }
      }
    );
  }

  mw.hook('wikipage.content').add(function ($content) {
    initialise($content[0]);
  });

  if (!resizeObserver) {
    window.addEventListener('resize', function () {
      initialise(document);
    });
  }
}());