☰

GitHub Toggle Diff Comments

A userscript that toggles diff/PR comments

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

  1. // ==UserScript==
  2. // @name        GitHub Toggle Diff Comments
  3. // @version     0.1.0
  4. // @description A userscript that toggles diff/PR comments
  5. // @license     MIT
  6. // @author      Rob Garrison
  7. // @namespace   https://github.com/Mottie
  8. // @include     https://github.com/*
  9. // @run-at      document-idle
  10. // @grant       none
  11. // @require     https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js
  12. // @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=198500
  13. // @icon        https://assets-cdn.github.com/pinned-octocat.svg
  14. // ==/UserScript==
  15. (() => {
  16. 	"use strict";
  17.  
  18. 	let timer,
  19. 		ignoreEvents = false;
  20. 	const targets = {
  21. 			// show comments wrapper for each file
  22. 			headerComment: "show-file-notes",
  23. 			// show comments checkbox
  24. 			headerCheckbox: "js-toggle-file-notes",
  25. 			// comment block row - class added to TR containing the comment
  26. 			rowComment: "inline-comments"
  27. 		},
  28. 		icons = {
  29. 			"show": `<svg xmlns="http://www.w3.org/2000/svg" class="octicon ghtc-primary ghtc-comment-hide" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><g fill="#777"><path d="M6 9h1L6 8 5 7v1c0 .6.5 1 1 1z"/><path d="M9 11H4.5L3 12.5V11H1V5h2L2 4H1a1 1 0 0 0-1 1v6c0 .6.5 1 1 1h1v3l3-3h4c.3 0 .6-.1.7-.3l-.7-.8v.1zM15 1H6a1 1 0 0 0-1 1v.3l1 1V2h9v6h-2v1.5L11.5 8h-.8l3.3 3.2V9h1c.6 0 1-.5 1-1V2c0-.6-.4-1-1-1z"/></g><path d="M.4.9L13.7 14h1.7L2 .9z"/></svg>
  30. 			<svg xmlns="http://www.w3.org/2000/svg" class="octicon ghtc-secondary ghtc-comment-show" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M15 1H6c-.55 0-1 .45-1 1v2H1c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h1v3l3-3h4c.55 0 1-.45 1-1V9h1l3 3V9h1c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zM9 11H4.5L3 12.5V11H1V5h4v3c0 .55.45 1 1 1h3v2zm6-3h-2v1.5L11.5 8H6V2h9v6z"></path></svg>`,
  31. 			"collapse": `<svg xmlns="http://www.w3.org/2000/svg" class="octicon ghtc-primary ghtc-collapse" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><g fill="#777"><path d="M4.2 12.8L5.6 11H4.5L3 12.5V11H1V5h4v3c0 .6.5 1 1 1h1.2L8 8H6V5.4L5 4H1a1 1 0 0 0-1 1v6c0 .6.5 1 1 1h1v3l2.2-2.2zM6 2.2V2h.6V1H6a1 1 0 0 0-1 1v.2h1zM15 1h-4.6v1H15v6h-2v1.5L11.5 8H9.1l.9 1.2V9h1l3 3V9h1c.6 0 1-.5 1-1V2c0-.6-.4-1-1-1z"/></g><path d="M11.5 3h-2V1h-2v2h-2l3 4zM5.5 13h2v2h2v-2h2l-3-4z"/></svg><svg xmlns="http://www.w3.org/2000/svg" class="octicon ghtc-secondary ghtc-expand" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><g fill="#777"><path d="M6 5.8H5V8c0 .6.5 1 1 1h.8V8H6V5.8z"/><path d="M4.6 11h-.1L3 12.5V11H1V5h3.3L6 2.9V2h.7l.8-1H6a1 1 0 0 0-1 1v2H1a1 1 0 0 0-1 1v6c0 .6.5 1 1 1h1v3l3-3h.3l-.7-1zM15 1h-5l.7 1H15v6h-2v1.5L11.5 8h-1v1h.5l.8.8h1.8l-.8 1L14 12V9h1c.6 0 1-.5 1-1V2c0-.6-.4-1-1-1z"/></g><path d="M11.7 11h-2V9h-2v2h-2l3 4zM11.7 5h-2v2h-2V5h-2l3-4z"/></svg>`
  32. 		},
  33. 		activeClass = "ghtc-active",
  34. 		button = document.createElement("div");
  35. 	button.className = "btn btn-sm BtnGroup-item ghtc-toggle";
  36.  
  37. 	// Using small black triangles because Windows doesn't
  38. 	// replace them with ugly emoji images
  39. 	GM.addStyle(`
  40. 		td.js-quote-selection-container {
  41. 			position: relative;
  42. 		}
  43. 		.review-thread:before {
  44. 			content: "\\25be";
  45. 			font-size: 2rem;
  46. 			position: absolute;
  47. 			right: 10px;
  48. 			top: -1rem;
  49. 			pointer-events: none;
  50. 		}
  51. 		.ghtc-collapsed .review-thread:before {
  52. 			content: "\\25c2";
  53. 		}
  54. 		.ghtc-collapsed .review-thread {
  55. 			padding: 0 0 5px;
  56. 			border: 0;
  57. 		}
  58. 		.ghtc-toggle .ghtc-secondary,
  59. 		.ghtc-toggle.${activeClass} .ghtc-primary,
  60. 		.ghtc-toggle input ~ .ghtc-secondary,
  61. 		.ghtc-toggle input:checked ~ .ghtc-primary,
  62. 		.ghtc-collapsed .review-thread > *,
  63. 		.ghtc-collapsed .last-review-thread,
  64. 		.ghtc-collapsed .inline-comment-form-container {
  65. 			display: none;
  66. 		}
  67. 		.ghtc-collapsed td.line-comments {
  68. 			padding: 0 5px;
  69. 			cursor: pointer;
  70. 		}
  71. 		.pr-toolbar .pr-review-tools.float-right .diffbar-item + .diffbar-item {
  72. 			margin-left: 10px;
  73. 		}
  74. 		.ghtc-toggle {
  75. 			height: 28px;
  76. 		}
  77. 		.ghtc-toggle svg {
  78. 			display: inline-block;
  79. 			max-height: 16px;
  80. 			pointer-events: none;
  81. 			vertical-align: baseline !important;
  82. 		}
  83. 		.ghtc-toggle.${activeClass} .ghtc-secondary,
  84. 		.ghtc-toggle input:checked ~ .ghtc-secondary {
  85. 			display: block;
  86. 		}`
  87. 	);
  88.  
  89. 	function toggleSingleComment(el) {
  90. 		// Toggle individual inline comment
  91. 		el.parentNode.classList.toggle("ghtc-collapsed");
  92. 	}
  93.  
  94. 	function toggleMultipleComments(wrapper, state) {
  95. 		$(".ghtc-collapse-toggle-file", wrapper).classList.toggle(activeClass, state);
  96. 		$$(`tr.${targets.rowComment}`, wrapper).forEach(el => {
  97. 			el.classList.toggle("ghtc-collapsed", state);
  98. 		});
  99. 	}
  100.  
  101. 	function getState(el) {
  102. 		el.classList.toggle(activeClass);
  103. 		return el.classList.contains(activeClass);
  104. 	}
  105.  
  106. 	function toggleFile(el) {
  107. 		// Toggle all inline comments for one file
  108. 		const state = getState(el);
  109. 		toggleMultipleComments(el.closest(".file"), state);
  110. 	}
  111.  
  112. 	function toggleAll(el) {
  113. 		// Toggle all comments on page
  114. 		const state = getState(el);
  115. 		$("#ghtc-collapse-toggle-all").classList.toggle(activeClass, state);
  116. 		toggleMultipleComments(el.closest("#files_bucket"), state);
  117. 		$$(".ghtc-collapse-toggle-file").forEach(el => {
  118. 			el.classList.toggle(activeClass, state);
  119. 		});
  120. 	}
  121.  
  122. 	function showAll(el) {
  123. 		// Show/hide all comments on page
  124. 		const state = getState(el);
  125. 		$("#ghtc-show-toggle-all").classList.toggle(activeClass, state);
  126. 		$$("#files_bucket .js-toggle-file-notes").forEach(el => {
  127. 			el.checked = state;
  128. 			el.dispatchEvent(new Event("change", {bubbles: true}));
  129. 		});
  130. 	}
  131.  
  132. 	function createButton({id, className, icon, title}) {
  133. 		const btn = button.cloneNode(true);
  134. 		if (id) {
  135. 			btn.id = id;
  136. 		}
  137. 		btn.className += ` ${className || ""}`;
  138. 		btn.title = title;
  139. 		btn.innerHTML = icons[icon];
  140. 		return btn;
  141. 	}
  142.  
  143. 	function execFunction(event, callback) {
  144. 		clearTimeout(timer);
  145. 		ignoreEvents = true;
  146. 		event.stopPropagation();
  147. 		event.preventDefault();
  148. 		callback(event.target);
  149. 		timer = setTimeout(() => {
  150. 			ignoreEvents = false;
  151. 		}, 250);
  152. 	}
  153.  
  154. 	function addListeners() {
  155. 		$("#files_bucket").addEventListener("change", event => {
  156. 			const el = event.target;
  157. 			if (el && el.classList.contains(targets.headerCheckbox)) {
  158. 				el.parentNode.classList.toggle(activeClass, el.checked);
  159. 			}
  160. 		});
  161. 		$("#files_bucket").addEventListener("click", event => {
  162. 			const el = event.target;
  163. 			if (!ignoreEvents && el) {
  164. 				const shift = event.shiftKey,
  165. 					toggle = el.classList.contains("ghtc-collapse-toggle-file"),
  166. 					show = el.nodeName === "LABEL",
  167. 					comment = el.classList.contains("js-quote-selection-container");
  168. 				if (el.id === "ghtc-collapse-toggle-all" || toggle && shift) {
  169. 					execFunction(event, toggleAll);
  170. 				} else if (el.id === "ghtc-show-toggle-all" || show && shift) {
  171. 					execFunction(event, showAll);
  172. 				} else if (toggle || comment && shift) {
  173. 					execFunction(event, toggleFile);
  174. 				} else if (comment) {
  175. 					execFunction(event, toggleSingleComment);
  176. 				}
  177. 			}
  178. 		});
  179. 	}
  180.  
  181. 	function addButtons() {
  182. 		$$(`.${targets.headerComment}`).forEach(wrapper => {
  183. 			if (!wrapper.classList.contains("ghtc-hidden")) {
  184. 				const label = $("label", wrapper),
  185. 					checkbox = $("input", wrapper);
  186. 				let btn;
  187. 				// Make span wrapper a button group
  188. 				wrapper.classList.add("ghtc-hidden", "BtnGroup");
  189. 				// Remove top margin
  190. 				wrapper.classList.remove("pt-1");
  191.  
  192. 				// Convert "Show Comments" label wrapping checkbox into a button
  193. 				label.className = "btn btn-sm BtnGroup-item ghtc-toggle";
  194. 				label.title = "Show or hide all comments in this file";
  195. 				label.innerHTML = `
  196. 					<input type="checkbox" checked="checked" class="js-toggle-file-notes" hidden="true">
  197. 					${icons.show}`;
  198.  
  199. 				// Add collapse all file comments button before label
  200. 				btn = createButton({
  201. 					className: "ghtc-collapse-toggle-file",
  202. 					icon: "collapse",
  203. 					title: "Expand or collapse all comments in this file"
  204. 				});
  205. 				label.parentNode.insertBefore(btn, label);
  206. 				// Hide checkbox
  207. 				checkbox.setAttribute("hidden", true);
  208. 			}
  209. 		});
  210. 		// Add collapse all comments on the page
  211. 		if (!$("#ghtc-collapse-toggle-all")) {
  212. 			const wrapper = document.createElement("div"),
  213. 				// insert before Unified/Split button group
  214. 				diffmode = $(".pr-review-tools .diffbar-item");
  215. 			let btn;
  216. 			wrapper.className = "BtnGroup diffbar-item";
  217. 			diffmode.parentNode.insertBefore(wrapper, diffmode);
  218. 			// collapse/expand all comments
  219. 			btn = createButton({
  220. 				id: "ghtc-collapse-toggle-all",
  221. 				icon: "collapse",
  222. 				title: "Expand or collapse all comments"
  223. 			});
  224. 			wrapper.appendChild(btn);
  225. 			// show/hide all comments
  226. 			btn = createButton({
  227. 				id: "ghtc-show-toggle-all",
  228. 				icon: "show",
  229. 				className: activeClass,
  230. 				title: "Show or hide all comments"
  231. 			});
  232. 			wrapper.appendChild(btn);
  233. 		}
  234. 	}
  235.  
  236. 	function $(str, el) {
  237. 		return (el || document).querySelector(str);
  238. 	}
  239.  
  240. 	function $$(str, el) {
  241. 		return [...(el || document).querySelectorAll(str)];
  242. 	}
  243.  
  244. 	function init() {
  245. 		if ($("#files_bucket") && $(".pr-toolbar")) {
  246. 			addButtons();
  247. 			addListeners();
  248. 		}
  249. 	}
  250.  
  251. 	document.addEventListener("ghmo:container", init);
  252. 	document.addEventListener("ghmo:diff", init);
  253. 	init();
  254.  
  255. })();