Twitter image viewing enhancement

Make Twitter photo viewing more humane
As of 2020-03-04. See the latest version.
Ask a question, post a review, or report the script.
Wrap lines
// 注意 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();
        }
    });
})();