Steam Lib Image viewer

gistfile1.js

let lightbox, lightboxImg;

function createLightbox() {
    if (lightbox) return;

    lightbox = document.createElement("div");
    Object.assign(lightbox.style, {
        position: "fixed",
        top: 0,
        left: 0,
        width: "100vw",
        height: "100vh",
        background: "rgba(0,0,0,0.9)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 9999,
        cursor: "zoom-out"
    });

    lightboxImg = document.createElement("img");
    Object.assign(lightboxImg.style, {
        maxWidth: "90%",
        maxHeight: "90%",
        transform: "scale(1)",
        cursor: "grab",
        transition: "transform 0.1s ease-out"
    });

    lightbox.appendChild(lightboxImg);
    document.body.appendChild(lightbox);

    let scale = 1;
    let isDragging = false;
    let startX, startY, translateX = 0, translateY = 0;

    // Close on background click
    lightbox.onclick = (e) => {
        if (e.target === lightbox) {
            lightbox.style.display = "none";
        }
    };

    // Zoom with scroll
    lightbox.onwheel = (e) => {
        e.preventDefault();
        scale += e.deltaY * -0.001;
        scale = Math.min(Math.max(0.5, scale), 5);

        updateTransform();
    };

    // Drag to pan
    lightboxImg.onmousedown = (e) => {
        isDragging = true;
        startX = e.clientX - translateX;
        startY = e.clientY - translateY;
        lightboxImg.style.cursor = "grabbing";
    };
	
	// Double-click to reset zoom
	lightboxImg.ondblclick = () => {
		lightbox.reset();
	};

    window.onmouseup = () => {
        isDragging = false;
        lightboxImg.style.cursor = scale > 1 ? "grab" : "zoom-in";
    };

    window.onmousemove = (e) => {
        if (!isDragging) return;

        translateX = e.clientX - startX;
        translateY = e.clientY - startY;

        updateTransform();
    };
	
	window.addEventListener("keydown", (e) => {
		if (e.key === "Escape" && lightbox) {
			lightbox.style.display = "none";
		}
	});

    function updateTransform() {
        lightboxImg.style.transform =
            `translate(${translateX}px, ${translateY}px) scale(${scale})`;
    }

    // Reset function
    lightbox.reset = () => {
        scale = 1;
        translateX = 0;
        translateY = 0;
        updateTransform();
    };

    lightbox.style.display = "none";
}

function openLightbox(src) {
    createLightbox();

    lightboxImg.src = src;
    lightbox.style.display = "flex";
    lightbox.reset();
}

function enhanceImage(img) {
    if (img.dataset.enhanced === "true") return;
    img.dataset.enhanced = "true";

    const wrapper = document.createElement("div");
    Object.assign(wrapper.style, {
        position: "relative",
        display: "inline-block",
        cursor: "zoom-in"
    });

    img.parentNode.insertBefore(wrapper, img);
    wrapper.appendChild(img);

    // Overlay
    const overlay = document.createElement("div");
    Object.assign(overlay.style, {
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        background: "rgba(0,0,0,0.0)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        transition: "background 0.2s ease",
        pointerEvents: "none"
    });

    // Icon
    const icon = document.createElement("div");
    icon.innerHTML = `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="white">
			<path d="M10 2a8 8 0 105.293 14.293l4.207 4.207 1.414-1.414-4.207-4.207A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/>
		</svg>`;
    Object.assign(icon.style, {
        fontSize: "24px",
        color: "white",
        opacity: 0,
        transition: "opacity 0.2s ease"
    });

    overlay.appendChild(icon);
    wrapper.appendChild(overlay);

    // Hover effects
    wrapper.onmouseenter = () => {
        overlay.style.background = "rgba(0,0,0,0.4)";
        icon.style.opacity = 1;
		wrapper.style.cursor = "zoom-in";
    };

    wrapper.onmouseleave = () => {
        overlay.style.background = "rgba(0,0,0,0.0)";
        icon.style.opacity = 0;
    };

    // Click anywhere on image
    wrapper.onclick = (e) => {
        e.stopPropagation();

        const fullSrc = img.src.replace(/\?.*$/, "");
        openLightbox(fullSrc);
    };
}

function processPost(postContent) {
    const images = postContent.querySelectorAll("img:not([data-enhanced])");
    images.forEach(enhanceImage);
}

function scanForPosts(root) {
    const posts = root.querySelectorAll("._32mHvRSmD7AVK9OIOPlaFu");
    posts.forEach(processPost);
}

function initObserver() {
    const modalRoot = document.querySelector("._37MAYpIjl0IDA1xVhhsuX8");
    if (!modalRoot) {
        console.log("[Millenium Plugin] Modal root not found, retrying...");
        setTimeout(initObserver, 1000);
        return;
    }

    console.log("[Millenium Plugin] Observer attached");

    const observer = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            for (const node of mutation.addedNodes) {
                if (!(node instanceof HTMLElement)) continue;

                // Direct match
                if (node.matches?.("._32mHvRSmD7AVK9OIOPlaFu")) {
                    processPost(node);
                }

                // Nested match
                const posts = node.querySelectorAll?.("._32mHvRSmD7AVK9OIOPlaFu");
                posts?.forEach(processPost);
            }
        }
    });

    observer.observe(modalRoot, {
        childList: true,
        subtree: true
    });

    // Initial scan
    scanForPosts(modalRoot);
}

// Entry point
function main() {
    console.log("[THEME HACK] Loaded");
    initObserver();
}

main()