CommunityScripts/plugins/sceneCoverCropper/sceneCoverCropper.js

// By ScruffyNerf
// Ported by feederbox826

(function () {
  let cropping = false;
  let cropper = null;
  const csLib = window.csLib;

  function setupCropper() {
    console.log("setupCropper");
    const cropBtnContainerId = "crop-btn-container";
    if (document.getElementById(cropBtnContainerId)) return;
    const sceneId = window.location.pathname
      .replace("/scenes/", "")
      .split("/")[0];
    const sceneImage = document.querySelector("img.scene-cover");

    var cropperModal = document.createElement("dialog");
    cropperModal.style.width = "90%";
    cropperModal.style.border = "none";
    cropperModal.classList.add("bg-dark");
    document.body.appendChild(cropperModal);

    var cropperContainer = document.createElement("div");
    cropperContainer.style.width = "100%";
    cropperContainer.style.height = "auto";
    cropperContainer.style.margin = "auto";
    cropperModal.appendChild(cropperContainer);

    var image = sceneImage.cloneNode();
    image.style.display = "block";
    image.style.maxWidth = "100%";
    cropperContainer.appendChild(image);

    var cropBtnContainer = document.createElement("div");
    cropBtnContainer.setAttribute("id", cropBtnContainerId);
    cropBtnContainer.classList.add(
      "d-flex",
      "flex-row",
      "justify-content-center",
      "align-items-center"
    );
    cropBtnContainer.style.gap = "10px";
    cropperModal.appendChild(cropBtnContainer);

    sceneImage.parentElement.parentElement.style.flexFlow = "column";

    const cropInfo = document.createElement("p");
    cropInfo.style.all = "revert";
    cropInfo.classList.add("text-white");

    const cropStart = document.createElement("button");
    cropStart.setAttribute("id", "crop-start");
    cropStart.classList.add("btn", "btn-primary");
    cropStart.innerText = "Crop Image";
    cropStart.addEventListener("click", (evt) => {
      cropping = true;
      cropStart.style.display = "none";
      cropCancel.style.display = "inline-block";

      //const isVertical = image.naturalHeight > image.naturalWidth;
      //const aspectRatio = isVertical ? 3/2 : NaN
      const aspectRatio = NaN;

      cropper = new Cropper(image, {
        viewMode: 1,
        initialAspectRatio: aspectRatio,
        movable: false,
        rotatable: false,
        scalable: false,
        zoomable: false,
        zoomOnTouch: false,
        zoomOnWheel: false,
        ready() {
          cropAccept.style.display = "inline-block";
        },
        crop(e) {
          cropInfo.innerText = `X: ${Math.round(e.detail.x)}, Y: ${Math.round(e.detail.y)}, Width: ${Math.round(e.detail.width)}px, Height: ${Math.round(e.detail.height)}px`;
        },
      });
      cropperModal.showModal();
    });
    sceneImage.parentElement.appendChild(cropStart);

    const cropAccept = document.createElement("button");
    cropAccept.setAttribute("id", "crop-accept");
    cropAccept.classList.add("btn", "btn-success", "mr-2");
    cropAccept.innerText = "OK";
    cropAccept.addEventListener("click", async (e) => {
      cropping = false;
      cropStart.style.display = "inline-block";
      cropAccept.style.display = "none";
      cropCancel.style.display = "none";
      cropInfo.innerText = "";

      const reqData = {
        operationName: "SceneUpdate",
        variables: {
          input: {
            cover_image: cropper.getCroppedCanvas().toDataURL(),
            id: sceneId,
          },
        },
        query: `mutation SceneUpdate($input: SceneUpdateInput!) { sceneUpdate(input: $input) { id }}`,
      };
      await csLib.callGQL(reqData);
      reloadImg(image.src);
      cropper.destroy();
      cropperModal.close("cropAccept");
    });
    cropBtnContainer.appendChild(cropAccept);

    const cropCancel = document.createElement("button");
    cropCancel.setAttribute("id", "crop-accept");
    cropCancel.classList.add("btn", "btn-danger");
    cropCancel.innerText = "Cancel";
    cropCancel.addEventListener("click", (evt) => {
      cropping = false;
      cropStart.style.display = "inline-block";
      cropAccept.style.display = "none";
      cropCancel.style.display = "none";
      cropInfo.innerText = "";

      cropper.destroy();
      cropperModal.close("cropCancel");
    });
    cropBtnContainer.appendChild(cropCancel);
    cropAccept.style.display = "none";
    cropCancel.style.display = "none";

    cropBtnContainer.appendChild(cropInfo);
  }

  csLib.PathElementListener("/scenes/", "#scene-edit-details", setupCropper);
})();