☰

Draggy

Drag a link to open in a new tab; drag a piece of text to search in a new tab.

  1. // ==UserScript==
  2. // @name         Draggy
  3. // @name:zh-CN   Draggy
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.2.9
  6. // @description  Drag a link to open in a new tab; drag a piece of text to search in a new tab.
  7. // @description:zh-CN 拖拽链接以在新标签页中打开，拖拽文本以在新标签页中搜索。
  8. // @tag          productivity
  9. // @author       PRO-2684
  10. // @match        *://*/*
  11. // @run-at       document-start
  12. // @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  13. // @license      gpl-3.0
  14. // @grant        GM_addElement
  15. // @grant        GM_openInTab
  16. // @grant        GM_setValue
  17. // @grant        GM_getValue
  18. // @grant        GM_deleteValue
  19. // @grant        GM_registerMenuCommand
  20. // @grant        GM_unregisterMenuCommand
  21. // @grant        GM_addValueChangeListener
  22. // @require      https://github.com/PRO-2684/GM_config/releases/download/v1.2.2/config.min.js#md5=c45f9b0d19ba69bb2d44918746c4d7ae
  23. // ==/UserScript==
  24.  
  25. (function () {
  26.     "use strict";
  27.     const { name, version } = GM.info.script;
  28.     const configDesc = {
  29.         $default: {
  30.             autoClose: false,
  31.         },
  32.         appearance: {
  33.             name: "🎨 Appearance settings",
  34.             title: "Settings for the appearance of Draggy overlay.",
  35.             type: "folder",
  36.             items: {
  37.                 circleOverlay: {
  38.                     name: "Circle overlay",
  39.                     title: "When to show the circle overlay.",
  40.                     type: "enum",
  41.                     options: [
  42.                         "Never",
  43.                         "Auto",
  44.                         "Always",
  45.                     ],
  46.                     value: 1,
  47.                 },
  48.             },
  49.         },
  50.         operation: {
  51.             name: "🛠️ Operation settings",
  52.             title: "Settings for the operation of Draggy.",
  53.             type: "folder",
  54.             items: {
  55.                 openTabInBg: {
  56.                     name: "Open tab in background",
  57.                     title: "Whether to open new tabs in the background.",
  58.                     type: "bool",
  59.                     value: false,
  60.                 },
  61.                 openTabInsert: {
  62.                     name: "Open tab insert",
  63.                     title: "Whether to insert the new tab next to the current tab. If false, the new tab will be appended to the end.",
  64.                     type: "bool",
  65.                     value: true,
  66.                 },
  67.                 matchingUriInText: {
  68.                     name: "Matching URI in text",
  69.                     title: "Whether to match URI in the selected text. If enabled AND the selected text is a valid URI AND its protocol is allowed, Draggy will open it directly instead of searching.",
  70.                     type: "bool",
  71.                     value: true,
  72.                 },
  73.                 minDistance: {
  74.                     name: "Minimum drag distance",
  75.                     title: "Minimum distance to trigger draggy.",
  76.                     type: "int", // 1-1000
  77.                     min: 1,
  78.                     max: 1000,
  79.                     value: 50,
  80.                 },
  81.             },
  82.         },
  83.         searchEngine: {
  84.             name: "🔎 Search engine settings",
  85.             title: "Configure search engines for different directions. Use `{<max-length>}` as a placeholder for the URL-encoded query, where `<max-length>` is the maximum text length. If `<max-length>` is not specified, the search term will not be truncated.",
  86.             type: "folder",
  87.             items: {
  88.                 default: {
  89.                     name: "Search engine (default)",
  90.                     title: "Default search engine used when dragging text.",
  91.                     value: "https://www.google.com/search?q={50}",
  92.                 },
  93.                 left: {
  94.                     name: "Search engine (left)",
  95.                     title: "Search engine used when dragging text left. Leave it blank to use the default search engine.",
  96.                     value: ""
  97.                 },
  98.                 right: {
  99.                     name: "Search engine (right)",
  100.                     title: "Search engine used when dragging text right. Leave it blank to use the default search engine.",
  101.                     value: ""
  102.                 },
  103.                 up: {
  104.                     name: "Search engine (up)",
  105.                     title: "Search engine used when dragging text up. Leave it blank to use the default search engine.",
  106.                     value: ""
  107.                 },
  108.                 down: {
  109.                     name: "Search engine (down)",
  110.                     title: "Search engine used when dragging text down. Leave it blank to use the default search engine.",
  111.                     value: ""
  112.                 },
  113.             },
  114.         },
  115.         advanced: {
  116.             name: "⚙️ Advanced settings",
  117.             title: "Settings for advanced users or debugging.",
  118.             type: "folder",
  119.             items: {
  120.                 allowedProtocols: {
  121.                     name: "Allowed protocols",
  122.                     title: "Comma-separated list of allowed protocols for matched URI in texts. Leave it blank to allow all protocols.",
  123.                     value: "http,https,ftp,mailto,tel",
  124.                 },
  125.                 maxTimeDelta: {
  126.                     name: "Maximum time delta",
  127.                     title: "Maximum time difference between esc/drop and dragend events to consider them as separate user gesture. Usually there's no need to change this value.",
  128.                     type: "int", // 1-100
  129.                     min: 1,
  130.                     max: 100,
  131.                     value: 10,
  132.                 },
  133.                 processHandled: {
  134.                     name: "Process handled events",
  135.                     title: "Whether to process handled drag events. Note that this may lead to an event being handled multiple times.",
  136.                     type: "bool",
  137.                     value: false,
  138.                 },
  139.                 debug: {
  140.                     name: "Debug mode",
  141.                     title: "Enables debug mode.",
  142.                     type: "bool",
  143.                     value: false,
  144.                 },
  145.             },
  146.         },
  147.     };
  148.     const config = new GM_config(configDesc, { immediate: true });
  149.     /**
  150.      * Last time a drop event occurred.
  151.      * @type {number}
  152.      */
  153.     let lastDrop = 0;
  154.     /**
  155.      * Start position of the drag event.
  156.      * @type {{ x: number, y: number }}
  157.      */
  158.     let startPos = { x: 0, y: 0 };
  159.     /**
  160.      * Circle overlay.
  161.      * @type {HTMLDivElement}
  162.      */
  163.     const circle = initOverlay();
  164.     /**
  165.      * Judging criteria for draggy.
  166.      * @type {{ selection: (e: DragEvent) => string|HTMLAnchorElement|HTMLImageElement|null, handlers: (e: DragEvent) => boolean, dropEvent: (e: DragEvent) => boolean, }}
  167.      */
  168.     const judging = {
  169.         selection: (e) => {
  170.             const target = e.composedPath()[0];
  171.             const img = target?.closest?.("img[src]");
  172.             const src = img?.src;
  173.             if (src) {
  174.                 return img;
  175.             }
  176.             const link = target?.closest?.("a[href]");
  177.             const href = link?.getAttribute("href");
  178.             if (href && !href.startsWith("javascript:") && href !== "#") {
  179.                 return link;
  180.             }
  181.             const selection = window.getSelection();
  182.             const selectionAncestor = commonAncestor(selection.anchorNode, selection.focusNode);
  183.             const selectedText = selection.toString();
  184.             // Check if we're dragging the selected text (selectionAncestor is the ancestor of target, or target is the ancestor of selectionAncestor)
  185.             if (selectedText && selectionAncestor && (isAncestorOf(selectionAncestor, target) || isAncestorOf(target, selectionAncestor))) {
  186.                 return selectedText;
  187.             }
  188.         },
  189.         handlers: (e) => config.get("advanced.processHandled") || e.dataTransfer.dropEffect === "none" && e.dataTransfer.effectAllowed === "uninitialized" && !e.defaultPrevented,
  190.         dropEvent: (e) => config.get("advanced.processHandled") || e.timeStamp - lastDrop > config.get("advanced.maxTimeDelta"),
  191.     };
  192.  
  193.     /**
  194.      * Logs the given arguments if debug mode is enabled.
  195.      * @param {...any} args The arguments to log.
  196.      */
  197.     function log(...args) {
  198.         if (config.get("advanced.debug")) {
  199.             console.log(`[${name}]`, ...args);
  200.         }
  201.     }
  202.     /**
  203.      * Finds the most recent common ancestor of two nodes.
  204.      * @param {Node} node1 The first node.
  205.      * @param {Node} node2 The second node.
  206.      * @returns {Node|null} The common ancestor of the two nodes.
  207.      */
  208.     function commonAncestor(node1, node2) {
  209.         const ancestors = new Set();
  210.         for (let n = node1; n; n = n.parentNode) {
  211.             ancestors.add(n);
  212.         }
  213.         for (let n = node2; n; n = n.parentNode) {
  214.             if (ancestors.has(n)) {
  215.                 return n;
  216.             }
  217.         }
  218.         return null;
  219.     }
  220.     /**
  221.      * Checks if the given node is an ancestor of another node.
  222.      * @param {Node} ancestor The ancestor node.
  223.      * @param {Node} descendant The descendant node.
  224.      * @returns {boolean} Whether the ancestor is an ancestor of the descendant.
  225.      */
  226.     function isAncestorOf(ancestor, descendant) {
  227.         for (let n = descendant; n; n = n.parentNode) {
  228.             if (n === ancestor) {
  229.                 return true;
  230.             }
  231.         }
  232.         return false
  233.     }
  234.     /**
  235.      * Opens the given URL in a new tab, respecting the user's preference.
  236.      * @param {string} url The URL to open.
  237.      */
  238.     function open(url) {
  239.         GM_openInTab(url, { active: !config.get("operation.openTabInBg"), insert: config.get("operation.openTabInsert") });
  240.     }
  241.     /**
  242.      * Handles the given text based on the drag direction. If the text is a valid URI and protocol is allowed, open the URI; otherwise, search for the text.
  243.      * @param {string} text The text to handle.
  244.      * @param {string} direction The direction of the drag.
  245.      */
  246.     function handleText(text, direction) {
  247.         if (URL.canParse(text)) {
  248.             const url = new URL(text);
  249.             const allowedProtocols = config.get("advanced.allowedProtocols").split(",").map(p => p.trim()).filter(Boolean);
  250.             if (allowedProtocols.length === 0 || allowedProtocols.includes(url.protocol.slice(0, -1))) {
  251.                 open(text);
  252.                 return;
  253.             }
  254.         }
  255.         search(text, direction);
  256.     }
  257.     /**
  258.      * Searches for the given keyword.
  259.      * @param {string} keyword The keyword to search for.
  260.      * @param {string} direction The direction of the drag.
  261.      */
  262.     function search(keyword, direction) {
  263.         const searchEngine = config.get(`searchEngine.${direction}`) || config.get("searchEngine.default");
  264.         const maxLenMatch = searchEngine.match(/\{(\d*)\}/);
  265.         const maxLenParsed = parseInt(maxLenMatch?.[1]);
  266.         const maxLen = isNaN(maxLenParsed) ? +Infinity : maxLenParsed;
  267.         const truncated = keyword.slice(0, maxLen);
  268.         const url = searchEngine.replace(maxLenMatch[0], encodeURIComponent(truncated));
  269.         log(`Searching for "${truncated}" using "${url}"`);
  270.         open(url);
  271.     }
  272.     /**
  273.      * Updates the circle overlay size.
  274.      * @param {number} size The size of the circle overlay.
  275.      */
  276.     function onMinDistanceChange(size) {
  277.         circle.style.setProperty("--size", size + "px");
  278.     }
  279.     /**
  280.      * Creates a circle overlay.
  281.      * @returns {HTMLDivElement} The circle overlay.
  282.      */
  283.     function initOverlay() {
  284.         const circle = document.body.appendChild(document.createElement("div"));
  285.         circle.id = "draggy-overlay";
  286.         const textContent = `
  287.             body > #draggy-overlay {
  288.                 --size: 50px; /* Circle radius */
  289.                 --center-x: calc(-1 * var(--size)); /* Hide the circle by default */
  290.                 --center-y: calc(-1 * var(--size));
  291.                 display: none;
  292.                 position: fixed;
  293.                 box-sizing: border-box;
  294.                 width: calc(var(--size) * 2);
  295.                 height: calc(var(--size) * 2);
  296.                 top: calc(var(--center-y) - var(--size));
  297.                 left: calc(var(--center-x) - var(--size));
  298.                 border-radius: 50%;
  299.                 border: 1px solid white; /* Circle border */
  300.                 padding: 0;
  301.                 margin: 0;
  302.                 mix-blend-mode: difference; /* Invert the background */
  303.                 background: transparent;
  304.                 z-index: 2147483647;
  305.                 pointer-events: none;
  306.                 &[data-draggy-overlay="0"] {  }
  307.                 &[data-draggy-overlay="1"][data-draggy-selected] { display: block; }
  308.                 &[data-draggy-overlay="2"] { display: block; }
  309.             }
  310.         `;
  311.         function addStyle() {
  312.             if (document.getElementById("draggy-style")) {
  313.                 return;
  314.             }
  315.             GM_addElement(document.documentElement, "style", {
  316.                 id: "draggy-style",
  317.                 class: "darkreader", // Make Dark Reader ignore
  318.                 textContent
  319.             });
  320.         }
  321.         addStyle();
  322.         setTimeout(addStyle, 1000); // Dark Reader might remove the style
  323.         return circle;
  324.     }
  325.     /**
  326.      * Toggles the circle overlay.
  327.      * @param {number} mode When to show the circle overlay.
  328.      */
  329.     function toggleOverlay(mode) {
  330.         circle.setAttribute("data-draggy-overlay", mode);
  331.     }
  332.  
  333.     // Event listeners
  334.     document.addEventListener("drop", (e) => {
  335.         lastDrop = e.timeStamp;
  336.         log("Drop event at", e.timeStamp);
  337.     }, { passive: true });
  338.     document.addEventListener("dragstart", (e) => {
  339.         if (!judging.selection(e)) {
  340.             circle.toggleAttribute("data-draggy-selected", false);
  341.         } else {
  342.             circle.toggleAttribute("data-draggy-selected", true);
  343.         }
  344.         const { x, y } = e;
  345.         startPos = { x, y };
  346.         circle.style.setProperty("--center-x", x + "px");
  347.         circle.style.setProperty("--center-y", y + "px");
  348.         log("Drag start at", startPos);
  349.     }, { passive: true });
  350.     document.addEventListener("dragend", (e) => {
  351.         circle.style.removeProperty("--center-x");
  352.         circle.style.removeProperty("--center-y");
  353.         if (!judging.handlers(e)) {
  354.             log("Draggy interrupted by other handler(s)");
  355.             return;
  356.         }
  357.         if (!judging.dropEvent(e)) {
  358.             log("Draggy interrupted by drop event");
  359.             return;
  360.         }
  361.         const { x, y } = e;
  362.         const [dx, dy] = [x - startPos.x, y - startPos.y];
  363.         const distance = Math.hypot(dx, dy);
  364.         if (distance < config.get("operation.minDistance")) {
  365.             log("Draggy interrupted by short drag distance:", distance);
  366.             return;
  367.         }
  368.         log("Draggy starts processing...");
  369.         e.preventDefault();
  370.         const data = judging.selection(e);
  371.         if (data instanceof HTMLAnchorElement) {
  372.             open(data.href);
  373.         } else if (data instanceof HTMLImageElement) {
  374.             open(data.src);
  375.         } else if (typeof data === "string") {
  376.             // Judge direction of the drag (Up, Down, Left, Right)
  377.             const isVertical = Math.abs(dy) > Math.abs(dx);
  378.             const isPositive = isVertical ? dy > 0 : dx > 0;
  379.             const direction = isVertical ? (isPositive ? "down" : "up") : (isPositive ? "right" : "left");
  380.             log("Draggy direction:", direction);
  381.             handleText(data, direction);
  382.         } else {
  383.             log("Draggy can't find selected text or a valid link");
  384.         }
  385.     }, { passive: false });
  386.  
  387.     // Dynamic configuration
  388.     const callbacks = {
  389.         "appearance.circleOverlay": toggleOverlay,
  390.         "operation.minDistance": onMinDistanceChange,
  391.     };
  392.     for (const [prop, callback] of Object.entries(callbacks)) { // Initialize
  393.         callback(config.get(prop));
  394.     }
  395.     config.addEventListener("set", (e) => { // Update
  396.         const { prop, after } = e.detail;
  397.         const callback = callbacks[prop];
  398.         callback?.(after);
  399.     });
  400.  
  401.     log(`${version} initialized successfully 🎉`);
  402. })();