diff --git a/core/constants.js b/core/constants.js index e5526470..661f2d34 100644 --- a/core/constants.js +++ b/core/constants.js @@ -78,7 +78,9 @@ const Setting = { 'INTERNAL_STATISTICS': 'internalStatistics', 'INTERNAL_STATISTICS_DATA': 'internalStatisticsData', 'ALLOWED_DOMAINS_GOOGLE_FONTS': 'allowedDomainsGoogleFonts', - 'STORAGE_TYPE': 'storageType' + 'STORAGE_TYPE': 'storageType', + 'BADGE_COLOR': 'badgeColor', + 'BADGE_TEXT_COLOR': 'badgeTextColor' }; const SettingDefaults = { diff --git a/core/main.js b/core/main.js index 5d636760..51466b51 100644 --- a/core/main.js +++ b/core/main.js @@ -100,11 +100,3 @@ main._showReleaseNotes = function (details) { */ chrome.runtime.onInstalled.addListener(main._showReleaseNotes); main._initializeSettings(); - -wrappers.setBadgeBackgroundColor({ - 'color': [74, 130, 108, 255] -}); - -wrappers.setBadgeTextColor({ - 'color': [255, 255, 255, 255] -}); diff --git a/modules/internal/wrappers.js b/modules/internal/wrappers.js index 57a56bae..811a739f 100644 --- a/modules/internal/wrappers.js +++ b/modules/internal/wrappers.js @@ -1,9 +1,13 @@ /** * Internal API Wrapper Module - * Belongs to Decentraleyes. + * Belongs to LocalCDN. * * @author Thomas Rientjes * @since 2017-12-03 + + * @author nobody + * @since 2020-07-09 + * @license MPL 2.0 * * This Source Code Form is subject to the terms of the Mozilla Public @@ -26,6 +30,10 @@ var wrappers = {}; wrappers.setBadgeBackgroundColor = function (details) { if (chrome.browserAction.setBadgeBackgroundColor !== undefined) { chrome.browserAction.setBadgeBackgroundColor(details); + + storageManager.type.set({ + [Setting.BADGE_COLOR]: details.color + }); } }; @@ -38,6 +46,10 @@ wrappers.setBadgeText = function (details) { wrappers.setBadgeTextColor = function (details) { if (chrome.browserAction.setBadgeTextColor !== undefined) { chrome.browserAction.setBadgeTextColor(details); + + storageManager.type.set({ + [Setting.BADGE_TEXT_COLOR]: details.color + }); } }; @@ -49,3 +61,11 @@ wrappers.setIcon = function (details, type) { } chrome.browserAction.setIcon(details); }; + +storageManager.type.get([Setting.BADGE_COLOR, Setting.BADGE_TEXT_COLOR], function (items) { + wrappers.textColor = items.badgeTextColor || '#FFFFFF'; + wrappers.backgroundColor = items.badgeColor || '#4A826C'; + + wrappers.setBadgeTextColor({color: wrappers.textColor}); + wrappers.setBadgeBackgroundColor({color: wrappers.backgroundColor}); +}); diff --git a/pages/options/options.css b/pages/options/options.css index 78efad93..7ba26f1c 100644 --- a/pages/options/options.css +++ b/pages/options/options.css @@ -77,7 +77,9 @@ body { } .div-selected-icon { - padding-top: 10px + margin-top: 10px; + padding-right: 25px; + min-width: 140px; } .div-selected-icon > label { @@ -205,15 +207,47 @@ body { display: none; } -#import-data, #export-data, #cdn, #framework { - padding: 5px; - font-size: 1em; - line-height: 1.5; +.div-icons-badge-colors { + display: flex; + flex-wrap: nowrap; } -/** -* Links -*/ +.div-badge { + margin-top: 10px; + padding-left: 25px; + border-left: 1px solid #bbb; +} + +#badge-preview-top { + position: relative; + width: 38px; +} + +#counter-preview-badge { + position: absolute; + top: 0px; + right: 0px; + color: white; + background: black; + padding: 1px 6px; + font-size: 10px; + border-radius: 5px; +} + +#pre-badged-background-color, #pre-badged-text-color { + width: 30px; + height: auto; + margin: 10px 5px 0px 0px; +} + +.colorpicker { + display: flex; + padding-bottom: 5px; +} + +.import-export > input[type="button"] { + margin-bottom: 5px; +} /** * Miscellaneous @@ -371,6 +405,17 @@ body[dir="rtl"] .input-text { } } +@media only screen and (max-width: 435px) { + .div-icons-badge-colors { + flex-wrap: wrap; + } + .div-badge { + border: none; + padding-left: 0px; + width: 100%; + } +} + @media (prefers-color-scheme: dark) { body { background-color: #202023; diff --git a/pages/options/options.html b/pages/options/options.html index ec26f0c5..03057266 100644 --- a/pages/options/options.html +++ b/pages/options/options.html @@ -4,10 +4,14 @@ LocalCDN Options + + + + @@ -195,25 +199,45 @@
Choose an icon for this extension
-
- - - +
+
+ + + +
+
+
+
+ Default +
17
+
+
+
+
+
+
+
+
+
+ +
+
+
diff --git a/pages/options/options.js b/pages/options/options.js index 650df614..b6bf18d1 100644 --- a/pages/options/options.js +++ b/pages/options/options.js @@ -116,6 +116,8 @@ options._renderOptionsPanel = function () { document.getElementById('icon-light').checked = true; } + let url = chrome.runtime.getURL('icons/action/' + options._optionValues.selectedIcon.toLowerCase() + '/icon38-default.png'); + document.getElementById('icon-badge-preview').src = url; 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); }); @@ -331,6 +333,33 @@ 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'; + + let badgeBackgroundColor = new CP(document.getElementById('badged-background-color')); + badgeBackgroundColor.on('change', 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) { + 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; + }); + }); +}; + + /** * Event Handlers */ @@ -341,6 +370,7 @@ options._onDocumentLoaded = function () { options._optionElements = options._getOptionElements(); options._languageSupported = helpers.languageIsFullySupported(language); options._scriptDirection = helpers.determineScriptDirection(language); + options._colorPicker(); options._renderContents(); }; @@ -393,6 +423,8 @@ options._onOptionChanged = function ({ target }) { if (optionKey === Setting.SELECTED_ICON) { wrappers.setIcon({ path: optionValue }, 'Enabled'); + let url = chrome.runtime.getURL('icons/action/' + optionValue.toLowerCase() + '/icon38-default.png'); + document.getElementById('icon-badge-preview').src = url; } storageManager.type.set({ [optionKey]: optionValue, diff --git a/pages/updates/updates.html b/pages/updates/updates.html index 2c4bd73f..11b150f9 100644 --- a/pages/updates/updates.html +++ b/pages/updates/updates.html @@ -39,6 +39,7 @@
  • Added: InstantSearch.js v3.7.0 and v4.8.1 (#117)
  • Added: algoliasearch v3 in cdn.jsdelivr.net (#117)
  • Added: autocomplete.js in cdn.jsdelivr.net (#117)
    • +
  • Implemented: Customize badge colors (#109)