☰

Twitter 图片查看增强

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

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

  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      0.4.3
  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        none
  15. // @run-at       document-end
  16. // @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js
  17. // @require      https://cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js
  18. // ==/UserScript==
  19.  
  20. (function() {
  21.     'use strict';
  22.  
  23.     const btns = () => {
  24.         const $btns = $('div[aria-labelledby="modal-header"] div[aria-haspopup="false"][role="button"]:not([data-testid])');
  25.         return $btns.length === 1 ? { close: $btns } : { prev: $($btns[0]), next: $($btns[1]), close: $($btns[2]) };
  26.     };
  27.     const closeImgView = () => btns().close.click();
  28.     const prevImg = () => {
  29.         const $btn = btns().prev;
  30.         if (!$btn.attr('disabled')) $btn.click();
  31.     };
  32.     const nextImg = () => {
  33.         const $btn = btns().next;
  34.         if (!$btn.attr('disabled')) $btn.click();
  35.     };
  36.  
  37.     $(window).mousewheel(({ deltaY, target: { tagName, baseURI } }) => {
  38.         if (tagName == 'IMG' && /\/photo\//.test(baseURI)) {
  39.             switch (deltaY) {
  40.                 case 1:
  41.                     prevImg();
  42.                     break;
  43.                 case -1:
  44.                     nextImg();
  45.                     break;
  46.             }
  47.         }
  48.     });
  49.  
  50.     let x = 0;
  51.     let y = 0;
  52.     $(window).mousedown(({ clientX, clientY }) => {
  53.         x = clientX;
  54.         y = clientY;
  55.     });
  56.     $(window).mouseup(({ button, clientX, clientY, target: { tagName, baseURI } }) => {
  57.         if (button !== 0 || !(tagName == 'IMG' && /\/photo\//.test(baseURI))) return;
  58.         const [sx, sy] = [clientX - x, clientY - y].map(Math.abs);
  59.         const mx = clientX - x;
  60.         if (sx <= 10 && sy <= 10) closeImgView();
  61.         if (sy <= sx) {
  62.             if (mx > 0) prevImg();
  63.             else if (mx < 0) nextImg();
  64.         }
  65.     });
  66. })();