// ==UserScript== // @name GitHub Monospace Font Toggle // @version 1.0.0 // @description A userscript that adds monospace font toggle to comments // @license https://creativecommons.org/licenses/by-sa/4.0/ // @namespace https://github.com/StylishThemes // @include https://github.com/* // @grant GM_addStyle // @run-at document-end // @author StylishThemes // @downloadURL none // ==/UserScript== /* global GM_addStyle */ (function() { "use strict"; /* This code is also part of the GitHub-Dark Script (https://github.com/StylishThemes/GitHub-Dark-Script) Extracted out into a separate userscript in case users only want to add this functionality */ var busy = false, icon = [ "", "", "" ].join(""), // Add monospace font toggle addMonospaceToggle = function() { busy = true; var indx, el, button, toolbars = document.querySelectorAll(".toolbar-commenting"), len = toolbars.length; for (indx = 0; indx < len; indx++) { el = toolbars[indx]; if (!el.querySelector(".ghd-monospace")) { button = document.querySelector("button"); button.type = "button"; button.className = "ghd-monospace toolbar-item tooltipped tooltipped-n"; button.setAttribute("aria-label", "Toggle monospaced font"); button.setAttribute("tabindex", "-1"); button.innerHTML = icon; el.insertBefore(button, el.childNodes[0]); } } busy = false; }, matches = function(el, selector) { // https://developer.mozilla.org/en-US/docs/Web/API/Element/matches var matches = document.querySelectorAll(selector), i = matches.length; while (--i >= 0 && matches.item(i) !== el) {} return i > -1; }, closest = function(el, selector) { while (el && !matches(el, selector)) { el = el.parentNode; } return matches(el, selector) ? el : null; }, addBindings = function() { document.querySelector("body").addEventListener("click", function(event) { var textarea, active, target = event.target; if (target && target.classList.contains("ghd-monospace")) { textarea = closest(target, ".previewable-comment-form"); textarea = textarea.querySelector(".comment-form-textarea"); textarea.classList.toggle("ghd-monospace-font"); textarea.focus(); active = textarea.classList.contains("ghd-monospace-font"); target.classList[active ? "add" : "remove"]("ghd-icon-active"); return false; } }); }, targets = document.querySelectorAll([ "#js-repo-pjax-container", "#js-pjax-container", ".js-preview-body" ].join(",")); // don't initialize if GitHub Dark Script is active if (!document.querySelector("#ghd-menu")) { GM_addStyle([ // monospace font toggle ".ghd-monospace-font { font-family: Menlo, Inconsolata, 'Droid Mono', monospace !important; font-size: 1em !important; }", ".ghd-monospace > svg { pointer-events: none; }" ].join("")); Array.prototype.forEach.call(targets, function(target) { new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // preform checks before adding code wrap to minimize function calls if (!busy && mutation.target === target) { addMonospaceToggle(); } }); }).observe(target, { childList: true, subtree: true }); }); addBindings(); addMonospaceToggle(); } })();