GitHub Custom Navigation

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

当前为 2019-06-03 提交的版本,查看 最新版本

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