☰

Greasy Fork is available in English.

GitHub Dark Script

GitHub Dark in userscript form, with a settings panel

As of 31.12.2015. See ბოლო ვერსია.

  1. // ==UserScript==
  2. // @name         GitHub Dark Script
  3. // @version      0.8.4
  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_xmlhttpRequest
  13. // @run-at       document-start
  14. // @require      https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
  15. // @require      https://greatest.deepsurf.us/scripts/15563-jscolor/code/jscolor.js?version=97027
  16. // ==/UserScript==
  17. /* global jQuery, GM_addStyle, GM_getValue, GM_setValue, GM_xmlhttpRequest, jscolor, unsafeWindow */
  18. /* eslint-disable indent, quotes */
  19. (function(unsafeWindow, $) {
  20.   'use strict';
  21.  
  22.   var ghd = {
  23.  
  24.     // delay until package.json allowed to load
  25.     delay : 8.64e7, // 24 hours in milliseconds
  26.  
  27.     // Keyboard shortcut to open ghd panel (only a two key combo coded)
  28.     keyboardShortcut : 'g+0',
  29.     // keyboard shortcut delay from first to second letter
  30.     keyboardDelay : 1000,
  31.  
  32.     // base urls to fetch style and package.json
  33.     root : 'https://raw.githubusercontent.com/StylishThemes/GitHub-Dark/master/',
  34.  
  35.     defaults : {
  36.       attach : 'scroll',
  37.       color  : '#4183C4',
  38.       enable : true,
  39.       font   : 'Menlo',
  40.       image  : 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAAB20lEQVRIx4XWuZXDMAwE0C0SAQtggIIYoAAEU+aKOHhYojTrYP2+QfOW/5QIJOih/q8HwF/pb3EX+UPIveYcQGgEHiu9hI+ihEc5Jz5KBIlRRRaJ1JtoSAl5Hw96hLB1/up1tnIXOck5jZQy+3iU2hAOKSH1JvwxHsp+5TLF5MOl1/MQXsVs1miXc+KDbYydyMeUgpPQreZ7fWidbNhkXNJSeAhc6qHmHD8AYovunYyEACWEbyIhNeB9fRrH3hFi0bGPLuEW7xCNaohw1vAlS805nfsrTspclB/hVdoqusg53eH7FWot+wjYpOViX8KbFFKTwlnzvj65P9H/vD0/hibYBGhPwlPO8TmxRsaxsNnrUmUXpNhirlJMPr6Hqq9k5Xn/8iYQHYIuQsWFC6Z87IOxLxHphSY4SpuiU87xJnJr5axfeRd+lnMExXpEWPpuZ1v7qZdNBOjiHzDREHX5fs5Zz9p6X0vVKbKKchlSl5rv+3p//FJ/PYvoKryI8vs+2G9lzRmnEKkh+BU8yDk515jDj/HAswu7CCz6U/Mxb/PnC9N41ndpU4hUU7JGk/C9PmP/M2xZYdvBW2PObyf1IUiIzoHmHW9yTncliYs9A9tVNppdShfgQaTLMf+j3X723tLeHgAAAABJRU5ErkJggg==")',
  41.       tab    : 4,
  42.       theme  : 'Twilight',
  43.       type   : 'tiled',
  44.       wrap   : true
  45.     },
  46.  
  47.     // url gets replaced by css when loaded
  48.     themes : {
  49.       'Ambiance' : 'themes/ambiance.min.css',
  50.       'Chaos' : 'themes/chaos.min.css',
  51.       'Clouds Midnight' : 'themes/clouds-midnight.min.css',
  52.       'Cobalt' : 'themes/cobalt.min.css',
  53.       'Idle Fingers' : 'themes/idle-fingers.min.css',
  54.       'Kr Theme' : 'themes/kr-theme.min.css',
  55.       'Merbivore' : 'themes/merbivore.min.css',
  56.       'Merbivore Soft' : 'themes/merbivore-soft.min.css',
  57.       'Mono Industrial' : 'themes/mono-industrial.min.css',
  58.       'Mono Industrial Clear' : 'themes/mono-industrial-clear.min.css',
  59.       'Monokai' : 'themes/monokai.min.css',
  60.       'Pastel on Dark' : 'themes/pastel-on-dark.min.css',
  61.       'Solarized Dark' : 'themes/solarized-dark.min.css',
  62.       'Terminal' : 'themes/terminal.min.css',
  63.       'Tomorrow Night' : 'themes/tomorrow-night.min.css',
  64.       'Tomorrow Night Blue' : 'themes/tomorrow-night-blue.min.css',
  65.       'Tomorrow Night Bright' : 'themes/tomorrow-night-bright.min.css',
  66.       'Tomorrow Night Eigthies' : 'themes/tomorrow-night-eighties.min.css',
  67.       'Twilight' : 'themes/twilight.min.css',
  68.       'Vibrant Ink' : 'themes/vibrant-ink.min.css'
  69.     },
  70.  
  71.     type : {
  72.       'tiled' : 'background-repeat: repeat !important; background-size: auto !important; background-position: left top !important;',
  73.       'fit'   : 'background-repeat: no-repeat !important; background-size: cover !important; background-position: center top !important;'
  74.     },
  75.  
  76.     wrapCss : {
  77.       'wrapped' : 'white-space: pre-wrap !important; word-break: break-all !important; display: block !important;',
  78.       'unwrap'  : 'white-space: pre !important; word-break: normal !important; display: block !important;'
  79.     },
  80.  
  81.     wrapIcon : '<div class="ghd-wrap-toggle tooltipped tooltipped-n" 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>',
  82.  
  83.     // extract style & theme name
  84.     regex: /\/\*! [^\*]+ \*\//,
  85.  
  86.     updatePanel : function() {
  87.       // prevent multiple change events from processing
  88.       this.isUpdating = true;
  89.  
  90.       var color,
  91.         data = this.data,
  92.         defaults = this.defaults,
  93.         $panel = $('#ghd-settings-inner');
  94.  
  95.       $panel.find('.ghd-attach').val(data.attach || defaults.attach);
  96.       $panel.find('.ghd-font').val(data.font || defaults.font);
  97.       $panel.find('.ghd-image').val(data.image || defaults.image);
  98.       $panel.find('.ghd-tab').val(data.tab || defaults.tab);
  99.       $panel.find('.ghd-theme').val(data.theme || defaults.theme);
  100.       $panel.find('.ghd-type').val(data.type || defaults.type);
  101.  
  102.       $panel.find('.ghd-enable').prop('checked', typeof data.enable === 'boolean' ? data.enable : defaults.enable);
  103.       $panel.find('.ghd-wrap').prop('checked', typeof data.wrap === 'boolean' ? data.wrap : defaults.wrap);
  104.  
  105.       color = data.color || defaults.color;
  106.       $panel.find('.ghd-color').val(color);
  107.       // update swatch color & color picker value
  108.       $panel.find('#ghd-swatch').css('background-color', color);
  109.  
  110.       if (this.picker) {
  111.         this.picker.fromString(color);
  112.       }
  113.       this.$style.prop('disabled', !data.enable);
  114.       $('body')
  115.         .toggleClass('ghd-disabled', !data.enable)
  116.         .toggleClass('nowrap', !data.wrap);
  117.  
  118.       this.isUpdating = false;
  119.     },
  120.  
  121.     /*
  122.     this.data = {
  123.       attach  : 'scroll',
  124.       color   : '#4183C4',
  125.       enable  : true,
  126.       font    : 'Menlo',
  127.       image   : 'url()',
  128.       tab     : 4,
  129.       theme   : 'Tomorrow Night',
  130.       type    : 'tiled',
  131.       wrap    : true, // code: wrap long lines
  132.  
  133.       date    : 1450159200000, // last loaded package.json
  134.       version : '001014032', // v1.14.32 = last stored GitHub-Dark version
  135.  
  136.       rawCss       : '@-moz-document regexp("^...', // github-dark.css (unprocessed css)
  137.       themeCss     : '/*! Tomorrow Night * /.ace_editor,.highlight{...', // theme/{name}.min.css
  138.       processedCss : '' // css saved directly from this.$style
  139.     }
  140.     */
  141.     getStoredValues : function() {
  142.       var $panel = $('#ghd-settings-inner'),
  143.       defaults = this.defaults,
  144.  
  145.       data = this.data = {
  146.         attach  : GM_getValue('attach', defaults.attach),
  147.         color   : GM_getValue('color', defaults.color),
  148.         enable  : GM_getValue('enable', defaults.enable),
  149.         font    : GM_getValue('font', defaults.font),
  150.         image   : GM_getValue('image', defaults.image),
  151.         tab     : GM_getValue('tab', defaults.tab),
  152.         theme   : GM_getValue('theme', defaults.theme),
  153.         type    : GM_getValue('type', defaults.type),
  154.         wrap    : GM_getValue('wrap', defaults.wrap),
  155.  
  156.         date    : GM_getValue('date', 0),
  157.         version : GM_getValue('version', 0),
  158.  
  159.         rawCss       : GM_getValue('rawCss', ''),
  160.         themeCss     : GM_getValue('themeCss', ''),
  161.         processedCss : GM_getValue('processedCss', '')
  162.       };
  163.  
  164.       debug('Retrieved stored values', this.data);
  165.  
  166.     },
  167.  
  168.     setStoredValues : function(reset) {
  169.       var data = this.data,
  170.         defaults = this.defaults;
  171.  
  172.       GM_setValue('attach', reset ? defaults.attach : data.attach);
  173.       GM_setValue('color',  reset ? defaults.color  : data.color);
  174.       GM_setValue('enable', reset ? defaults.enable : data.enable);
  175.       GM_setValue('font',   reset ? defaults.font   : data.font);
  176.       GM_setValue('image',  reset ? defaults.image  : data.image);
  177.       GM_setValue('tab',    reset ? defaults.tab    : data.tab);
  178.       GM_setValue('theme',  reset ? defaults.theme  : data.theme);
  179.       GM_setValue('type',   reset ? defaults.type   : data.type);
  180.       GM_setValue('wrap',   reset ? defaults.wrap   : data.wrap);
  181.  
  182.       GM_setValue('date',    reset ? 0 : data.date);
  183.       GM_setValue('version', reset ? 0 : data.version);
  184.  
  185.       GM_setValue('rawCss', data.rawCss);
  186.       GM_setValue('themeCss', data.themeCss);
  187.       GM_setValue('processedCss', ghd.$style.text());
  188.  
  189.       debug((reset ? 'Resetting' : 'Saving') + ' current values', data);
  190.     },
  191.  
  192.     // convert version "1.2.3" into "001002003" for easier comparison
  193.     convertVersion : function(val) {
  194.       var index,
  195.       parts = val ? val.split('.') : '',
  196.       str = '',
  197.       len = parts.length;
  198.       for (index = 0; index < len; index++) {
  199.         str += ('000' + parts[index]).slice(-3);
  200.       }
  201.       debug('Converted version "' + val + '" to "' + str + '" for easy comparison');
  202.       return val ? str : val;
  203.     },
  204.  
  205.     checkVersion : function() {
  206.       debug('Fetching package.json');
  207.       GM_xmlhttpRequest({
  208.         method : 'GET',
  209.         url : ghd.root + 'package.json',
  210.         onload : function(response) {
  211.           // store package JSON (not accessed anywhere else, but just in case)
  212.           ghd.data.package = $.parseJSON(response.responseText);
  213.  
  214.           // save last loaded date, so package.json is only loaded once a day
  215.           ghd.data.date = new Date().getTime();
  216.           GM_setValue('date', ghd.data.date);
  217.  
  218.           var version = ghd.convertVersion(ghd.data.package.version);
  219.           // if new available, load it & parse
  220.           if (version > ghd.data.version) {
  221.             if (ghd.data.version !== 0) {
  222.               debug('Updating from', ghd.data.version, 'to', version);
  223.             }
  224.             ghd.data.version = version;
  225.             GM_setValue('version', ghd.data.version);
  226.             ghd.fetchAndApplyStyle();
  227.           } else {
  228.             ghd.addSavedStyle();
  229.           }
  230.         }
  231.       });
  232.     },
  233.  
  234.     fetchAndApplyStyle : function() {
  235.       debug('Fetching github-dark.css');
  236.       GM_xmlhttpRequest({
  237.         method : 'GET',
  238.         url : ghd.root + 'github-dark.css',
  239.         onload : function(response) {
  240.           ghd.data.rawCss = response.responseText;
  241.           ghd.applyStyle(ghd.processStyle());
  242.           ghd.getTheme();
  243.         }
  244.       });
  245.     },
  246.  
  247.     addSavedStyle : function() {
  248.       debug('Adding previously saved style');
  249.       // apply already processed css to prevent FOUC
  250.       this.$style.text(this.data.processedCss);
  251.     },
  252.  
  253.     // load syntax highlighting theme, if necessary
  254.     getTheme : function() {
  255.       if (!this.data.enable) {
  256.         debug('Disabled: stop theme processing');
  257.         return;
  258.       }
  259.       var name = this.data.theme || 'Twilight';
  260.       // test if this.themes contains the url (.min.css), or the actual css
  261.       if (/\.min\.css$/.test(this.themes[name])) {
  262.         var themeUrl = ghd.root + ghd.themes[name];
  263.         debug('Loading "' + name + '" theme', themeUrl);
  264.         GM_xmlhttpRequest({
  265.           method : 'GET',
  266.           url : themeUrl,
  267.           onload : function(response) {
  268.             var theme = response.responseText;
  269.             if (theme) {
  270.               ghd.themes[name] = theme;
  271.               ghd.data.themeCss = theme;
  272.               ghd.processTheme();
  273.             } else {
  274.               debug('Failed to load theme file', '"' + theme + '"');
  275.             }
  276.           }
  277.         });
  278.       } else {
  279.         ghd.data.themeCss = ghd.themes[name];
  280.         ghd.processTheme();
  281.       }
  282.     },
  283.  
  284.     processStyle : function() {
  285.       var data = this.data,
  286.         css = data.rawCss || '',
  287.         url = /^url/.test(data.image || '') ? data.image :
  288.           (data.image === 'none' ? 'none' : 'url("' + data.image + '")');
  289.       if (!data.enable) {
  290.         debug('Disabled: stop processing');
  291.         return;
  292.       }
  293.       debug('Processing set styles');
  294.       css = css
  295.         // remove moz-document wrapper
  296.         .replace(/@-moz-document regexp\((.*)\) \{(\n|\r)+/, '')
  297.         // replace background image; if no 'url' at start, then use 'none'
  298.         .replace(/\/\*\[\[bg-choice\]\]\*\/ url\(.*\)/, url)
  299.         // Add tiled or fit window size css
  300.         .replace('/*[[bg-options]]*/', this.type[data.type || 'tiled'])
  301.         // set scroll or fixed background image
  302.         .replace('/*[[bg-attachment]]*/ fixed', data.attach || 'scroll')
  303.         // replace base-color
  304.         .replace(/\/\*\[\[base-color\]\]\*\/ #\w{3,6}/g, data.color || '#4183C4')
  305.         // add font choice
  306.         .replace('/*[[font-choice]]*/', data.font || 'Menlo')
  307.         // add tab size
  308.         .replace(/\/\*\[\[tab-size\]\]\*\/ \d+/g, data.tab || 4)
  309.         // remove default syntax
  310.         .replace(/\s+\/\* grunt build - remove to end of file(.*(\n|\r))+\}$/m, '');
  311.  
  312.       return css;
  313.     },
  314.  
  315.     // this.data.themeCss should be populated with user selected theme
  316.     // called asynchronously from processStyle()
  317.     processTheme : function() {
  318.       debug('Adding syntax theme to css');
  319.       var css = this.$style.text() || '';
  320.       // look for /*[[syntax-theme]]*/ label, if it doesn't exist, reprocess raw css
  321.       if (!/syntax-theme/.test(css)) {
  322.         debug('Need to process raw style before applying theme');
  323.         this.applyStyle(this.processStyle());
  324.         css = this.$style.text() || '';
  325.       }
  326.       // add syntax highlighting theme
  327.       css = css.replace('/*[[syntax-theme]]*/', this.data.themeCss || '');
  328.  
  329.       debug('Applying "' + this.data.theme + '" theme', '"' +
  330.         (this.data.themeCss || '').match(this.regex) + '"');
  331.  
  332.       this.$style.text(css);
  333.       this.setStoredValues();
  334.       this.isUpdating = false;
  335.     },
  336.  
  337.     applyStyle : function(css) {
  338.       debug('Applying style', '"' + (css || '').match(this.regex) + '"');
  339.       // add to style
  340.       this.$style.text(css || '');
  341.       this.setStoredValues();
  342.     },
  343.  
  344.     updateStyle : function(applyStyle) {
  345.       this.isUpdating = true;
  346.       var $panel = $('#ghd-settings-inner'),
  347.       data = this.data;
  348.  
  349.       data.attach = $panel.find('.ghd-attach').val();
  350.       data.color  = $panel.find('.ghd-color').val();
  351.       data.enable = $panel.find('.ghd-enable').is(':checked');
  352.       data.font   = $panel.find('.ghd-font').val();
  353.       data.image  = $panel.find('.ghd-image').val();
  354.       data.tab    = $panel.find('.ghd-tab').val();
  355.       data.theme  = $panel.find('.ghd-theme').val();
  356.       data.type   = $panel.find('.ghd-type').val();
  357.       data.wrap   = $panel.find('.ghd-wrap').is(':checked');
  358.  
  359.       debug('Updating user settings', data);
  360.  
  361.       this.$style.prop('disabled', !data.enable);
  362.       $('body')
  363.         .toggleClass('ghd-disabled', !data.enable)
  364.         .toggleClass('nowrap', !data.wrap);
  365.  
  366.       if (applyStyle !== false) {
  367.         this.applyStyle(this.processStyle());
  368.         this.getTheme();
  369.       }
  370.       this.isUpdating = false;
  371.     },
  372.  
  373.     // user can force GitHub-dark update
  374.     forceUpdate : function() {
  375.       // clear saved date
  376.       GM_setValue('version', 0);
  377.       document.location.reload();
  378.     },
  379.  
  380.     buildSettings : function() {
  381.       debug('Adding settings panel & GitHub Dark link to profile dropdown');
  382.       // Script-specific CSS
  383.       GM_addStyle([
  384.         '#ghd-menu:hover { cursor:pointer }',
  385.         '#ghd-settings { position:fixed; z-index: 65535; top:0; bottom:0; left:0; right:0; opacity:0; visibility:hidden; }',
  386.         '#ghd-settings.in { opacity:1; visibility:visible; background:rgba(0,0,0,.5); }',
  387.         '#ghd-settings-inner { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:25rem; box-shadow: 0 .5rem 1rem #111; color:#c0c0c0 }',
  388.         '#ghd-settings label { margin-left:.5rem; position:relative; top:-1px }',
  389.         '#ghd-settings-close { height: 1rem; width: 1rem; fill: #666; float:right; cursor:pointer }',
  390.         '#ghd-settings-close:hover { fill: #ccc }',
  391.         '#ghd-settings .ghd-right { float: right; }',
  392.         '#ghd-settings p { line-height: 25px; }',
  393.         '#ghd-swatch { width:25px; height:25px; display:inline-block; margin:3px 10px; border-radius:4px; }',
  394.         '#ghd-settings .checkbox input { margin-top: .35em }',
  395.         '#ghd-settings input[type="checkbox"] { width: 16px !important; height: 16px !important; border-radius: 3px !important; }',
  396.         '#ghd-settings .boxed-group-inner { padding: 0; }',
  397.         '#ghd-settings .ghd-footer { padding: 10px; border-top: #555 solid 1px; }',
  398.         '#ghd-settings .ghd-settings-wrapper { max-height: 60vh; overflow-y:auto; padding: 1px 10px; }',
  399.         '#ghd-settings .ghd-tab { width: 5em; }',
  400.  
  401.         // code wrap toggle: https://gist.github.com/silverwind/6c1701f56e62204cc42b
  402.         // icons next to a pre
  403.         '.ghd-wrap-toggle { position:absolute; right:1.4em; margin-top:.2em; -moz-user-select:none; -webkit-user-select:none; cursor:pointer; z-index:1000; }',
  404.         // file & diff code tables
  405.         '.ghd-wrap-table td.blob-code-inner { white-space: pre-wrap !important; word-break: break-all !important; }',
  406.         '.ghd-unwrap-table td.blob-code-inner { white-space: pre !important; word-break: normal !important; }',
  407.         // icons inside a wrapper immediatly around a pre
  408.         '.highlight > .ghd-wrap-toggle { right:.5em; top:.5em; margin-top:0; }',
  409.         // icons for non-syntax highlighted code blocks; see https://github.com/gjtorikian/html-proofer/blob/master/README.md
  410.         '.markdown-body:not(.comment-body) .ghd-wrap-toggle:not(:first-child) { right: 3.4em; }',
  411.         '.ghd-wrap-toggle svg { height:1.25em; width:1.25em; fill:rgba(110,110,110,.4); }',
  412.         '.ghd-wrap-toggle.unwrap:hover svg, .ghd-wrap-toggle:hover svg { fill:#8b0000; }', // wrap disabled (red)
  413.         'body:not(.nowrap) .ghd-wrap-toggle:not(.unwrap):hover svg, .ghd-wrap-toggle.wrapped:hover svg { fill:#006400; }', // wrap enabled (green)
  414.         '.blob-wrapper, .markdown-body pre, .markdown-body .highlight { position:relative; }',
  415.         // hide wrap icon when style disabled
  416.         'body.ghd-disabled .ghd-wrap-toggle { display: none; }'
  417.       ].join(''));
  418.  
  419.       var themes = '<select class="ghd-theme ghd-right">';
  420.       $.each(this.themes, function(opt) {
  421.         themes += '<option value="' + opt + '">' + opt + '</option>';
  422.       });
  423.  
  424.       // Settings panel markup
  425.       $('body').append([
  426.         '<div id="ghd-settings">',
  427.           '<div id="ghd-settings-inner" class="boxed-group">',
  428.             '<h3>GitHub-Dark Settings',
  429.             '<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>',
  430.             '</h3>',
  431.             '<div class="boxed-group-inner">',
  432.               '<form>',
  433.                 '<div class="ghd-settings-wrapper">',
  434.                   '<p class="checkbox">',
  435.                     '<label>Enable GitHub-Dark<input class="ghd-enable ghd-right ghd-ignoreChange" type="checkbox"></label>',
  436.                   '</p>',
  437.                   '<p>',
  438.                     '<label>Color:</label> <input class="ghd-color ghd-right" type="text" value="#4183C4">',
  439.                     '<span id="ghd-swatch" class="ghd-right"></span>',
  440.                   '</p>',
  441.                   '<h4>Background</h4>',
  442.                   '<p>',
  443.                     '<label>Image:</label> <input class="ghd-image ghd-right" type="text">',
  444.                     '<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>',
  445.                   '</p>',
  446.                   '<p>',
  447.                     '<label>Image type:</label>',
  448.                     '<select class="ghd-type ghd-right">',
  449.                       '<option value="tiled">Tiled</option>',
  450.                       '<option value="fit">Fit window</option>',
  451.                     '</select>',
  452.                   '</p>',
  453.                   '<p>',
  454.                     '<label>Image attachment:</label>',
  455.                     '<select class="ghd-attach ghd-right">',
  456.                       '<option value="scroll">Scroll</option>',
  457.                       '<option value="fixed">Fixed</option>',
  458.                     '</select>',
  459.                   '</p>',
  460.                   '<h4>Code</h4>',
  461.                   '<p><label>Theme:</label> ' + themes + '</select></p>',
  462.                   '<p>',
  463.                     '<label>Font Name:</label> <input class="ghd-font ghd-right" type="text">',
  464.                     '<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>',
  465.                   '</p>',
  466.                   '<p>',
  467.                     '<label>Tab Size:</label> <input class="ghd-tab ghd-right" type="text">',
  468.                   '</p>',
  469.                   '<p class="checkbox">',
  470.                    '<label>Wrap<input class="ghd-wrap ghd-right ghd-ignoreChange" type="checkbox"></label>',
  471.                   '</p>',
  472.                 '</div>',
  473.                 '<div class="ghd-footer">',
  474.                   '<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>&nbsp;',
  475.                   '<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>',
  476.                 '</div>',
  477.               '</form>',
  478.             '</div>',
  479.           '</div>',
  480.         '</div>',
  481.       ].join(''));
  482.  
  483.       ghd.buildCodeWrap();
  484.     },
  485.  
  486.     buildCodeWrap : function() {
  487.       // add wrap code icons
  488.       $('.blob-wrapper').prepend(this.wrapIcon);
  489.       $('.markdown-body pre').before(this.wrapIcon);
  490.     },
  491.  
  492.     // add keyboard shortcut to help menu (press "?")
  493.     buildShortcut : function() {
  494.       var parts = this.keyboardShortcut.split('+');
  495.       if (!$('.ghd-shortcut').length) {
  496.         $('.keyboard-mappings:eq(0) tbody:eq(0)').append([
  497.           '<tr class="ghd-shortcut">',
  498.             '<td class="keys">',
  499.               '<kbd>' + parts[0] + '</kbd> <kbd>' + parts[1] + '</kbd>',
  500.             '</td>',
  501.             '<td>Go to GitHub-Dark settings</td>',
  502.           '</tr>'
  503.         ].join(''));
  504.       }
  505.     },
  506.  
  507.     bindEvents : function() {
  508.       var menu, lastKey,
  509.         $panel = $('#ghd-settings-inner'),
  510.         $swatch = $panel.find('#ghd-swatch');
  511.  
  512.       // finish initialization
  513.       $('#ghd-settings-inner .ghd-enable')[0].checked = this.data.enable;
  514.       $('body')
  515.         .toggleClass('ghd-disabled', !this.data.enable)
  516.         .toggleClass('nowrap', this.data.wrap);
  517.  
  518.       // Create our menu entry
  519.       menu = $('<a id="ghd-menu" class="dropdown-item">GitHub Dark Settings</a>');
  520.       $('.header .dropdown-item[href="/settings/profile"], .header .dropdown-item[data-ga-click*="go to profile"]')
  521.         // gists only have the "go to profile" item; GitHub has both
  522.         .filter(':last')
  523.         .after(menu);
  524.  
  525.       $('#ghd-menu').on('click', function() {
  526.         ghd.openPanel();
  527.       });
  528.  
  529.       // not sure what GitHub uses, so rolling our own
  530.       $(document).on('keyup', function(e) {
  531.         clearTimeout(ghd.timer);
  532.         // use "g+o" to open up ghd options panel
  533.         var parts = ghd.keyboardShortcut.split('+'),
  534.           key = String.fromCharCode(e.which).toLowerCase(),
  535.           panelVisible = $('#ghd-settings').hasClass('in');
  536.  
  537.         // press escape to close the panel
  538.         if (e.which === 27 && panelVisible) {
  539.           ghd.closePanel();
  540.           return;
  541.         }
  542.  
  543.         if (lastKey === parts[0] && key === parts[1] && !panelVisible &&
  544.           // prevent opening panel while typing "go" in comments
  545.           !/(input|textarea)/i.test(document.activeElement.nodeName)
  546.         ) {
  547.           ghd.openPanel();
  548.         }
  549.         lastKey = key;
  550.         ghd.timer = setTimeout(function() {
  551.           lastKey = null;
  552.         }, ghd.keyboardDelay);
  553.  
  554.         // add shortcut to help menu
  555.         if (e.which === 191) {
  556.           // table doesn't exist until user presses "?"
  557.           setTimeout(function() {
  558.             ghd.buildShortcut();
  559.           }, 300);
  560.         }
  561.       });
  562.  
  563.       // add bindings
  564.       $('#ghd-settings, #ghd-settings-close').on('click keyup', function(e) {
  565.         // press escape to close settings
  566.         if (e.type === 'keyup' && e.which !== 27) {
  567.           return;
  568.         }
  569.         ghd.closePanel();
  570.       });
  571.  
  572.       $panel.on('click', function(e) {
  573.         e.stopPropagation();
  574.       });
  575.  
  576.       $panel.find('.ghd-reset').on('click', function() {
  577.         ghd.isUpdating = true;
  578.         // pass true to reset values
  579.         ghd.setStoredValues(true);
  580.         // add reset values back to this.data
  581.         ghd.getStoredValues();
  582.         // add reset values to panel
  583.         ghd.updatePanel();
  584.         // update style
  585.         ghd.updateStyle();
  586.         return false;
  587.       });
  588.  
  589.       $panel.find('input[type="text"]').on('focus', function() {
  590.         // select all text when focused
  591.         this.select();
  592.       });
  593.  
  594.       $panel.find('select, input').on('change', function() {
  595.         if (!ghd.isUpdating) {
  596.           // pass false for settings that don't need the style to be
  597.           // modified (code wrap or enable/disable)
  598.           ghd.updateStyle(!$(this).hasClass('ghd-ignoreChange'));
  599.         }
  600.       });
  601.  
  602.       $panel.find('.ghd-update').on('click', function() {
  603.         ghd.forceUpdate();
  604.         return false;
  605.       });
  606.  
  607.       $('body').on('click', '.ghd-wrap-toggle', function() {
  608.         var css,
  609.           overallNoWrap = $('body').hasClass('nowrap'),
  610.           $this = $(this),
  611.           $code = $this.next('code, pre, .highlight');
  612.         if ($code.find('code').length) {
  613.           $code = $code.find('code');
  614.         }
  615.         // code with line numbers
  616.         if ($code[0].nodeName === 'TABLE') {
  617.           if ($code[0].className.indexOf('ghd-') < 0) {
  618.             css = overallNoWrap;
  619.           } else {
  620.             css = $code.hasClass('ghd-unwrap-table');
  621.           }
  622.           $code
  623.             .toggleClass('ghd-wrap-table', css)
  624.             .toggleClass('ghd-unwrap-table', !css);
  625.           $this
  626.             .toggleClass('wrapped', css)
  627.             .toggleClass('unwrap', !css);
  628.         } else {
  629.           css = $code.attr('style') || '';
  630.           if (css === '') {
  631.             css = ghd.wrapCss[overallNoWrap ? 'wrapped' : 'unwrap'];
  632.           } else {
  633.             css = ghd.wrapCss[css === ghd.wrapCss.wrapped ? 'unwrap' : 'wrapped'];
  634.           }
  635.           $code.attr('style', css);
  636.           $this
  637.             .toggleClass('wrapped', css === ghd.wrapCss.wrapped)
  638.             .toggleClass('unwrap', css === ghd.wrapCss.unwrap);
  639.         }
  640.       });
  641.  
  642.       this.picker = new jscolor($panel.find('.ghd-color')[0]);
  643.       this.picker.zIndex = 65536;
  644.       this.picker.hash = true;
  645.       this.picker.backgroundColor = '#333';
  646.       this.picker.padding = 0;
  647.       this.picker.borderWidth = 0;
  648.       this.picker.borderColor = '#444';
  649.       this.picker.onFineChange = function() {
  650.         $swatch[0].style.backgroundColor = '#' + ghd.picker;
  651.       };
  652.  
  653.     },
  654.  
  655.     openPanel : function() {
  656.       $('.modal-backdrop').click();
  657.       ghd.updatePanel();
  658.       $('#ghd-settings').addClass('in');
  659.     },
  660.  
  661.     closePanel : function() {
  662.       $('#ghd-settings').removeClass('in');
  663.       ghd.picker.hide();
  664.  
  665.       // apply changes when the panel is closed
  666.       ghd.updateStyle();
  667.     },
  668.  
  669.     init : function() {
  670.       debug('GitHub-Dark Script initializing!');
  671.  
  672.       // add style tag to head
  673.       ghd.$style = $('<style class="ghd-style">').appendTo('head');
  674.  
  675.       this.getStoredValues();
  676.  
  677.       this.$style.prop('disabled', !this.data.enable);
  678.  
  679.       // only load package.json once a day, or after a forced update
  680.       if ((new Date().getTime() > this.data.date + this.delay) || this.data.version === 0) {
  681.         // get package.json from GitHub-Dark & compare versions
  682.         // load new script if a newer one is available
  683.         this.checkVersion();
  684.       } else {
  685.         this.addSavedStyle();
  686.       }
  687.     }
  688.   };
  689.  
  690.   // add style at document-start
  691.   ghd.init();
  692.  
  693.   $(function() {
  694.     // apply script if option dropdown exists
  695.     if ($('.header .dropdown-item[href="/settings/profile"], .header .dropdown-item[data-ga-click*="go to profile"]').length) {
  696.       ghd.buildSettings();
  697.       // add event binding on document ready
  698.       ghd.bindEvents();
  699.     }
  700.  
  701.     // easier to bind to these events than use mutation observer
  702.     unsafeWindow.jQuery('#js-repo-pjax-container, #js-pjax-container, .js-contribution-activity')
  703.       .on('pjax:complete', function() {
  704.         ghd.buildCodeWrap();
  705.       });
  706.  
  707.     // save object to jQuery data in main window for easier debugging
  708.     unsafeWindow.jQuery('#ghd-settings').data('ghd', ghd);
  709.   });
  710.  
  711.   // include a "?debug" anywhere in the browser URL to enable debugging
  712.   function debug() {
  713.     if (/\?debug/.test(window.location.href)) {
  714.       console.log.apply(console, arguments);
  715.     }
  716.   }
  717. })(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window, jQuery.noConflict(true));