Twitter 放大图像

放大滑鼠光标下的图像。
换行
// ==UserScript==
// @name                Twitter: Zoom In Image
// @name:zh-TW          Twitter 放大圖片
// @name:zh-CN          Twitter 放大图像
// @name:ja             Twitter 画像を拡大
// @name:ko             Twitter 이미지 확대
// @name:ru             Twitter Увеличить изображение
// @version             1.2.5
// @description         Zoom in the image which is under the cursor.
// @description:zh-TW   放大滑鼠游標下的圖片。
// @description:zh-CN   放大滑鼠光标下的图像。
// @description:ja      カーソルの下にある画像を拡大します。
// @description:ko      커서 아래에있는 이미지를 확대합니다.
// @description:ru      Увеличьте изображение под курсором.
// @author              Hayao-Gai
// @namespace           https://github.com/HayaoGai
// @icon                https://i.imgur.com/M9oO8K9.png
// @match               https://twitter.com/*
// @grant               none
// ==/UserScript==
 
/* jshint esversion: 6 */
 
(function() {
    'use strict';
 
    const svgLoading = `<svg width="100%" height="100%" viewBox="0 0 32 32"><circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="opacity: 0.2;"></circle><circle cx="16" cy="16" fill="none" r="14" stroke-width="4" style="stroke-dasharray: 80; stroke-dashoffset: 60;"></circle></svg>`;
    const textStyle = `
.zoomin-loading {
    position: fixed;
    width: 26px;
    height: 26px;
    display: none;
}
.zoomin-loading-show {
    display: flex !important;
}
.zoomin-canvas {
    border-radius: 8px;
    position: fixed;
    background-color: #e0e0e0;
    pointer-events: none;
    opacity: 0;
}
.zoomin-canvas-show {
    transition: opacity 0.4s;
    opacity: 1 !important;
}
.zoomin-zoom {
    border-radius: 8px;
    position: fixed;
    pointer-events: none;
    opacity: 0;
}
.zoomin-zoom-show {
    transition: opacity 0.4s;
    opacity: 1 !important;
}`;
    let currentUrl = document.location.href;
    let updating = false, showing = false;
    let loading, canvas, zoom, currentImage;
 
    css();
 
    init(10);
 
    locationChange();
 
    window.addEventListener("scroll", update);
 
    function init(times) {
        for (let i = 0; i < times; i++) {
            setTimeout(removeBlock, 500 * i);
            setTimeout(createLoading, 500 * i);
            setTimeout(createCanvas, 500 * i);
            setTimeout(createZoom, 500 * i);
            setTimeout(eventListener, 500 * i);
            setTimeout(sensitiveContent, 500 * i);
        }
    }
 
    // create
    function removeBlock() {
        // remove the div block on every avatar.
        document.querySelectorAll(".r-1twgtwe").forEach(block => block.remove());
    }
 
    function removeLoading() {
        if (!loading) return;
        loading.remove();
        loading = null;
    }
 
    function createLoading() {
        // check svg
        if (!getColor()) return;
        // check exist
        if (!!loading) return;
        // create
        loading = document.createElement("div");
        loading.className = "zoomin-loading css-1dbjc4n r-17bb2tj r-1muvv40 r-127358a r-1ldzwu0";
        loading.innerHTML = svgLoading;
        loading.querySelectorAll("circle").forEach(circle => { circle.style.stroke = getColor(); });
        document.body.appendChild(loading);
    }
 
    function createCanvas() {
        // check exist
        if (!!canvas) return;
        // create
        canvas = document.createElement("div");
        canvas.classList.add("zoomin-canvas");
        document.body.appendChild(canvas);
    }
 
    function createZoom() {
        // check exist
        if (!!zoom) return;
        // create
        zoom = document.createElement("img");
        zoom.classList.add("zoomin-zoom");
        document.body.appendChild(zoom);
    }
 
    // event
    function eventListener() {
        // situation 1: disable if you go into the image page.
        if (currentUrl.includes("photo/1")) return;
        // situation 2: return if loading, canvas or zoom doesn't exist.
        if (!loading || !canvas || !zoom) return;
        // add thumbnail mouse event.
        document.querySelectorAll(".r-4gszlv:not(zoomin-listener)").forEach(thumbnail => {
            thumbnail.classList.add("zoomin-listener");
            // return if the video thumbnail is exist.
            if (!thumbnail.closest(".r-1777fci") || (thumbnail.closest(".r-1777fci") && !thumbnail.closest(".r-1777fci").querySelector("[data-testid='playButton']"))) {
                const image = thumbnail.parentElement.querySelector("img");
                image.addEventListener("mousemove", showImage);
                image.addEventListener("mouseleave", hideImage);
            }
        });
    }
 
    function sensitiveContent() {
        document.querySelectorAll(".r-42olwf.r-1vsu8ta:not(.zoomin-view)").forEach(view => {
            view.classList.add("zoomin-view");
            view.addEventListener("click", () => init(3));
        });
    }
 
    function showImage() {
        // avoid calling this function multiple times.
        if (showing) return;
        showing = true;
        currentImage = this;
        // get image original size url.
        const origin = getOrigin(currentImage.src);
        if (!origin) return;
        zoom.setAttribute("src", origin);
        // show loading icon.
        loading.style.left = getLeft();
        loading.style.top = getTop();
        loading.classList.add("zoomin-loading-show");
        // detail
        zoomDetail();
    }
 
    function hideImage() {
        showing = false;
        loading.classList.remove("zoomin-loading-show");
        canvas.classList.remove("zoomin-canvas-show");
        zoom.classList.remove("zoomin-zoom-show");
        zoom.removeAttribute("src");
    }
 
    function zoomDetail() {
        // wait until get the image size.
        if (!zoom.naturalWidth)
        {
            setTimeout(zoomDetail, 100);
            return;
        }
        // hide loading icon.
        loading.classList.remove("zoomin-loading-show");
        // fit zoom original size for browser.
        const w = zoom.naturalWidth;
        const h = zoom.naturalHeight;
        const clientW = document.documentElement.clientWidth;
        const clientH = document.documentElement.clientHeight;
        const situation1 = w > clientW;
        const situation2 = h > clientH;
        if (situation1 && situation2) {
            const rate = clientH / h;
            const new_w = w * rate;
            const new_h = clientH;
            if (new_w > clientW) {
                const rate2 = clientW / new_w;
                const new_w2 = clientW;
                const new_h2 = new_h * rate2;
                setSize(canvas, new_w2, new_h2);
                setSize(zoom, new_w2 - 10, new_h2 - 10);
            } else {
                setSize(canvas, new_w, new_h);
                setSize(zoom, new_w - 10, new_h - 10);
            }
        } else if (situation1) {
            const rate3 = clientW / w;
            const new_h3 = h * rate3;
            setSize(canvas, clientW, new_h3);
            setSize(zoom, clientW - 10, new_h3 - 10);
        } else if (situation2) {
            const rate4 = clientH / h;
            const new_w4 = w * rate4;
            setSize(canvas, new_w4, clientH);
            setSize(zoom, new_w4 - 10, clientH - 10);
        } else {
            setSize(canvas, w + 10, h + 10);
            setSize(zoom, w, h);
        }
        // position
        const cWidth = parseInt(canvas.style.width);
        const cHeight = parseInt(canvas.style.height);
        const zWidth = parseInt(zoom.style.width);
        const zHeight = parseInt(zoom.style.height);
        let cLeft = clientW / 2 - cWidth / 2;
        let cTop = clientH / 2 - cHeight / 2;
        if (cLeft < 0) cLeft = 0;
        if (cTop < 0) cTop = 0;
        let zLeft = clientW / 2 - zWidth / 2;
        let zTop = clientH / 2 - zHeight / 2;
        if (zLeft < 0) zLeft = 0;
        if (zTop < 0) zTop = 0;
        canvas.classList.add("zoomin-canvas-show");
        canvas.style.left = `${cLeft}px`;
        canvas.style.top = `${cTop}px`;
        zoom.classList.add("zoomin-zoom-show");
        zoom.style.left = `${zLeft}px`;
        zoom.style.top = `${zTop}px`;
    }
 
    // method
    function getColor() {
        let color = "";
        document.querySelectorAll("svg.r-50lct3").forEach(svg => {
            if (!!color) return;
            color = getComputedStyle(svg).color;
        });
        return color;
    }
 
    function getOrigin(url) {
        // situation 1: post
        if (url.includes("media") || url.includes("card")) {
            const search = url.split("&name=");
            const last = search[search.length - 1];
            return url.replace(last, "orig");
        }
        // situation 2: banner
        else if (url.includes("banner")) {
            const search = url.split("/");
            const last = search[search.length - 1];
            return url.replace(last, "1500x500");
        }
        // situation 3: avatar
        else if (url.includes("profile")) {
            const search1 = url.split("_");
            const search2 = url.split(".");
            const last1 = search1[search1.length - 1];
            const last2 = search2[search2.length - 1];
            return url.replace(`_${last1}`, `.${last2}`);
        }
        // situation 3: video
        else {
            return null;
        }
    }
 
    function getLeft() {
        return `${document.documentElement.clientWidth / 2 - 13}px`;
    }
 
    function getTop() {
        return `${document.documentElement.clientHeight / 2 - 13}px`;
    }
 
    function setSize(element, width, height) {
        element.style.width = `${width}px`;
        element.style.height = `${height}px`;
    }
 
    // others
    function css() {
        const style = document.createElement("style");
        style.type = "text/css";
        style.innerHTML = textStyle;
        document.head.appendChild(style);
    }
 
    function update() {
        if (updating) return;
        updating = true;
        init(3);
        setTimeout(() => { updating = false; }, 1000);
    }
 
    function locationChange() {
        const observer = new MutationObserver(mutations => {
            mutations.forEach(() => {
                if (currentUrl !== document.location.href) {
                    currentUrl = document.location.href;
                    hideImage();
                    removeLoading();
                    init(10);
                }
            });
        });
        const target = document.body;
        const config = { childList: true, subtree: true };
        observer.observe(target, config);
    }
 
})();
欢迎访问Greasy Fork镜像
