filippodb
/
LocalCDN-Firefox-Chrome-Brave
mirror of https://codeberg.org/nobody/LocalCDN.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Customizable badge as HTML filter indicator (#613)

This commit is contained in:
nobody 2021-08-11 06:29:09 +02:00
parent 881ef97a8e
commit ea567e76d8
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
12 changed files with 279 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc
View File

@ -28,6 +28,8 @@
"EncodingTypes": true,
"ExtraInfoSpec": true,
"MathJaxFiles": true,
"BadgeSetting": true,
"BadgeSettingHTMLFilter": true,
"fileGuard": true,
"files": true,

34
core/constants.js
View File

@ -81,8 +81,10 @@ const Setting = {
'DEFAULT_RANGE_STATISTIC': 'defaultRangeStatistic',
'ALLOWED_DOMAINS_GOOGLE_FONTS': 'allowedDomainsGoogleFonts',
'STORAGE_TYPE': 'storageType',
'BADGE_COLOR': 'badgeColor',
'BADGE_TEXT_COLOR': 'badgeTextColor',
'BADGE_DEFAULT_BACKGROUND_COLOR': 'badgeDefaultBackgroundColor',
'BADGE_DEFAULT_TEXT_COLOR': 'badgeDefaultTextColor',
'BADGE_HTML_FILTER_BACKGROUND_COLOR': 'badgeHTMLFilterBackgroundColor',
'BADGE_HTML_FILTER_TEXT_COLOR': 'badgeHTMLfilterTextColor',
'HIDE_DONATION_BUTTON': 'hideDonationButton',
'CHANGE_BADGE_COLOR_MISSING_RESOURCES': 'changeBadgeColorMissingResources',
};
@ -108,8 +110,10 @@ const SettingDefaults = {
[Setting.STRIP_METADATA]: true,
[Setting.ALLOWLISTED_DOMAINS]: {},
[Setting.XHR_TEST_DOMAIN]: Address.LOCALCDN,
[Setting.BADGE_COLOR]: '#4A826C',
[Setting.BADGE_TEXT_COLOR]: '#FFFFFF',
[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: '#4A826C',
[Setting.BADGE_DEFAULT_TEXT_COLOR]: '#FFFFFF',
[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: '#4A826C',
[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: '#FFFFFF',
[Setting.HIDE_DONATION_BUTTON]: false,
[Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES]: false,
};
@ -201,6 +205,28 @@ const IconType = {
}
};
const BadgeSetting = {
'TYPE': 'default',
'COUNTER_PREVIEW_BADGE': 'counter-preview-badge',
'PRE_BADGED_BACKGROUND_COLOR': 'pre-badged-background-color',
'BADGED_BACKGROUND_COLOR': 'badged-background-color',
'PRE_BADGED_TEXT_COLOR': 'pre-badged-text-color',
'BADGED_TEXT_COLOR': 'badged-text-color',
'RESTORE_BACKGROUND_COLOR': 'restore-background-color',
'RESTORE_TEXT_COLOR': 'restore-text-color',
};
const BadgeSettingHTMLFilter = {
'TYPE': 'html-filter',
'COUNTER_PREVIEW_BADGE': 'html-counter-preview-badge',
'PRE_BADGED_BACKGROUND_COLOR': 'html-pre-badged-background-color',
'BADGED_BACKGROUND_COLOR': 'html-badged-background-color',
'PRE_BADGED_TEXT_COLOR': 'html-pre-badged-text-color',
'BADGED_TEXT_COLOR': 'html-badged-text-color',
'RESTORE_BACKGROUND_COLOR': 'html-restore-background-color',
'RESTORE_TEXT_COLOR': 'html-restore-text-color',
};
const Regex = {
'GOOGLE_FONTS': /fonts\.(googleapis|gstatic)\.com\/(?!.*(Material\+Icons|materialicons).*).*/,
'GOOGLE_MATERIAL_ICONS': /fonts\.(googleapis|gstatic)\.com\/.*\?family=.*Material\+Icons/,

4
core/interceptor.js
View File

@ -94,10 +94,10 @@ interceptor._handleMissingCandidate = function (requestUrl, tabIdentifier) {
if (stateManager.changeBadgeColorMissingResources === true) {
missingCount = stateManager.tabs[tabIdentifier].missing || 0;
if (missingCount > 0 && injectionCount === 0) {
wrappers.setBadgeMissing(tabIdentifier, injectionCount);
wrappers.setBadgeText(tabIdentifier, injectionCount);
}
} else {
wrappers.defaultBadge(tabIdentifier, injectionCount);
wrappers.setBadgeText(tabIdentifier, injectionCount);
}
}

37
core/main.js
View File

@ -72,12 +72,20 @@ main._initializeSettings = function () {
'path': stateManager.selectedIcon
}, 'Enabled');
storageManager.amountInjected = items.amountInjected || 0;
interceptor.xhrTestDomain = items.xhrTestDomain || Address.LOCALCDN;
interceptor.allowedDomainsGoogleFonts = items.allowedDomainsGoogleFonts || {};
interceptor.blockMissing = items.blockMissing === undefined ? false : items.blockMissing;
interceptor.blockGoogleFonts = items.blockGoogleFonts === undefined ? true : items.blockGoogleFonts;
requestAnalyzer.allowlistedDomains = items.allowlistedDomains || {};
storageManager.amountInjected = items.amountInjected;
interceptor.xhrTestDomain = items.xhrTestDomain;
interceptor.allowedDomainsGoogleFonts = items.allowedDomainsGoogleFonts;
interceptor.blockMissing = items.blockMissing;
interceptor.blockGoogleFonts = items.blockGoogleFonts;
requestAnalyzer.allowlistedDomains = items.allowlistedDomains;
wrappers.badgeDefaultTextColor = items.badgeDefaultTextColor;
wrappers.badgeDefaultBackgroundColor = items.badgeDefaultBackgroundColor;
wrappers.badgeHTMLfilterTextColor = items.badgeHTMLfilterTextColor;
wrappers.badgeHTMLFilterBackgroundColor = items.badgeHTMLFilterBackgroundColor;
wrappers.setBadgeTextColor({'color': items.badgeDefaultTextColor, 'type': 'default'});
wrappers.setBadgeBackgroundColor({'color': items.badgeDefaultBackgroundColor, 'type': 'default'});
storageManager.type.set(items);
});
@ -101,9 +109,21 @@ main._showReleaseNotes = function (details) {
storageManager.type.get(null, function (items) {
let mappingUpdate = items.lastMappingUpdate !== mappings.lastMappingUpdate;
// Migrate old keys to new keys https://codeberg.org/nobody/LocalCDN/issues/613
if (items.badgeDefaultBackgroundColor === undefined) {
items.badgeDefaultBackgroundColor = items.badgeColor;
delete items.badgeColor;
}
// Migrate old keys to new keys https://codeberg.org/nobody/LocalCDN/issues/613
if (items.badgeDefaultTextColor === undefined) {
items.badgeDefaultTextColor = items.badgeTextColor;
delete items.badgeTextColor;
}
// Remove old keys
for (const key of Object.keys(items)) {
if (!(key in SettingDefaults)) {
if (!(key in SettingDefaults) && key !== undefined) {
delete items[key];
}
}
@ -113,7 +133,6 @@ main._showReleaseNotes = function (details) {
// Updated mappings.js
if (mappingUpdate) {
items.lastMappingUpdate = mappings.lastMappingUpdate;
storageManager.type.set(items);
}
if ((mappingUpdate && items.updateNotification === 1) || items.updateNotification === 2) {
@ -123,8 +142,8 @@ main._showReleaseNotes = function (details) {
});
} else {
// No mappings.js update
}
storageManager.type.set(items);
});
}
};

