☰

GitHub Custom Navigation

A userscript that allows you to customize GitHub's main navigation bar

目前為 2023-07-01 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub Custom Navigation
  3. // @version     1.1.11
  4. // @description A userscript that allows you to customize GitHub's main navigation bar
  5. // @license     MIT
  6. // @author      Rob Garrison
  7. // @namespace   https://github.com/Mottie
  8. // @match       https://github.com/*
  9. // @match       https://gist.github.com/*
  10. // @run-at      document-end
  11. // @grant       GM_addStyle
  12. // @grant       GM_getValue
  13. // @grant       GM_setValue
  14. // @icon        https://github.githubassets.com/pinned-octocat.svg
  15. // @require     https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js
  16. // @require     https://gf.qytechs.cn/scripts/28721-mutations/code/mutations.js?version=1108163
  17. // @require     https://gf.qytechs.cn/scripts/398877-utils-js/code/utilsjs.js?version=1079637
  18. // @supportURL  https://github.com/Mottie/GitHub-userscripts/issues
  19. // ==/UserScript==
  20. /* global dragula $ $$ addClass removeClass on */
  21. (() => {
  22. 	"use strict";
  23.  
  24. 	// open menu via hash
  25. 	const panelHash = "#github-custom-nav-settings";
  26. 	const buildSvg = (w, h, path, vw, vh) =>
  27. 		`<svg class='octicon' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'
  28. 			width='${w}' height='${h}' viewBox='0 0 ${vw || w} ${vh || h}'>
  29. 			<path d='${path}' />
  30. 		</svg>`;
  31.  
  32. 	// get user name; or empty string if not logged in
  33. 	const user = $("meta[name='user-login']") &&
  34. 		$("meta[name='user-login']").getAttribute("content") || "";
  35.  
  36. 	const defaults = {
  37. 		github: [
  38. 			"pr", "issues", "gist", "separator", "stars", "watching", "separator",
  39. 			"profile", "blog", "marketplace", "explore", "menu"
  40. 		],
  41. 		gists: [
  42. 			"gistall", "giststars", "github", "separator", "pr", "issues", "stars",
  43. 			"watching", "separator", "profile", "blog", "marketplace", "explore", "menu"
  44. 		],
  45.  
  46. 		currentLink: "pr",
  47. 		// using full length url so the links work from any subdomain (e.g. gist pages)
  48. 		items: {
  49. 			"advsearch": {
  50. 				url: "https://github.com/search/advanced",
  51. 				tooltip: "Advanced Search",
  52. 				hotkey: "",
  53. 				content: buildSvg(16, 16, `M15.7 14.3L11.89 10.47c0.7-0.98 1.11-2.17
  54. 					1.11-3.47 0-3.31-2.69-6-6-6S1 3.69 1 7s2.69 6 6 6c1.3 0 2.48-0.41
  55. 					3.47-1.11l3.83 3.81c0.19 0.2 0.45 0.3 0.7 0.3s0.52-0.09
  56. 					0.7-0.3c0.39-0.39 0.39-1.02 0-1.41zM7 11.7c-2.59
  57. 					0-4.7-2.11-4.7-4.7s2.11-4.7 4.7-4.7 4.7 2.11 4.7 4.7-2.11 4.7-4.7 4.7z`
  58. 				)
  59. 			},
  60. 			"blog": {
  61. 				url: "https://github.blog",
  62. 				tooltip: "Blog",
  63. 				hotkey: "",
  64. 				content: buildSvg(16, 16, `M9 9H8c.55 0 1-.45 1-1V7c0-.55-.45-1-1-1H7c-.55
  65. 					0-1 .45-1 1v1c0 .55.45 1 1 1H6c-.55 0-1 .45-1 1v2h1v3c0 .55.45 1 1
  66. 					1h1c.55 0 1-.45 1-1v-3h1v-2c0-.55-.45-1-1-1zM7 7h1v1H7V7zm2
  67. 					4H8v4H7v-4H6v-1h3v1zm2.09-3.5c0-1.98-1.61-3.59-3.59-3.59A3.593 3.593 0
  68. 					0 0 4 8.31v1.98c-.61-.77-1-1.73-1-2.8 0-2.48 2.02-4.5 4.5-4.5S12 5.01
  69. 					12 7.49c0 1.06-.39 2.03-1 2.8V8.31c.06-.27.09-.53.09-.81zm3.91 0c0
  70. 					2.88-1.63 5.38-4 6.63v-1.05a6.553 6.553 0 0 0 3.09-5.58A6.59 6.59 0 0
  71. 					0 7.5.91 6.59 6.59 0 0 0 .91 7.5c0 2.36 1.23 4.42 3.09 5.58v1.05A7.497
  72. 					7.497 0 0 1 7.5 0C11.64 0 15 3.36 15 7.5z`
  73. 				)
  74. 			},
  75. 			"explore": {
  76. 				url: "https://github.com/explore",
  77. 				tooltip: "Explore",
  78. 				hotkey: "",
  79. 				content: buildSvg(16, 16, `M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.6
  80. 					14.5v-1H7.2v1a6.5 6.5 0 0 1-5.7-6h1V7.4h-1a6.5 6.5 0 0 1
  81. 					5.7-5.8v1h1.4v-1a6.6 6.6 0 0 1 6 5.8h-1v1.3h1a6.5 6.5 0 0 1-6
  82. 					6zm2.7-10.8l-4.5 3-2.2 4.8 4.7-3z`
  83. 				)
  84. 			},
  85. 			"gist": {
  86. 				url: "https://gist.github.com/",
  87. 				tooltip: "Gist",
  88. 				hotkey: "",
  89. 				content: buildSvg(12, 16, `M7.5 5L10 7.5 7.5 10l-.75-.75L8.5 7.5 6.75
  90. 					5.75 7.5 5zm-3 0L2 7.5 4.5 10l.75-.75L3.5 7.5l1.75-1.75L4.5 5zM0
  91. 					13V2c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v11c0 .55-.45 1-1 1H1c-.55
  92. 					0-1-.45-1-1zm1 0h10V2H1v11z`
  93. 				)
  94. 			},
  95. 			"gistall": {
  96. 				url: "https://gist.github.com/discover",
  97. 				tooltip: "Discover Gists",
  98. 				hotkey: "",
  99. 				content: buildSvg(12, 16, `M7.5 5L10 7.5 7.5 10l-.75-.75L8.5 7.5 6.75
  100. 					5.75 7.5 5zm-3 0L2 7.5 4.5 10l.75-.75L3.5 7.5l1.75-1.75L4.5 5zM0
  101. 					13V2c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v11c0 .55-.45 1-1 1H1c-.55
  102. 					0-1-.45-1-1zm1 0h10V2H1v11z`
  103. 				)
  104. 			},
  105. 			"giststars": {
  106. 				url: "https://gist.github.com/${me}/starred",
  107. 				tooltip: "Starred Gists",
  108. 				hotkey: "",
  109. 				content: buildSvg(14, 16, `M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67
  110. 					14 7 11.67 11.33 14l-.93-4.74z`
  111. 				)
  112. 			},
  113. 			"github": {
  114. 				url: "https://github.com",
  115. 				tooltip: "GitHub",
  116. 				hotkey: "",
  117. 				content: buildSvg(16, 16, `M14.7 5.34c.13-.32.55-1.59-.13-3.31 0
  118. 					0-1.05-.33-3.44
  119. 					1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68
  120. 					1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98
  121. 					15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3
  122. 					0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46
  123. 					2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98
  124. 					3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8
  125. 					1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79
  126. 					1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z`
  127. 				)
  128. 			},
  129. 			"issues": {
  130. 				url: "https://github.com/issues",
  131. 				tooltip: "Issues",
  132. 				hotkey: "g i",
  133. 				content: buildSvg(14, 16, `M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7
  134. 					5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0
  135. 					8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z`
  136. 				)
  137. 			},
  138. 			"marketplace": {
  139. 				url: "https://github.com/marketplace",
  140. 				tooltip: "Marketplace",
  141. 				hotkey: "",
  142. 				content: buildSvg(14, 16, `M0 0v16h14v-2h-1v1H1V1h12v.5h1V0H0zm3
  143. 					3v1h8.8l2.5 2.5-.7.6.8.8 1.3-1.4L12.2 3H3zm1.4 2.1l-.8.8 2 2
  144. 					.8-.8-2-2zm4.5 0L8 6l2 2 1-1-2.1-1.9z' />
  145. 					<path d='M6.5 15h-1v-4H4v4H3v-5h3.5zM12 13H8v-3h4v3zm-3-1h2v-1H9v1z`
  146. 				)
  147. 			},
  148. 			"menu": {
  149. 				url: panelHash,
  150. 				tooltip: "Open Custom Navigation Settings",
  151. 				hotkey: "",
  152. 				content: buildSvg(14, 16, `M8.79
  153. 					15H6.553l-.7-1.91-.608-.247-1.835.905-1.585-1.556.892-1.83-.25-.595L.5
  154. 					9.127V6.933l1.944-.676.25-.597-.922-1.802L3.358
  155. 					2.3l1.865.876.624-.248.638-1.93H8.73l.697 1.91.61.246 1.838-.905 1.58
  156. 					1.555-1.114 2.317-2.714.65-.203-.24c-.444-.524-1.098-.824-1.794-.824C6.34
  157. 					5.708 5.294 6.736 5.294 8c0 1.264 1.047 2.292 2.334 2.292.6 0 1.17-.224
  158. 					1.604-.63l.18-.165 2.93.4 1.156 2.24-1.58 1.564-1.868-.88-.625.25L8.79
  159. 					15zm-1.52-1h.78l.556-1.68 1.48-.592
  160. 					1.62.765.553-.547-.583-1.13-1.93-.264c-.597.48-1.34.74-2.118.74-1.85
  161. 					0-3.354-1.477-3.354-3.292 0-1.815 1.503-3.292 3.353-3.292.89 0
  162. 					1.73.342 2.356.95l1.643-.394.6-1.25-.555-.546-1.598.786-1.455-.592L8.014
  163. 					2h-.79L6.67 3.68l-1.48.59-1.622-.762-.556.546.802 1.566-.603
  164. 					1.432-1.692.59v.763l1.71.558.603 1.43-.775 1.593.556.546 1.596-.788
  165. 					1.456.593L7.27 14z`
  166. 				)
  167. 			},
  168. 			"pr": {
  169. 				url: "https://github.com/pulls",
  170. 				tooltip: "Pull Requests",
  171. 				hotkey: "g p",
  172. 				content: buildSvg(12, 16, `M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46
  173. 					2.35 8.78 2.03 8 2H7V0L4 3l3
  174. 					3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10
  175. 					15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2
  176. 					1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4
  177. 					3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2
  178. 					15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55
  179. 					1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2
  180. 					1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2
  181. 					1.2 0 .65-.55 1.2-1.2 1.2z`
  182. 				)
  183. 			},
  184. 			"profile": {
  185. 				url: "https://github.com/${me}",
  186. 				tooltip: "Profile",
  187. 				hotkey: "",
  188. 				content: buildSvg(8, 16, `M7 6H1c-.55 0-1 .45-1 1v5h2v3c0 .55.45 1 1
  189. 					1h2c.55 0 1-.45 1-1v-3h2V7c0-.55-.45-1-1-1zm0
  190. 					5H6V9H5v6H3V9H2v2H1V7h6v4zm0-8c0-1.66-1.34-3-3-3S1 1.34 1 3s1.34 3 3 3
  191. 					3-1.34 3-3zM4 5c-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2 0
  192. 					1.11-.89 2-2 2z' fill-rule='evenodd`
  193. 				)
  194. 			},
  195. 			"settings": {
  196. 				url: "https://github.com/settings/profile",
  197. 				tooltip: "Settings",
  198. 				hotkey: "",
  199. 				content: buildSvg(14, 16, `M14
  200. 					8.77v-1.6l-1.94-.64-.45-1.09.88-1.84-1.13-1.13-1.81.91-1.09-.45-.69-1.92h-1.6l-.63
  201. 					1.94-1.11.45-1.84-.88-1.13 1.13.91 1.81-.45 1.09L0 7.23v1.59l1.94.64.45
  202. 					1.09-.88 1.84 1.13 1.13 1.81-.91 1.09.45.69 1.92h1.59l.63-1.94 1.11-.45
  203. 					1.84.88 1.13-1.13-.92-1.81.47-1.09L14 8.75v.02zM7 11c-1.66
  204. 					0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z`
  205. 				)
  206. 			},
  207. 			"stars": {
  208. 				url: "https://github.com/stars",
  209. 				tooltip: "Stars",
  210. 				hotkey: "",
  211. 				content: buildSvg(14, 16, `M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67
  212. 					14 7 11.67 11.33 14l-.93-4.74z`
  213. 				)
  214. 			},
  215. 			"watching": {
  216. 				url: "https://github.com/watching",
  217. 				tooltip: "Watching",
  218. 				hotkey: "",
  219. 				content: buildSvg(16, 16, `M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16
  220. 					8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4
  221. 					0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2
  222. 					2-2 1.11 0 2 .89 2 2z`
  223. 				)
  224. 			},
  225. 			"zenhub": {
  226. 				url: "#todo",
  227. 				tooltip: "ZenHub ToDo",
  228. 				hotkey: "",
  229. 				content: buildSvg(16, 16, `M29.17 45.988L13.82 21.218h10.56l-1.1-17.206
  230. 					13.498 24.77h-9.514'/>`, 50, 50
  231. 				)
  232. 			}
  233. 		}
  234. 	};
  235.  
  236. 	const icons = {
  237. 		add: buildSvg(12, 14, `M12 9H7v5H5V9H0V7h5V2h2v5h5`, 12, 16),
  238. 		close: buildSvg(9, 9, `M9 1L5.4 4.4 9 8 8 9 4.6 5.4 1 9 0 8l3.6-3.5L0 1l1-1
  239. 			3.5 3.6L8 0l1 1z`
  240. 		),
  241. 		info: buildSvg(14, 16, `M6 10h2v2H6V10z m4-3.5c0 2.14-2 2.5-2 2.5H6c0-0.55
  242. 			0.45-1 1-1h0.5c0.28 0 0.5-0.22 0.5-0.5v-1c0-0.28-0.22-0.5-0.5-0.5h-1c-0.28
  243. 			0-0.5 0.22-0.5 0.5v0.5H4c0-1.5 1.5-3 3-3s3 1 3 2.5zM7 2.3c3.14 0 5.7 2.56
  244. 			5.7 5.7S10.14 13.7 7 13.7 1.3 11.14 1.3 8s2.56-5.7 5.7-5.7m0-1.3C3.14 1 0
  245. 			4.14 0 8s3.14 7 7 7 7-3.14 7-7S10.86 1 7 1z`
  246. 		),
  247. 		separator: buildSvg(12, 16, `M7 16H5V0h2`)
  248. 	};
  249.  
  250. 	let drake;
  251. 	let editMode = false;
  252. 	let panelHashTriggered = false;
  253. 	// remember scrollTop when settings panel opens (if using sticky nav header style)
  254. 	let scrollTop = 0;
  255. 	let settings = GM_getValue("custom-links", defaults);
  256.  
  257. 	function addPanel() {
  258. 		GM_addStyle(`
  259. 			/* Use border right when a vertical bar is added */
  260. 			.Header-link.ghcn-separator { border-right:#777 1px solid;
  261. 				padding:4px 0; }
  262. 			/* settings panel */
  263. 			#ghcn-overlay { position:fixed; top:50px; left:0; right:0; bottom:0;
  264. 				z-index:45; background:rgba(0,0,0,.5); display:none; }
  265. 			#ghcn-menu { cursor:pointer; }
  266. 			.ghcn-close, .ghcn-code { float:right; cursor:pointer; font-size:.8em;
  267. 				margin-left:3px; padding:0 6px 2px 6px; }
  268. 			.ghcn-close .octicon { vertical-align:middle; fill:currentColor; }
  269. 			#ghcn-settings-inner { position:fixed; left:50%; top:60px; z-index:50;
  270. 				width:30rem; transform:translate(-50%,0); box-shadow:0 .5rem 1rem #111;
  271. 				color:#c0c0c0; display:none; }
  272. 			#ghcn-settings-inner input { width:85%; float:right; border-style:solid;
  273. 				border-width:1px; max-height:35px; }
  274. 			.ghcn-settings-wrapper div { line-height:38px; }
  275. 			#ghcn-nav-items { min-height: 38px; }
  276. 			#ghcn-nav-items .Header-item, .ghcn-nav .Header-item { margin-bottom:4px;
  277. 				margin-right:2px; }
  278. 			.ghcn-settings-wrapper hr { margin: 10px 0; }
  279. 			.ghcn-footer { margin-top:4px; border-top:#555 solid 1px; }
  280. 			li[data-ghcn] a { min-width:25px; text-align: center; }
  281. 			.Header-link { padding:2px 5px; margin:6px 0; }
  282. 			.ghcn-nav .Header-link svg, .ghcn-nav .Header-link img,
  283. 				#ghcn-nav-items .Header-link svg, #ghcn-nav-items .Header-link img,
  284. 				.gu-mirror svg, .gu-mirror img {
  285. 				max-height:16px; fill:currentColor; vertical-align:middle;
  286. 				overflow:visible; }
  287. 			/* override white text when settings panel is open*/
  288. 			body.ghcn-settings-open #ghcn-nav-items .text-emphasized {
  289. 				color: #24292e; }
  290. 			/* panel open */
  291. 			body.ghcn-settings-open {
  292. 				overflow:hidden !important; /* !important overrides wiki style */ }
  293. 			/* hide other header elements while settings is open (overflow issues) */
  294. 			body.ghcn-settings-open .header-search,
  295. 				body.ghcn-settings-open #user-links.d-flex,
  296. 				body.ghcn-settings-open .header-logo-invertocat,
  297. 				body.ghcn-settings-open .header-logo-wordmark,
  298. 				.gist-header .octicon-logo-github, /* hide GitHub logo on Gist page */
  299. 				.zh-todo-link { display:none !important; }
  300. 			body.ghcn-settings-open .ghcn-nav { width:100%; }
  301. 			body.ghcn-settings-open .Header-link > * { pointer-events:none; }
  302. 			body.ghcn-settings-open #ghcn-overlay,
  303. 			body.ghcn-settings-open #ghcn-settings-inner,
  304. 			#ghcn-nav-items { display:block; }
  305. 			body.ghcn-settings-open .ghcn-nav .Header-item,
  306. 			.ghcn-settings-wrapper .Header-item { cursor:move;
  307. 				border:#555 1px solid; border-radius:4px; margin-left: 2px;
  308. 				display:inline-block; }
  309. 			body.ghcn-settings-open .Header-link,
  310. 				.ghcn-settings-wrapper .Header-link { min-height:auto;
  311. 				min-width:16px; padding-top:1px; }
  312. 			body.ghcn-settings-open .js-header-wrapper .Header-link.form-control,
  313. 			body.ghcn-settings-open .Header .Header-link.form-control {
  314. 				background-color: transparent; border: 1px solid #444; }
  315. 			body.ghcn-settings-open .Header-link svg,
  316. 			body.ghcn-settings-open .Header-link img { margin-bottom:4px; }
  317. 			/* JSON code block */
  318. 			.ghcn-json-code { display:none; font-family:Menlo, Inconsolata,
  319. 				"Droid Mono", monospace; font-size:1em; height:calc(100% - 40px);
  320. 				resize:none; }
  321. 			.ghcn-visible { display:block; position:absolute; top:38px; bottom:0;
  322. 				left:2px; right:2px; z-index:1; width:476px; max-width:476px; }
  323. 			/* Dragula.min.css v3.7.2 (Microsoft definitions removed) */
  324. 			.gu-mirror { position:fixed !important; margin:0 !important;
  325. 				z-index:9999 !important; opacity:.8; list-style:none; }
  326. 			.gu-hide { display:none !important; }
  327. 			.gu-unselectable { -webkit-user-select:none !important;
  328. 				-moz-user-select:none !important; user-select:none !important; }
  329. 			.gu-transit { opacity:.2; }
  330. 		`);
  331.  
  332. 		make({
  333. 			el: "div",
  334. 			appendTo: "body",
  335. 			attr: {
  336. 				id: "ghcn-settings"
  337. 			},
  338. 			html: `
  339. 				<div id="ghcn-overlay"></div>
  340. 				<div id="ghcn-settings-inner" class="boxed-group">
  341. 					<h3 class="text-emphasized">GitHub Custom Navigation Settings
  342. 						<button type="button" class="ghcn-close btn btn-sm">
  343. 							${icons.close}
  344. 						</button>
  345. 						<button type="button" class="ghcn-code btn btn-sm tooltipped tooltipped-w" aria-label="Toggle JSON data view">
  346. 							{ }
  347. 						</button>
  348. 					</h3>
  349. 					<div class="ghcn-settings-wrapper boxed-group-inner">
  350. 						<ul id="ghcn-nav-items" class="BtnGroup ghcn-nav"></ul>
  351. 						<hr>
  352. 						<form>
  353. 							<p>Click an link above to edit its properties
  354. 								<a href="https://github.com/Mottie/GitHub-userscripts/wiki/GitHub-custom-navigation" class="tooltipped tooltipped-e" aria-label="Click to learn about the properties below">
  355. 									${icons.info}
  356. 								</a>
  357. 							</p>
  358. 							<div>URL
  359. 								<span class="tooltipped tooltipped-e" aria-label="Enter a full URL, or hash">
  360. 									${icons.info}
  361. 								</span>
  362. 								<input class="form-control ghcn-url" type="text"/>
  363. 							</div>
  364. 							<div>Tooltip<input class="form-control ghcn-tooltip" type="text"/></div>
  365. 							<div>Hotkey
  366. 								<a href="https://github.com/Mottie/GitHub-userscripts/wiki/GitHub-custom-navigation#hotkey" class="tooltipped tooltipped-e ghcn-hotkey-link" aria-label="Click to learn about hotkeys">
  367. 									${icons.info}
  368. 								</a>
  369. 								<input class="form-control ghcn-hotkey" type="text"/>
  370. 							</div>
  371. 							<div>Content
  372. 								<span class="tooltipped tooltipped-e" aria-label="Include text and/or HTML (&lt;svg&gt; or &lt;img&gt;)">
  373. 									${icons.info}
  374. 								</span>
  375. 								<input class="form-control ghcn-content" type="text"/>
  376. 							</div>
  377. 						</form>
  378. 						<textarea class="ghcn-json-code"></textarea>
  379. 						<div class="ghcn-footer">
  380. 							<span class="btn btn-sm ghcn-add">
  381. 								${icons.add} New Link
  382. 							</span>
  383. 							<span class="btn btn-sm ghcn-destroy btn-danger tooltipped tooltipped-n" aria-label="Completely remove selected link">
  384. 								Destroy
  385. 							</span>
  386. 							<span class="btn btn-sm ghcn-reset btn-danger tooltipped tooltipped-n tooltipped-multiline" aria-label="Reset to default
  387. (Removes all custom entries!)">
  388. 								Reset
  389. 							</span>
  390. 							<span class="btn btn-sm ghcn-restore tooltipped tooltipped-n" aria-label="Restore missing default entries">
  391. 								Restore
  392. 							</span>
  393. 						</div>
  394. 					</div>
  395. 				</div>`
  396. 		});
  397. 	}
  398.  
  399. 	function updatePanel() {
  400. 		let indx, item, inNav, inSettings,
  401. 			panelStr = "#ghcn-nav-items",
  402. 			panel = $(panelStr),
  403. 			setItems = settings[getLocation()],
  404. 			keys = Object.keys(settings.items),
  405. 			len = keys.length;
  406. 		for (indx = 0; indx < len; indx++) {
  407. 			item = keys[indx];
  408. 			inNav = setItems.indexOf(item) > -1;
  409. 			inSettings = $(panelStr + ` .Header-item[data-ghcn="${item}"]`);
  410. 			// customize adds stuff to main nav
  411. 			if (inNav && inSettings) {
  412. 				panel.removeChild(inSettings);
  413. 			} else if (!inNav && !inSettings) {
  414. 				addToMenu(item, panelStr);
  415. 			}
  416. 		}
  417. 		if (!$(panelStr + " .Header-item[data-ghcn='separator']")) {
  418. 			addToMenu("separator", panelStr);
  419. 		}
  420. 		selectItem();
  421. 	}
  422.  
  423. 	function openPanel() {
  424. 		scrollTop = document.documentElement.scrollTop;
  425. 		window.scrollTo(0, 0);
  426. 		$("body").classList.add("ghcn-settings-open");
  427. 		editMode = true;
  428. 		customize();
  429. 		$(".modal-backdrop").click();
  430. 		$(".ghcn-json-code").classList.remove("ghcn-visible");
  431. 	}
  432.  
  433. 	function openPanelOnHash() {
  434. 		if (!panelHashTriggered && window.location.hash === panelHash) {
  435. 			panelHashTriggered = true;
  436. 			openPanel();
  437. 			// immediately remove the hash because I noticed issues where the "#" was
  438. 			// removed; and upon reload, a 404 page is shown because
  439. 			// "https://github.com/github-custom-navigation-settings" does not exist
  440. 			history.pushState("", document.title, window.location.pathname);
  441. 			panelHashTriggered = false;
  442. 		}
  443. 	}
  444.  
  445. 	function closePanel() {
  446. 		if (editMode) {
  447. 			window.scrollTo(0, scrollTop);
  448. 			$("body").classList.remove("ghcn-settings-open");
  449. 			editMode = false;
  450. 			customize();
  451. 			$(".ghcn-json-code").classList.remove("ghcn-visible");
  452. 		}
  453. 	}
  454.  
  455. 	function getLocation() {
  456. 		// used by "settings" object
  457. 		return window.location.hostname === "gist.github.com" ? "gists" : "github";
  458. 	}
  459.  
  460. 	// continually destroying & reapplying Dragula sometimes ignores elements;
  461. 	// so just leave it always applied
  462. 	function addDragula() {
  463. 		let topNav = $(".ghcn-nav");
  464. 		drake = dragula($$(".ghcn-nav, #ghcn-nav-items"), {
  465. 			invalid: () => {
  466. 				return !editMode;
  467. 			}
  468. 		});
  469. 		drake.on("drop", () => {
  470. 			let indx, link,
  471. 				temp = [],
  472. 				list = topNav.childNodes,
  473. 				len = list.length;
  474. 			for (indx = 0; indx < len; indx++) {
  475. 				link = list[indx].getAttribute("data-ghcn");
  476. 				if (link) {
  477. 					temp[temp.length] = link;
  478. 				}
  479. 			}
  480. 			settings[getLocation()] = temp;
  481. 			GM_setValue("custom-links", settings);
  482. 			updatePanel();
  483.  
  484. 		});
  485. 	}
  486.  
  487. 	// Clicked item; show selection
  488. 	function selectItem() {
  489. 		// highlight current link
  490. 		let temp = $$(".Header-link.focus");
  491. 		removeClass(temp, "focus");
  492. 		temp = $$(".Header-item[data-ghcn='" + (settings.currentLink || "") +
  493. 			"'] .Header-link");
  494. 		if (temp[0]) {
  495. 			addClass(temp, "focus");
  496. 			updateLink(temp[0].parentNode);
  497. 		}
  498. 	}
  499.  
  500. 	// New Link button pressed
  501. 	function createLink() {
  502. 		let name = findUniqueId("custom");
  503. 		settings.items[name] = {
  504. 			url: "",
  505. 			tooltip: "",
  506. 			hotkey: "",
  507. 			content: "*"
  508. 		};
  509. 		addToMenu(name, "#ghcn-nav-items");
  510. 		settings.currentLink = name;
  511. 		selectItem();
  512. 	}
  513.  
  514. 	// append named list item to menu
  515. 	function addToMenu(name, target) {
  516. 		let html,
  517. 			item = settings.items[name] || {},
  518. 			url = (item.url || "").replace(/\$\{me\}/g, user),
  519. 			linkClass = "text-emphasized Header-link " +
  520. 				(editMode ? "" : "js-selected-navigation-item");
  521. 		// only show tooltip if defined
  522. 		if (item.tooltip) {
  523. 			linkClass += " tooltipped tooltipped-s";
  524. 			if (/(&#10;|&#xA;)/g.test(item.tooltip)) {
  525. 				linkClass += " tooltipped-multiline";
  526. 			}
  527. 		}
  528. 		if (name === "separator") {
  529. 			html = editMode
  530. 				// *** Separator (icon in editMode; zero-width-space when not)
  531. 				? `<span class="${linkClass} tooltipped tooltipped-s" aria-label="Menu separator">${icons.separator}</span>`
  532. 				: `<span class="Header-link ghcn-separator linkable-line-number">&#8203;</span>`;
  533. 		} else {
  534. 			html = editMode ?
  535. 				`<span class="${linkClass}" aria-label="${item.tooltip}">${item.content}</span>` :
  536. 				// GitHub might get upset, but we're not going to bother with analytics;
  537. 				// not including "data-ga-click" nor "data-selected-links" attributes
  538. 				`<a href="${url}" class="${linkClass}" aria-label="${item.tooltip}" data-hotkey="${item.hotkey}">
  539. 					${item.content}
  540. 				</a>`;
  541. 		}
  542. 		make({
  543. 			el: "span",
  544. 			appendTo: target,
  545. 			attr: {
  546. 				"data-ghcn": name
  547. 			},
  548. 			className: "Header-item",
  549. 			html
  550. 		});
  551. 	}
  552.  
  553. 	// Destroy button pressed
  554. 	function destroyLink(item) {
  555. 		if (item) {
  556. 			delete settings.items[item];
  557. 			GM_setValue("custom-links", settings);
  558. 			let el,
  559. 				indx = settings.github.indexOf(item);
  560. 			if (indx >= 0) {
  561. 				settings.github.splice(indx, 1);
  562. 			}
  563. 			indx = settings.gists.indexOf(item);
  564. 			if (indx >= 0) {
  565. 				settings.gists.splice(indx, 1);
  566. 			}
  567. 			el = $(`.Header-item[data-ghcn="${item}"]`);
  568. 			if (el) {
  569. 				el.parentNode.removeChild(el);
  570. 			}
  571. 			if ((settings.currentLink || "") === item) {
  572. 				settings.currentLink = "";
  573. 			}
  574. 			updateLink();
  575. 		}
  576. 	}
  577.  
  578. 	// Reset button pressed or new JSON added
  579. 	function resetLinks(newSettings) {
  580. 		if (newSettings) {
  581. 			settings = newSettings;
  582. 		} else {
  583. 			// quick n'dirty deep merge
  584. 			let str = JSON.stringify(defaults);
  585. 			settings = JSON.parse(str);
  586. 		}
  587. 		GM_setValue("custom-links", settings);
  588. 		// remove extra items individually; dragula doesn't seem to like it when we
  589. 		// use innerHTML = ""
  590. 		let item,
  591. 			els = $$(".Header-item"),
  592. 			indx = els.length;
  593. 		while (indx--) {
  594. 			item = els[indx].getAttribute("data-ghcn");
  595. 			if (item !== "separator" && !settings.items?.item) {
  596. 				destroyLink(item);
  597. 			}
  598. 		}
  599. 		customize();
  600. 	}
  601.  
  602. 	function restoreLinks() {
  603. 		Object.assign(settings.items, defaults.items);
  604. 		GM_setValue("custom-links", settings);
  605. 		updatePanel();
  606. 	}
  607.  
  608. 	// Clicked item; update input values
  609. 	function updateLink(el) {
  610. 		let item = el && el.getAttribute("data-ghcn") || "",
  611. 			link = settings.items[item] || {};
  612. 		settings.currentLink = item;
  613. 		$(".ghcn-url").value = link.url || "";
  614. 		$(".ghcn-tooltip").value = link.tooltip || "";
  615. 		$(".ghcn-hotkey").value = link.hotkey || "";
  616. 		$(".ghcn-content").value = link.content || "";
  617.  
  618. 		// "separator" shouldn't show options
  619. 		$(".ghcn-settings-wrapper form").style.visibility = item === "separator" ?
  620. 			"hidden" :
  621. 			"visible";
  622. 	}
  623.  
  624. 	// save changes on-the-fly
  625. 	function saveLink() {
  626. 		let name = settings.currentLink || "",
  627. 			item = $(`.Header-item[data-ghcn="${name}"] .Header-link`);
  628. 		if (name) {
  629. 			settings.items[name] = {
  630. 				url: $(".ghcn-url").value,
  631. 				tooltip: $(".ghcn-tooltip").value,
  632. 				hotkey: $(".ghcn-hotkey").value,
  633. 				content: $(".ghcn-content").value
  634. 			};
  635. 			GM_setValue("custom-links", settings);
  636. 			// update item (should be unique)
  637. 			if (item) {
  638. 				// "\n" is the only thing that works as a carriage return for
  639. 				// javascript's setAttribute; see
  640. 				// http://wowmotty.blogspot.com/2014/04/methods-to-add-multi-line-css-content.html
  641. 				item.setAttribute(
  642. 					"aria-label",
  643. 					settings.items[name].tooltip.replace(/(&#10;|&#xA;)/g, "\n")
  644. 				);
  645. 				item.innerHTML = settings.items[name].content;
  646. 			}
  647. 		}
  648. 	}
  649.  
  650. 	function addJSON() {
  651. 		$(".ghcn-json-code").value = JSON.stringify(settings, null, 2);
  652. 	}
  653.  
  654. 	function processJSON() {
  655. 		let val,
  656. 			txt = $(".ghcn-json-code").value;
  657. 		try {
  658. 			val = JSON.parse(txt);
  659. 		} catch (err) {
  660. 			console.error("GitHub Custom Navigation: Invalid JSON!");
  661. 		}
  662. 		return val;
  663. 	}
  664.  
  665. 	function addBindings() {
  666. 		// Create a menu entry
  667. 		const menu = make({
  668. 			el: "a",
  669. 			className: "dropdown-item",
  670. 			html: "Custom Nav Settings",
  671. 			attr: {
  672. 				id: "ghcn-menu"
  673. 			}
  674. 		});
  675.  
  676. 		const els = $$(`
  677. 			.Header .dropdown-item[href='/settings/profile'],
  678. 			.Header .dropdown-item[data-ga-click*='go to profile'],
  679. 			.Header-item .dropdown-item[href='/settings/profile'],
  680. 			.js-header-wrapper .dropdown-item[href='/settings/profile'],
  681. 			.js-header-wrapper .dropdown-item[data-ga-click*='go to profile']`
  682. 		);
  683. 		// get last found item - gists only have the "go to profile" item; GitHub
  684. 		// has both
  685. 		if (els.length) {
  686. 			els[els.length -1].after(menu);
  687. 			on($("#ghcn-menu"), "click", openPanel);
  688. 		}
  689.  
  690. 		on(window, "hashchange", openPanelOnHash);
  691. 		on(document, "ghmo:container", customize);
  692. 		on($("#ghcn-overlay"), "click", event => {
  693. 			// ignore bubbled up events
  694. 			if (event.target.id === "ghcn-overlay") {
  695. 				closePanel();
  696. 			}
  697. 		});
  698. 		on($("body"), "keyup", event => {
  699. 			// using F2 key for testing
  700. 			if (editMode && event.keyCode === 27) {
  701. 				closePanel();
  702. 			}
  703. 		});
  704. 		on($("body"), "click", event => {
  705. 			const target = event.target;
  706. 			if (editMode && target.classList.contains("Header-link")) {
  707. 				// Header-link is a child of Header-item, but is the same size
  708. 				settings.currentLink = target.parentNode.getAttribute("data-ghcn");
  709. 				selectItem();
  710. 			}
  711. 		});
  712. 		on($$(".ghcn-settings-wrapper input"), "input change", saveLink);
  713. 		on($(".ghcn-add"), "click", createLink);
  714. 		on($(".ghcn-destroy"), "click", () => destroyLink(settings.currentLink));
  715. 		on($(".ghcn-reset"), "click", resetLinks);
  716. 		on($(".ghcn-restore"), "click", restoreLinks);
  717. 		// close panel when hotkey link is clicked or the page scrolls on the
  718. 		// documentation wiki
  719. 		on($$(".ghcn-close, .ghcn-hotkey-link"), "click", closePanel);
  720.  
  721. 		// Code
  722. 		on($(".ghcn-code"), "click", () => {
  723. 			// open JSON code textarea
  724. 			$(".ghcn-json-code").classList.toggle("ghcn-visible");
  725. 			addJSON();
  726. 		});
  727. 		// close JSON code textarea
  728. 		on($(".ghcn-json-code"), "focus", function() {
  729. 			this.select();
  730. 		});
  731. 		on($(".ghcn-json-code"), "paste", () => {
  732. 			setTimeout(() => {
  733. 				checkJSON(processJSON());
  734. 			}, 200);
  735. 		});
  736.  
  737. 	}
  738.  
  739. 	function checkJSON(val, init) {
  740. 		let hasGitHub = false,
  741. 			hasGists = false,
  742. 			hasItems = false;
  743. 		if (val) {
  744. 			hasGitHub = val?.github;
  745. 			hasGists = val?.gists;
  746. 			hasItems = val?.items;
  747. 			// simple validation
  748. 			if (hasGitHub && hasGists && hasItems) {
  749. 				if (!init) {
  750. 					resetLinks(val);
  751. 					$(".ghcn-json-code").classList.remove("ghcn-visible");
  752. 					selectItem();
  753. 				}
  754. 				return true;
  755. 			}
  756. 		}
  757. 		let msg = [];
  758. 		if (!hasGitHub) {
  759. 			msg.push(`"github"`);
  760. 		}
  761. 		if (!hasGists) {
  762. 			msg.push(`"gists"`);
  763. 		}
  764. 		if (!hasItems) {
  765. 			msg.push(`"items"`);
  766. 		}
  767. 		msg = msg.length ? "JSON is missing " + msg.join(" & ") : "Invalid JSON";
  768. 		console.error("GitHub Custom Navigation: " + msg, val);
  769. 		return false;
  770. 	}
  771.  
  772. 	// add new link; needs a unique ID
  773. 	function findUniqueId(prefix) {
  774. 		let indx = 0,
  775. 			id = prefix + indx;
  776. 		if (settings.items[id]) {
  777. 			while (settings.items[id]) {
  778. 				id = prefix + indx++;
  779. 			}
  780. 		}
  781. 		return id;
  782. 	}
  783.  
  784. 	// Main process - adds links to header navigation
  785. 	function customize() {
  786. 		let nav = $("nav[aria-label='Global']");
  787. 		if (nav) {
  788. 			nav.classList.add("ghcn-nav");
  789. 			let indx, els,
  790. 				navStr = ".ghcn-nav",
  791. 				setItems = settings[getLocation()],
  792. 				len = setItems.length;
  793. 			if (!len) {
  794. 				return;
  795. 			}
  796.  
  797. 			els = nav.childNodes;
  798. 			indx = els.length;
  799. 			while (indx--) {
  800. 				nav.removeChild(els[indx]);
  801. 			}
  802.  
  803. 			for (indx = 0; indx < len; indx++) {
  804. 				addToMenu(setItems[indx], navStr);
  805. 			}
  806. 			// make sure all svg's have an "octicon" class name
  807. 			addClass($$(navStr + " svg"), "octicon");
  808.  
  809. 			if (editMode) {
  810. 				updatePanel();
  811. 			}
  812. 		}
  813. 	}
  814.  
  815. 	let isValid = checkJSON(settings, "init");
  816. 	if (!isValid) {
  817. 		resetLinks();
  818. 	}
  819. 	customize();
  820. 	addPanel();
  821. 	addBindings();
  822. 	addDragula();
  823. 	openPanelOnHash();
  824.  
  825. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址