MediaWiki:FadeIn.js: Difference between revisions

Revision as of 20:54, 24 August 2025

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

  console.log(rect);

  screen.style.position = 'relative';
  //screen.style.top = `0px`;
  //screen.style.left = `0px`;
  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);
      }
    }, 300, screen)
  }
  
  target.appendChild(screen);
}


document.addEventListener('DOMContentLoaded', () => {
console.log('Content Loaded!');
  $(`[${fadeInAttribute}]`).each(function () {
    createScreen(this);
  });
});