// ==UserScript== // @name GitHub Dark Script // @version 1.0.4 // @description GitHub Dark in userscript form, with a settings panel // @namespace https://github.com/StylishThemes // @include /https?://((gist|guides|help|raw|status|developer)\.)?github\.com((?!generated_pages\/preview).)*$/ // @include /render\.githubusercontent\.com/ // @include /raw\.githubusercontent\.com/ // @grant GM_addStyle // @grant GM_getValue // @grant GM_setValue // @grant GM_info // @grant GM_xmlhttpRequest // @run-at document-start // @require https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js // @require https://greasyfork.org/scripts/15563-jscolor/code/jscolor.js?version=106439 // @downloadURL none // ==/UserScript== /* global jQuery, jscolor */ /* eslint-disable indent, quotes */ (function($) { 'use strict'; var ghd = { version : GM_info.version, // delay until package.json allowed to load delay : 8.64e7, // 24 hours in milliseconds // Keyboard shortcut to open ghd panel (only a two key combo coded) keyboardOpen : 'g+0', keyboardToggle : 'g+-', // keyboard shortcut delay from first to second letter keyboardDelay : 1000, // base urls to fetch style and package.json root : 'https://raw.githubusercontent.com/StylishThemes/GitHub-Dark/master/', defaults : { attach : 'scroll', color : '#4183C4', enable : true, font : 'Menlo', image : 'url("data:image/png;base64,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")', tab : 4, theme : 'Twilight', type : 'tiled', wrap : false }, // url gets replaced by css when loaded themes : { 'Ambiance' : 'themes/ambiance.min.css', 'Chaos' : 'themes/chaos.min.css', 'Clouds Midnight' : 'themes/clouds-midnight.min.css', 'Cobalt' : 'themes/cobalt.min.css', 'Idle Fingers' : 'themes/idle-fingers.min.css', 'Kr Theme' : 'themes/kr-theme.min.css', 'Merbivore' : 'themes/merbivore.min.css', 'Merbivore Soft' : 'themes/merbivore-soft.min.css', 'Mono Industrial' : 'themes/mono-industrial.min.css', 'Mono Industrial Clear' : 'themes/mono-industrial-clear.min.css', 'Monokai' : 'themes/monokai.min.css', 'Obsidian' : 'themes/obsidian.min.css', 'Pastel on Dark' : 'themes/pastel-on-dark.min.css', 'Solarized Dark' : 'themes/solarized-dark.min.css', 'Terminal' : 'themes/terminal.min.css', 'Tomorrow Night' : 'themes/tomorrow-night.min.css', 'Tomorrow Night Blue' : 'themes/tomorrow-night-blue.min.css', 'Tomorrow Night Bright' : 'themes/tomorrow-night-bright.min.css', 'Tomorrow Night Eigthies' : 'themes/tomorrow-night-eighties.min.css', 'Twilight' : 'themes/twilight.min.css', 'Vibrant Ink' : 'themes/vibrant-ink.min.css' }, type : { 'tiled' : 'background-repeat: repeat !important; background-size: auto !important; background-position: left top !important;', 'fit' : 'background-repeat: no-repeat !important; background-size: cover !important; background-position: center top !important;' }, wrapCss : { 'wrapped' : 'white-space: pre-wrap !important; word-break: break-all !important; display: block !important;', 'unwrap' : 'white-space: pre !important; word-break: normal !important; display: block !important;' }, wrapCodeCss : [ '/* GitHub: Enable wrapping of long code lines */', ' .blob-code-inner,', ' .markdown-body pre > code,', ' .markdown-body .highlight > pre {', ' white-space: pre-wrap !important;', ' word-break: break-all !important;', ' display: block !important;', ' }', ' td.blob-code-inner {', ' display: table-cell !important;', ' }' ].join('\n'), wrapIcon : '
', // extract style & theme name regex: /\/\*! [^\*]+ \*\//, updatePanel : function() { // prevent multiple change events from processing this.isUpdating = true; var color, data = this.data, defaults = this.defaults, $panel = $('#ghd-settings-inner'); $panel.find('.ghd-attach').val(data.attach || defaults.attach); $panel.find('.ghd-font').val(data.font || defaults.font); $panel.find('.ghd-image').val(data.image || defaults.image); $panel.find('.ghd-tab').val(data.tab || defaults.tab); $panel.find('.ghd-theme').val(data.theme || defaults.theme); $panel.find('.ghd-type').val(data.type || defaults.type); $panel.find('.ghd-enable').prop('checked', typeof data.enable === 'boolean' ? data.enable : defaults.enable); $panel.find('.ghd-wrap').prop('checked', typeof data.wrap === 'boolean' ? data.wrap : defaults.wrap); color = data.color || defaults.color; $panel.find('.ghd-color').val(color); // update swatch color & color picker value $panel.find('#ghd-swatch').css('background-color', color); if (this.picker) { this.picker.fromString(color); } this.$style.prop('disabled', !data.enable); $('body') .toggleClass('ghd-disabled', !data.enable) .toggleClass('nowrap', !data.wrap); this.isUpdating = false; }, /* this.data = { attach : 'scroll', color : '#4183C4', enable : true, font : 'Menlo', image : 'url()', tab : 4, theme : 'Tomorrow Night', type : 'tiled', wrap : true, // code: wrap long lines date : 1450159200000, // last loaded package.json version : '001014032', // v1.14.32 = last stored GitHub-Dark version rawCss : '@-moz-document regexp("^...', // github-dark.css (unprocessed css) themeCss : '/*! Tomorrow Night * /.ace_editor,.highlight{...', // theme/{name}.min.css processedCss : '' // css saved directly from this.$style } */ getStoredValues : function() { var defaults = this.defaults; this.data = { attach : GM_getValue('attach', defaults.attach), color : GM_getValue('color', defaults.color), enable : GM_getValue('enable', defaults.enable), font : GM_getValue('font', defaults.font), image : GM_getValue('image', defaults.image), tab : GM_getValue('tab', defaults.tab), theme : GM_getValue('theme', defaults.theme), type : GM_getValue('type', defaults.type), wrap : GM_getValue('wrap', defaults.wrap), date : GM_getValue('date', 0), version : GM_getValue('version', 0), rawCss : GM_getValue('rawCss', ''), themeCss : GM_getValue('themeCss', ''), processedCss : GM_getValue('processedCss', '') }; debug('Retrieved stored values', this.data); }, setStoredValues : function(reset) { var data = this.data, defaults = this.defaults; GM_setValue('attach', reset ? defaults.attach : data.attach); GM_setValue('color', reset ? defaults.color : data.color); GM_setValue('enable', reset ? defaults.enable : data.enable); GM_setValue('font', reset ? defaults.font : data.font); GM_setValue('image', reset ? defaults.image : data.image); GM_setValue('tab', reset ? defaults.tab : data.tab); GM_setValue('theme', reset ? defaults.theme : data.theme); GM_setValue('type', reset ? defaults.type : data.type); GM_setValue('wrap', reset ? defaults.wrap : data.wrap); GM_setValue('date', reset ? 0 : data.date); GM_setValue('version', reset ? 0 : data.version); GM_setValue('rawCss', data.rawCss); GM_setValue('themeCss', data.themeCss); GM_setValue('processedCss', ghd.$style.text()); debug((reset ? 'Resetting' : 'Saving') + ' current values', data); }, // convert version "1.2.3" into "001002003" for easier comparison convertVersion : function(val) { var index, parts = val ? val.split('.') : '', str = '', len = parts.length; for (index = 0; index < len; index++) { str += ('000' + parts[index]).slice(-3); } debug('Converted version "' + val + '" to "' + str + '" for easy comparison'); return val ? str : val; }, checkVersion : function() { debug('Fetching package.json'); GM_xmlhttpRequest({ method : 'GET', url : ghd.root + 'package.json', onload : function(response) { // store package JSON (not accessed anywhere else, but just in case) ghd.data.package = JSON.parse(response.responseText); // save last loaded date, so package.json is only loaded once a day ghd.data.date = new Date().getTime(); GM_setValue('date', ghd.data.date); var version = ghd.convertVersion(ghd.data.package.version); // if new available, load it & parse if (version > ghd.data.version) { if (ghd.data.version !== 0) { debug('Updating from', ghd.data.version, 'to', version); } ghd.data.version = version; GM_setValue('version', ghd.data.version); ghd.fetchAndApplyStyle(); } else { ghd.addSavedStyle(); } } }); }, fetchAndApplyStyle : function() { debug('Fetching github-dark.css'); GM_xmlhttpRequest({ method : 'GET', url : ghd.root + 'github-dark.css', onload : function(response) { ghd.data.rawCss = response.responseText; ghd.applyStyle(ghd.processStyle()); ghd.getTheme(); } }); }, addSavedStyle : function() { debug('Adding previously saved style'); // apply already processed css to prevent FOUC this.$style.text(this.data.processedCss); }, // load syntax highlighting theme, if necessary getTheme : function() { if (!this.data.enable) { debug('Disabled: stop theme processing'); return; } var name = this.data.theme || 'Twilight'; // test if this.themes contains the url (.min.css), or the actual css if (/\.min\.css$/.test(this.themes[name])) { var themeUrl = ghd.root + ghd.themes[name]; debug('Loading "' + name + '" theme', themeUrl); GM_xmlhttpRequest({ method : 'GET', url : themeUrl, onload : function(response) { var theme = response.responseText; if (theme) { ghd.themes[name] = theme; ghd.data.themeCss = theme; ghd.processTheme(); } else { debug('Failed to load theme file', '"' + theme + '"'); } } }); } else { ghd.data.themeCss = ghd.themes[name]; ghd.processTheme(); } }, processStyle : function() { var data = this.data, url = /^url/.test(data.image || '') ? data.image : (data.image === 'none' ? 'none' : 'url("' + data.image + '")'); if (!data.enable) { debug('Disabled: stop processing'); return; } debug('Processing set styles'); var ret = (data.rawCss || '') // remove moz-document wrapper .replace(/@-moz-document regexp\((.*)\) \{(\n|\r)+/, '') // replace background image; if no 'url' at start, then use 'none' .replace(/\/\*\[\[bg-choice\]\]\*\/ url\(.*\)/, url) // Add tiled or fit window size css .replace('/*[[bg-options]]*/', this.type[data.type || 'tiled']) // set scroll or fixed background image .replace('/*[[bg-attachment]]*/ fixed', data.attach || 'scroll') // replace base-color .replace(/\/\*\[\[base-color\]\]\*\/ #\w{3,6}/g, data.color || '#4183C4') // add font choice .replace('/*[[font-choice]]*/', data.font || 'Menlo') // add tab size .replace(/\/\*\[\[tab-size\]\]\*\/ \d+/g, data.tab || 4) // code wrap css .replace('/*[[code-wrap]]*/', data.wrap ? ghd.wrapCodeCss : '') // remove default syntax .replace(/\s+\/\* grunt build - remove to end of file(.*(\n|\r))+\}$/m, ''); // see https://github.com/StylishThemes/GitHub-Dark/issues/275 if (/firefox/i.test(navigator.userAgent)) { ret = ret .replace(/select, input, textarea/, 'select, input:not([type="checkbox"]), textarea') .replace(/input\[type=\"checkbox\"\][\s\S]+?}/gm, ''); } return ret; }, // this.data.themeCss should be populated with user selected theme // called asynchronously from processStyle() processTheme : function() { debug('Adding syntax theme to css'); var css = this.$style.text() || ''; // look for /*[[syntax-theme]]*/ label, if it doesn't exist, reprocess raw css if (!/syntax-theme/.test(css)) { debug('Need to process raw style before applying theme'); this.applyStyle(this.processStyle()); css = this.$style.text() || ''; } // add syntax highlighting theme css = css.replace('/*[[syntax-theme]]*/', this.data.themeCss || ''); debug('Applying "' + this.data.theme + '" theme', '"' + (this.data.themeCss || '').match(this.regex) + '"'); this.$style.text(css); this.setStoredValues(); this.isUpdating = false; }, applyStyle : function(css) { debug('Applying style', '"' + (css || '').match(this.regex) + '"'); // add to style this.$style.text(css || ''); this.setStoredValues(); }, updateStyle : function() { this.isUpdating = true; var $panel = $('#ghd-settings-inner'), data = this.data; data.attach = $panel.find('.ghd-attach').val(); // get hex value directly data.color = this.picker.toHEXString(); data.enable = $panel.find('.ghd-enable').is(':checked'); data.font = $panel.find('.ghd-font').val(); data.image = $panel.find('.ghd-image').val(); data.tab = $panel.find('.ghd-tab').val(); data.theme = $panel.find('.ghd-theme').val(); data.type = $panel.find('.ghd-type').val(); data.wrap = $panel.find('.ghd-wrap').is(':checked'); debug('Updating user settings', data); this.$style.prop('disabled', !data.enable); $('body') .toggleClass('ghd-disabled', !data.enable) .toggleClass('nowrap', !data.wrap); this.applyStyle(this.processStyle()); this.getTheme(); this.isUpdating = false; }, // user can force GitHub-dark update forceUpdate : function(css) { if (css) { // add raw css directly for style testing ghd.data.rawCss = css; ghd.applyStyle(ghd.processStyle()); ghd.getTheme(); } else { // clear saved date GM_setValue('version', 0); document.location.reload(); } }, buildSettings : function() { debug('Adding settings panel & GitHub Dark link to profile dropdown'); // Script-specific CSS GM_addStyle([ '#ghd-menu:hover { cursor:pointer }', '#ghd-settings { position:fixed; z-index: 65535; top:0; bottom:0; left:0; right:0; opacity:0; visibility:hidden; }', '#ghd-settings.in { opacity:1; visibility:visible; background:rgba(0,0,0,.5); }', '#ghd-settings-inner { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:25rem; box-shadow: 0 .5rem 1rem #111; color:#c0c0c0 }', '#ghd-settings label { margin-left:.5rem; position:relative; top:-1px }', '#ghd-settings-close { height: 1rem; width: 1rem; fill: #666; float:right; cursor:pointer }', '#ghd-settings-close:hover { fill: #ccc }', '#ghd-settings .ghd-right { float: right; }', '#ghd-settings p { line-height: 25px; }', '#ghd-swatch { width:25px; height:25px; display:inline-block; margin:3px 10px; border-radius:4px; }', '#ghd-settings .checkbox input { margin-top: .35em }', '#ghd-settings input[type="checkbox"] { width: 16px !important; height: 16px !important; border-radius: 3px !important; }', '#ghd-settings .boxed-group-inner { padding: 0; }', '#ghd-settings .ghd-footer { padding: 10px; border-top: #555 solid 1px; }', '#ghd-settings .ghd-settings-wrapper { max-height: 60vh; overflow-y:auto; padding: 1px 10px; }', '#ghd-settings .ghd-tab { width: 5em; }', '#ghd-settings .ghd-info, .ghd-file-toggle svg { vertical-align: middle !important; }', '#ghd-settings .paste-area { position:absolute; bottom:50px; top:37px; left:2px; right:2px; width:396px; z-index:0; }', // code wrap toggle: https://gist.github.com/silverwind/6c1701f56e62204cc42b // icons next to a pre '.ghd-wrap-toggle { position:absolute; right:1.4em; margin-top:.2em; -moz-user-select:none; -webkit-user-select:none; cursor:pointer; z-index:20; }', // file & diff code tables '.ghd-wrap-table td.blob-code-inner { white-space: pre-wrap !important; word-break: break-all !important; }', '.ghd-unwrap-table td.blob-code-inner { white-space: pre !important; word-break: normal !important; }', // icons inside a wrapper immediatly around a pre '.highlight > .ghd-wrap-toggle { right:.5em; top:.5em; margin-top:0; }', // icons for non-syntax highlighted code blocks; see https://github.com/gjtorikian/html-proofer/blob/master/README.md '.markdown-body:not(.comment-body) .ghd-wrap-toggle:not(:first-child) { right: 3.4em; }', '.ghd-wrap-toggle svg { height:1.25em; width:1.25em; fill:rgba(110,110,110,.4); }', '.ghd-wrap-toggle.unwrap:hover svg, .ghd-wrap-toggle:hover svg { fill:#8b0000; }', // wrap disabled (red) 'body:not(.nowrap) .ghd-wrap-toggle:not(.unwrap):hover svg, .ghd-wrap-toggle.wrapped:hover svg { fill:#006400; }', // wrap enabled (green) '.blob-wrapper, .markdown-body pre, .markdown-body .highlight { position:relative; }', // hide wrap icon when style disabled 'body.ghd-disabled .ghd-wrap-toggle, .ghd-collapsed-file { display: none; }', // monospace font toggle '.ghd-monospace-font { font-family: Menlo, Inconsolata, "Droid Mono", monospace !important; font-size: 1em !important; }', // file collapsed icon '.ghd-file-collapsed svg { -webkit-transform:rotate(90deg); transform:rotate(90deg); }' ].join('')); var version = [], themes = '', '

