☰

GM_context

A html5 contextmenu library

当前为 2017-09-08 提交的版本，查看 最新版本。

此脚本不应直接安装，它是供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/33034/216785/GM_context.js 

  1. // ==UserScript==
  2. // @name GM_context
  3. // @version 0.1.0
  4. // @description A html5 contextmenu library
  5. // @supportURL https://github.com/eight04/GM_context/issues
  6. // @license MIT
  7. // @author eight04 <eight04@gmail.com> (https://github.com/eight04)
  8. // @homepageURL https://github.com/eight04/GM_context
  9. // @compatible firefox >=8
  10. // @grant none
  11. // ==/UserScript==
  12.  
  13. /* exported GM_context */
  14.  
  15. const GM_context = (function() {
  16. 	const EDITABLE_INPUT = [
  17. 		"text", "number", "email", "number", "search", "tel", "url"
  18. 	];
  19. 	
  20. 	const menus = new Map;
  21. 	
  22. 	const inc = function() {
  23. 		let i = 1;
  24. 		return () => i++;
  25. 	}();
  26. 	
  27. 	let contextEvent;
  28. 	let contextSelection;
  29. 	let menuContainer;
  30. 	
  31. 	document.addEventListener("contextmenu", e => {
  32. 		contextEvent = e;
  33. 		contextSelection = document.getSelection() + "";
  34. 		const context = getContext(e);
  35. 		const matchedMenus = [...menus.values()]
  36. 			.filter(m => !m.context || m.context.some(c => context.has(c)));
  37. 		if (!matchedMenus.length) return;
  38. 		const {el: container, destroy: destroyContainer} = createContainer(e);
  39. 		const removeMenus = [];
  40. 		for (const menu of matchedMenus) {
  41. 			if (!menu.el) {
  42. 				buildMenu(menu);
  43. 			}
  44. 			if (!menu.static) {
  45. 				updateMenu(menu);
  46. 			}
  47. 			removeMenus.push(appendMenu(container, menu));
  48. 		}
  49. 		setTimeout(() => {
  50. 			for (const removeMenu of removeMenus) {
  51. 				removeMenu();
  52. 			}
  53. 			destroyContainer();
  54. 		});
  55. 	});
  56. 	
  57. 	function updateMenu(menu) {
  58. 		// update label
  59. 		updateItems(menu.items);
  60. 	}
  61. 	
  62. 	function checkStatic(menu) {
  63. 		return checkItems(menu.items);
  64. 		
  65. 		function checkItems(items) {
  66. 			for (const item of items) {
  67. 				if (item.label && item.label.includes("%s")) {
  68. 					return false;
  69. 				}
  70. 				if (item.items && checkItems(item.items)) {
  71. 					return false;
  72. 				}
  73. 			}
  74. 			return true;
  75. 		}
  76. 	}
  77. 	
  78. 	function updateItems(items) {
  79. 		for (const item of items) {
  80. 			if (item.label && item.el) {
  81. 				item.el.label = buildLabel(item.label);
  82. 			}
  83. 			if (item.items) {
  84. 				updateItems(item.items);
  85. 			}
  86. 		}
  87. 	}
  88. 	
  89. 	function createContainer(e) {
  90. 		let el = e.target;
  91. 		while (!el.contextMenu) {
  92. 			if (el == document.documentElement) {
  93. 				if (!menuContainer) {
  94. 					menuContainer = document.createElement("menu");
  95. 					menuContainer.type = "context";
  96. 					menuContainer.id = "gm-context-menu";
  97. 					document.body.appendChild(menuContainer);
  98. 				}
  99. 				el.setAttribute("contextmenu", menuContainer.id);
  100. 				break;
  101. 			}
  102. 			el = el.parentNode;
  103. 		}
  104. 		return {
  105. 			el: el.contextMenu,
  106. 			destroy() {
  107. 				if (el.contextMenu == menuContainer) {
  108. 					el.removeAttribute("contextmenu");
  109. 				}
  110. 			}
  111. 		};
  112. 	}
  113. 	
  114. 	function getContext(e) {
  115. 		const el = e.target;
  116. 		const context = new Set;
  117. 		if (el.nodeName == "IMG") {
  118. 			context.add("image");
  119. 		}
  120. 		if (el.closest("a")) {
  121. 			context.add("link");
  122. 		}
  123. 		if (el.isContentEditable ||
  124. 			el.nodeName == "INPUT" && EDITABLE_INPUT.includes(el.type) ||
  125. 			el.nodeName == "TEXTAREA"
  126. 		) {
  127. 			context.add("editable");
  128. 		}
  129. 		if (!document.getSelection().isCollapsed) {
  130. 			context.add("selection");
  131. 		}
  132. 		if (!context.size) {
  133. 			context.add("page");
  134. 		}
  135. 		return context;
  136. 	}
  137. 	
  138. 	function buildMenu(menu) {
  139. 		menu.el = buildItems(menu.items);
  140. 		menu.startEl = menu.el.firstChild;
  141. 		menu.endEl = menu.el.lastChild;
  142. 		menu.static = checkStatic(menu);
  143. 	}
  144. 	
  145. 	function buildLabel(s) {
  146. 		return s.replace(/%s/g, contextSelection);
  147. 	}
  148. 	
  149. 	function buildItems(items) {
  150. 		const root = document.createDocumentFragment();
  151. 		for (const item of items) {
  152. 			let el;
  153. 			if (item.type == "submenu") {
  154. 				el = document.createElement("menu");
  155. 				Object.assign(el, item, {items: null});
  156. 				el.appendChild(buildItems(item.items));
  157. 			} else if (item.type == "separator") {
  158. 				el = document.createElement("hr");
  159. 			} else if (item.type == "checkbox") {
  160. 				el = document.createElement("menuitem");
  161. 				Object.assign(el, item);
  162. 				if (item.onclick) {
  163. 					el.onclick = () => {
  164. 						item.onclick.call(el, contextEvent, el.checked);
  165. 					};
  166. 				}
  167. 			} else if (item.type == "radiogroup") {
  168. 				item.id = `gm-context-radio-${inc()}`;
  169. 				el = document.createDocumentFragment();
  170. 				for (const i of item.items) {
  171. 					const iEl = document.createElement("menuitem");
  172. 					iEl.type = "radio";
  173. 					iEl.radiogroup = item.id;
  174. 					Object.assign(iEl, i);
  175. 					if (item.onchange) {
  176. 						iEl.onclick = () => {
  177. 							item.onchange.call(iEl, contextEvent, i.value);
  178. 						};
  179. 					}
  180. 					i.el = iEl;
  181. 					el.appendChild(iEl);
  182. 				}
  183. 			} else {
  184. 				el = document.createElement("menuitem");
  185. 				Object.assign(el, item);
  186. 				if (item.onclick) {
  187. 					el.onclick = () => {
  188. 						item.onclick.call(el, contextEvent);
  189. 					};
  190. 				}
  191. 			}
  192. 			if (item.type != "radiogroup") {
  193. 				item.el = el;
  194. 			}
  195. 			root.appendChild(el);
  196. 		}
  197. 		return root;
  198. 	}
  199. 	
  200. 	function appendMenu(container, menu) {
  201. 		container.appendChild(menu.el);
  202. 		return () => {
  203. 			const range = document.createRange();
  204. 			range.setStartBefore(menu.startEl);
  205. 			range.setEndAfter(menu.endEl);
  206. 			menu.el = range.extractContents();
  207. 		};
  208. 	}
  209. 	
  210. 	function add(menu) {
  211. 		menu.id = inc();
  212. 		menus.set(menu.id, menu);
  213. 	}
  214. 	
  215. 	function remove(id) {
  216. 		menus.delete(id);
  217. 	}
  218. 	
  219. 	return {add, remove};
  220. })();