☰

Twitter 图片查看增强

让推特图片浏览更加人性化

当前为 2020-02-16 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Twitter image viewing enhancement
// @name:zh-CN   Twitter 图片查看增强
// @name:zh-TW   Twitter 圖像查看增強
// @icon         https://twitter.com/favicon.ico
// @namespace    https://moe.best/
// @version      0.4.5
// @description        Make Twitter photo viewing more humane
// @description:zh-CN  让推特图片浏览更加人性化
// @description:zh-TW  讓 Twitter 照片瀏覽更人性化
// @author       Jindai Kirin
// @include      https://twitter.com/*
// @license      MIT
// @grant        none
// @run-at       document-end
// @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js
// @require      https://cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js
// ==/UserScript==

(function() {
    'use strict';

    const closeBtn = () => $('div[aria-labelledby="modal-header"] > div[role="presentation"] > div[role="button"]');
    const pnBtn = () => {
        const result = {};
        const btns = Array.from($('div[aria-labelledby="modal-header"] > div div[role="presentation"] > div[role="button"]'));
        const centerPos = $(window).width() / 2;
        btns.forEach(el => {
            const $el = $(el);
            const pos = $el.offset().left + $el.width() / 2;
            if (pos < centerPos) result.prev = $el;
            else result.next = $el;
        });
        return result;
    };
    const closeImgView = () => closeBtn().click();
    const prevImg = () => {
        const $btn = pnBtn().prev;
        if ($btn) $btn.click();
    };
    const nextImg = () => {
        const $btn = pnBtn().next;
        if ($btn) $btn.click();
    };

    $(window).mousewheel(({ deltaY, target: { tagName, baseURI } }) => {
        if (tagName == 'IMG' && /\/photo\//.test(baseURI)) {
            switch (deltaY) {
                case 1:
                    prevImg();
                    break;
                case -1:
                    nextImg();
                    break;
            }
        }
    });

    let x = 0;
    let y = 0;
    $(window).mousedown(({ clientX, clientY }) => {
        x = clientX;
        y = clientY;
    });
    $(window).mouseup(({ button, clientX, clientY, target: { tagName, baseURI } }) => {
        if (button !== 0 || !(tagName == 'IMG' && /\/photo\//.test(baseURI))) return;
        const [sx, sy] = [clientX - x, clientY - y].map(Math.abs);
        const mx = clientX - x;
        if (sx <= 10 && sy <= 10) closeImgView();
        if (sy <= sx) {
            if (mx > 0) prevImg();
            else if (mx < 0) nextImg();
        }
    });
})();