Function createPreview

scripts/magnify_image.js:831–1182

(
  src,
  _x,
  _y,
  onClose = () => {},
  onFoundBigImg = () => {}
)

}

function createPreview(
  src,
  _x,
  _y,
  onClose = () => {},
  onFoundBigImg = () => {}
) {
  const { x, y } = validateMouse(_x, _y);
  const id = "ufs-magnify-image";
  const exist = document.getElementById(id);
  if (exist) exist.remove();

  // container
  let overlay = document.createElement("div");
  overlay.id = id;
  overlay.innerHTML = `
    <div class="ufs-img-anim" style="top: ${y}px; left: ${x}px;"></div>
    <img
      src="${src}"
      style="
        top: ${window.innerHeight / 2}px;
        left: ${window.innerWidth / 2}px;
        transform-origin: center;
        transform: translate(-50%, -50%) !important;
        max-width: 100vw;
        max-height: 100vh;
        opacity: 0;
      "/>
    <div class="ufs-toolbar">
      <div class="ufs-btn" ufs_title="Original size">Size</div>
      <div class="ufs-btn" ufs_title="Toggle original size">Z</div>
      <div class="ufs-btn" ufs_title="Toggle background">B</div>
      <div class="ufs-btn" ufs_title="Flip horizontal">↔</div>
      <div class="ufs-btn" ufs_title="Flip vertical">↕</div>
      <div class="ufs-btn" ufs_title="Rotate left">↺</div>
      <div class="ufs-btn" ufs_title="Rotate right">↻</div>
      <div class="ufs-btn" ufs_title="Open in new tab">↗</div>
      <div class="ufs-btn" ufs_title="Download">⬇️</div>
      <div class="ufs-btn ufs-dropdown-menu" ufs_title="">🔎 Search by image
        <ul>
        ${defaultSearchData
          .split("\n")
          .map((s) => {
            let [title, url] = s.split(" | ");
            return `<li class="ufs-btn" data-url="${url}">${title}</li>`;
          })
          .join("")}
        </ul>
      </div>
      <div class="ufs-desc"></div>
    </div>
  `;
  document.body.appendChild(overlay);

  // animation div: a rect that represent image scaled up from original position (mouse position)
  const animDiv = overlay.querySelector(".ufs-img-anim");
  const img = overlay.querySelector("img");
  const toolbar = overlay.querySelector(".ufs-toolbar");