Support 2019 new UI Twitter only.
目前為
// ==UserScript==
// @name Zoom In Twitter Image
// @version 1.0.6
// @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/*
// @grant none
// ==/UserScript==
(function() {
"use strict";
// 點開圖片就不做放大的功能
let enable = location.href.match("photo/1") ? false : true;
// 定義 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);
enable = location.href.match("photo/1") ? false : true;
waitLoaded();
};
// 偵測上一頁、下一頁
window.addEventListener("popstate", () => {
enable = location.href.match("photo/1") ? false : true;
waitLoaded();
});
// 觀察文件是否產生變化
waitLoaded(); //等待文件讀取
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; //前綴
function waitLoaded() {
const section = document.getElementsByTagName("section");
setTimeout(() => {
if (section.length !== 2) waitLoaded();
else {
const target = section[0].children[1].children[0].children[0]; //取出會產生變化的節點
addListener();
const observer = new MutationObserver(e => { //建立觀察者，文件有變化就執行下列函式
addListener();
});
const config = { attributes: true, childList: true, characterData: true }; //設定觀察選項
observer.observe(target, config); //開始觀察
}
}, 500);
}
// 增加監聽的物件
function addListener() {
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 && enable) {
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";
}
})();