☰

Twitter 拖曳切换图像

使用鼠标拖曳来切换上一张或下一张图像, 点击图像即可关闭图像

目前为 2024-04-17 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Twitter Image Switch With Drag
  3. // @name:ja      Twitter Image Switch With Drag
  4. // @name:zh-cn   Twitter 拖曳切换图像
  5. // @name:zh-tw   Twitter 拖曳切換圖片
  6. // @description         Switch between previous and next images by dragging the mouse, click on the image to close it.
  7. // @description:ja      マウスをドラッグして前後の画像を切り替え、画像をクリックして閉じます。
  8. // @description:zh-cn   使用鼠标拖曳来切换上一张或下一张图像, 点击图像即可关闭图像
  9. // @description:zh-tw   使用滑鼠拖曳來切換上一張或下一張圖片, 點擊圖片即可關閉圖片
  10. // @namespace    none
  11. // @version      0.1.4
  12. // @author       ShanksSU
  13. // @match        https://twitter.com/*
  14. // @icon         https://www.google.com/s2/favicons?sz=64&domain=twitter.com
  15. // @grant        GM_setValue
  16. // @grant        GM_getValue
  17. // @grant        GM_addStyle
  18. // @compatible   Chrome
  19. // @license      MIT
  20. // ==/UserScript==
  21. function ImageSwitchWithDrag() {
  22.     function clickBtn(name) {
  23.         const btn = document.querySelector(`div[aria-labelledby="modal-header"] div[aria-label*="${name}"]`);
  24.         if (btn) {
  25.             btn.click();
  26.             return true;
  27.         }
  28.         return false;
  29.     }
  30.  
  31.     GM_addStyle('img { -webkit-user-drag: none; }');
  32.  
  33.     window.addEventListener('wheel', function({ deltaY, target: { tagName, baseURI } }) {
  34.         if (tagName == 'IMG' && /\/photo\//.test(baseURI)) {
  35.             if (deltaY < 0) clickBtn('Previous slide');
  36.             else if (deltaY > 0) clickBtn('Next slide');
  37.         }
  38.     });
  39.  
  40.     let initialXCoordinate = 0;
  41.     let clickCount = 0;
  42.     const doubleClickThreshold = 300;
  43.     window.addEventListener('mousedown', function({ clientX }) {
  44.         initialXCoordinate = clientX;
  45.     });
  46.  
  47.     window.addEventListener(
  48.         'mouseup',
  49.         function({ button, clientX, target: { tagName, baseURI }, timeStamp }) {
  50.             if (button !== 0 || !(tagName == 'IMG' && /\/photo\//.test(baseURI))) return;
  51.             const distanceMovedX = clientX - initialXCoordinate;
  52.             clickCount++;
  53.             setTimeout(() => {
  54.                 if (clickCount === 1) {
  55.                     if (Math.abs(distanceMovedX) === 0) {
  56.                         if (baseURI === window.location.href) {
  57.                             clickBtn('Close');
  58.                         }
  59.                     } else if (distanceMovedX > 0) {
  60.                         clickBtn('Previous slide');
  61.                     } else if (distanceMovedX < 0) {
  62.                         clickBtn('Next slide');
  63.                     }
  64.                 } else if (clickCount === 2) {
  65.                     clickBtn('Likes. Like');
  66.                 }
  67.                 clickCount = 0;
  68.             }, doubleClickThreshold);
  69.         }
  70.     );
  71.  
  72. }
  73. ImageSwitchWithDrag();