☰

GitHub Monospace Font Toggle

A userscript that adds monospace font toggle to comments

当前为 2017-04-21 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub Monospace Font Toggle
  3. // @version     1.2.0
  4. // @description A userscript that adds monospace font toggle to comments
  5. // @license     https://creativecommons.org/licenses/by-sa/4.0/
  6. // @author      StylishThemes
  7. // @namespace   https://github.com/StylishThemes
  8. // @include     https://github.com/*
  9. // @run-at      document-idle
  10. // @grant       GM_addStyle
  11. // @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=188090
  12. // @icon        https://avatars3.githubusercontent.com/u/6145677?v=3&s=200
  13. // ==/UserScript==
  14. /* jshint esnext:true, unused:true */
  15. (() => {
  16.   "use strict";
  17.   /*
  18.   This code is also part of the GitHub-Dark Script
  19.   (https://github.com/StylishThemes/GitHub-Dark-Script)
  20.   Extracted out into a separate userscript in case users
  21.   only want to add this functionality
  22.   */
  23.   const icon = `
  24.     <svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 32 32">
  25.       <path d="M5.91 7.31v8.41c0 .66.05 1.09.14 1.31.09.21.23.37.41.48.18.11.52.16 1.02.16v.41H2.41v-.41c.5 0 .86-.05 1.03-.14.16-.11.3-.27.41-.5.11-.23.16-.66.16-1.3V11.7c0-1.14-.04-1.87-.11-2.2-.04-.26-.13-.42-.24-.53-.11-.1-.27-.14-.46-.14-.21 0-.48.05-.77.18l-.18-.41 3.14-1.28h.52v-.01zm-.95-5.46c.32 0 .59.11.82.34.23.23.34.5.34.82 0 .32-.11.59-.34.82-.23.22-.51.34-.82.34-.32 0-.59-.11-.82-.34s-.36-.5-.36-.82c0-.32.11-.59.34-.82.24-.23.51-.34.84-.34zm19.636 19.006h-3.39v-1.64h5.39v9.8h3.43v1.66h-9.18v-1.66h3.77v-8.16h-.02zm.7-6.44c.21 0 .43.04.63.13.18.09.36.2.5.34s.25.3.34.5c.07.18.13.39.13.61 0 .22-.04.41-.13.61s-.19.36-.34.5-.3.25-.5.32c-.2.09-.39.13-.62.13-.21 0-.43-.04-.61-.12-.19-.07-.35-.19-.5-.34-.14-.14-.25-.3-.34-.5-.07-.2-.13-.39-.13-.61s.04-.43.13-.61c.07-.18.2-.36.34-.5s.31-.25.5-.34c.17-.09.39-.12.6-.12zM2 30L27.82 2H30L4.14 30H2z"/>
  26.     </svg>`;
  27.  
  28.   // Add monospace font toggle
  29.   function addMonospaceToggle() {
  30.     const button = document.createElement("button");
  31.     button.type = "button";
  32.     button.className = "ghd-monospace toolbar-item tooltipped tooltipped-n";
  33.     button.setAttribute("aria-label", "Toggle monospaced font");
  34.     button.setAttribute("tabindex", "-1");
  35.     button.innerHTML = icon;
  36.     $$(".toolbar-commenting").forEach(el => {
  37.       if (el && !$(".ghd-monospace", el)) {
  38.         el.insertBefore(button.cloneNode(true), el.childNodes[0]);
  39.       }
  40.     });
  41.   }
  42.  
  43.   function addBindings() {
  44.     $("body").addEventListener("click", event => {
  45.       let textarea, active;
  46.       const target = event.target;
  47.       if (target && target.classList.contains("ghd-monospace")) {
  48.         textarea = closest(".previewable-comment-form", target);
  49.         textarea = $(".comment-form-textarea", textarea);
  50.         textarea.classList.toggle("ghd-monospace-font");
  51.         textarea.focus();
  52.         active = textarea.classList.contains("ghd-monospace-font");
  53.         target.classList.toggle("text-blue", active);
  54.         return false;
  55.       }
  56.     });
  57.   }
  58.  
  59.   function $(str, el) {
  60.     return (el || document).querySelector(str);
  61.   }
  62.  
  63.   function $$(str, el) {
  64.     return Array.from((el || document).querySelectorAll(str));
  65.   }
  66.  
  67.   function closest(selector, el) {
  68.     while (el && el.nodeType === 1) {
  69.       if (el.matches(selector)) {
  70.         return el;
  71.       }
  72.       el = el.parentNode;
  73.     }
  74.     return null;
  75.   }
  76.  
  77.   // don't initialize if GitHub Dark Script is active
  78.   if (!$("#ghd-menu")) {
  79.     // monospace font toggle
  80.     GM_addStyle(`
  81.       .ghd-monospace-font { font-family: Menlo, Inconsolata, "Droid Mono",
  82.         monospace !important; font-size: 1em !important; }
  83.       .ghd-monospace > svg { pointer-events: none; }
  84.     `);
  85.  
  86.     document.addEventListener("ghmo:container", addMonospaceToggle);
  87.     document.addEventListener("ghmo:comments", addMonospaceToggle);
  88.  
  89.     addBindings();
  90.     addMonospaceToggle();
  91.   }
  92.  
  93. })();