☰

GM_context

A html5 contextmenu library

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

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