Implemented: Customize badge colors (#109)

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 = {

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]
-});

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});
+});

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;

pages/options/options.html

@@ -4,10 +4,14 @@
         <title>LocalCDN Options</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta charset="utf-8" />
+        <link rel="stylesheet" type="text/css" href="../../modules/internal/color-picker/color-picker.min.css">
+
         <link rel="stylesheet" type="text/css" href="options.css">
         <link rel="stylesheet" type="text/css" href="../base.css">
     </head>
     <body>
+        <script src="../../modules/internal/color-picker/color-picker.min.js"></script>
+
         <script src="../../core/constants.js"></script>
         <script src="../../core/storage-manager.js"></script>
         <script src="../../modules/internal/helpers.js"></script>
@@ -195,25 +199,45 @@
             <div id="icon-style-div" class="option-group">
                 <section id="section-icon-style" class="option">
                     <div class="title-option without-checkbox" data-i18n-content="chooseIconStyle">Choose an icon for this extension</div>
-                    <div class="div-selected-icon">
-                        <label class="b-contain" for="icon-default">
-                            <img src="../../icons/action/default/icon32-default.png" alt="Default" class="icons">
-                            <img src="../../icons/action/default/icon32-disabled.png" alt="Default" class="icons">
-                            <input id="icon-default" name="selected-icon" type="radio" data-option="selectedIcon" value="Default">
-                            <div class="b-input"></div>
-                        </label>
-                        <label class="b-contain" for="icon-grey">
-                            <img src="../../icons/action/grey/icon32-default.png" alt="Blue/Grey" class="icons">
-                            <img src="../../icons/action/grey/icon32-disabled.png" alt="Blue/Grey" class="icons">
-                            <input id="icon-grey" name="selected-icon" type="radio" data-option="selectedIcon" value="Grey">
-                            <div class="b-input"></div>
-                        </label>
-                        <label class="b-contain" for="icon-light">
-                            <img src="../../icons/action/light/icon32-default.png" alt="Light" class="icons">
-                            <img src="../../icons/action/light/icon32-disabled.png" alt="Light" class="icons">
-                            <input id="icon-light" name="selected-icon" type="radio" data-option="selectedIcon" value="Light">
-                            <div class="b-input"></div>
-                        </label>
+                    <div class="div-icons-badge-colors">
+                        <div class="div-selected-icon">
+                            <label class="b-contain" for="icon-default">
+                                <img src="../../icons/action/default/icon32-default.png" alt="Default" class="icons">
+                                <img src="../../icons/action/default/icon32-disabled.png" alt="Default" class="icons">
+                                <input id="icon-default" name="selected-icon" type="radio" data-option="selectedIcon" value="Default">
+                                <div class="b-input"></div>
+                            </label>
+                            <label class="b-contain" for="icon-grey">
+                                <img src="../../icons/action/grey/icon32-default.png" alt="Blue/Grey" class="icons">
+                                <img src="../../icons/action/grey/icon32-disabled.png" alt="Blue/Grey" class="icons">
+                                <input id="icon-grey" name="selected-icon" type="radio" data-option="selectedIcon" value="Grey">
+                                <div class="b-input"></div>
+                            </label>
+                            <label class="b-contain" for="icon-light">
+                                <img src="../../icons/action/light/icon32-default.png" alt="Light" class="icons">
+                                <img src="../../icons/action/light/icon32-disabled.png" alt="Light" class="icons">
+                                <input id="icon-light" name="selected-icon" type="radio" data-option="selectedIcon" value="Light">
+                                <div class="b-input"></div>
+                            </label>
+                        </div>
+                        <div class="div-badge">
+                            <div id="badge-preview-top">
+                                <div>
+                                    <img id="icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="Default" class="icons">
+                                    <div id="counter-preview-badge"><span>17</span></div>
+                                </div>
+                            </div>
+                            <div id="badge-preview-bottom">
+                                <div class="colorpicker">
+                                    <div id="pre-badged-background-color"></div>
+                                    <input id="badged-background-color" class="input-text"><br>
+                                </div>
+                                <div class="colorpicker">
+                                    <div id="pre-badged-text-color"></div>
+                                    <input id="badged-text-color" class="input-text">
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </section>
             </div>

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,

pages/updates/updates.html

@@ -39,6 +39,7 @@
                             <li>Added: InstantSearch.js v3.7.0 and v4.8.1 (<a href="https://codeberg.org/nobody/LocalCDN/issues/117">#117</a>)</li>
                             <li>Added: algoliasearch v3 in cdn.jsdelivr.net (<a href="https://codeberg.org/nobody/LocalCDN/issues/117">#117</a>)</li>
                             <li>Added: autocomplete.js in cdn.jsdelivr.net (<a href="https://codeberg.org/nobody/LocalCDN/issues/117">#117</a>)</li>
+                            <li>Implemented: Customize badge colors (<a href="https://codeberg.org/nobody/LocalCDN/issues/109">#109</a>)</li>
                         </ul>
                     <div id="generator-section">
                         <div class="topic-label">