Image Occlusion Enhanced [Official Support Thread]

Anki Add-ons
166

I’ve modified the code a bit so that it works correctly on the latest Anki and also on Ankimobile.

/** Auto-scroll for Image Occlusion Enhanced
* @author Matthias Metelka <github.com/kleinerpirat>
* modified by Foxy_null <github.com/foxy-null>
*/
(async function () {
  const img = document.querySelector("#io-overlay>img");
  const file = await fetch(img.src);
  const mask = new DOMParser()
    .parseFromString(await file.text(), "image/svg+xml")
    .querySelector("svg");
  const svgWidth = mask.getAttribute("width") || img.clientWidth;
  const svgHeight = mask.getAttribute("height") || img.clientHeight;

  mask.setAttribute("viewBox", `0 0 ${svgWidth} ${svgHeight}`);
  mask.style.cssText = `position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%;`;
  img.parentNode.insertBefore(mask, img);
  const targetElement = mask.querySelector("rect.qshape");
  const rect = targetElement.getBoundingClientRect();
  const xCenter = (rect.left + rect.right) / 2;
  const yCenter = (rect.top + rect.bottom) / 2;
  
  window.scrollTo({
    top: window.scrollY + yCenter - window.innerHeight / 2,
    left: window.scrollX + xCenter - window.innerWidth / 2,
    behavior: "smooth",
  });
  mask.remove();
})();

And you’re still free to use or modify it for your add-on, as @kleinerpirat said! :+1:

1 Like