☰

GitHub Monospace Font Toggle

A userscript that adds monospace font toggle to comments

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

  1. // ==UserScript==
  2. // @name         GitHub Monospace Font Toggle
  3. // @version      1.0.1
  4. // @description  A userscript that adds monospace font toggle to comments
  5. // @license      https://creativecommons.org/licenses/by-sa/4.0/
  6. // @namespace    https://github.com/StylishThemes
  7. // @include      https://github.com/*
  8. // @grant        GM_addStyle
  9. // @run-at       document-end
  10. // @author       StylishThemes
  11. // ==/UserScript==
  12. /* global GM_addStyle */
  13. (function() {
  14.   "use strict";
  15.   /*
  16.   This code is also part of the GitHub-Dark Script (https://github.com/StylishThemes/GitHub-Dark-Script)
  17.   Extracted out into a separate userscript in case users only want to add this functionality
  18.   */
  19.   var busy = false,
  20.  
  21.   icon = [
  22.     "<svg class='octicon' xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewbox='0 0 32 32'>",
  23.       "<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'/>",
  24.     "</svg>"
  25.   ].join(""),
  26.  
  27.   // Add monospace font toggle
  28.   addMonospaceToggle = function() {
  29.     busy = true;
  30.     var indx, el, button,
  31.       toolbars = document.querySelectorAll(".toolbar-commenting"),
  32.       len = toolbars.length;
  33.     for (indx = 0; indx < len; indx++) {
  34.       el = toolbars[indx];
  35.       if (!el.querySelector(".ghd-monospace")) {
  36.         button = document.createElement("button");
  37.         button.type = "button";
  38.         button.className = "ghd-monospace toolbar-item tooltipped tooltipped-n";
  39.         button.setAttribute("aria-label", "Toggle monospaced font");
  40.         button.setAttribute("tabindex", "-1");
  41.         button.innerHTML = icon;
  42.         el.insertBefore(button, el.childNodes[0]);
  43.       }
  44.     }
  45.     busy = false;
  46.   },
  47.  
  48.   matches = function(el, selector) {
  49.     // https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
  50.     var matches = document.querySelectorAll(selector),
  51.       i = matches.length;
  52.     while (--i >= 0 && matches.item(i) !== el) {}
  53.     return i > -1;
  54.   },
  55.  
  56.   closest = function(el, selector) {
  57.     while (el && !matches(el, selector)) {
  58.       el = el.parentNode;
  59.     }
  60.     return matches(el, selector) ? el : null;
  61.   },
  62.  
  63.   addBindings = function() {
  64.     document.querySelector("body").addEventListener("click", function(event) {
  65.       var textarea, active,
  66.         target = event.target;
  67.       if (target && target.classList.contains("ghd-monospace")) {
  68.         textarea = closest(target, ".previewable-comment-form");
  69.         textarea = textarea.querySelector(".comment-form-textarea");
  70.         textarea.classList.toggle("ghd-monospace-font");
  71.         textarea.focus();
  72.         active = textarea.classList.contains("ghd-monospace-font");
  73.         target.classList[active ? "add" : "remove"]("text-blue");
  74.         return false;
  75.       }
  76.     });
  77.   },
  78.  
  79.   targets = document.querySelectorAll([
  80.     "#js-repo-pjax-container",
  81.     "#js-pjax-container",
  82.     ".js-preview-body"
  83.   ].join(","));
  84.  
  85.   // don't initialize if GitHub Dark Script is active
  86.   if (!document.querySelector("#ghd-menu")) {
  87.     GM_addStyle([
  88.       // monospace font toggle
  89.       ".ghd-monospace-font { font-family: Menlo, Inconsolata, 'Droid Mono', monospace !important; font-size: 1em !important; }",
  90.       ".ghd-monospace > svg { pointer-events: none; }"
  91.     ].join(""));
  92.  
  93.     Array.prototype.forEach.call(targets, function(target) {
  94.       new MutationObserver(function(mutations) {
  95.         mutations.forEach(function(mutation) {
  96.           // preform checks before adding code wrap to minimize function calls
  97.           if (!busy && mutation.target === target) {
  98.             addMonospaceToggle();
  99.           }
  100.         });
  101.       }).observe(target, {
  102.         childList: true,
  103.         subtree: true
  104.       });
  105.     });
  106.  
  107.     addBindings();
  108.     addMonospaceToggle();
  109.   }
  110.  
  111. })();