From 152c5ff9ca0eddeb101a8298f333035524537868 Mon Sep 17 00:00:00 2001 From: nobody Date: Fri, 25 Sep 2020 16:37:02 +0200 Subject: [PATCH] Some code improvements (#109) --- pages/options/options.js | 77 ++++++++++++++++++++-------------------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/pages/options/options.js b/pages/options/options.js index e8cb3b48..3599f013 100644 --- a/pages/options/options.js +++ b/pages/options/options.js @@ -53,7 +53,7 @@ options._renderContents = function () { }; options._renderOptionsPanel = function () { - let whitelistedDomains, domainWhitelist, elements, htmlFilterDomains, domainHtmlFilter, googleFontsDomains, domainAllowedGoogleFonts; + let whitelistedDomains, domainWhitelist, elements, htmlFilterDomains, domainHtmlFilter, googleFontsDomains, domainAllowedGoogleFonts, url, bgColor, txtColor; Object.assign(options._optionValues, { [Setting.INTERNAL_STATISTICS]: options._internalStatistics }); @@ -116,9 +116,20 @@ options._renderOptionsPanel = function () { document.getElementById('icon-light').checked = true; } - let url = chrome.runtime.getURL('icons/action/' + options._optionValues.selectedIcon.toLowerCase() + '/icon38-default.png'); + url = chrome.runtime.getURL('icons/action/' + options._optionValues.selectedIcon.toLowerCase() + '/icon38-default.png'); document.getElementById('icon-badge-preview').src = url; + bgColor = options._optionValues.badgeColor || '#4A826C'; + txtColor = options._optionValues.badgeTextColor || '#FFFFFF'; + + document.getElementById('counter-preview-badge').style.backgroundColor = bgColor; + document.getElementById('pre-badged-background-color').style.backgroundColor = bgColor; + document.getElementById('badged-background-color').value = bgColor; + + document.getElementById('counter-preview-badge').style.color = txtColor; + document.getElementById('pre-badged-text-color').style.backgroundColor = txtColor; + document.getElementById('badged-text-color').value = txtColor; + document.getElementById('last-mapping-update').textContent += ' ' + lastMappingUpdate; document.getElementById('negate-html-filter-list-warning').addEventListener('click', function () { options._onLinkClick(Links.CODEBERG_HTML_FILTER); }); document.getElementById('link-welcome-page').addEventListener('click', function () { options._onLinkClick(Links.WELCOME); }); @@ -139,10 +150,10 @@ options._renderOptionsPanel = function () { document.getElementById('export-data').addEventListener('click', storageManager.export); document.getElementById('import-data').addEventListener('click', storageManager.startImportFilePicker); document.getElementById('import-file-picker').addEventListener('change', storageManager.handleImportFilePicker); - + document.getElementById('badged-background-color').addEventListener('keyup', options._onChangedHexColor); document.getElementById('badged-text-color').addEventListener('keyup', options._onChangedHexColor); - + document.getElementById('restore-background-color').addEventListener('click', options._setDefaultColor); document.getElementById('restore-text-color').addEventListener('click', options._setDefaultColor); }; @@ -236,7 +247,9 @@ options._getOptionElements = function () { [Setting.BLOCK_GOOGLE_FONTS]: options._getOptionElement(Setting.BLOCK_GOOGLE_FONTS), [Setting.SELECTED_ICON]: options._getOptionElement(Setting.SELECTED_ICON), [Setting.ALLOWED_DOMAINS_GOOGLE_FONTS]: options._getOptionElement(Setting.ALLOWED_DOMAINS_GOOGLE_FONTS), - [Setting.STORAGE_TYPE]: options._getOptionElement(Setting.STORAGE_TYPE) + [Setting.STORAGE_TYPE]: options._getOptionElement(Setting.STORAGE_TYPE), + [Setting.BADGE_COLOR]: options._getOptionElement(Setting.BADGE_COLOR), + [Setting.BADGE_TEXT_COLOR]: options._getOptionElement(Setting.BADGE_TEXT_COLOR) }; return optionElements; }; @@ -349,42 +362,28 @@ options._createList = function (type) { }; options._colorPicker = function () { - - storageManager.type.get([Setting.BADGE_COLOR, Setting.BADGE_TEXT_COLOR], function (items) { - options._textColor = items.badgeTextColor || '#FFFFFF'; - options._backgroundColor = items.badgeColor || '#4A826C'; - + const badgeBackgroundColor = new CP(document.getElementById('badged-background-color')); + badgeBackgroundColor.on('change', function(r, g, b) { + this.source.value = this.color(r, g, b); + }); + badgeBackgroundColor.on('drag', function(r, g, b) { + options._backgroundColor = this.color(r, g, b); + this.source.value = options._backgroundColor + wrappers.setBadgeBackgroundColor({color: options._backgroundColor}); document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor; - document.getElementById('counter-preview-badge').style.color = options._textColor; document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor; + }); + + const badgeTextColor = new CP(document.getElementById('badged-text-color')); + badgeTextColor.on('change', function(r, g, b) { + this.source.value = this.color(r, g, b); + }); + badgeTextColor.on('drag', function(r, g, b) { + options._textColor = this.color(r, g, b); + this.source.value = options._textColor + wrappers.setBadgeTextColor({color: options._textColor}); + document.getElementById('counter-preview-badge').style.color = options._textColor; document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor; - - document.getElementById('badged-background-color').value = options._backgroundColor; - document.getElementById('badged-text-color').value = options._textColor; - - let badgeBackgroundColor = new CP(document.getElementById('badged-background-color')); - badgeBackgroundColor.on('change', function(r, g, b) { - this.source.value = this.color(r, g, b); - }); - badgeBackgroundColor.on('drag', function(r, g, b) { - options._backgroundColor = this.color(r, g, b); - this.source.value = options._backgroundColor - wrappers.setBadgeBackgroundColor({color: options._backgroundColor}); - document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor; - document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor; - }); - - let badgeTextColor = new CP(document.getElementById('badged-text-color')); - badgeTextColor.on('change', function(r, g, b) { - this.source.value = this.color(r, g, b); - }); - badgeTextColor.on('drag', function(r, g, b) { - options._textColor = this.color(r, g, b); - this.source.value = options._textColor - wrappers.setBadgeTextColor({color: options._textColor}); - document.getElementById('counter-preview-badge').style.color = options._textColor; - document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor; - }); }); }; @@ -401,7 +400,7 @@ options._setDefaultColor = function ({ target }) { document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor; document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor; document.getElementById('badged-background-color').value = options._backgroundColor; - + } };