33
core/state-manager.js
View File

@ -30,13 +30,16 @@ var stateManager = {};
* Public Methods
*/
stateManager.registerInjection = function (tabIdentifier, injection) {
let injectionIdentifier, registeredTab, injectionCount, missingCount;
stateManager.registerInjection = function (tabIdentifier, injection, url) {
let injectionIdentifier, registeredTab, injectionCount, missingCount, initiatorDomain, listedToManipulateDOM;
injectionIdentifier = injection.source + injection.path + injection.version;
registeredTab = stateManager.tabs[tabIdentifier];
registeredTab.injections[injectionIdentifier] = injection;
initiatorDomain = helpers.extractDomainFromUrl(url, true) || Address.EXAMPLE;
listedToManipulateDOM = stateManager._domainIsListed(initiatorDomain, 'manipulate-dom');
injectionCount = Object.keys(registeredTab.injections).length || 0;
missingCount = registeredTab.missing || 0;
@ -48,10 +51,13 @@ stateManager.registerInjection = function (tabIdentifier, injection) {
}
if (stateManager.showIconBadge === true) {
if (missingCount > 0 && stateManager.changeBadgeColorMissingResources) {
wrappers.setBadgeMissing(tabIdentifier, injectionCount);
wrappers.setBadgeColoring(tabIdentifier, 'missing');
} else if (listedToManipulateDOM) {
wrappers.setBadgeColoring(tabIdentifier, 'htmlFilterOn');
} else {
wrappers.defaultBadge(tabIdentifier, injectionCount);
wrappers.setBadgeColoring(tabIdentifier, 'default');
}
wrappers.setBadgeText(tabIdentifier, injectionCount);
}
if (isNaN(storageManager.amountInjected)) {
storageManager.type.get(Setting.AMOUNT_INJECTED, function (items) {
@ -208,14 +214,19 @@ stateManager._handleStorageChanged = function (changes) {
stateManager.changeBadgeColorMissingResources = changes.changeBadgeColorMissingResources.newValue;
} else if (Setting.LOGGING in changes) {
stateManager.logging = changes.enableLogging.newValue;
} else if (Setting.BADGE_DEFAULT_TEXT_COLOR in changes) {
wrappers.badgeDefaultTextColor = changes.badgeDefaultTextColor.newValue;
} else if (Setting.BADGE_DEFAULT_BACKGROUND_COLOR in changes) {
wrappers.badgeDefaultBackgroundColor = changes.badgeDefaultBackgroundColor.newValue;
} else if (Setting.BADGE_HTML_FILTER_TEXT_COLOR in changes) {
wrappers.badgeHTMLfilterTextColor = changes.badgeHTMLfilterTextColor.newValue;
} else if (Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR in changes) {
wrappers.badgeHTMLFilterBackgroundColor = changes.badgeHTMLFilterBackgroundColor.newValue;
}
};
stateManager._clearBadgeText = function (tabIdentifier) {
wrappers.setBadgeText({
'tabId': tabIdentifier,
'text': ''
});
wrappers.setBadgeText(tabIdentifier, '');
};
stateManager._removeIconBadgeFromTab = function (tab) {
@ -328,7 +339,11 @@ chrome.webRequest.onErrorOccurred.addListener(function (requestDetails) {
chrome.webRequest.onBeforeRedirect.addListener(function (requestDetails) {
let knownRequest = stateManager.requests[requestDetails.requestId];
if (knownRequest) {
stateManager.registerInjection(knownRequest.tabIdentifier, knownRequest.targetDetails);
stateManager.registerInjection(
knownRequest.tabIdentifier,
knownRequest.targetDetails,
requestDetails.originUrl
);
delete stateManager.requests[requestDetails.requestId];
}
}, {'urls': [Address.ANY]});

14
core/storage-manager.js
View File

@ -79,8 +79,10 @@ storageManager.migrateData = function (target) {
[Setting.STRIP_METADATA]: data.stripMetadata,
[Setting.ALLOWLISTED_DOMAINS]: data.allowlistedDomains,
[Setting.XHR_TEST_DOMAIN]: data.xhrTestDomain,
[Setting.BADGE_COLOR]: data.badgeColor,
[Setting.BADGE_TEXT_COLOR]: data.badgeTextColor
[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: data.badgeDefaultBackgroundColor,
[Setting.BADGE_DEFAULT_TEXT_COLOR]: data.badgeDefaultTextColor,
[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: data.badgeHTMLFilterBackgroundColor,
[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: data.badgeHTMLfilterTextColor
});
});
};
@ -169,6 +171,14 @@ storageManager._validation = function (content) {
content.updateNotification = parseInt(content.updateNotification);
}
// Migrate badge colors
if (content.badgeDefaultBackgroundColor === undefined) {
content.badgeDefaultBackgroundColor = content.badgeColor;
}
if (content.badgeDefaultTextColor === undefined) {
content.badgeDefaultTextColor = content.badgeTextColor;
}
for (const [key, value] of Object.entries(SettingDefaults)) {
// If type the same as default settings
if (typeof value === typeof content[key]) {

101
modules/internal/wrappers.js
View File

@ -30,27 +30,36 @@ var wrappers = {};
*/
wrappers.setBadgeBackgroundColor = function (details) {
if (chrome.browserAction.setBadgeBackgroundColor !== undefined) {
chrome.browserAction.setBadgeBackgroundColor(details);
storageManager.type.set({
[Setting.BADGE_COLOR]: details.color
});
if (chrome.browserAction.setBadgeBackgroundColor === undefined) {
return;
}
};
wrappers.setBadgeText = function (details) {
if (chrome.browserAction.setBadgeText !== undefined) {
chrome.browserAction.setBadgeText(details);
if (details.type === 'default') {
storageManager.type.set({[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: details.color});
wrappers.badgeDefaultBackgroundColor = details.color;
} else if (details.type === 'html-filter') {
storageManager.type.set({[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: details.color});
wrappers.badgeColorHTMLfilter = details.color;
}
};
wrappers.setBadgeTextColor = function (details) {
if (chrome.browserAction.setBadgeTextColor !== undefined) {
chrome.browserAction.setBadgeTextColor(details);
if (chrome.browserAction.setBadgeTextColor === undefined) {
return;
}
if (details.type === 'default') {
storageManager.type.set({[Setting.BADGE_DEFAULT_TEXT_COLOR]: details.color});
wrappers.badgeDefaultTextColor = details.color;
} else if (details.type === 'html-filter') {
storageManager.type.set({[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: details.color});
wrappers.badgeDefaultTextColorHTMLfilter = details.color;
}
};
storageManager.type.set({
[Setting.BADGE_TEXT_COLOR]: details.color
wrappers.setBadgeText = function (tabId, text) {
if (chrome.browserAction.setBadgeText !== undefined) {
chrome.browserAction.setBadgeText({
'tabId': tabId,
'text': `${text}`
});
}
};
@ -62,49 +71,33 @@ wrappers.setIcon = function (details, type) {
}
};
wrappers.setBadgeMissing = function (tabIdentifier, counter) {
chrome.browserAction.setBadgeText({
'tabId': tabIdentifier,
'text': `${counter}`,
});
if (BrowserType.FIREFOX) {
chrome.browserAction.setBadgeTextColor({
'tabId': tabIdentifier,
'color': 'black',
});
chrome.browserAction.setBadgeBackgroundColor({
'tabId': tabIdentifier,
'color': 'yellow',
});
wrappers.setBadgeColoring = function (tabId, value) {
let textColor, backgroundColor;
if (chrome.browserAction.setBadgeBackgroundColor === undefined ||
chrome.browserAction.setBadgeTextColor === undefined) {
return;
}
if (value === 'htmlFilterOn') {
textColor = wrappers.badgeHTMLfilterTextColor;
backgroundColor = wrappers.badgeHTMLFilterBackgroundColor;
} else if (value === 'default') {
textColor = wrappers.badgeDefaultTextColor;
backgroundColor = wrappers.badgeDefaultBackgroundColor;
} else if (value === 'missing') {
textColor = 'white';
backgroundColor = 'blue';
} else {
chrome.browserAction.setBadgeBackgroundColor({
'tabId': tabIdentifier,
'color': 'red',
});
return;
}
};
wrappers.defaultBadge = function (tabIdentifier, counter) {
chrome.browserAction.setBadgeText({
'tabId': tabIdentifier,
'text': `${counter}`,
chrome.browserAction.setBadgeTextColor({
'tabId': tabId,
'color': textColor
});
if (BrowserType.FIREFOX) {
chrome.browserAction.setBadgeTextColor({
'tabId': tabIdentifier,
'color': wrappers.textColor
});
}
chrome.browserAction.setBadgeBackgroundColor({
'tabId': tabIdentifier,
'color': wrappers.backgroundColor
'tabId': tabId,
'color': backgroundColor
});
};
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});
});

156
pages/options/options-other.js
View File

@ -27,41 +27,50 @@ var optionsOther = {};
*/
optionsOther._renderIconSection = function (opt) {
let url, bgColor, txtColor;
let url, bgColor, txtColor, selectedIcon;
if (!chrome.browserAction.setIcon) {
document.getElementById('icon-style-div').style.display = 'none';
} else {
let selectedIcon = opt.selectedIcon;
if (selectedIcon === 'Default') {
document.getElementById('icon-default').checked = true;
} else if (selectedIcon === 'Grey') {
document.getElementById('icon-grey').checked = true;
} else if (selectedIcon === 'Light') {
document.getElementById('icon-light').checked = true;
}
url = chrome.runtime.getURL(`icons/action/${selectedIcon.toLowerCase()}/icon38-default.png`);
document.getElementById('icon-badge-preview').src = url;
bgColor = opt.badgeColor || '#4A826C';
txtColor = opt.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('badged-background-color').addEventListener('keyup', optionsOther._onChangedHexColor);
document.getElementById('badged-text-color').addEventListener('keyup', optionsOther._onChangedHexColor);
document.getElementById('restore-background-color').addEventListener('click', optionsOther._setDefaultColor);
document.getElementById('restore-text-color').addEventListener('click', optionsOther._setDefaultColor);
optionsOther._colorPicker();
return;
}
selectedIcon = opt.selectedIcon;
if (selectedIcon === 'Default') {
document.getElementById('icon-default').checked = true;
} else if (selectedIcon === 'Grey') {
document.getElementById('icon-grey').checked = true;
} else if (selectedIcon === 'Light') {
document.getElementById('icon-light').checked = true;
}
url = chrome.runtime.getURL(`icons/action/${selectedIcon.toLowerCase()}/icon38-default.png`);
document.getElementById('icon-badge-preview').src = url;
document.getElementById('html-icon-badge-preview').src = url;
bgColor = opt.badgeDefaultBackgroundColor;
txtColor = opt.badgeDefaultTextColor;
optionsOther._createBadge(BadgeSetting, bgColor, txtColor);
bgColor = opt.badgeHTMLFilterBackgroundColor;
txtColor = opt.badgeHTMLfilterTextColor;
optionsOther._createBadge(BadgeSettingHTMLFilter, bgColor, txtColor);
};
optionsOther._createBadge = function (element, bgColor, txtColor) {
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
document.getElementById(element.BADGED_BACKGROUND_COLOR).value = bgColor;
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
document.getElementById(element.BADGED_TEXT_COLOR).value = txtColor;
document.getElementById(element.BADGED_BACKGROUND_COLOR).addEventListener('keyup', optionsOther._onChangedHexColor);
document.getElementById(element.BADGED_TEXT_COLOR).addEventListener('keyup', optionsOther._onChangedHexColor);
document.getElementById(element.RESTORE_BACKGROUND_COLOR).addEventListener('click', optionsOther._setDefaultColor);
document.getElementById(element.RESTORE_TEXT_COLOR).addEventListener('click', optionsOther._setDefaultColor);
optionsOther._colorPicker(element);
};
optionsOther._renderStorageSection = function (opt) {
@ -79,6 +88,7 @@ optionsOther._setIcon = function (optionValue) {
wrappers.setIcon({'path': optionValue}, 'Enabled');
let url = chrome.runtime.getURL(`icons/action/${optionValue.toLowerCase()}/icon38-default.png`);
document.getElementById('icon-badge-preview').src = url;
document.getElementById('html-icon-badge-preview').src = url;
};
optionsOther._preSelectStorage = function (type) {
@ -100,63 +110,71 @@ optionsOther._onStorageOptionChanged = function ({target}) {
}
};
optionsOther._colorPicker = function () {
optionsOther._colorPicker = function (element) {
/* eslint-disable no-undef, no-invalid-this */
const badgeBackgroundColor = new CP(document.getElementById('badged-background-color'));
const badgeBackgroundColor = new CP(document.getElementById(element.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 bgColor = this.color(r, g, b);
wrappers.setBadgeBackgroundColor({'color': bgColor, 'type': element.TYPE});
this.source.value = bgColor;
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
});
const badgeTextColor = new CP(document.getElementById('badged-text-color'));
badgeTextColor.on('change', function (r, g, b) {
const badgeDefaultTextColor = new CP(document.getElementById(element.BADGED_TEXT_COLOR));
badgeDefaultTextColor.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;
badgeDefaultTextColor.on('drag', function (r, g, b) {
let txtColor = this.color(r, g, b);
wrappers.setBadgeTextColor({'color': txtColor, 'type': element.TYPE});
this.source.value = txtColor;
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
});
/* eslint-enable no-undef, no-invalid-this */
};
optionsOther._setDefaultColor = function ({target}) {
if (target.id === 'restore-text-color') {
options._textColor = '#FFFFFF';
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-text-color').value = options._textColor;
let element;
if (target.id === 'restore-text-color' || target.id === 'restore-background-color') {
element = BadgeSetting;
} else {
element = BadgeSettingHTMLFilter;
}
if (target.id === element.RESTORE_TEXT_COLOR) {
let txtColor = '#FFFFFF';
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
document.getElementById(element.BADGED_TEXT_COLOR).value = txtColor;
} else if (target.id === 'restore-background-color') {
options._backgroundColor = '#4A826C';
wrappers.setBadgeBackgroundColor({'color': options._backgroundColor});
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;
let bgColor = '#4A826C';
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
document.getElementById(element.BADGED_BACKGROUND_COLOR).value = bgColor;
}
};
optionsOther._onChangedHexColor = function ({target}) {
let element;
if (target.id === 'badged-text-color' || target.id === 'badged-background-color') {
element = BadgeSetting;
} else {
element = BadgeSettingHTMLFilter;
}
if (/#([a-f0-9]{3}){1,2}\b/i.test(target.value)) {
target.classList.remove('color-error');
if (target.id === 'badged-text-color') {
options._textColor = target.value;
wrappers.setBadgeTextColor({'color': options._textColor});
document.getElementById('counter-preview-badge').style.color = options._textColor;
document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
if (target.id === element.BADGED_TEXT_COLOR) {
let txtColor = target.value;
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
} else {
options._backgroundColor = target.value;
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 bgColor = target.value;
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
}
} else {
target.classList.add('color-error');
@ -174,6 +192,12 @@ optionsOther.init = function (opt) {
optionsOther._renderIconSection(opt);
optionsOther._renderStorageSection(opt);
document.getElementById('badged-background-color').addEventListener('change', options.onOptionChanged);
document.getElementById('badged-text-color').addEventListener('change', options.onOptionChanged);
document.getElementById('html-badged-background-color').addEventListener('change', options.onOptionChanged);
document.getElementById('html-badged-text-color').addEventListener('change', options.onOptionChanged);
};
optionsOther._platformSupportIcons = true;

38
pages/options/options.css
View File

@ -69,7 +69,7 @@ body {
.div-selected-icon {
margin-top: 10px;
min-width: 113px;
width: 100%;
padding-right: 25px;
}
@ -183,21 +183,20 @@ body {
.div-icons-badge-colors {
display: flex;
flex-wrap: nowrap;
flex-wrap: wrap;
}
.div-badge {
border-left: 1px solid #bbb;
margin-top: 10px;
padding-left: 30px;
padding: 0 30px 0 0;
}
#badge-preview-top {
#badge-preview-top, #html-badge-preview-top {
position: relative;
width: 38px;
}
#counter-preview-badge {
#counter-preview-badge, #html-counter-preview-badge {
background: black;
border-radius: 5px;
color: white;
@ -208,13 +207,14 @@ body {
top: 0;
}
#pre-badged-background-color, #pre-badged-text-color {
#pre-badged-background-color, #pre-badged-text-color,
#html-pre-badged-background-color, #html-pre-badged-text-color {
height: 30px;
margin-right: 5px;
width: 30px;
}
#icon-badge-preview {
#icon-badge-preview, #html-icon-badge-preview {
margin-top: 5px;
}
@ -237,7 +237,8 @@ div[class="color-picker:a"] {
color: red;
}
#badged-background-color, #badged-text-color {
#badged-background-color, #badged-text-color,
#html-badged-background-color, #html-badged-text-color {
max-width: 150px;
}
@ -393,21 +394,16 @@ body[dir="rtl"] .input-text {
padding-bottom: 0.5rem;
}
@media only screen and (max-width: 500px) {
.option-group {
padding: 0.7rem;
}
}
@media only screen and (max-width: 435px) {
.div-icons-badge-colors {
flex-wrap: wrap;
}
@media only screen and (max-width: 760px) {
.div-badge {
border: none;
padding-left: 0;
width: 100%;
}
}
@media only screen and (max-width: 500px) {
.option-group {
padding: 0.7rem;
}
}

24
pages/options/options.html
View File

@ -271,6 +271,7 @@
</label>
</div>
<div class="div-badge">
<p>Default</p>
<div id="badge-preview-top">
<div>
<img id="icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="Default" class="icons">
@ -280,11 +281,30 @@
<div id="badge-preview-bottom">
<div class="colorpicker">
<div id="pre-badged-background-color"></div>
<input id="badged-background-color" data-option="badgeColor" class="input-text" maxlength="7"><img id="restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
<input id="badged-background-color" data-option="badgeDefaultBackgroundColor" class="input-text" maxlength="7"><img id="restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
</div>
<div id="div-badged-text-color" class="colorpicker">
<div id="pre-badged-text-color"></div>
<input id="badged-text-color" data-option="badgeTextColor" class="input-text" maxlength="7"><img id="restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
<input id="badged-text-color" data-option="badgeDefaultTextColor" class="input-text" maxlength="7"><img id="restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
</div>
</div>
</div>
<div class="div-badge">
<p>HTML filter enabled</p>
<div id="html-badge-preview-top">
<div>
<img id="html-icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="Default" class="icons">
<div id="html-counter-preview-badge"><span>17</span></div>
</div>
</div>
<div id="html-badge-preview-bottom">
<div class="colorpicker">
<div id="html-pre-badged-background-color"></div>
<input id="html-badged-background-color" data-option="badgeHTMLFilterBackgroundColor" class="input-text" maxlength="7"><img id="html-restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
</div>
<div id="html-div-badged-text-color" class="colorpicker">
<div id="html-pre-badged-text-color"></div>
<input id="html-badged-text-color" data-option="badgeHTMLfilterTextColor" class="input-text" maxlength="7"><img id="html-restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
</div>
</div>
</div>

6
pages/options/options.js
View File

@ -84,8 +84,10 @@ options._renderOptionsPanel = function () {
other = {
'selectedIcon': options._optionValues.selectedIcon,
'badgeColor': options._optionValues.badgeColor,
'badgeTextColor': options._optionValues.badgeTextColor,
'badgeDefaultBackgroundColor': options._optionValues.badgeDefaultBackgroundColor,
'badgeDefaultTextColor': options._optionValues.badgeDefaultTextColor,
'badgeHTMLFilterBackgroundColor': options._optionValues.badgeHTMLFilterBackgroundColor,
'badgeHTMLfilterTextColor': options._optionValues.badgeHTMLfilterTextColor,
'storageType': options._optionValues.storageType
};

1
pages/updates/updates.html
View File

@ -71,6 +71,7 @@
<li>Examples for the allow list Google Fonts(<a href="https://codeberg.org/nobody/LocalCDN/issue/585">#585</a>)</li>
<li>Unused permission removed (<a href="https://codeberg.org/nobody/LocalCDN/issue/612">#612</a>)</li>
<li>Wildcard support for Google Fonts and HTML filter list (<a href="https://codeberg.org/nobody/LocalCDN/issue/613">#613</a>)</li>
<li>Customizable badge as HTML filter indicator (<a href="https://codeberg.org/nobody/LocalCDN/issue/613">#613</a>)</li>
</ul>
</div>
<div id="generator-section">