☰

GitHub Issue Add Details

A userscript that adds a button to insert a details block into comments

目前为 2018-01-05 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub Issue Add Details
  3. // @version     1.0.0
  4. // @description A userscript that adds a button to insert a details block into 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://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=234970
  12. // @require     https://greasyfork.org/scripts/28239-rangy-inputs-mod-js/code/rangy-inputs-modjs.js?version=181769
  13. // @icon        https://assets-cdn.github.com/pinned-octocat.svg
  14. // ==/UserScript==
  15. (() => {
  16. 	"use strict";
  17.  
  18. 	const icon = `
  19. 		<svg class="octicon" style="pointer-events:none" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  20. 			<path d="M15.5 9h-7C8 9 8 8.6 8 8s0-1 .5-1h7c.5 0 .5.4.5 1s0 1-.5 1zm-5-5c-.5 0-.5-.4-.5-1s0-1 .5-1h5c.5 0 .5.4.5 1s0 1-.5 1h-5zM0 2h8L4 7 0 2zm8.5 10h7c.5 0 .5.4.5 1s0 1-.5 1h-7c-.5 0-.5-.4-.5-1s0-1 .5-1z"/>
  21. 		</svg>`,
  22.  
  23. 		detailsBlock = [
  24. 			// Include "not-open" hint
  25. 			"<details not-open><!-- remove 'not-' to start expanded -->\n<summary>Title</summary>\n\n<!-- leave a blank line above -->\n",
  26. 			// selected content/caret will be placed here
  27. 			"\n</details>\n"
  28. 		];
  29.  
  30. 	// Add insert details button
  31. 	function addDetailsButton() {
  32. 		const button = document.createElement("button");
  33. 		button.type = "button";
  34. 		button.className = "ghad-details toolbar-item tooltipped tooltipped-n";
  35. 		button.setAttribute("aria-label", "Add a details/summary block");
  36. 		button.setAttribute("tabindex", "-1");
  37. 		button.innerHTML = icon;
  38. 		$$(".toolbar-commenting").forEach(el => {
  39. 			if (el && !$(".ghad-details", el)) {
  40. 				const btn =  $("[aria-label='Add a task list']", el);
  41. 				btn.parentNode.insertBefore(button.cloneNode(true), btn.nextSibling);
  42. 			}
  43. 		});
  44. 	}
  45.  
  46. 	function addBindings() {
  47. 		window.rangyInput.init();
  48. 		$("body").addEventListener("click", event => {
  49. 			let textarea;
  50. 			const target = event.target;
  51. 			if (target && target.classList.contains("ghad-details")) {
  52. 				textarea = target.closest(".previewable-comment-form");
  53. 				textarea = $(".comment-form-textarea", textarea);
  54. 				textarea.focus();
  55. 				window.rangyInput.surroundSelectedText(
  56. 					textarea,
  57. 					detailsBlock[0], // prefix
  58. 					detailsBlock[1]  // suffix
  59. 				);
  60. 				return false;
  61. 			}
  62. 		});
  63. 	}
  64.  
  65. 	function $(str, el) {
  66. 		return (el || document).querySelector(str);
  67. 	}
  68.  
  69. 	function $$(str, el) {
  70. 		return [...(el || document).querySelectorAll(str)];
  71. 	}
  72.  
  73. 	document.addEventListener("ghmo:container", addDetailsButton);
  74. 	document.addEventListener("ghmo:comments", addDetailsButton);
  75.  
  76. 	addDetailsButton();
  77. 	addBindings();
  78.  
  79. })();