// ==UserScript==
// @name         Zoom In Twitter Image
// @version      1.0.7
// @description  Support 2019 new UI Twitter only.
// @author       Hayao-Gai
// @namespace	 https://github.com/HayaoGai
// @icon         https://i.imgur.com/M9oO8K9.png
// @include      https://twitter.com/*
// @require      http://code.jquery.com/jquery-3.4.1.slim.min.js
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    "use strict";

    const $ = window.jQuery;

    // 定義 Hover
    let hover = false;
    let block = document.createElement("div");
    block.style.position = "fixed";
    block.style.width = document.documentElement.clientWidth + "px";
    block.style.height = document.documentElement.clientHeight + "px"; //同視窗大小
    block.style.left = "0px";
    block.style.top = "0px"; //擺在正中間
    block.style.pointerEvents = "none";
    block.style.backgroundPosition = "center center";
    block.style.backgroundRepeat = "no-repeat";
    block.style.display = "none";
    block.style.opacity = "0";
    block.style.transition = "opacity 0.3s";
    document.body.appendChild(block);

    // 視窗縮放
    window.onresize = function() {
        block.style.width = document.documentElement.clientWidth;
        block.style.height = document.documentElement.clientHeight;
    };

    // 偵測是否僅切換地址
    let pushState = history.pushState;
    history.pushState = function () {
        pushState.apply(history, arguments);
        waitLoaded();
    };

    // 偵測上一頁、下一頁
    window.addEventListener("popstate", waitLoaded);

    // 觀察文件是否產生變化
    waitLoaded(); //等待文件讀取
    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; //前綴
    function waitLoaded() {
        setTimeout(() => {
            const h1 = $("section").find("H1");
            const title = $("title");
            if (h1.length !== 2 || title.length === 0) waitLoaded();
            else {
                // 獲取目標
                const target1 = [...h1[0].parentElement.childNodes].filter(child => child.tagName !== "H1")[0].childNodes[0].childNodes[0];
                const target2 = title[0];
                // 先執行一次
                addListener();
                // 建立觀察者，文件有變化就執行下列函式
                const observer = new MutationObserver(addListener);
                // 設定觀察選項
                const config = { attributes: true, childList: true, characterData: true };
                // 開始觀察
                observer.observe(target1, config); //時間軸
                observer.observe(target2, config); //標籤頁
            }
        }, 500);
    }

    // 增加監聽的物件
    function addListener() {
        // 點進圖片後，不做放大效果
        if (location.href.match("photo/1")) return;
        const image = document.getElementsByTagName("img");
        const button = document.querySelectorAll('[role="button"]');
        const tab = document.querySelectorAll('[role="tab"]');
        for (let i = 0; i < image.length; i++) mouseListener(image[i]);
        for (let i = 0; i < button.length; i++) clickListener(button[i]);
        for (let i = 0; i < tab.length; i++) clickListener(tab[i]);
    }

    // 監聽：滑鼠移至上方
    function mouseListener(element) {
        if (element.src.match("https://pbs") !== null) {
            element.addEventListener("mousemove", showImage);
            element.addEventListener("mouseleave", hideImage);
        }
    }

    // 監聽：滑鼠點按
    function clickListener(element) {
        element.addEventListener("click", waitLoaded);
    }

    // 元素位置
    function getPosition(element) {
        const rect = element.getBoundingClientRect();
        return {
            left: rect.left + window.scrollX,
            top: rect.top + window.scrollY
        };
    }

    // 顯示圖片
    function showImage() {
        if (!hover) {
            hover = true;
            const url = getImage(this.src);

            // 等待圖片讀取
            let newImg = new Image();
            newImg.onload = () => {

                // 讀取期間滑鼠移走
                if (!hover) return;

                // 調整圖片寬高
                const w = newImg.width;
                const h = newImg.height;
                const clientW = document.documentElement.clientWidth;
                const clientH = document.documentElement.clientHeight;
                const condition1 = w > clientW;
                const condition2 = h > clientH;
                if (condition1 && condition2) {
                    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;
                        block.style.backgroundSize = new_w2 + "px " + new_h2 + "px";
                    } else block.style.backgroundSize = new_w + "px " + new_h + "px";
                } else if (condition1) {
                    block.style.backgroundSize = clientW + "px auto";
                } else if (condition2) {
                    block.style.backgroundSize = "auto " + clientH + "px";
                } else block.style.backgroundSize = "auto auto";

                block.style.backgroundImage = "url(" + url + ")";
                block.style.display = "inline";
                block.style.opacity = "0";
                getComputedStyle(block).opacity;
                block.style.opacity = "1";
            };
            newImg.src = url;
        }
    }

    // 取得圖片
    function getImage(url) {
        const m1 = url.split("/");
        let newUrl = "https://pbs.twimg.com/";
        // 一般圖
        if (m1[3].match("media") !== null) {
            for (let i = 3; i < m1.length; i++) {
                if (i !== m1.length - 1) newUrl += m1[i] + "/";
                else newUrl += m1[i].split("&")[0] + "&name=orig";
            }
        }
        // 使用者頭像
        else if (m1[3].match("profile") !== null) {
            for (let i = 3; i < m1.length; i++) {
                if (i !== m1.length - 1) newUrl += m1[i] + "/";
                else {
                    const m2 = m1[i].split("_");
                    for (let i = 0; i < m2.length; i++) {
                        if (i === 0) newUrl += m2[i];
                        else if (i !== m2.length - 1) newUrl += "_" + m2[i];
                        else newUrl += "." + m2[i].split(".")[1];
                    }
                }
            }
        }
        // 影片不放大縮圖
        else newUrl = null;

        return newUrl;
    }

    // 隱藏圖片
    function hideImage() {
        hover = false;
        block.style.display = "none";
        block.style.opacity = "0";
    }
})();