Function chooseImg

scripts/magnify_image.js:680–829

(srcs, _x, _y)

}

function chooseImg(srcs, _x, _y) {
  let { x, y } = validateMouse(_x, _y);

  let id = "ufs-magnify-choose-image";
  let exist = document.getElementById(id);
  if (exist) exist.remove();

  // container
  let overlay = document.createElement("div");
  overlay.id = id;
  overlay.style.cssText = `
        top: ${y}px;
        left: ${x}px;
      `;
  overlay.onclick = (e) => {
    e.preventDefault();
    if (e.target == overlay || e.target == container) {
      overlay.remove();
    }
  };
  document.body.appendChild(overlay);

  // toolbar
  let toolbar = document.createElement("div");
  toolbar.classList.add("ufs-toolbar");
  overlay.appendChild(toolbar);

  // toggle background

  let bgStates = [BgState.none, BgState.dark, BgState.light];
  let curBgState =
    (Number(localStorage.getItem("ufs-magnify-image-bg-choose-image")) || 0) -
    1;

  let toggleBg = document.createElement("div");
  toggleBg.classList.add("ufs-btn");
  toggleBg.innerText = "B";
  toggleBg.ufs_title = "Change background";
  toggleBg.onclick = () => {
    curBgState = (curBgState + 1) % bgStates.length;
    overlay.style.background = "";

    switch (bgStates[curBgState]) {
      case BgState.none:
        overlay.style.background = "#000b";
        break;
      case BgState.dark:
        overlay.style.background = "rgba(30, 30, 30, 1)";
        break;
      case BgState.light:
        overlay.style.background = "rgba(240, 240, 240, 1)";
        break;
    }

    toggleBg.innerText = "BG " + bgStates[curBgState];
    localStorage.setItem("ufs-magnify-image-bg-choose-image", curBgState);
  };
  toggleBg.click(); // default is toggle ON