Twitter image viewing enhancement

Make Twitter photo viewing more humane

17.09.2020 itibariyledir. En son verisyonu görün.

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

You will need to install an extension such as Tampermonkey to install this script.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Zateb bir user-style yöneticim var, yükleyeyim!)

// ==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      1.0.0
// @description        Make Twitter photo viewing more humane
// @description:zh-CN  让推特图片浏览更加人性化
// @description:zh-TW  讓 Twitter 照片瀏覽更人性化
// @author       Jindai Kirin
// @include      https://twitter.com/*
// @license      MIT
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// @grant        GM_openInTab
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @run-at       document-end
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
// @require      https://cdn.jsdelivr.net/npm/[email protected]/jquery.mousewheel.min.js
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/snackbar.min.js
// @resource     snackbarcss https://cdn.jsdelivr.net/npm/[email protected]/dist/snackbar.min.css
// ==/UserScript==

// 注意 NOTICE
// v1.0.0 是一次实验性的重大更新,你将不再需要设置 aria-label,并且支持所有语言。如果某一天脚本突然无法正常工作,请于脚本页面反馈,或退回至 v0.6.3。
// v1.0.0 is an important experimental update, you will no longer need to set up aria-labels and it support all languages. If one day the script not work, please feedback on the script homepage or use v0.6.3.

(() => {
    'use strict';

    const labels = {};
    try {
        const kv = {
            af8fa2ad: 'close',
            c4d53ba2: 'prev',
            d70740d9: 'next',
        };
        webpackJsonp[2][1][webpackJsonp[2][2][0][0]](null, null, () => ({
            _register: () => (k, v) => {
                if (k in kv) labels[kv[k]] = v;
            },
        }));
    } catch (error) {}

    const getBtnByLabel = label => $(`div[aria-labelledby="modal-header"] div[aria-label="${label}"]`);
    const clickBtn = name => {
        const $btn = getBtnByLabel(labels[name]);
        if ($btn.length) {
            $btn.click();
            return true;
        }
        return false;
    };

    const closeImgView = () => clickBtn('close');
    const prevImg = () => clickBtn('prev');
    const nextImg = () => clickBtn('next');

    $(document).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;
        $(document).mousedown(({ clientX, clientY }) => {
            x = clientX;
            y = clientY;
        });
        $(document).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();
            }
        });
    })();
})();