Twitter image viewing enhancement

Make Twitter photo viewing more humane

04.03.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.

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

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!)

// 注意 NOTICE
// v0.5.0 中包含一些重大更新,如果你不是简体中文用户,请访问脚本主页以了解这一变更,否则你可能无法正常使用。
// There are some significant changes in v0.5.0, please visit the homepage of this script for more information.
// ==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.5.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
// @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
// ==/UserScript==

(function() {
    'use strict';

    const defaultLabels = { close: '关闭', prev: '上一个', next: '下一步' };
    const labels = (() => {
        try {
            return JSON.parse(GM_getValue('labels', JSON.stringify(defaultLabels)));
        } catch (error) {
            console.warn('Invalid setting.');
            return defaultLabels;
        }
    })();
    console.log('aria-labels', labels);
    GM_registerMenuCommand('Set aria-labels', () => {
        let input, list;
        let error = false;
        do {
            input = prompt(`Please input the aria-label of close, prev, next button and join them by comma (,). Input nothing will reset it to default value.${error ? '\n\nINPUT ERROR' : ''}`, input || Object.values(labels).join(','));
            if (input === null) return;
            if (input.length === 0) list = Object.values(defaultLabels);
            else list = input.split(',').map(label => label.trim());
            error = list.length !== Object.keys(labels).length;
        } while (error);
        Object.keys(labels).forEach((key, index) => {
            labels[key] = list[index];
        });
        GM_setValue('labels', JSON.stringify(labels));
        console.log('aria-labels', labels);
    });

    const getBtnByLabel = label => $(`div[aria-labelledby="modal-header"] div[aria-label="${label}"]`);

    const closeImgView = () => {
        const $btn = getBtnByLabel(labels.close);
        if ($btn.length) $btn.click();
        else if (confirm("It seems that you haven't set the right aria-labels yet. Please visit the homepage of this script for more information.")) GM_openInTab('https://greasyfork.org/zh-CN/scripts/387918', false);
    };
    const prevImg = () => getBtnByLabel(labels.prev).click();
    const nextImg = () => getBtnByLabel(labels.next).click();

    $(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();
        }
    });
})();