☰

Select text inside a link like Opera

Disable link dragging and select text.

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

  1. // ==UserScript==
  2. // @name Select text inside a link like Opera
  3. // @version 5.0.1
  4. // @description Disable link dragging and select text.
  5. // @homepageURL https://github.com/eight04/select-text-inside-a-link-like-opera#readme
  6. // @supportURL https://github.com/eight04/select-text-inside-a-link-like-opera/issues
  7. // @license MIT
  8. // @author eight <eight04@gmail.com> (http://eight04.blogspot.tw)
  9. // @namespace eight04.blogspot.com
  10. // @include *
  11. // @grant GM_addStyle
  12. // @run-at document-start
  13. // ==/UserScript==
  14.  
  15. const IS_FIREFOX = typeof InstallTrigger !== 'undefined';
  16. const movementTracker = IS_FIREFOX && createMovementTracker();
  17.  
  18. document.addEventListener("mousedown", e => {
  19.   // only Firefox supports multiple range?
  20.   if (e.shiftKey || e.altKey || e.button || e.ctrlKey && !IS_FIREFOX) {
  21.     return;
  22.   }
  23.   if (e.target.nodeName === "IMG" || e.target.nodeName === "img") {
  24.     return;
  25.   }
  26.   const target = findLinkTarget(e.target);
  27.   if (!target || !target.href) {
  28.     return;
  29.   }
  30.   const initX = e.pageX;
  31.   const initY = e.pageY;
  32.   let posX = initX;
  33.   let posY = initY;
  34.   let selection;
  35.   
  36.   const events = {
  37.     mousemove: e => {
  38.       posX = e.pageX;
  39.       posY = e.pageY;
  40. 			if (!selection) {
  41. 				return;
  42. 			}
  43. 			const caretPos = caretPositionFromPoint(
  44.         posX - window.scrollX,
  45.         posY - window.scrollY
  46.       );
  47.       selection.extend(caretPos.offsetNode, caretPos.offset);
  48.     },
  49.     mouseup: () => {
  50.       // delay uninit to cancel click event
  51.       setTimeout(uninit);
  52.     },
  53.     click: e => {
  54. 			if (!selection) {
  55.         return;
  56.       }
  57. 			// fix browser clicking issue. Cancel click event if we have selected
  58.       // something.
  59.       const clickedTarget = findLinkTarget(e.target);
  60.       if (clickedTarget === target) {
  61.         e.preventDefault();
  62.         e.stopImmediatePropagation();
  63.       }
  64.     },
  65.     dragstart: e => {
  66.       const delta = movementTracker || {deltaX: posX - initX, deltaY: posY - initY};
  67. 			if (Math.abs(delta.deltaX) < Math.abs(delta.deltaY)) {
  68.         uninit();
  69. 				return;
  70. 			}
  71.       selection = window.getSelection();
  72.       const caretPos = caretPositionFromPoint(initX - window.scrollX, initY - window.scrollY);
  73.       if (!selection.isCollapsed && inSelect(caretPos, selection)) {
  74.         uninit();
  75.         return;
  76.       }
  77.       if (!e.ctrlKey) {
  78.         selection.collapse(caretPos.offsetNode, caretPos.offset);
  79.       } else {
  80.         const range = new Range;
  81.         range.setStart(caretPos.offsetNode, caretPos.offset);
  82.         selection.addRange(range);
  83.       }
  84.       target.classList.add("select-text-inside-a-link");
  85. 			e.preventDefault();      
  86.     }
  87.   };
  88.   
  89.   for (const key of Object.keys(events)) {
  90.     document.addEventListener(key, events[key], true);
  91.   }
  92.   
  93.   function uninit() {
  94.     target.classList.remove("select-text-inside-a-link");
  95.     for (const key of Object.keys(events)) {
  96.       document.removeEventListener(key, events[key], true);
  97.     }    
  98.   }
  99. }, true);
  100.  
  101. if (!document.contentType || !document.contentType.endsWith("/xml")) {
  102.   document.addEventListener("DOMContentLoaded", function(){
  103.     GM_addStyle(".select-text-inside-a-link{ -moz-user-select: text!important; }");
  104.   });
  105. }
  106.  
  107. function createMovementTracker() {
  108.   // we always have to track mouse movement so we can use the delta in dragstart
  109.   // event.
  110.   // it is possible to calculate the movement between mousedown and dragstart
  111.   // events in Chrome. In Firefox, the two events are fired in the same time.
  112.   const tracker = {
  113.     posX: 0,
  114.     posY: 0,
  115.     deltaX: 0,
  116.     deltaY: 0
  117.   };
  118.   document.addEventListener("mousemove", onMouseMove);
  119.   return tracker;
  120.   
  121.   function onMouseMove(e) {
  122.     if (Math.abs(e.pageX - tracker.posX) < 5 && Math.abs(e.pageY - tracker.posY) < 5) {
  123.       return;
  124.     }
  125.     tracker.deltaX = e.pageX - tracker.posX;
  126.     tracker.deltaY = e.pageY - tracker.posY;
  127.     tracker.posX = e.pageX;
  128.     tracker.posY = e.pageY;
  129.   }
  130. }
  131.  
  132. function caretPositionFromPoint(x, y) {
  133. 	if (document.caretPositionFromPoint) {
  134. 		return document.caretPositionFromPoint(x, y);
  135. 	}
  136. 	var r = document.caretRangeFromPoint(x, y);
  137. 	return {
  138. 		offsetNode: r.startContainer,
  139. 		offset: r.startOffset
  140. 	};
  141. }
  142.  
  143. function inSelect(caretPos, selection){
  144. 	var i, len = selection.rangeCount, range;
  145. 	for (i = 0; i < len; i++) {
  146. 		range = selection.getRangeAt(i);
  147. 		if (range.isPointInRange(caretPos.offsetNode, caretPos.offset)) {
  148. 			return true;
  149. 		}
  150. 	}
  151. 	return false;
  152. }
  153.  
  154. function findLinkTarget(target) {
  155.   while (target && target.nodeName !== "A" && target.nodeName !== "a") {
  156.     target = target.parentNode;
  157.   }
  158.   return target;
  159. }