☰

Twitter Image Switch With Drag

Switch between previous and next images by dragging the mouse, click on the image to close it.

当前为 2024-04-15 提交的版本，查看 最新版本。

  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.1
  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.     window.addEventListener('mousedown', function({ clientX }) {
  42.         initialXCoordinate = clientX;
  43.     });
  44.  
  45.     window.addEventListener(
  46.         'mouseup',
  47.         function({ button, clientX, target: { tagName, baseURI } }) {
  48.             if (button !== 0 || !(tagName == 'IMG' && /\/photo\//.test(baseURI))) return;
  49.             const distanceMovedX = clientX - initialXCoordinate;
  50.             if (Math.abs(distanceMovedX) <= 10) {
  51.                 clickBtn('Close');
  52.             }
  53.             else if (distanceMovedX > 0) {
  54.                 clickBtn('Previous slide');
  55.             }
  56.             else if (distanceMovedX < 0) {
  57.                 clickBtn('Next slide');
  58.             }
  59.         }
  60.     );
  61. }
  62. ImageSwitchWithDrag();