MediaWiki:FadeIn.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

const fadeInAttribute = "data-fadein";
const blurAttribute = "data-fadein-blur";

function createScreen(target) {
  if (target.tagName !== "DIV") {
    console.error(`Invalid target! ${target.tagName}`);
    return;
  }
  let screen = document.createElement(target.tagName);
  let rect = target.getBoundingClientRect();

  let computedStyle = window.getComputedStyle(target);

  screen.style.position = 'absolute';
  screen.style.top = `-${parseFloat(computedStyle.paddingTop) + 1}px`;
  screen.style.left = `-${parseFloat(computedStyle.paddingLeft) + 1}px`;
  screen.style.height = `${rect.height}px`;
  screen.style.width = `${rect.width}px`;
  screen.style.backgroundColor = 'rgba(255, 255, 255, 255, 0.3)';
  let blur = "10";
  screen.style.backdropFilter = `blur(${blur}px)`;
  screen.style.webkitBackdropFilter = `blur(${blur}px)`;
  screen.setAttribute(blurAttribute, blur);
  screen.style.zIndex = 1;

  if (target.getAttribute && target.getAttribute(fadeInAttribute) === "true") {
    screen._itv = setInterval((s) => {
      let blur = parseInt(s.getAttribute(blurAttribute));
      if (blur <= 0) {
        clearInterval(s._itv);
      } else {
        blur = blur - 1;
        screen.style.backdropFilter = `blur(${blur}px)`;
        screen.style.webkitBackdropFilter = `blur(${blur}px)`;
        screen.setAttribute(blurAttribute, blur);
      }
    }, 400, screen)
  }
  
  target.appendChild(screen);
}


$(`[${fadeInAttribute}]`).each(function () {
  createScreen(this);
});