GitHub Dark Script

GitHub Dark in userscript form, with a settings panel

目前為 2016-04-11 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name GitHub Dark Script
  3. // @version 1.0.8
  4. // @description GitHub Dark in userscript form, with a settings panel
  5. // @namespace https://github.com/StylishThemes
  6. // @include /https?://((gist|guides|help|raw|status|developer)\.)?github\.com((?!generated_pages\/preview).)*$/
  7. // @include /render\.githubusercontent\.com/
  8. // @include /raw\.githubusercontent\.com/
  9. // @grant GM_addStyle
  10. // @grant GM_getValue
  11. // @grant GM_setValue
  12. // @grant GM_info
  13. // @grant GM_xmlhttpRequest
  14. // @connect githubusercontent.com
  15. // @run-at document-start
  16. // @require https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
  17. // @require https://greasyfork.org/scripts/15563-jscolor/code/jscolor.js?version=106439
  18. // ==/UserScript==
  19. /* global jQuery, jscolor */
  20. /* eslint-disable indent, quotes */
  21. (function($) {
  22. 'use strict';
  23.  
  24. var ghd = {
  25.  
  26. version : GM_info.script.version,
  27.  
  28. // delay until package.json allowed to load
  29. delay : 8.64e7, // 24 hours in milliseconds
  30.  
  31. // Keyboard shortcut to open ghd panel (only a two key combo coded)
  32. keyboardOpen : 'g+0',
  33. keyboardToggle : 'g+-',
  34. // keyboard shortcut delay from first to second letter
  35. keyboardDelay : 1000,
  36.  
  37. // base urls to fetch style and package.json
  38. root : 'https://raw.githubusercontent.com/StylishThemes/GitHub-Dark/master/',
  39.  
  40. defaults : {
  41. attach : 'scroll',
  42. color : '#4183C4',
  43. enable : true,
  44. font : 'Menlo',
  45. image : 'url("data:image/png;base64,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")',
  46. tab : 4,
  47. theme : 'Twilight',
  48. type : 'tiled',
  49. wrap : false
  50. },
  51.  
  52. // url gets replaced by css when loaded
  53. themes : {
  54. 'Ambiance' : 'themes/ambiance.min.css',
  55. 'Chaos' : 'themes/chaos.min.css',
  56. 'Clouds Midnight' : 'themes/clouds-midnight.min.css',
  57. 'Cobalt' : 'themes/cobalt.min.css',
  58. 'Idle Fingers' : 'themes/idle-fingers.min.css',
  59. 'Kr Theme' : 'themes/kr-theme.min.css',
  60. 'Merbivore' : 'themes/merbivore.min.css',
  61. 'Merbivore Soft' : 'themes/merbivore-soft.min.css',
  62. 'Mono Industrial' : 'themes/mono-industrial.min.css',
  63. 'Mono Industrial Clear' : 'themes/mono-industrial-clear.min.css',
  64. 'Monokai' : 'themes/monokai.min.css',
  65. 'Obsidian' : 'themes/obsidian.min.css',
  66. 'Pastel on Dark' : 'themes/pastel-on-dark.min.css',
  67. 'Solarized Dark' : 'themes/solarized-dark.min.css',
  68. 'Terminal' : 'themes/terminal.min.css',
  69. 'Tomorrow Night' : 'themes/tomorrow-night.min.css',
  70. 'Tomorrow Night Blue' : 'themes/tomorrow-night-blue.min.css',
  71. 'Tomorrow Night Bright' : 'themes/tomorrow-night-bright.min.css',
  72. 'Tomorrow Night Eigthies' : 'themes/tomorrow-night-eighties.min.css',
  73. 'Twilight' : 'themes/twilight.min.css',
  74. 'Vibrant Ink' : 'themes/vibrant-ink.min.css'
  75. },
  76.  
  77. type : {
  78. 'tiled' : 'background-repeat: repeat !important; background-size: auto !important; background-position: left top !important;',
  79. 'fit' : 'background-repeat: no-repeat !important; background-size: cover !important; background-position: center top !important;'
  80. },
  81.  
  82. wrapCss : {
  83. 'wrapped' : 'white-space: pre-wrap !important; word-break: break-all !important; display: block !important;',
  84. 'unwrap' : 'white-space: pre !important; word-break: normal !important; display: block !important;'
  85. },
  86.  
  87. wrapCodeCss : [
  88. '/* GitHub: Enable wrapping of long code lines */',
  89. ' .blob-code-inner,',
  90. ' .markdown-body pre > code,',
  91. ' .markdown-body .highlight > pre {',
  92. ' white-space: pre-wrap !important;',
  93. ' word-break: break-all !important;',
  94. ' display: block !important;',
  95. ' }',
  96. ' td.blob-code-inner {',
  97. ' display: table-cell !important;',
  98. ' }'
  99. ].join('\n'),
  100.  
  101. wrapIcon : '<div class="ghd-wrap-toggle tooltipped tooltipped-w" aria-label="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="768" height="768" viewBox="0 0 768 768"><path d="M544.5 352.5q52.5 0 90 37.5t37.5 90-37.5 90-90 37.5H480V672l-96-96 96-96v64.5h72q25.5 0 45-19.5t19.5-45-19.5-45-45-19.5H127.5v-63h417zm96-192v63h-513v-63h513zm-513 447v-63h192v63h-192z"/></svg></div>',
  102.  
  103. // extract style & theme name
  104. regex: /\/\*! [^\*]+ \*\//,
  105.  
  106. updatePanel : function() {
  107. // prevent multiple change events from processing
  108. this.isUpdating = true;
  109.  
  110. var color,
  111. data = this.data,
  112. defaults = this.defaults,
  113. $panel = $('#ghd-settings-inner');
  114.  
  115. $panel.find('.ghd-attach').val(data.attach || defaults.attach);
  116. $panel.find('.ghd-font').val(data.font || defaults.font);
  117. $panel.find('.ghd-image').val(data.image || defaults.image);
  118. $panel.find('.ghd-tab').val(data.tab || defaults.tab);
  119. $panel.find('.ghd-theme').val(data.theme || defaults.theme);
  120. $panel.find('.ghd-type').val(data.type || defaults.type);
  121.  
  122. $panel.find('.ghd-enable').prop('checked', typeof data.enable === 'boolean' ? data.enable : defaults.enable);
  123. $panel.find('.ghd-wrap').prop('checked', typeof data.wrap === 'boolean' ? data.wrap : defaults.wrap);
  124.  
  125. color = data.color || defaults.color;
  126. $panel.find('.ghd-color').val(color);
  127. // update swatch color & color picker value
  128. $panel.find('#ghd-swatch').css('background-color', color);
  129.  
  130. if (this.picker) {
  131. this.picker.fromString(color);
  132. }
  133. this.$style.prop('disabled', !data.enable);
  134. $('body')
  135. .toggleClass('ghd-disabled', !data.enable)
  136. .toggleClass('nowrap', !data.wrap);
  137.  
  138. this.isUpdating = false;
  139. },
  140.  
  141. /*
  142. this.data = {
  143. attach : 'scroll',
  144. color : '#4183C4',
  145. enable : true,
  146. font : 'Menlo',
  147. image : 'url()',
  148. tab : 4,
  149. theme : 'Tomorrow Night',
  150. type : 'tiled',
  151. wrap : true, // code: wrap long lines
  152.  
  153. date : 1450159200000, // last loaded package.json
  154. version : '001014032', // v1.14.32 = last stored GitHub-Dark version
  155.  
  156. rawCss : '@-moz-document regexp("^...', // github-dark.css (unprocessed css)
  157. themeCss : '/*! Tomorrow Night * /.ace_editor,.highlight{...', // theme/{name}.min.css
  158. processedCss : '' // css saved directly from this.$style
  159. }
  160. */
  161. getStoredValues : function() {
  162. var defaults = this.defaults;
  163.  
  164. this.data = {
  165. attach : GM_getValue('attach', defaults.attach),
  166. color : GM_getValue('color', defaults.color),
  167. enable : GM_getValue('enable', defaults.enable),
  168. font : GM_getValue('font', defaults.font),
  169. image : GM_getValue('image', defaults.image),
  170. tab : GM_getValue('tab', defaults.tab),
  171. theme : GM_getValue('theme', defaults.theme),
  172. type : GM_getValue('type', defaults.type),
  173. wrap : GM_getValue('wrap', defaults.wrap),
  174.  
  175. date : GM_getValue('date', 0),
  176. version : GM_getValue('version', 0),
  177.  
  178. rawCss : GM_getValue('rawCss', ''),
  179. themeCss : GM_getValue('themeCss', ''),
  180. processedCss : GM_getValue('processedCss', '')
  181. };
  182.  
  183. debug('Retrieved stored values', this.data);
  184. },
  185.  
  186. setStoredValues : function(reset) {
  187. var data = this.data,
  188. defaults = this.defaults;
  189.  
  190. GM_setValue('attach', reset ? defaults.attach : data.attach);
  191. GM_setValue('color', reset ? defaults.color : data.color);
  192. GM_setValue('enable', reset ? defaults.enable : data.enable);
  193. GM_setValue('font', reset ? defaults.font : data.font);
  194. GM_setValue('image', reset ? defaults.image : data.image);
  195. GM_setValue('tab', reset ? defaults.tab : data.tab);
  196. GM_setValue('theme', reset ? defaults.theme : data.theme);
  197. GM_setValue('type', reset ? defaults.type : data.type);
  198. GM_setValue('wrap', reset ? defaults.wrap : data.wrap);
  199.  
  200. GM_setValue('date', reset ? 0 : data.date);
  201. GM_setValue('version', reset ? 0 : data.version);
  202.  
  203. GM_setValue('rawCss', data.rawCss);
  204. GM_setValue('themeCss', data.themeCss);
  205. GM_setValue('processedCss', ghd.$style.text());
  206.  
  207. debug((reset ? 'Resetting' : 'Saving') + ' current values', data);
  208. },
  209.  
  210. // convert version "1.2.3" into "001002003" for easier comparison
  211. convertVersion : function(val) {
  212. var index,
  213. parts = val ? val.split('.') : '',
  214. str = '',
  215. len = parts.length;
  216. for (index = 0; index < len; index++) {
  217. str += ('000' + parts[index]).slice(-3);
  218. }
  219. debug('Converted version "' + val + '" to "' + str + '" for easy comparison');
  220. return val ? str : val;
  221. },
  222.  
  223. checkVersion : function() {
  224. debug('Fetching package.json');
  225. GM_xmlhttpRequest({
  226. method : 'GET',
  227. url : ghd.root + 'package.json',
  228. onload : function(response) {
  229. // store package JSON (not accessed anywhere else, but just in case)
  230. ghd.data.package = JSON.parse(response.responseText);
  231.  
  232. // save last loaded date, so package.json is only loaded once a day
  233. ghd.data.date = new Date().getTime();
  234. GM_setValue('date', ghd.data.date);
  235.  
  236. var version = ghd.convertVersion(ghd.data.package.version);
  237. // if new available, load it & parse
  238. if (version > ghd.data.version) {
  239. if (ghd.data.version !== 0) {
  240. debug('Updating from', ghd.data.version, 'to', version);
  241. }
  242. ghd.data.version = version;
  243. GM_setValue('version', ghd.data.version);
  244. ghd.fetchAndApplyStyle();
  245. } else {
  246. ghd.addSavedStyle();
  247. }
  248. }
  249. });
  250. },
  251.  
  252. fetchAndApplyStyle : function() {
  253. debug('Fetching github-dark.css');
  254. GM_xmlhttpRequest({
  255. method : 'GET',
  256. url : ghd.root + 'github-dark.css',
  257. onload : function(response) {
  258. ghd.data.rawCss = response.responseText;
  259. ghd.applyStyle(ghd.processStyle());
  260. ghd.getTheme();
  261. }
  262. });
  263. },
  264.  
  265. addSavedStyle : function() {
  266. debug('Adding previously saved style');
  267. // apply already processed css to prevent FOUC
  268. this.$style.text(this.data.processedCss);
  269. },
  270.  
  271. // load syntax highlighting theme, if necessary
  272. getTheme : function() {
  273. if (!this.data.enable) {
  274. debug('Disabled: stop theme processing');
  275. return;
  276. }
  277. var name = this.data.theme || 'Twilight';
  278. // test if this.themes contains the url (.min.css), or the actual css
  279. if (/\.min\.css$/.test(this.themes[name])) {
  280. var themeUrl = ghd.root + ghd.themes[name];
  281. debug('Loading "' + name + '" theme', themeUrl);
  282. GM_xmlhttpRequest({
  283. method : 'GET',
  284. url : themeUrl,
  285. onload : function(response) {
  286. var theme = response.responseText;
  287. if (theme) {
  288. ghd.themes[name] = theme;
  289. ghd.data.themeCss = theme;
  290. ghd.processTheme();
  291. } else {
  292. debug('Failed to load theme file', '"' + theme + '"');
  293. }
  294. }
  295. });
  296. } else {
  297. ghd.data.themeCss = ghd.themes[name];
  298. ghd.processTheme();
  299. }
  300. },
  301.  
  302. processStyle : function() {
  303. var data = this.data,
  304. url = /^url/.test(data.image || '') ? data.image :
  305. (data.image === 'none' ? 'none' : 'url("' + data.image + '")');
  306. if (!data.enable) {
  307. debug('Disabled: stop processing');
  308. return;
  309. }
  310. debug('Processing set styles');
  311.  
  312. var ret = (data.rawCss || '')
  313. // remove moz-document wrapper
  314. .replace(/@-moz-document regexp\((.*)\) \{(\n|\r)+/, '')
  315. // replace background image; if no 'url' at start, then use 'none'
  316. .replace(/\/\*\[\[bg-choice\]\]\*\/ url\(.*\)/, url)
  317. // Add tiled or fit window size css
  318. .replace('/*[[bg-options]]*/', this.type[data.type || 'tiled'])
  319. // set scroll or fixed background image
  320. .replace('/*[[bg-attachment]]*/ fixed', data.attach || 'scroll')
  321. // replace base-color
  322. .replace(/\/\*\[\[base-color\]\]\*\/ #\w{3,6}/g, data.color || '#4183C4')
  323. // add font choice
  324. .replace('/*[[font-choice]]*/', data.font || 'Menlo')
  325. // add tab size
  326. .replace(/\/\*\[\[tab-size\]\]\*\/ \d+/g, data.tab || 4)
  327. // code wrap css
  328. .replace('/*[[code-wrap]]*/', data.wrap ? ghd.wrapCodeCss : '')
  329. // remove default syntax
  330. .replace(/\s+\/\* grunt build - remove to end of file(.*(\n|\r))+\}$/m, '');
  331.  
  332. // see https://github.com/StylishThemes/GitHub-Dark/issues/275
  333. if (/firefox/i.test(navigator.userAgent)) {
  334. ret = ret
  335. .replace(/select, input, textarea/, 'select, input:not([type="checkbox"]), textarea')
  336. .replace(/input\[type=\"checkbox\"\][\s\S]+?}/gm, '');
  337. }
  338. return ret;
  339. },
  340.  
  341. // this.data.themeCss should be populated with user selected theme
  342. // called asynchronously from processStyle()
  343. processTheme : function() {
  344. debug('Adding syntax theme to css');
  345. var css = this.$style.text() || '';
  346. // look for /*[[syntax-theme]]*/ label, if it doesn't exist, reprocess raw css
  347. if (!/syntax-theme/.test(css)) {
  348. debug('Need to process raw style before applying theme');
  349. this.applyStyle(this.processStyle());
  350. css = this.$style.text() || '';
  351. }
  352. // add syntax highlighting theme
  353. css = css.replace('/*[[syntax-theme]]*/', this.data.themeCss || '');
  354.  
  355. debug('Applying "' + this.data.theme + '" theme', '"' +
  356. (this.data.themeCss || '').match(this.regex) + '"');
  357.  
  358. this.$style.text(css);
  359. this.setStoredValues();
  360. this.isUpdating = false;
  361. },
  362.  
  363. applyStyle : function(css) {
  364. debug('Applying style', '"' + (css || '').match(this.regex) + '"');
  365. // add to style
  366. this.$style.text(css || '');
  367. this.setStoredValues();
  368. },
  369.  
  370. updateStyle : function() {
  371. this.isUpdating = true;
  372. var $panel = $('#ghd-settings-inner'),
  373. data = this.data;
  374.  
  375. data.attach = $panel.find('.ghd-attach').val();
  376. // get hex value directly
  377. data.color = this.picker.toHEXString();
  378. data.enable = $panel.find('.ghd-enable').is(':checked');
  379. data.font = $panel.find('.ghd-font').val();
  380. data.image = $panel.find('.ghd-image').val();
  381. data.tab = $panel.find('.ghd-tab').val();
  382. data.theme = $panel.find('.ghd-theme').val();
  383. data.type = $panel.find('.ghd-type').val();
  384. data.wrap = $panel.find('.ghd-wrap').is(':checked');
  385.  
  386. debug('Updating user settings', data);
  387.  
  388. this.$style.prop('disabled', !data.enable);
  389. $('body')
  390. .toggleClass('ghd-disabled', !data.enable)
  391. .toggleClass('nowrap', !data.wrap);
  392.  
  393. this.applyStyle(this.processStyle());
  394. this.getTheme();
  395. this.isUpdating = false;
  396. },
  397.  
  398. // user can force GitHub-dark update
  399. forceUpdate : function(css) {
  400. if (css) {
  401. // add raw css directly for style testing
  402. ghd.data.rawCss = css;
  403. ghd.applyStyle(ghd.processStyle());
  404. ghd.getTheme();
  405. } else {
  406. // clear saved date
  407. GM_setValue('version', 0);
  408. document.location.reload();
  409. }
  410. },
  411.  
  412. buildSettings : function() {
  413. debug('Adding settings panel & GitHub Dark link to profile dropdown');
  414. // Script-specific CSS
  415. GM_addStyle([
  416. '#ghd-menu:hover { cursor:pointer }',
  417. '#ghd-settings { position:fixed; z-index: 65535; top:0; bottom:0; left:0; right:0; opacity:0; visibility:hidden; }',
  418. '#ghd-settings.in { opacity:1; visibility:visible; background:rgba(0,0,0,.5); }',
  419. '#ghd-settings-inner { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:25rem; box-shadow: 0 .5rem 1rem #111; color:#c0c0c0 }',
  420. '#ghd-settings label { margin-left:.5rem; position:relative; top:-1px }',
  421. '#ghd-settings-close { height: 1rem; width: 1rem; fill: #666; float:right; cursor:pointer }',
  422. '#ghd-settings-close:hover { fill: #ccc }',
  423. '#ghd-settings .ghd-right { float: right; padding:5px; }',
  424. '#ghd-settings p { line-height: 25px; }',
  425. '#ghd-swatch { width:25px; height:25px; display:inline-block; margin:3px 10px; border-radius:4px; }',
  426. '#ghd-settings .checkbox input { margin-top: .35em }',
  427. '#ghd-settings input[type="checkbox"] { width: 16px !important; height: 16px !important; border-radius: 3px !important; }',
  428. '#ghd-settings .boxed-group-inner { padding: 0; }',
  429. '#ghd-settings .ghd-footer { padding: 10px; border-top: #555 solid 1px; }',
  430. '#ghd-settings .ghd-settings-wrapper { max-height: 60vh; overflow-y:auto; padding: 1px 10px; }',
  431. '#ghd-settings .ghd-tab { width: 5em; }',
  432. '#ghd-settings .ghd-info, .ghd-file-toggle svg { vertical-align: middle !important; }',
  433. '#ghd-settings .paste-area { position:absolute; bottom:50px; top:37px; left:2px; right:2px; width:396px; z-index:0; }',
  434.  
  435. // code wrap toggle: https://gist.github.com/silverwind/6c1701f56e62204cc42b
  436. // icons next to a pre
  437. '.ghd-wrap-toggle { position:absolute; right:1.4em; margin-top:.2em; -moz-user-select:none; -webkit-user-select:none; cursor:pointer; z-index:20; }',
  438. // file & diff code tables
  439. '.ghd-wrap-table td.blob-code-inner { white-space: pre-wrap !important; word-break: break-all !important; }',
  440. '.ghd-unwrap-table td.blob-code-inner { white-space: pre !important; word-break: normal !important; }',
  441. // icons inside a wrapper immediatly around a pre
  442. '.highlight > .ghd-wrap-toggle { right:.5em; top:.5em; margin-top:0; }',
  443. // icons for non-syntax highlighted code blocks; see https://github.com/gjtorikian/html-proofer/blob/master/README.md
  444. '.markdown-body:not(.comment-body) .ghd-wrap-toggle:not(:first-child) { right: 3.4em; }',
  445. '.ghd-wrap-toggle svg { height:1.25em; width:1.25em; fill:rgba(110,110,110,.4); }',
  446. '.ghd-wrap-toggle.unwrap:hover svg, .ghd-wrap-toggle:hover svg { fill:#8b0000; }', // wrap disabled (red)
  447. 'body:not(.nowrap) .ghd-wrap-toggle:not(.unwrap):hover svg, .ghd-wrap-toggle.wrapped:hover svg { fill:#006400; }', // wrap enabled (green)
  448. '.blob-wrapper, .markdown-body pre, .markdown-body .highlight { position:relative; }',
  449. // hide wrap icon when style disabled
  450. 'body.ghd-disabled .ghd-wrap-toggle, .ghd-collapsed-file, .file.open .data.ghd-collapsed-file { display: none; }',
  451. // monospace font toggle
  452. '.ghd-monospace-font { font-family: Menlo, Inconsolata, "Droid Mono", monospace !important; font-size: 1em !important; }',
  453. // file collapsed icon
  454. '.ghd-file-collapsed svg { -webkit-transform:rotate(90deg); transform:rotate(90deg); }'
  455. ].join(''));
  456.  
  457. var version = [],
  458. themes = '<select class="ghd-theme ghd-right">',
  459. // convert stored css version from "001014049" into "1.14.49" for tooltip
  460. parts = String(this.data.version).match(/\d{3}/g);
  461. $.each(this.themes, function(opt) {
  462. themes += '<option value="' + opt + '">' + opt + '</option>';
  463. });
  464. if (parts && parts.length) {
  465. $.each(parts, function(_i, v) {
  466. version.push(parseInt(v));
  467. });
  468. }
  469.  
  470. // Settings panel markup
  471. $('body').append([
  472. '<div id="ghd-settings">',
  473. '<div id="ghd-settings-inner" class="boxed-group">',
  474. '<h3>GitHub-Dark Settings',
  475. '<svg id="ghd-settings-close" xmlns="http://www.w3.org/2000/svg" width="768" height="768" viewBox="160 160 608 608"><path d="M686.2 286.8L507.7 465.3l178.5 178.5-45 45-178.5-178.5-178.5 178.5-45-45 178.5-178.5-178.5-178.5 45-45 178.5 178.5 178.5-178.5z"/></svg>',
  476. '</h3>',
  477. '<div class="boxed-group-inner">',
  478. '<form>',
  479. '<div class="ghd-settings-wrapper">',
  480. '<p class="checkbox">',
  481. '<label>Enable GitHub-Dark<input class="ghd-enable ghd-right" type="checkbox"></label>',
  482. '</p>',
  483. '<p>',
  484. '<label>Color:</label> <input class="ghd-color ghd-right" type="text" value="#4183C4">',
  485. '<span id="ghd-swatch" class="ghd-right"></span>',
  486. '</p>',
  487. '<h4>Background</h4>',
  488. '<p>',
  489. '<label>Image:</label> <input class="ghd-image ghd-right" type="text">',
  490. '<a href="https://github.com/StylishThemes/GitHub-Dark/wiki/Image" class="tooltipped tooltipped-e" aria-label="Click to learn about GitHub\'s Content Security&#10;Policy and how to add a custom image"><sup>?</sup></a>',
  491. '</p>',
  492. '<p>',
  493. '<label>Image type:</label>',
  494. '<select class="ghd-type ghd-right">',
  495. '<option value="tiled">Tiled</option>',
  496. '<option value="fit">Fit window</option>',
  497. '</select>',
  498. '</p>',
  499. '<p>',
  500. '<label>Image attachment:</label>',
  501. '<select class="ghd-attach ghd-right">',
  502. '<option value="scroll">Scroll</option>',
  503. '<option value="fixed">Fixed</option>',
  504. '</select>',
  505. '</p>',
  506. '<h4>Code</h4>',
  507. '<p><label>Theme:</label> ' + themes + '</select></p>',
  508. '<p>',
  509. '<label>Font Name:</label> <input class="ghd-font ghd-right" type="text">',
  510. '<a href="http://www.cssfontstack.com/" class="tooltipped tooltipped-e" aria-label="Add a system installed (monospaced) font name;&#10;this script will not load external fonts!"><sup>?</sup></a>',
  511. '</p>',
  512. '<p>',
  513. '<label>Tab Size:</label> <input class="ghd-tab ghd-right" type="text">',
  514. '</p>',
  515. '<p class="checkbox">',
  516. '<label>Wrap<input class="ghd-wrap ghd-right" type="checkbox"></label>',
  517. '</p>',
  518. '</div>',
  519. '<div class="ghd-footer">',
  520. '<div class="btn-group">',
  521. '<a href="#" class="ghd-update btn btn-sm tooltipped tooltipped-n tooltipped-multiline" aria-label="Update style if the newest release is not loading; the page will reload!">Force Update Style</a>',
  522. '<a href="#" class="ghd-textarea-toggle btn btn-sm tooltipped tooltipped-n" aria-label="Paste CSS update">',
  523. '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewbox="0 0 16 16" fill="#eee">',
  524. '<path d="M15 11 1 11 8 3z"/>',
  525. '</svg>',
  526. '</a>',
  527. '<div class="paste-area-content" aria-hidden="true" style="display:none">',
  528. '<textarea class="paste-area" placeholder="Paste GitHub-Dark Style here!"></textarea>',
  529. '</div>',
  530. '</div>&nbsp;',
  531. '<a href="#" class="ghd-reset btn btn-sm btn-danger tooltipped tooltipped-n" aria-label="Reset to defaults;&#10;there is no undo!">Reset All Settings</a>',
  532. '<span class="ghd-right tooltipped tooltipped-n" aria-label="Script v' + this.version + '&#10;CSS ' + (version.length ? 'v' + version.join('.') : 'unknown') + '">',
  533. '<svg class="ghd-info" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24">',
  534. '<path fill="#444" d="M12,9c0.82,0,1.5-0.68,1.5-1.5S12.82,6,12,6s-1.5,0.68-1.5,1.5S11.18,9,12,9z M12,1.5 C6.211,1.5,1.5,6.211,1.5,12S6.211,22.5,12,22.5S22.5,17.789,22.5,12S17.789,1.5,12,1.5z M12,19.5c-4.148,0-7.5-3.352-7.5-7.5 S7.852,4.5,12,4.5s7.5,3.352,7.5,7.5S16.148,19.5,12,19.5z M13.5,12c0-0.75-0.75-1.5-1.5-1.5s-0.75,0-1.5,0S9,11.25,9,12h1.5 c0,0,0,3.75,0,4.5S11.25,18,12,18s0.75,0,1.5,0s1.5-0.75,1.5-1.5h-1.5C13.5,16.5,13.5,12.75,13.5,12z"/>',
  535. '</svg>',
  536. '</span>',
  537. '</div>',
  538. '</form>',
  539. '</div>',
  540. '</div>',
  541. '</div>',
  542. ].join(''));
  543.  
  544. ghd.updateToggles();
  545. },
  546.  
  547. // Add code wrap toggle
  548. buildCodeWrap : function() {
  549. // mutation events happen quick, so we still add an update flag
  550. this.isUpdating = true;
  551. // add wrap code icons
  552. $('.blob-wrapper').prepend(this.wrapIcon);
  553. $('.markdown-body pre').before(this.wrapIcon);
  554. this.isUpdating = false;
  555. },
  556.  
  557. // Add monospace font toggle
  558. addMonospaceToggle : function() {
  559. this.isUpdating = true;
  560. var indx, $el,
  561. $toolbars = $('.toolbar-commenting'),
  562. len = $toolbars.length;
  563. for (indx = 0; indx < len; indx++) {
  564. $el = $toolbars.eq(indx);
  565. if (!$el.find('.ghd-monospace').length) {
  566. $el.prepend([
  567. '<button type="button" class="ghd-monospace toolbar-item tooltipped tooltipped-n" aria-label="Toggle monospaced font" tabindex="-1">',
  568. '<svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 32 32">',
  569. '<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"/>',
  570. '</svg>',
  571. '</button>'
  572. ].join(''));
  573. }
  574. }
  575. this.isUpdating = false;
  576. },
  577.  
  578. // Add file diffs toggle
  579. addFileToggle : function() {
  580. this.updating = true;
  581. var indx, $el,
  582. $files = $('#files .file-actions'),
  583. len = $files.length;
  584. for (indx = 0; indx < len; indx++) {
  585. $el = $files.eq(indx);
  586. if (!$el.find('.ghd-file-toggle').length) {
  587. $el.append([
  588. '<button type="button" class="ghd-file-toggle btn btn-sm tooltipped tooltipped-n" aria-label="Click to Expand or Collapse file" tabindex="-1">',
  589. '<svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="10" height="6.5" viewBox="0 0 10 6.5">',
  590. '<path d="M0 1.497L1.504 0l3.49 3.76L8.505.016 10 1.52 4.988 6.51 0 1.496z"/>',
  591. '</svg>',
  592. '</button>'
  593. ].join(''));
  594. }
  595. }
  596. this.updating = false;
  597. },
  598.  
  599. // Add toggle buttons after page updates
  600. updateToggles : function() {
  601. ghd.buildCodeWrap();
  602. ghd.addMonospaceToggle();
  603. ghd.addFileToggle();
  604. },
  605.  
  606. // add keyboard shortcut to help menu (press "?")
  607. buildShortcut : function() {
  608. var openPanel = this.keyboardOpen.split('+'),
  609. toggleStyle = this.keyboardToggle.split('+');
  610. if (!$('.ghd-shortcut').length) {
  611. $('.keyboard-mappings:eq(0) tbody:eq(0)').append([
  612. '<tr class="ghd-shortcut">',
  613. '<td class="keys">',
  614. '<kbd>' + openPanel[0] + '</kbd> <kbd>' + openPanel[1] + '</kbd>',
  615. '</td>',
  616. '<td>GitHub-Dark: open settings</td>',
  617. '</tr>',
  618. '<tr class="ghd-shortcut">',
  619. '<td class="keys">',
  620. '<kbd>' + toggleStyle[0] + '</kbd> <kbd>' + toggleStyle[1] + '</kbd>',
  621. '</td>',
  622. '<td>GitHub-Dark: toggle style</td>',
  623. '</tr>'
  624. ].join(''));
  625. }
  626. },
  627.  
  628. bindEvents : function() {
  629. var menu, lastKey,
  630. $panel = $('#ghd-settings-inner'),
  631. $swatch = $panel.find('#ghd-swatch');
  632.  
  633. // finish initialization
  634. $('#ghd-settings-inner .ghd-enable')[0].checked = this.data.enable;
  635. $('body').toggleClass('ghd-disabled', !this.data.enable);
  636.  
  637. // Create our menu entry
  638. menu = $('<a id="ghd-menu" class="dropdown-item">GitHub Dark Settings</a>');
  639. $('.header .dropdown-item[href="/settings/profile"], .header .dropdown-item[data-ga-click*="go to profile"]')
  640. // gists only have the "go to profile" item; GitHub has both
  641. .filter(':last')
  642. .after(menu);
  643.  
  644. $('#ghd-menu').on('click', function() {
  645. ghd.openPanel();
  646. });
  647.  
  648. // not sure what GitHub uses, so rolling our own
  649. $(document).on('keypress keydown', function(e) {
  650. clearTimeout(ghd.timer);
  651. // use "g+o" to open up ghd options panel
  652. var openPanel = ghd.keyboardOpen.split('+'),
  653. toggleStyle = ghd.keyboardToggle.split('+'),
  654. key = String.fromCharCode(e.which).toLowerCase(),
  655. panelVisible = $('#ghd-settings').hasClass('in');
  656.  
  657. // press escape to close the panel
  658. if (e.which === 27 && panelVisible) {
  659. ghd.closePanel();
  660. return;
  661. }
  662. // use e.which from keypress for shortcuts
  663. // prevent opening panel while typing "go" in comments
  664. if (e.type === 'keydown' || /(input|textarea)/i.test(document.activeElement.nodeName)) {
  665. return;
  666. }
  667. if (lastKey === openPanel[0] && key === openPanel[1]) {
  668. if (panelVisible) {
  669. ghd.closePanel();
  670. } else {
  671. ghd.openPanel();
  672. }
  673. }
  674. if (lastKey === toggleStyle[0] && key === toggleStyle[1]) {
  675. ghd.toggleStyle();
  676. }
  677. lastKey = key;
  678. ghd.timer = setTimeout(function() {
  679. lastKey = null;
  680. }, ghd.keyboardDelay);
  681.  
  682. // add shortcut to help menu
  683. if (key === '?') {
  684. // table doesn't exist until user presses "?"
  685. setTimeout(function() {
  686. ghd.buildShortcut();
  687. }, 300);
  688. }
  689. });
  690.  
  691. // add ghd-settings panel bindings
  692. $('#ghd-settings, #ghd-settings-close').on('click keyup', function(e) {
  693. // press escape to close settings
  694. if (e.type === 'keyup' && e.which !== 27) {
  695. return;
  696. }
  697. ghd.closePanel();
  698. });
  699.  
  700. $panel.on('click', function(e) {
  701. e.stopPropagation();
  702. });
  703.  
  704. $panel.find('.ghd-reset').on('click', function() {
  705. ghd.isUpdating = true;
  706. // pass true to reset values
  707. ghd.setStoredValues(true);
  708. // add reset values back to this.data
  709. ghd.getStoredValues();
  710. // add reset values to panel
  711. ghd.updatePanel();
  712. // update style
  713. ghd.updateStyle();
  714. return false;
  715. });
  716.  
  717. $panel.find('input[type="text"]').on('focus', function() {
  718. // select all text when focused
  719. this.select();
  720. });
  721.  
  722. $panel.find('select, input').on('change', function() {
  723. if (!ghd.isUpdating) {
  724. ghd.updateStyle();
  725. }
  726. });
  727.  
  728. $panel.find('.ghd-update').on('click', function() {
  729. ghd.forceUpdate();
  730. return false;
  731. });
  732.  
  733. $panel.find('.ghd-textarea-toggle').on('click', function() {
  734. var $this = $(this),
  735. $dropdown = $this
  736. .removeClass('selected')
  737. .next('.paste-area-content')
  738. .toggle();
  739. if ($dropdown.is(':visible')) {
  740. $this.addClass('selected');
  741. $dropdown
  742. .find('textarea')
  743. .focus()
  744. .select();
  745. }
  746. return false;
  747. });
  748.  
  749. $panel.find('.paste-area-content').on('paste', function(e) {
  750. var $toggle = $panel.find('.ghd-textarea-toggle');
  751. var $textarea = $(e.target);
  752. setTimeout(function() {
  753. $textarea.parent().hide();
  754. $toggle.removeClass('selected');
  755. ghd.forceUpdate($textarea.val());
  756. }, 200);
  757. });
  758.  
  759. // **** CODE WRAP TOGGLE ****
  760. $('body').on('click', '.ghd-wrap-toggle', function() {
  761. var css,
  762. overallWrap = ghd.data.wrap,
  763. $this = $(this),
  764. $code = $this.next('code, pre, .highlight, .diff-table');
  765. if ($code.find('code').length) {
  766. $code = $code.find('code');
  767. }
  768. if (!$code.length) {
  769. debug('Code wrap icon associated code not found', $this);
  770. return;
  771. }
  772. // code with line numbers
  773. if ($code[0].nodeName === 'TABLE') {
  774. if ($code[0].className.indexOf('ghd-') < 0) {
  775. css = !overallWrap;
  776. } else {
  777. css = $code.hasClass('ghd-unwrap-table');
  778. }
  779. $code
  780. .toggleClass('ghd-wrap-table', css)
  781. .toggleClass('ghd-unwrap-table', !css);
  782. $this
  783. .toggleClass('wrapped', css)
  784. .toggleClass('unwrap', !css);
  785. } else {
  786. css = $code.attr('style') || '';
  787. if (css === '') {
  788. css = ghd.wrapCss[overallWrap ? 'unwrap' : 'wrapped'];
  789. } else {
  790. css = ghd.wrapCss[css === ghd.wrapCss.wrapped ? 'unwrap' : 'wrapped'];
  791. }
  792. $code.attr('style', css);
  793. $this
  794. .toggleClass('wrapped', css === ghd.wrapCss.wrapped)
  795. .toggleClass('unwrap', css === ghd.wrapCss.unwrap);
  796. }
  797. });
  798.  
  799. // **** MONOSPACE FONT TOGGLE ****
  800. $('body').on('click', '.ghd-monospace', function(e) {
  801. e.stopPropagation();
  802. var $this = $(this),
  803. $textarea = $this
  804. // each comment
  805. .closest('.previewable-comment-form')
  806. .find('.comment-form-textarea')
  807. .toggleClass('ghd-monospace-font')
  808. .focus();
  809. $this.toggleClass('ghd-icon-active', $textarea.hasClass('ghd-monospace-font'));
  810. return false;
  811. });
  812.  
  813. // **** CODE DIFF COLLAPSE TOGGLE ****
  814. $('body').on('click', '.ghd-file-toggle', function(e) {
  815. e.stopPropagation();
  816. ghd.updating = true;
  817. $(this)
  818. .toggleClass('ghd-file-collapsed')
  819. .closest('.file-header')
  820. // toggle view of file or image; "image" class added to "Diff suppressed..."
  821. .nextAll('.blob-wrapper, .render-wrapper, .image, .rich-diff')
  822. .toggleClass('ghd-collapsed-file');
  823. // shift+click toggle all files!
  824. if (e.shiftKey) {
  825. var indx,
  826. isCollapsed = $(this).hasClass('ghd-file-collapsed'),
  827. $toggles = $('.ghd-file-toggle').not(this),
  828. len = $toggles.length;
  829. for (indx = 0; indx < len; indx++) {
  830. $toggles.eq(indx)
  831. .toggleClass('ghd-file-collapsed', isCollapsed)
  832. .closest('.file-header')
  833. .next('.blob-wrapper, .render-wrapper, .image, .rich-diff')
  834. .toggleClass('ghd-collapsed-file', isCollapsed);
  835. }
  836. }
  837. ghd.updating = false;
  838. });
  839.  
  840. // style color picker
  841. this.picker = new jscolor($panel.find('.ghd-color')[0]);
  842. this.picker.zIndex = 65536;
  843. this.picker.hash = true;
  844. this.picker.backgroundColor = '#333';
  845. this.picker.padding = 0;
  846. this.picker.borderWidth = 0;
  847. this.picker.borderColor = '#444';
  848. this.picker.onFineChange = function() {
  849. $swatch[0].style.backgroundColor = '#' + ghd.picker;
  850. };
  851. },
  852.  
  853. openPanel : function() {
  854. $('.modal-backdrop').click();
  855. ghd.updatePanel();
  856. $('#ghd-settings').addClass('in');
  857. },
  858.  
  859. closePanel : function() {
  860. $('#ghd-settings').removeClass('in');
  861. ghd.picker.hide();
  862.  
  863. // apply changes when the panel is closed
  864. ghd.updateStyle();
  865. },
  866.  
  867. toggleStyle : function() {
  868. var isEnabled = !this.data.enable;
  869. this.data.enable = isEnabled;
  870. $('#ghd-settings-inner .ghd-enable').prop('checked', isEnabled);
  871. // add processedCss back into style (emptied when disabled)
  872. if (isEnabled) {
  873. this.addSavedStyle();
  874. }
  875. this.$style.prop('disabled', !isEnabled);
  876. },
  877.  
  878. init : function() {
  879. debug('GitHub-Dark Script initializing!');
  880.  
  881. // add style tag to head
  882. ghd.$style = $('<style class="ghd-style">').appendTo('head');
  883.  
  884. this.getStoredValues();
  885. // save stored theme stored themes
  886. if (this.data.themeCss) {
  887. this.themes[this.data.theme] = this.data.themeCss;
  888. }
  889.  
  890. this.$style.prop('disabled', !this.data.enable);
  891.  
  892. // only load package.json once a day, or after a forced update
  893. if ((new Date().getTime() > this.data.date + this.delay) || this.data.version === 0) {
  894. // get package.json from GitHub-Dark & compare versions
  895. // load new script if a newer one is available
  896. this.checkVersion();
  897. } else {
  898. this.addSavedStyle();
  899. }
  900. }
  901. };
  902.  
  903. // add style at document-start
  904. ghd.init();
  905.  
  906. $(function() {
  907. // add panel even if you're not logged in - open panel using keyboard shortcut
  908. ghd.buildSettings();
  909. // add event binding on document ready
  910. ghd.bindEvents();
  911.  
  912. var targets = document.querySelectorAll('#js-repo-pjax-container, #js-pjax-container, .js-contribution-activity');
  913.  
  914. Array.prototype.forEach.call(targets, function(target) {
  915. new MutationObserver(function(mutations) {
  916. mutations.forEach(function(mutation) {
  917. // preform checks before adding code wrap to minimize function calls
  918. if (!(ghd.isUpdating || document.querySelectorAll('.ghd-wrap-toggle').length) && mutation.target === target) {
  919. ghd.updateToggles();
  920. }
  921. });
  922. }).observe(target, {
  923. childList: true,
  924. subtree: true
  925. });
  926. });
  927. });
  928.  
  929. // include a "?debug" anywhere in the browser URL to enable debugging
  930. function debug() {
  931. if (/\?debug/.test(window.location.href)) {
  932. console.log.apply(console, arguments);
  933. }
  934. }
  935. })(jQuery.noConflict(true));