☰

Twitter 圖像查看增強

讓 Twitter 照片瀏覽更人性化

目前為 2020-09-17 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Twitter image viewing enhancement
  3. // @name:zh-CN   Twitter 图片查看增强
  4. // @name:zh-TW   Twitter 圖像查看增強
  5. // @icon         https://twitter.com/favicon.ico
  6. // @namespace    https://moe.best/
  7. // @version      1.0.0
  8. // @description        Make Twitter photo viewing more humane
  9. // @description:zh-CN  让推特图片浏览更加人性化
  10. // @description:zh-TW  讓 Twitter 照片瀏覽更人性化
  11. // @author       Jindai Kirin
  12. // @include      https://twitter.com/*
  13. // @license      MIT
  14. // @grant        GM_getValue
  15. // @grant        GM_setValue
  16. // @grant        GM_registerMenuCommand
  17. // @grant        GM_openInTab
  18. // @grant        GM_addStyle
  19. // @grant        GM_getResourceText
  20. // @run-at       document-end
  21. // @require      https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js
  22. // @require      https://cdn.jsdelivr.net/npm/jquery-mousewheel@3.1.13/jquery.mousewheel.min.js
  23. // @require      https://cdn.jsdelivr.net/npm/node-snackbar@0.1.16/dist/snackbar.min.js
  24. // @resource     snackbarcss https://cdn.jsdelivr.net/npm/node-snackbar@0.1.16/dist/snackbar.min.css
  25. // ==/UserScript==
  26.  
  27. // 注意 NOTICE
  28. // v1.0.0 是一次实验性的重大更新，你将不再需要设置 aria-label，并且支持所有语言。如果某一天脚本突然无法正常工作，请于脚本页面反馈，或退回至 v0.6.3。
  29. // 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.
  30.  
  31. (() => {
  32.     'use strict';
  33.  
  34.     const labels = {};
  35.     try {
  36.         const kv = {
  37.             af8fa2ad: 'close',
  38.             c4d53ba2: 'prev',
  39.             d70740d9: 'next',
  40.         };
  41.         webpackJsonp[2][1][webpackJsonp[2][2][0][0]](null, null, () => ({
  42.             _register: () => (k, v) => {
  43.                 if (k in kv) labels[kv[k]] = v;
  44.             },
  45.         }));
  46.     } catch (error) {}
  47.  
  48.     const getBtnByLabel = label => $(`div[aria-labelledby="modal-header"] div[aria-label="${label}"]`);
  49.     const clickBtn = name => {
  50.         const $btn = getBtnByLabel(labels[name]);
  51.         if ($btn.length) {
  52.             $btn.click();
  53.             return true;
  54.         }
  55.         return false;
  56.     };
  57.  
  58.     const closeImgView = () => clickBtn('close');
  59.     const prevImg = () => clickBtn('prev');
  60.     const nextImg = () => clickBtn('next');
  61.  
  62.     $(document).mousewheel(({ deltaY, target: { tagName, baseURI } }) => {
  63.         if (tagName == 'IMG' && /\/photo\//.test(baseURI)) {
  64.             switch (deltaY) {
  65.                 case 1:
  66.                     prevImg();
  67.                     break;
  68.                 case -1:
  69.                     nextImg();
  70.                     break;
  71.             }
  72.         }
  73.     });
  74.  
  75.     (() => {
  76.         let x = 0;
  77.         let y = 0;
  78.         $(document).mousedown(({ clientX, clientY }) => {
  79.             x = clientX;
  80.             y = clientY;
  81.         });
  82.         $(document).mouseup(({ button, clientX, clientY, target: { tagName, baseURI } }) => {
  83.             if (button !== 0 || !(tagName == 'IMG' && /\/photo\//.test(baseURI))) return;
  84.             const [sx, sy] = [clientX - x, clientY - y].map(Math.abs);
  85.             const mx = clientX - x;
  86.             if (sx <= 10 && sy <= 10) closeImgView();
  87.             if (sy <= sx) {
  88.                 if (mx > 0) prevImg();
  89.                 else if (mx < 0) nextImg();
  90.             }
  91.         });
  92.     })();
  93. })();