reading-lense.js

// toggle reading lense
(() => {

  const distinct_id = "475eb1d6-04f6-4a6b-a550-4041b7ac9239";
  const existing = document.getElementById(distinct_id);

  if (existing) {
    existing.parentNode.removeChild(existing);
  } else {
    document.body.appendChild(createLense(distinct_id, document));
  }

  function createLense(id, parent) {
    const lense = document.createElement("div");
    lense.id = id;

    lense.style.position="absolute";
    lense.style.float="left";
    lense.style.width="100%";
    lense.style.left = "0";

    lense.style.borderTop = "1px solid rgba(255, 0, 192, 0.5)";

    lense.style.pointerEvents = "none";

    parent.addEventListener("mousemove", (ev) => {
      lense.style.top = ev.pageY + "px";
    });

    return lense;
  }

})()

//javascript: (() => {const distinct_id = "475eb1d6-04f6-4a6b-a550-4041b7ac9239"; const existing = document.getElementById(distinct_id); if (existing) {existing.parentNode.removeChild(existing);} else {document.body.appendChild(createLense(distinct_id, document));} function createLense(id, parent) {const lense = document.createElement("div"); lense.id = id; lense.style.position="absolute"; lense.style.float="left"; lense.style.width="100%"; lense.style.left = "0"; lense.style.borderTop = "1px solid rgba(255, 0, 192, 0.5)"; lense.style.pointerEvents = "none"; parent.addEventListener("mousemove", (ev) => {lense.style.top = ev.pageY + "px";}); return lense;}})()