☰

GitHub Custom Navigation

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

目前為 2016-06-25 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name          GitHub Custom Navigation
  3. // @version       1.0.2
  4. // @description   A userscript that allows you to customize GitHub's main navigation bar
  5. // @license       https://creativecommons.org/licenses/by-sa/4.0/
  6. // @namespace     http://github.com/Mottie
  7. // @include       https://github.com/*
  8. // @include       https://gist.github.com/*
  9. // @grant         GM_addStyle
  10. // @grant         GM_getValue
  11. // @grant         GM_setValue
  12. // @require       https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.js
  13. // @run-at        document-end
  14. // @author        Rob Garrison
  15. // ==/UserScript==
  16. /* global GM_addStyle, GM_getValue, GM_setValue, dragula */
  17. /* jshint esnext:true, unused:true */
  18. (function() {
  19.   "use strict";
  20.  
  21.   let drake,
  22.   editMode = false,
  23.   // remember scrollTop when settings panel opens (if using sticky nav header style)
  24.   scrollTop = 0,
  25.   // when the bar gets wider than this number, adjust the width of the search input
  26.   adjustWidth = 460,
  27.   // when search input width is adjusted, this is the minimum width
  28.   minSearchInputWidth = 200,
  29.  
  30.   // open menu via hash
  31.   panelHash = "#github-custom-nav-settings",
  32.   panelHashTriggered = false,
  33.  
  34.   defaults = {
  35.     github: ["pr", "issues", "gist", "separator", "stars", "watching", "separator", "profile", "blog", "menu"],
  36.     gists: ["gistall", "giststars", "github", "separator", "pr", "issues", "stars", "watching", "separator", "profile", "blog", "menu"],
  37.  
  38.     currentLink: "pr",
  39.     // using full length url so the links work from any subdomain (e.g. gist pages)
  40.     items: {
  41.       "blog": {
  42.         url: "https://github.com/blog",
  43.         tooltip: "Blog",
  44.         hotkey: "",
  45.         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>"
  46.       },
  47.       "explore": {
  48.         url: "https://github.com/explore",
  49.         tooltip: "Explore",
  50.         hotkey: "",
  51.         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>"
  52.       },
  53.       "gist": {
  54.         url: "https://gist.github.com/",
  55.         tooltip: "Gist",
  56.         hotkey: "",
  57.         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>"
  58.       },
  59.       "gistall": {
  60.         url: "https://gist.github.com/discover",
  61.         tooltip: "Discover Gists",
  62.         hotkey: "",
  63.         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>"
  64.       },
  65.       "giststars": {
  66.         url: "https://gist.github.com/${me}/starred",
  67.         tooltip: "Starred Gists",
  68.         hotkey: "",
  69.         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>"
  70.       },
  71.       "github": {
  72.         url: "https://github.com",
  73.         tooltip: "GitHub",
  74.         hotkey: "",
  75.         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>"
  76.       },
  77.       "integrations": {
  78.         url: "https://github.com/integrations",
  79.         tooltip: "Integrations",
  80.         hotkey: "",
  81.         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>"
  82.       },
  83.       "issues": {
  84.         url: "https://github.com/issues",
  85.         tooltip: "Issues",
  86.         hotkey: "g i",
  87.         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>"
  88.       },
  89.       "menu": {
  90.         url: panelHash,
  91.         tooltip: "Open Custom Navigation Settings",
  92.         hotkey: "",
  93.         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>"
  94.       },
  95.       "pr": {
  96.         url: "https://github.com/pulls",
  97.         tooltip: "Pull Requests",
  98.         hotkey: "g p",
  99.         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>"
  100.       },
  101.       "profile": {
  102.         url: "https://github.com/${me}",
  103.         tooltip: "Profile",
  104.         hotkey: "",
  105.         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>"
  106.       },
  107.       "settings": {
  108.         url: "https://github.com/settings/profile",
  109.         tooltip: "Settings",
  110.         hotkey: "",
  111.         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>"
  112.       },
  113.       "stars": {
  114.         url: "https://github.com/stars",
  115.         tooltip: "Stars",
  116.         hotkey: "",
  117.         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>"
  118.       },
  119.       "trending": {
  120.         url: "https://github.com/trending",
  121.         tooltip: "Trending",
  122.         hotkey: "",
  123.         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>"
  124.       },
  125.       "watching": {
  126.         url: "https://github.com/watching",
  127.         tooltip: "Watching",
  128.         hotkey: "",
  129.         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>"
  130.       },
  131.       "zenhub": {
  132.         url: "#todo",
  133.         tooltip: "ZenHub ToDo",
  134.         hotkey: "",
  135.         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>"
  136.       }
  137.     }
  138.   },
  139.  
  140.   // get user name; or empty string if not logged in
  141.   user = $("meta[name='user-login']").getAttribute("content") || "",
  142.   settings = GM_getValue("custom-links", defaults),
  143.  
  144.   icons = {
  145.     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>",
  146.     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>",
  147.     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>",
  148.     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>"
  149.   };
  150.  
  151.   function addPanel() {
  152.     GM_addStyle(`
  153.       /* Use border right when a vertical bar is added */
  154.       .header-nav-link.ghcn-separator { border-right:#e5e5e5 2px solid; padding:4px 0; }
  155.       /* settings panel */
  156.       #ghcn-overlay { position:fixed; top:50px; left:0; right:0; bottom:0; z-index:5;
  157.         background:rgba(0,0,0,.5); display:none; }
  158.       #ghcn-menu { cursor:pointer; }
  159.       .ghcn-close, .ghcn-code { float:right; cursor:pointer; font-size:.8em; margin-left:3px;
  160.         padding:0 6px 2px 6px; }
  161.       .ghcn-close .octicon { vertical-align:middle; fill:currentColor; }
  162.       #ghcn-settings-inner { position:fixed; left:50%; top:55px; z-index:10; width:30rem;
  163.         transform:translate(-50%,0); box-shadow:0 .5rem 1rem #111; color:#c0c0c0; display:none; }
  164.       #ghcn-settings-inner input { width:85%; float:right; border-style:solid; border-width:1px;
  165.         max-height:35px; }
  166.       .ghcn-settings-wrapper div { line-height:38px; }
  167.       #ghcn-nav-items { min-height: 38px; }
  168.       #ghcn-nav-items .header-nav-item { margin-bottom:4px; }
  169.       .ghcn-settings-wrapper hr { margin: 10px 0; }
  170.       .ghcn-footer { margin-top:4px; border-top:#555 solid 1px; }
  171.       .header-nav-link { height:28px; }
  172.       .header-nav-link.left svg, .header-nav-link.left img { max-height:16px; fill:currentColor; }
  173.       /* panel open */
  174.       body.ghcn-settings-open { overflow:hidden !important; /* !important overrides wiki style */ }
  175.       /* hide other header elements while settings is open (overflow issues) */
  176.       body.ghcn-settings-open .header-search,
  177.         body.ghcn-settings-open .header-nav.right,
  178.         body.ghcn-settings-open .header-logo-invertocat,
  179.         body.ghcn-settings-open .header-logo-wordmark,
  180.         .gist-header .octicon-logo-github, /* hide GitHub logo on Gist page */
  181.         .zh-todo-link { display:none; }
  182.       body.ghcn-settings-open .header-nav.left { width:100%; }
  183.       body.ghcn-settings-open .header-nav-link > * { pointer-events:none; }
  184.       body.ghcn-settings-open #ghcn-overlay,
  185.         body.ghcn-settings-open #ghcn-settings-inner,
  186.         #ghcn-nav-items { display:block; }
  187.       body.ghcn-settings-open .header-nav.left .header-nav-item,
  188.         .ghcn-settings-wrapper .header-nav-item { cursor:move; border:#555 1px solid; border-radius:4px;
  189.         margin-left: 2px; }
  190.       body.ghcn-settings-open .header-nav-link,
  191.         .ghcn-settings-wrapper .header-nav-link { min-height:auto; min-width:16px; }
  192.       /* JSON code block */
  193.       .ghcn-json-code { display:none; font-family:Menlo, Inconsolata, "Droid Mono", monospace; font-size:1em; }
  194.       .ghcn-visible { display:block; position:absolute; top:38px; bottom:0; left:2px; right:2px; z-index:1;
  195.         width:476px; max-width:476px; }
  196.       /* Dragula.min.css v3.7.1 (Microsoft definitions removed) */
  197.       .gu-mirror { position:fixed !important; margin:0 !important; z-index:9999 !important; opacity:.8;
  198.         list-style:none; }
  199.       .gu-hide { display:none !important; }
  200.       .gu-unselectable { -webkit-user-select:none !important; -moz-user-select:none !important;
  201.         user-select:none !important; }
  202.       .gu-transit { opacity:.2; }
  203.     `);
  204.  
  205.     make({
  206.       el: "div",
  207.       appendTo: "body",
  208.       attr: { id: "ghcn-settings" },
  209.       html: `
  210.         <div id="ghcn-overlay"></div>
  211.         <div id="ghcn-settings-inner" class="boxed-group">
  212.           <h3>GitHub Custom Navigation Settings
  213.             <button type="button" class="ghcn-close btn btn-sm">${icons.close}</button>
  214.             <button type="button" class="ghcn-code btn btn-sm tooltipped tooltipped-n" aria-label="Toggle JSON data view">{ }</button>
  215.           </h3>
  216.           <div class="ghcn-settings-wrapper boxed-group-inner">
  217.             <ul id="ghcn-nav-items" class="btn-group header-nav"></ul>
  218.             <hr>
  219.             <form>
  220.               <p>Click an link above to edit its properties
  221.                 <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>
  222.               </p>
  223.               <div>URL
  224.                 <span class="tooltipped tooltipped-e" aria-label="Enter a full URL, or hash">${icons.info}</span>
  225.                 <input class="form-control ghcn-url" type="text"/>
  226.               </div>
  227.               <div>Tooltip<input class="form-control ghcn-tooltip" type="text"/></div>
  228.               <div>Hotkey
  229.                 <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>
  230.                 <input class="form-control ghcn-hotkey" type="text"/>
  231.               </div>
  232.               <div>Content
  233.                 <span class="tooltipped tooltipped-e" aria-label="Include text and/or HTML (&lt;svg&gt; or &lt;img&gt;)">${icons.info}</span>
  234.                 <input class="form-control ghcn-content" type="text"/>
  235.               </div>
  236.             </form>
  237.             <textarea class="ghcn-json-code"></textarea>
  238.             <div class="ghcn-footer">
  239.               <span class="btn btn-sm ghcn-add">${icons.add} New Link</span>
  240.               <span class="btn btn-sm ghcn-destroy btn-danger tooltipped tooltipped-n" aria-label="Completely remove selected link">Destroy</span>
  241.               <span class="btn btn-sm ghcn-reset tooltipped tooltipped-n" aria-label="Restore Defaults">Reset</span>
  242.             </div>
  243.           </div>
  244.         </div>`
  245.     });
  246.   }
  247.  
  248.   function updatePanel() {
  249.     let indx, item, inNav, inSettings,
  250.       panelStr = "#ghcn-nav-items",
  251.       panel = $(panelStr),
  252.       setItems = settings[getLocation()],
  253.       keys = Object.keys(settings.items),
  254.       len = keys.length;
  255.     for (indx = 0; indx < len; indx++) {
  256.       item = keys[indx];
  257.       inNav = setItems.indexOf(item) > -1;
  258.       inSettings = $(panelStr + ` .header-nav-item[data-ghcn="${item}"]`);
  259.       // customize adds stuff to main nav
  260.       if (inNav && inSettings) {
  261.         panel.removeChild(inSettings);
  262.       } else if (!inNav && !inSettings) {
  263.         addToMenu(item, panelStr);
  264.       }
  265.     }
  266.     if (!$(panelStr + " .header-nav-item[data-ghcn='separator']")) {
  267.       addToMenu("separator", panelStr);
  268.     }
  269.     selectItem();
  270.   }
  271.  
  272.   function openPanel() {
  273.     scrollTop = document.documentElement.scrollTop;
  274.     window.scrollTo(0,0);
  275.     $("body").classList.add("ghcn-settings-open");
  276.     editMode = true;
  277.     customize();
  278.     $(".modal-backdrop").click();
  279.     $(".ghcn-json-code").classList.remove("ghcn-visible");
  280.   }
  281.  
  282.   function openPanelOnHash() {
  283.     if (!panelHashTriggered && window.location.hash === panelHash) {
  284.       panelHashTriggered = true;
  285.       openPanel();
  286.       // immediately remove the hash because I noticed issues where the "#" was removed; and upon
  287.       // reload, a 404 page is shown because "https://github.com/github-custom-navigation-settings"
  288.       // does not exist
  289.       history.pushState("", document.title, window.location.pathname);
  290.       panelHashTriggered = false;
  291.     }
  292.   }
  293.  
  294.   function closePanel() {
  295.     if (editMode) {
  296.       window.scrollTo(0, scrollTop);
  297.       $("body").classList.remove("ghcn-settings-open");
  298.       editMode = false;
  299.       customize();
  300.       $(".ghcn-json-code").classList.remove("ghcn-visible");
  301.     }
  302.   }
  303.  
  304.   function getLocation() {
  305.     // used by "settings" object
  306.     return window.location.hostname === "gist.github.com" ? "gists" : "github";
  307.   }
  308.  
  309.   // continually destroying & reapplying Dragula sometimes ignores elements;
  310.   // so just leave it always applied
  311.   function addDragula() {
  312.     let topNav = $(".header-nav");
  313.     drake = dragula($$(".header-nav, #ghcn-nav-items"), {
  314.       invalid: function() {
  315.         return !editMode;
  316.       }
  317.     });
  318.     drake.on("drop", function() {
  319.       let indx, link,
  320.         temp = [],
  321.         list = topNav.childNodes,
  322.         len = list.length;
  323.       for (indx = 0; indx < len; indx++) {
  324.         link = list[indx].getAttribute("data-ghcn");
  325.         if (link) {
  326.           temp[temp.length] = link;
  327.         }
  328.       }
  329.       settings[getLocation()] = temp;
  330.       GM_setValue("custom-links", settings);
  331.       updatePanel();
  332.  
  333.     });
  334.   }
  335.  
  336.   // Clicked item; show selection
  337.   function selectItem() {
  338.     // highlight current link
  339.     let temp = $$(".header-nav-link.focus");
  340.     removeClass(temp, "focus");
  341.     temp = $$(".header-nav-item[data-ghcn='" + (settings.currentLink || "") + "'] .header-nav-link");
  342.     if (temp[0]) {
  343.       addClass(temp, "focus");
  344.       updateLink(temp[0].parentNode);
  345.     }
  346.   }
  347.  
  348.   // New Link button pressed
  349.   function createLink() {
  350.     let name = findUniqueId("custom");
  351.     settings.items[name] = { url: "", tooltip: "", hotkey: "", content: "*" };
  352.     addToMenu(name, "#ghcn-nav-items");
  353.     settings.currentLink = name;
  354.     selectItem();
  355.   }
  356.  
  357.   // append named list item to menu
  358.   function addToMenu(name, target) {
  359.     let html,
  360.       item = settings.items[name] || {},
  361.       url = (item.url || "").replace(/\$\{me\}/g, user),
  362.       linkClass = editMode ?
  363.         "header-nav-link form-control" :
  364.         "js-selected-navigation-item header-nav-link";
  365.     // only show tooltip if defined
  366.     if (item.tooltip) {
  367.       linkClass += " tooltipped tooltipped-s";
  368.       if (/(&#10;|&#xA;)/g.test(item.tooltip)) {
  369.         linkClass += " tooltipped-multiline";
  370.       }
  371.     }
  372.     if (name === "separator") {
  373.       html = editMode ?
  374.         // *** Separator (icon in editMode; zero-width-space when not)
  375.         `<span class="${linkClass} tooltipped tooltipped-s" aria-label="Menu separator">${icons.separator}</span>` :
  376.         `<span class="header-nav-link ghcn-separator linkable-line-number">&#8203;</span>`;
  377.     } else {
  378.       html = editMode ?
  379.         `<span class="${linkClass}" aria-label="${item.tooltip}">${item.content}</span>` :
  380.         // GitHub might get upset, but we're not going to bother with analytics;
  381.         // not including "data-ga-click" nor "data-selected-links" attributes
  382.         `<a href="${url}" class="${linkClass}" aria-label="${item.tooltip}" data-hotkey="${item.hotkey}">
  383.           ${item.content}
  384.         </a>`;
  385.     }
  386.     make({
  387.       el: "li",
  388.       appendTo: target,
  389.       attr: { "data-ghcn": name },
  390.       cl4ss: "header-nav-item",
  391.       html: html
  392.     });
  393.   }
  394.  
  395.   // Destroy button pressed
  396.   function destroyLink(item) {
  397.     if (item) {
  398.       delete settings.items[item];
  399.       GM_setValue("custom-links", settings);
  400.       let el,
  401.         indx = settings.github.indexOf(item);
  402.       if (indx >= 0) {
  403.         settings.github.splice(indx, 1);
  404.       }
  405.       indx = settings.gists.indexOf(item);
  406.       if (indx >= 0) {
  407.         settings.gists.splice(indx, 1);
  408.       }
  409.       el = $(`.header-nav-item[data-ghcn="${item}"]`);
  410.       el.parentNode.removeChild(el);
  411.       if ((settings.currentLink || "") === item) {
  412.         settings.currentLink = "";
  413.       }
  414.       updateLink();
  415.     }
  416.   }
  417.  
  418.   // Reset button pressed or new JSON added
  419.   function resetLinks(newSettings) {
  420.     if (newSettings) {
  421.       settings = newSettings;
  422.     } else {
  423.       // quick n'dirty deep merge
  424.       let str = JSON.stringify(defaults);
  425.       settings = JSON.parse(str);
  426.     }
  427.     GM_setValue("custom-links", settings);
  428.     // remove extra items individually; dragula doesn't seem to like it when we use innerHTML = ""
  429.     let item,
  430.       els = $$(".header-nav-item"),
  431.       indx = els.length;
  432.     while (indx--) {
  433.       item = els[indx].getAttribute("data-ghcn");
  434.       if (item !== "separator" && !settings.items.hasOwnProperty(item)) {
  435.         destroyLink(item);
  436.       }
  437.     }
  438.     customize();
  439.   }
  440.  
  441.   // Clicked item; update input values
  442.   function updateLink(el) {
  443.     let item = el && el.getAttribute("data-ghcn") || "",
  444.       link = settings.items[item] || {};
  445.     settings.currentLink = item;
  446.     $(".ghcn-url").value = link.url || "";
  447.     $(".ghcn-tooltip").value = link.tooltip || "";
  448.     $(".ghcn-hotkey").value = link.hotkey || "";
  449.     $(".ghcn-content").value = link.content || "";
  450.  
  451.     // "separator" shouldn't show options
  452.     $(".ghcn-settings-wrapper form").style.visibility = item === "separator" ? "hidden" : "visible";
  453.   }
  454.  
  455.   // save changes on-the-fly
  456.   function saveLink() {
  457.     let name = settings.currentLink || "",
  458.       item = $(`.header-nav-item[data-ghcn="${name}"] .header-nav-link`);
  459.     if (name) {
  460.       settings.items[name] = {
  461.         url     : $(".ghcn-url").value,
  462.         tooltip : $(".ghcn-tooltip").value,
  463.         hotkey  : $(".ghcn-hotkey").value,
  464.         content : $(".ghcn-content").value
  465.       };
  466.       GM_setValue("custom-links", settings);
  467.       // update item (should be unique)
  468.       if (item) {
  469.         // "\n" is the only thing that works as a carriage return for javascript's setAttribute
  470.         // See http://wowmotty.blogspot.com/2014/04/methods-to-add-multi-line-css-content.html
  471.         item.setAttribute("aria-label", settings.items[name].tooltip.replace(/(&#10;|&#xA;)/g, "\n"));
  472.         item.innerHTML = settings.items[name].content;
  473.       }
  474.     }
  475.   }
  476.  
  477.   function addJSON() {
  478.     $(".ghcn-json-code").value = JSON.stringify(settings, null, 2);
  479.   }
  480.  
  481.   function processJSON() {
  482.     var val,
  483.       txt = $(".ghcn-json-code").value;
  484.     try {
  485.       val = JSON.parse(txt);
  486.     } catch (err) {
  487.       console.error("GitHub Custom Navigation: Invalid JSON!");
  488.     }
  489.     return val;
  490.   }
  491.  
  492.   function addBindings() {
  493.     // Create a menu entry
  494.     let el,
  495.     menu = make({
  496.       el    : "a",
  497.       cl4ss : "dropdown-item",
  498.       html  : "Custom Nav Settings",
  499.       attr  : { id: "ghcn-menu" }
  500.     });
  501.  
  502.     el = $$(".header .dropdown-item[href='/settings/profile'], .header .dropdown-item[data-ga-click*='go to profile']");
  503.     // get last found item - gists only have the "go to profile" item; GitHub has both
  504.     el = el[el.length - 1];
  505.     if (el) {
  506.       // insert after
  507.       el.parentNode.insertBefore(menu, el.nextSibling);
  508.       on($("#ghcn-menu"), "click", function() {
  509.         openPanel();
  510.       });
  511.     }
  512.  
  513.     on(window, "hashchange", function() {
  514.       openPanelOnHash();
  515.     });
  516.  
  517.     on($("#ghcn-overlay"), "click", function(event) {
  518.       // ignore bubbled up events
  519.       if (event.target.id === "ghcn-overlay") {
  520.         closePanel();
  521.       }
  522.     });
  523.     on($("body"), "keyup", function(event) {
  524.       // using F2 key for testing
  525.       if (editMode && event.keyCode === 27) {
  526.         closePanel();
  527.       }
  528.     });
  529.     on($("body"), "click", function(event) {
  530.       if (editMode && event.target.classList.contains("header-nav-link")) {
  531.         // header-nav-link is a child of header-nav-item, but is the same size
  532.         settings.currentLink = event.target.parentNode.getAttribute("data-ghcn");
  533.         selectItem();
  534.       }
  535.     });
  536.     on($$(".ghcn-settings-wrapper input"), "input change", function() {
  537.       saveLink();
  538.     });
  539.     on($(".ghcn-add"), "click", function() {
  540.       createLink();
  541.     });
  542.     on($(".ghcn-destroy"), "click", function() {
  543.       destroyLink(settings.currentLink);
  544.     });
  545.     on($(".ghcn-reset"), "click", function() {
  546.       resetLinks();
  547.     });
  548.     // close panel when hotkey link is clicked or the page scrolls on the documentation wiki
  549.     on($$(".ghcn-close, .ghcn-hotkey-link"), "click", function() {
  550.       closePanel();
  551.     });
  552.  
  553.     // Code
  554.     on($(".ghcn-code"), "click", function(){
  555.       // open JSON code textarea
  556.       $(".ghcn-json-code").classList.toggle("ghcn-visible");
  557.       addJSON();
  558.     });
  559.     // close JSON code textarea
  560.     on($(".ghcn-json-code"), "focus", function() {
  561.       this.select();
  562.     });
  563.     on($(".ghcn-json-code"), "paste", function() {
  564.       setTimeout(function() {
  565.         checkJSON(processJSON());
  566.       }, 200);
  567.     });
  568.  
  569.   }
  570.  
  571.   function checkJSON(val, init) {
  572.     let hasGitHub = false,
  573.       hasGists = false,
  574.       hasItems = false;
  575.     if (val) {
  576.       hasGitHub = val.hasOwnProperty("github");
  577.       hasGists  = val.hasOwnProperty("gists");
  578.       hasItems  = val.hasOwnProperty("items");
  579.       // simple validation
  580.       if (hasGitHub && hasGists && hasItems) {
  581.         if (!init) {
  582.           resetLinks(val);
  583.           $(".ghcn-json-code").classList.remove("ghcn-visible");
  584.           selectItem();
  585.         }
  586.         return true;
  587.       }
  588.     }
  589.     let msg = [];
  590.     if (!hasGitHub) { msg.push(`"github"`); }
  591.     if (!hasGists) { msg.push(`"gists"`); }
  592.     if (!hasItems) { msg.push(`"items"`); }
  593.     msg = msg.length ? "JSON is missing " + msg.join(" & ") : "Invalid JSON";
  594.     console.error("GitHub Custom Navigation: " + msg, val);
  595.     return false;
  596.   }
  597.  
  598.   // add new link; needs a unique ID
  599.   function findUniqueId(prefix) {
  600.     let indx = 0,
  601.       id = prefix + indx;
  602.     if (settings.items[id]) {
  603.       while (settings.items[id]) {
  604.         id = prefix + indx++;
  605.       }
  606.     }
  607.     return id;
  608.   }
  609.  
  610.   // Main process - adds links to header navigation
  611.   function customize() {
  612.     let nav = $(".header-nav");
  613.     if (nav) {
  614.       let indx, els,
  615.         navStr = ".header-nav",
  616.         setItems = settings[getLocation()],
  617.         len = setItems.length;
  618.       if (!len) { return; }
  619.  
  620.       els = nav.childNodes;
  621.       indx = els.length;
  622.       while (indx--) {
  623.         nav.removeChild(els[indx]);
  624.       }
  625.  
  626.       for (indx = 0; indx < len; indx++) {
  627.         addToMenu(setItems[indx], navStr);
  628.       }
  629.       // make sure all svg's have an "octicon" class name
  630.       addClass($$(navStr + " svg"), "octicon");
  631.  
  632.       if (editMode) {
  633.         updatePanel();
  634.       } else {
  635.         // narrow the search bar when there are a bunch of links added
  636.         // add delay to allow browser to complete reflow
  637.         setTimeout(function() {
  638.           let width = nav.offsetWidth,
  639.             // don't let search bar get narrower than 200px; 360 = starting width
  640.             adjust = width > adjustWidth ?
  641.               Math.round(Math.max(minSearchInputWidth, 360 - (width - adjustWidth))) + "px" : "";
  642.           // default search width is 360px; we don't want to get narrower than 200px
  643.           $(".header-search").style.width = adjust;
  644.         }, 100);
  645.  
  646.  
  647.       }
  648.     }
  649.   }
  650.  
  651.   function $(selector, el) {
  652.     return (el || document).querySelector(selector);
  653.   }
  654.   function $$(selector, el) {
  655.     return Array.from((el || document).querySelectorAll(selector));
  656.   }
  657.   function addClass(els, name) {
  658.     let indx = els.length;
  659.     while (indx--) {
  660.       els[indx].classList.add(name);
  661.     }
  662.   }
  663.   function removeClass(els, name) {
  664.     let indx = els.length;
  665.     while (indx--) {
  666.       els[indx].classList.remove(name);
  667.     }
  668.   }
  669.   function on(els, name, callback) {
  670.     els = Array.isArray(els) ? els : [els];
  671.     let events = name.split(/\s+/);
  672.     els.forEach(function(el) {
  673.       events.forEach(function(ev) {
  674.         el.addEventListener(ev, callback);
  675.       });
  676.     });
  677.   }
  678.   function make(obj) {
  679.     let key,
  680.       el = document.createElement(obj.el);
  681.     if (obj.cl4ss) { el.className = obj.cl4ss; }
  682.     if (obj.html) { el.innerHTML = obj.html; }
  683.     if (obj.attr) {
  684.       for (key in obj.attr) {
  685.         if (obj.attr.hasOwnProperty(key)) {
  686.           el.setAttribute(key, obj.attr[key]);
  687.         }
  688.       }
  689.     }
  690.     if (obj.appendTo) {
  691.       $(obj.appendTo).appendChild(el);
  692.     }
  693.     return el;
  694.   }
  695.  
  696.   let isValid = checkJSON(settings, 'init');
  697.   if (!isValid) {
  698.     resetLinks();
  699.   }
  700.   customize();
  701.   addPanel();
  702.   addBindings();
  703.   addDragula();
  704.   openPanelOnHash();
  705.  
  706. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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