', '

', ' ', '', '

', '

Background

', '

', ' ', '?', '

', '

', '', '', '

', '

', '', '', '

', '

Code

', '

' + themes + '

', '

', ' ', '?', '

', '

', ' ', '

', '

', '', '

', '', '
', '
', 'Force Update Style', '', '', '', '', '', '', '
 ', 'Reset All Settings', '', '', '', '', '', '
', '', '', '', '', ].join('')); ghd.updateToggles(); }, // Add code wrap toggle buildCodeWrap : function() { // mutation events happen quick, so we still add an update flag this.isUpdating = true; // add wrap code icons $('.blob-wrapper').prepend(this.wrapIcon); $('.markdown-body pre').before(this.wrapIcon); this.isUpdating = false; }, // Add monospace font toggle addMonospaceToggle : function() { this.isUpdating = true; var indx, $el, $toolbars = $('.toolbar-commenting'), len = $toolbars.length; for (indx = 0; indx < len; indx++) { $el = $toolbars.eq(indx); if (!$el.find('.ghd-monospace').length) { $el.prepend([ '' ].join('')); } } this.isUpdating = false; }, // Add file diffs toggle addFileToggle : function() { this.updating = true; var indx, $el, $files = $('#files .file-actions'), len = $files.length; for (indx = 0; indx < len; indx++) { $el = $files.eq(indx); if (!$el.find('.ghd-file-toggle').length) { $el.append([ '' ].join('')); } } this.updating = false; }, // Add toggle buttons after page updates updateToggles : function() { ghd.buildCodeWrap(); ghd.addMonospaceToggle(); ghd.addFileToggle(); }, // add keyboard shortcut to help menu (press "?") buildShortcut : function() { var openPanel = this.keyboardOpen.split('+'), toggleStyle = this.keyboardToggle.split('+'); if (!$('.ghd-shortcut').length) { $('.keyboard-mappings:eq(0) tbody:eq(0)').append([ '', '', '' + openPanel[0] + ' ' + openPanel[1] + '', '', 'GitHub-Dark: open settings', '', '', '', '' + toggleStyle[0] + ' ' + toggleStyle[1] + '', '', 'GitHub-Dark: toggle style', '' ].join('')); } }, bindEvents : function() { var menu, lastKey, $panel = $('#ghd-settings-inner'), $swatch = $panel.find('#ghd-swatch'); // finish initialization $('#ghd-settings-inner .ghd-enable')[0].checked = this.data.enable; $('body').toggleClass('ghd-disabled', !this.data.enable); // Create our menu entry menu = $('GitHub Dark Settings'); $('.header .dropdown-item[href="/settings/profile"], .header .dropdown-item[data-ga-click*="go to profile"]') // gists only have the "go to profile" item; GitHub has both .filter(':last') .after(menu); $('#ghd-menu').on('click', function() { ghd.openPanel(); }); // not sure what GitHub uses, so rolling our own $(document).on('keypress keydown', function(e) { clearTimeout(ghd.timer); // use "g+o" to open up ghd options panel var openPanel = ghd.keyboardOpen.split('+'), toggleStyle = ghd.keyboardToggle.split('+'), key = String.fromCharCode(e.which).toLowerCase(), panelVisible = $('#ghd-settings').hasClass('in'); // press escape to close the panel if (e.which === 27 && panelVisible) { ghd.closePanel(); return; } // use e.which from keypress for shortcuts // prevent opening panel while typing "go" in comments if (e.type === 'keydown' || /(input|textarea)/i.test(document.activeElement.nodeName)) { return; } if (lastKey === openPanel[0] && key === openPanel[1]) { if (panelVisible) { ghd.closePanel(); } else { ghd.openPanel(); } } if (lastKey === toggleStyle[0] && key === toggleStyle[1]) { ghd.toggleStyle(); } lastKey = key; ghd.timer = setTimeout(function() { lastKey = null; }, ghd.keyboardDelay); // add shortcut to help menu if (key === '?') { // table doesn't exist until user presses "?" setTimeout(function() { ghd.buildShortcut(); }, 300); } }); // add ghd-settings panel bindings $('#ghd-settings, #ghd-settings-close').on('click keyup', function(e) { // press escape to close settings if (e.type === 'keyup' && e.which !== 27) { return; } ghd.closePanel(); }); $panel.on('click', function(e) { e.stopPropagation(); }); $panel.find('.ghd-reset').on('click', function() { ghd.isUpdating = true; // pass true to reset values ghd.setStoredValues(true); // add reset values back to this.data ghd.getStoredValues(); // add reset values to panel ghd.updatePanel(); // update style ghd.updateStyle(); return false; }); $panel.find('input[type="text"]').on('focus', function() { // select all text when focused this.select(); }); $panel.find('select, input').on('change', function() { if (!ghd.isUpdating) { ghd.updateStyle(); } }); $panel.find('.ghd-update').on('click', function() { ghd.forceUpdate(); return false; }); $panel.find('.ghd-textarea-toggle').on('click', function() { var $this = $(this), $dropdown = $this .removeClass('selected') .next('.paste-area-content') .toggle(); if ($dropdown.is(':visible')) { $this.addClass('selected'); $dropdown .find('textarea') .focus() .select(); } return false; }); $panel.find('.paste-area-content').on('paste', function(e) { var $toggle = $panel.find('.ghd-textarea-toggle'); var $textarea = $(e.target); setTimeout(function() { $textarea.parent().hide(); $toggle.removeClass('selected'); ghd.forceUpdate($textarea.val()); }, 200); }); // **** CODE WRAP TOGGLE **** $('body').on('click', '.ghd-wrap-toggle', function() { var css, overallWrap = ghd.data.wrap, $this = $(this), $code = $this.next('code, pre, .highlight, .diff-table'); if ($code.find('code').length) { $code = $code.find('code'); } if (!$code.length) { debug('Code wrap icon associated code not found', $this); return; } // code with line numbers if ($code[0].nodeName === 'TABLE') { if ($code[0].className.indexOf('ghd-') < 0) { css = !overallWrap; } else { css = $code.hasClass('ghd-unwrap-table'); } $code .toggleClass('ghd-wrap-table', css) .toggleClass('ghd-unwrap-table', !css); $this .toggleClass('wrapped', css) .toggleClass('unwrap', !css); } else { css = $code.attr('style') || ''; if (css === '') { css = ghd.wrapCss[overallWrap ? 'unwrap' : 'wrapped']; } else { css = ghd.wrapCss[css === ghd.wrapCss.wrapped ? 'unwrap' : 'wrapped']; } $code.attr('style', css); $this .toggleClass('wrapped', css === ghd.wrapCss.wrapped) .toggleClass('unwrap', css === ghd.wrapCss.unwrap); } }); // **** MONOSPACE FONT TOGGLE **** $('body').on('click', '.ghd-monospace', function(e) { e.stopPropagation(); var $this = $(this), $textarea = $this // each comment .closest('.timeline-comment') .find('.comment-form-textarea') .toggleClass('ghd-monospace-font') .focus(); $this.toggleClass('ghd-icon-active', $textarea.hasClass('ghd-monospace-font')); return false; }); // **** CODE DIFF COLLAPSE TOGGLE **** $('body').on('click', '.ghd-file-toggle', function(e) { e.stopPropagation(); ghd.updating = true; $(this) .toggleClass('ghd-file-collapsed') .closest('.file-header') // toggle view of file or image; "image" class added to "Diff suppressed..." .next('.blob-wrapper, .render-wrapper, .image, .rich-diff') .toggleClass('ghd-collapsed-file'); // shift+click toggle all files! if (e.shiftKey) { var indx, isCollapsed = $(this).hasClass('ghd-file-collapsed'), $toggles = $('.ghd-file-toggle').not(this), len = $toggles.length; for (indx = 0; indx < len; indx++) { $toggles.eq(indx) .toggleClass('ghd-file-collapsed', isCollapsed) .closest('.file-header') .next('.blob-wrapper, .render-wrapper, .image, .rich-diff') .toggleClass('ghd-collapsed-file', isCollapsed); } } ghd.updating = false; }); // style color picker this.picker = new jscolor($panel.find('.ghd-color')[0]); this.picker.zIndex = 65536; this.picker.hash = true; this.picker.backgroundColor = '#333'; this.picker.padding = 0; this.picker.borderWidth = 0; this.picker.borderColor = '#444'; this.picker.onFineChange = function() { $swatch[0].style.backgroundColor = '#' + ghd.picker; }; }, openPanel : function() { $('.modal-backdrop').click(); ghd.updatePanel(); $('#ghd-settings').addClass('in'); }, closePanel : function() { $('#ghd-settings').removeClass('in'); ghd.picker.hide(); // apply changes when the panel is closed ghd.updateStyle(); }, toggleStyle : function() { var isEnabled = !this.data.enable; this.data.enable = isEnabled; $('#ghd-settings-inner .ghd-enable').prop('checked', isEnabled); // add processedCss back into style (emptied when disabled) if (isEnabled) { this.addSavedStyle(); } this.$style.prop('disabled', !isEnabled); }, init : function() { debug('GitHub-Dark Script initializing!'); // add style tag to head ghd.$style = $('