GitHub Custom Navigation

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

当前为 2017-07-21 提交的版本,查看 最新版本

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