☰

GitHub Code Guides

A userscript that allows you to add one or more vertical guidelines to the code

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

  1. // ==UserScript==
  2. // @name         GitHub Code Guides
  3. // @version      1.0.0
  4. // @description  A userscript that allows you to add one or more vertical guidelines to the code
  5. // @license      https://creativecommons.org/licenses/by-sa/4.0/
  6. // @namespace    http://github.com/Mottie
  7. // @include      https://github.com/*
  8. // @grant        GM_getValue
  9. // @grant        GM_setValue
  10. // @grant        GM_registerMenuCommand
  11. // @run-at       document-idle
  12. // @author       Rob Garrison
  13. // ==/UserScript==
  14. /* copy into textarea to check the guides
  15.          1         2         3         4         5         6         7         8
  16. 1234567890123456789012345678901234567890123456789012345678901234567890123456789012345
  17. */
  18. /* global document, prompt, GM_getValue, GM_setValue, GM_registerMenuCommand */
  19. /* jshint esnext:true, unused:true */
  20. (() => {
  21. 	'use strict';
  22. 	const style = document.createElement('style');
  23. 	// eslint-disable-next-line one-var
  24. 	let guides = GM_getValue('ghcg-guides', [{
  25. 			chars: 80,
  26. 			color: 'rgba(0, 0, 0, .3)',
  27. 			width: 0.2
  28. 		}]),
  29. 		font = GM_getValue('ghcg-font', 'Menlo');
  30.  
  31. 	function addGuides(vals) {
  32. 		let css = '';
  33. 		// to align the guides *after* the setting, we need to add 1, then add
  34. 		// another 0.1 to give the guide a tiny bit of white space to the left
  35. 		vals.forEach(guide => {
  36. 			let start = parseFloat(guide.chars) + 1.1;
  37. 			// eslint-disable-next-line one-var
  38. 			const size = parseFloat(guide.width) || 0.2,
  39. 				// each line needs to be at least 0.2ch in width to be visible
  40. 				end = (start + (size > 0.2 ? size : 0.2)).toFixed(1),
  41. 				color = guide.color || 'rgba(0, 0, 0, .3)';
  42. 			start = start.toFixed(1);
  43. 			css += `transparent ${start}ch, ${color} ${start}ch, ${color} ${end}ch, transparent ${end}ch, `;
  44. 		});
  45. 		style.textContent = `
  46. 			textarea, span.blob-code-inner {
  47. 				font-family: "${font}", Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
  48. 			}
  49. 			span.blob-code-inner, td.blob-code-inner, textarea[name='comment[body]'] {
  50. 				display: block !important;
  51. 				background: linear-gradient(to right, transparent 0%, ${css} transparent 100%) !important;
  52. 			}
  53. 		`;
  54. 	}
  55.  
  56. 	function validateGuides(vals) {
  57. 		let last = 0;
  58. 		const valid = [];
  59. 		if (!Array.isArray(vals)) {
  60. 			console.log('Code-Guides Userscript: Invalid guidelines', vals);
  61. 			return;
  62. 		}
  63. 		// Object.keys() creates an array of string values
  64. 		const lines = vals.sort((a, b) => parseFloat(a.chars) - parseFloat(b.chars));
  65. 		lines.forEach(line => {
  66. 			const num = parseFloat(line.chars);
  67. 			// 0.2 is the width of the 'ch' in CSS to make it visible
  68. 			if (num >= last + line.width) {
  69. 				valid.push(line);
  70. 				last = num;
  71. 			}
  72. 		});
  73. 		if (valid.length) {
  74. 			guides = valid;
  75. 			GM_setValue('ghcg-guides', valid);
  76. 			GM_setValue('ghcg-font', font);
  77. 			addGuides(valid);
  78. 		}
  79. 	}
  80.  
  81. 	document.querySelector('head').appendChild(style);
  82. 	validateGuides(guides);
  83.  
  84. 	// Add GM options
  85. 	GM_registerMenuCommand('Set code guideline position & color', () => {
  86. 		let val = prompt(`Enter valid JSON [{ "chars":80, "color":"#f00", "width":0.2 }, ...}`, JSON.stringify(guides));
  87. 		if (val !== null) {
  88. 			try {
  89. 				val = JSON.parse(val);
  90. 				validateGuides(val);
  91. 			} catch (err) {
  92. 				console.log(err);
  93. 			}
  94. 		}
  95. 	});
  96.  
  97. 	GM_registerMenuCommand('Set code guideline default font', () => {
  98. 		const val = prompt('Enter code font (monospaced)', font);
  99. 		if (val !== null) {
  100. 			font = val;
  101. 			validateGuides(guides);
  102. 		}
  103. 	});
  104. })();