☰

GitHub Editor - Change Default Settings

change default settings for the github editor

As of 2016-09-26. See the latest version.

  1. // ==UserScript==
  2. // @name         GitHub Editor - Change Default Settings
  3. // @namespace    https://greatest.deepsurf.us/users/649
  4. // @version      1.0.10
  5. // @description  change default settings for the github editor
  6. // @author       Adrien Pyke
  7. // @match        *://github.com/*/new/*
  8. // @match        *://github.com/*/edit/*
  9. // @grant        GM_getValue
  10. // @grant        GM_setValue
  11. // @grant        GM_registerMenuCommand
  12. // @require      https://greatest.deepsurf.us/scripts/5679-wait-for-elements/code/Wait%20For%20Elements.js?version=122976
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. 	'use strict';
  17.  
  18. 	var loadConfig = function() {
  19. 		var defaults = {
  20. 			indentMode: 'tab',
  21. 			indentWidth: 4,
  22. 			wrapMode: 'off'
  23. 		};
  24.  
  25. 		var cfg = GM_getValue('cfg');
  26. 		if (!cfg) return defaults;
  27.  
  28. 		return JSON.parse(cfg);
  29. 	};
  30.  
  31. 	var saveConfig = function(cfg) {
  32. 		GM_setValue('cfg', JSON.stringify(cfg));
  33. 	};
  34.  
  35. 	var setup = function() {
  36. 		var createContainer = function() {
  37. 			var div = document.createElement('div');
  38. 			div.style.backgroundColor = 'white';
  39. 			div.style.padding = '5px';
  40. 			div.style.border = '1px solid black';
  41. 			div.style.position = 'fixed';
  42. 			div.style.top = '0';
  43. 			div.style.right = '0';
  44. 			div.style.zIndex = 99999;
  45. 			return div;
  46. 		};
  47.  
  48. 		var createSelect = function(label, options, value) {
  49. 			var select = document.createElement('select');
  50. 			select.style.margin = '2px';
  51. 			var optgroup = document.createElement('optgroup');
  52. 			if (label) {
  53. 				optgroup.setAttribute('label', label);
  54. 			}
  55. 			select.appendChild(optgroup);
  56. 			options.forEach(function(opt) {
  57. 				var option = document.createElement('option');
  58. 				option.setAttribute('value', opt.value);
  59. 				option.textContent = opt.text;
  60. 				optgroup.appendChild(option);
  61. 			});
  62. 			select.value = value;
  63. 			return select;
  64. 		};
  65.  
  66. 		var createButton = function(text, onclick) {
  67. 			var button = document.createElement('button');
  68. 			button.style.margin = '2px';
  69. 			button.textContent = text;
  70. 			button.onclick = onclick;
  71. 			return button;
  72. 		};
  73.  
  74. 		var createLineBreak = function() {
  75. 			return document.createElement('br');
  76. 		};
  77.  
  78. 		var init = function(cfg) {
  79. 			var div = createContainer();
  80.  
  81. 			var indentMode = createSelect('Indent mode', [
  82. 				{ value: 'space', text: 'Spaces' },
  83. 				{ value: 'tab', text: 'Tabs' }
  84. 			], cfg.indentMode);
  85. 			div.appendChild(indentMode);
  86.  
  87. 			var indentWidth = createSelect('Indent size', [
  88. 				{ value: 2, text: 2 },
  89. 				{ value: 4, text: 4 },
  90. 				{ value: 8, text: 8 }
  91. 			], cfg.indentWidth);
  92. 			div.appendChild(indentWidth);
  93.  
  94. 			var wrapMode = createSelect('Line wrap mode', [
  95. 				{ value: 'off', text: 'No wrap' },
  96. 				{ value: 'on', text: 'Soft wrap' }
  97. 			], cfg.wrapMode);
  98. 			div.appendChild(wrapMode);
  99.  
  100. 			div.appendChild(createLineBreak());
  101.  
  102. 			div.appendChild(createButton('Save', function(e) {
  103. 				var settings = {
  104. 					indentMode: indentMode.value,
  105. 					indentWidth: indentWidth.value,
  106. 					wrapMode: wrapMode.value
  107. 				};
  108. 				saveConfig(settings);
  109. 				div.remove();
  110. 			}));
  111.  
  112. 			div.appendChild(createButton('Cancel', function(e) {
  113. 				div.remove();
  114. 			}));
  115.  
  116. 			document.body.appendChild(div);
  117. 		};
  118. 		init(loadConfig());
  119. 	};
  120.  
  121. 	var updateDropdown = function(dropdown, value) {
  122. 		dropdown.value = value;
  123. 		var evt = document.createEvent('HTMLEvents');
  124. 		evt.initEvent('change', false, true);
  125. 		dropdown.dispatchEvent(evt);
  126. 	};
  127.  
  128. 	var applySettings = function(cfg) {
  129. 		var indentMode = document.querySelector('.js-code-indent-mode');
  130. 		var indentWidth = document.querySelector('.js-code-indent-width');
  131. 		var wrapMode = document.querySelector('.js-code-wrap-mode');
  132.  
  133. 		if (location.href.match(/^https?:\/\/github.com\/[^\/]*\/[^\/]*\/new\/.*/)) {
  134. 			// new file
  135. 			updateDropdown(indentMode, cfg.indentMode);
  136. 			updateDropdown(indentWidth, cfg.indentWidth);
  137. 			updateDropdown(wrapMode, cfg.wrapMode);
  138. 		} else if (location.href.match(/^https?:\/\/github.com\/[^\/]*\/[^\/]*\/edit\/.*/)) {
  139. 			// edit file
  140. 			// if the file is using space indentation we don't want to change it
  141. 			if (indentMode.value === 'tab') {
  142. 				updateDropdown(indentWidth, cfg.indentWidth);
  143. 			}
  144. 			updateDropdown(wrapMode, cfg.wrapMode);
  145. 		}
  146. 	};
  147.  
  148. 	GM_registerMenuCommand('GitHub Editor Settings', setup);
  149. 	var settings = loadConfig();
  150.  
  151. 	waitForElems('.CodeMirror-code', function() {
  152. 		applySettings(settings);
  153. 	});
  154. })();