MediaWiki:Scramble.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.

// https://stackoverflow.com/a/27872144/383904
const randomString = (n, r='') => {
  while (n--) r += String.fromCharCode((r=Math.random()*62|0, r+=r>9?(r<36?55:61):48));
  return r;
};

const unscramble = (el) => {
  const chars = [...el.dataset.scramble];
  const tot = chars.length;
  
  let iteration = 0;
  let ch = 0;
  let solved = "";
  
  el._itv = setInterval(() => {

    if (iteration > 10) {
      iteration = 0;
      solved += chars[ch];
      ch += 1;
    }
    
    el.textContent = randomString(tot - ch, solved);
    
    if (ch === tot) {
      clearInterval(el._itv);
    }
    iteration += 1;
  }, 30);
};

const scramble = (el) => {
  clearInterval(el._itv);
  el.textContent = randomString([...el.dataset.scramble].length)
};

const scrambler = (el) => {
  el.addEventListener("mouseenter", () => unscramble(el));
  el.addEventListener("mouseleave", () => scramble(el));
  scramble(el);
};

document.querySelectorAll("[data-scramble]").forEach(scrambler);