easydiffusion/ui/media/js/image-modal.js

"use strict"

/**
 * @typedef {object} ImageModalRequest
 * @property {string} src
 * @property {ImageModalRequest | () => ImageModalRequest | undefined} previous
 * @property {ImageModalRequest | () => ImageModalRequest | undefined} next
 */

/**
 * @type {(() => (string | ImageModalRequest) | string | ImageModalRequest) => {}}
 */
const imageModal = (function() {
    const backElem = createElement("i", undefined, ["fa-solid", "fa-arrow-left", "tertiaryButton"])

    const forwardElem = createElement("i", undefined, ["fa-solid", "fa-arrow-right", "tertiaryButton"])

    const zoomElem = createElement("i", undefined, ["fa-solid", "tertiaryButton"])

    const closeElem = createElement("i", undefined, ["fa-solid", "fa-xmark", "tertiaryButton"])

    const menuBarElem = createElement("div", undefined, "menu-bar", [backElem, forwardElem, zoomElem, closeElem])

    const imageContainer = createElement("div", undefined, "image-wrapper")

    const backdrop = createElement("div", undefined, "backdrop")

    const modalContainer = createElement("div", undefined, "content", [menuBarElem, imageContainer])

    const modalElem = createElement("div", { id: "viewFullSizeImgModal" }, ["popup"], [backdrop, modalContainer])
    document.body.appendChild(modalElem)

    const setZoomLevel = (value) => {
        const img = imageContainer.querySelector("img")

        if (value) {
            zoomElem.classList.remove("fa-magnifying-glass-plus")
            zoomElem.classList.add("fa-magnifying-glass-minus")
            if (img) {
                img.classList.remove("natural-zoom")

                let zoomLevel = typeof value === "number" ? value : img.dataset.zoomLevel
                if (!zoomLevel) {
                    zoomLevel = 100
                }

                img.dataset.zoomLevel = zoomLevel
                img.width = img.naturalWidth * (+zoomLevel / 100)
                img.height = img.naturalHeight * (+zoomLevel / 100)
            }
        } else {
            zoomElem.classList.remove("fa-magnifying-glass-minus")
            zoomElem.classList.add("fa-magnifying-glass-plus")
            if (img) {
                img.classList.add("natural-zoom")
                img.removeAttribute("width")
                img.removeAttribute("height")
            }
        }
    }

    zoomElem.addEventListener("click", () =>
        setZoomLevel(imageContainer.querySelector("img")?.classList?.contains("natural-zoom"))
    )

    const state = {
        previous: undefined,
        next: undefined
    }

    const clear = () => {
        imageContainer.innerHTML = ""

        Object.keys(state).forEach((key) => delete state[key])
    }

    const close = () => {
        clear()
        modalElem.classList.remove("active")
        document.body.style.overflow = "initial"
    }

    /**
     * @param {() => (string | ImageModalRequest) | string | ImageModalRequest} optionsFactory
     */
    function init(optionsFactory) {
        if (!optionsFactory) {
            close()
            return
        }

        clear()

        const options = typeof optionsFactory === "function" ? optionsFactory() : optionsFactory
        const src = typeof options === "string" ? options : options.src

        const imgElem = createElement("img", { src }, "natural-zoom")
        imageContainer.appendChild(imgElem)
        modalElem.classList.add("active")
        document.body.style.overflow = "hidden"
        setZoomLevel(false)

        if (typeof options === "object" && options.previous) {
            state.previous = options.previous
            backElem.style.display = "unset"
        } else {
            backElem.style.display = "none"
        }

        if (typeof options === "object" && options.next) {
            state.next = options.next
            forwardElem.style.display = "unset"
        } else {
            forwardElem.style.display = "none"
        }
    }

    const back = () => {
        if (state.previous) {
            init(state.previous)
        } else {
            backElem.style.display = "none"
        }
    }

    const forward = () => {
        if (state.next) {
            init(state.next)
        } else {
            forwardElem.style.display = "none"
        }
    }

    window.addEventListener("keydown", (e) => {
        if (modalElem.classList.contains("active")) {
            switch (e.key) {
                case "Escape":
                    close()
                    break
                case "ArrowLeft":
                    back()
                    break
                case "ArrowRight":
                    forward()
                    break
            }
        }
    })
    window.addEventListener("click", (e) => {
        if (modalElem.classList.contains("active")) {
            if (e.target === backdrop || e.target === closeElem) {
                close()
            }

            e.stopPropagation()
            e.stopImmediatePropagation()
            e.preventDefault()
        }
    })

    backElem.addEventListener("click", back)

    forwardElem.addEventListener("click", forward)

    /**
     * @param {() => (string | ImageModalRequest) | string | ImageModalRequest} optionsFactory
     */
    return (optionsFactory) => init(optionsFactory)
})()