Customizable badge for missing resources and some code improvements (#613)
This commit is contained in:
parent
2f6ddd8c2f
commit
7001d5eec2
|
@ -30,6 +30,7 @@
|
||||||
"MathJaxFiles": true,
|
"MathJaxFiles": true,
|
||||||
"BadgeSetting": true,
|
"BadgeSetting": true,
|
||||||
"BadgeSettingHTMLFilter": true,
|
"BadgeSettingHTMLFilter": true,
|
||||||
|
"BadgeSettingMissingResource": true,
|
||||||
|
|
||||||
"fileGuard": true,
|
"fileGuard": true,
|
||||||
"files": true,
|
"files": true,
|
||||||
|
|
|
@ -60,6 +60,48 @@ const Resource = {
|
||||||
'VERSION_PLACEHOLDER': '{version}'
|
'VERSION_PLACEHOLDER': '{version}'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const BadgeSetting = {
|
||||||
|
'TYPE': 'default',
|
||||||
|
'COUNTER_PREVIEW_BADGE': 'counter-preview-badge',
|
||||||
|
'HTML_ICON_BADGE_PREVIEW': 'icon-badge-preview',
|
||||||
|
'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',
|
||||||
|
'HEX_BACKGROUND_COLOR': '#4A826C',
|
||||||
|
'HEX_TEXT_COLOR': '#FFFFFF',
|
||||||
|
};
|
||||||
|
|
||||||
|
const BadgeSettingHTMLFilter = {
|
||||||
|
'TYPE': 'html-filter',
|
||||||
|
'COUNTER_PREVIEW_BADGE': 'html-counter-preview-badge',
|
||||||
|
'HTML_ICON_BADGE_PREVIEW': 'html-icon-badge-preview',
|
||||||
|
'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',
|
||||||
|
'HEX_BACKGROUND_COLOR': '#FF0000',
|
||||||
|
'HEX_TEXT_COLOR': '#FFFFFF',
|
||||||
|
};
|
||||||
|
|
||||||
|
const BadgeSettingMissingResource = {
|
||||||
|
'TYPE': 'missing-resource',
|
||||||
|
'COUNTER_PREVIEW_BADGE': 'missing-counter-preview-badge',
|
||||||
|
'HTML_ICON_BADGE_PREVIEW': 'missing-icon-badge-preview',
|
||||||
|
'PRE_BADGED_BACKGROUND_COLOR': 'missing-pre-badged-background-color',
|
||||||
|
'BADGED_BACKGROUND_COLOR': 'missing-badged-background-color',
|
||||||
|
'PRE_BADGED_TEXT_COLOR': 'missing-pre-badged-text-color',
|
||||||
|
'BADGED_TEXT_COLOR': 'missing-badged-text-color',
|
||||||
|
'RESTORE_BACKGROUND_COLOR': 'missing-restore-background-color',
|
||||||
|
'RESTORE_TEXT_COLOR': 'missing-restore-text-color',
|
||||||
|
'HEX_BACKGROUND_COLOR': '#0000FF',
|
||||||
|
'HEX_TEXT_COLOR': '#FFFFFF',
|
||||||
|
};
|
||||||
|
|
||||||
const Setting = {
|
const Setting = {
|
||||||
'AMOUNT_INJECTED': 'amountInjected',
|
'AMOUNT_INJECTED': 'amountInjected',
|
||||||
'BLOCK_MISSING': 'blockMissing',
|
'BLOCK_MISSING': 'blockMissing',
|
||||||
|
@ -85,6 +127,8 @@ const Setting = {
|
||||||
'BADGE_DEFAULT_TEXT_COLOR': 'badgeDefaultTextColor',
|
'BADGE_DEFAULT_TEXT_COLOR': 'badgeDefaultTextColor',
|
||||||
'BADGE_HTML_FILTER_BACKGROUND_COLOR': 'badgeHTMLFilterBackgroundColor',
|
'BADGE_HTML_FILTER_BACKGROUND_COLOR': 'badgeHTMLFilterBackgroundColor',
|
||||||
'BADGE_HTML_FILTER_TEXT_COLOR': 'badgeHTMLfilterTextColor',
|
'BADGE_HTML_FILTER_TEXT_COLOR': 'badgeHTMLfilterTextColor',
|
||||||
|
'BADGE_MISSING_RESOURCE_BACKGROUND_COLOR': 'badgeMissingResourceBackgroundColor',
|
||||||
|
'BADGE_MISSING_RESOURCE_TEXT_COLOR': 'badgeMissingResourceTextColor',
|
||||||
'HIDE_DONATION_BUTTON': 'hideDonationButton',
|
'HIDE_DONATION_BUTTON': 'hideDonationButton',
|
||||||
'CHANGE_BADGE_COLOR_MISSING_RESOURCES': 'changeBadgeColorMissingResources',
|
'CHANGE_BADGE_COLOR_MISSING_RESOURCES': 'changeBadgeColorMissingResources',
|
||||||
};
|
};
|
||||||
|
@ -110,10 +154,12 @@ const SettingDefaults = {
|
||||||
[Setting.STRIP_METADATA]: true,
|
[Setting.STRIP_METADATA]: true,
|
||||||
[Setting.ALLOWLISTED_DOMAINS]: {},
|
[Setting.ALLOWLISTED_DOMAINS]: {},
|
||||||
[Setting.XHR_TEST_DOMAIN]: Address.LOCALCDN,
|
[Setting.XHR_TEST_DOMAIN]: Address.LOCALCDN,
|
||||||
[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: '#4A826C',
|
[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: BadgeSetting.HEX_BACKGROUND_COLOR,
|
||||||
[Setting.BADGE_DEFAULT_TEXT_COLOR]: '#FFFFFF',
|
[Setting.BADGE_DEFAULT_TEXT_COLOR]: BadgeSetting.HEX_TEXT_COLOR,
|
||||||
[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: '#4A826C',
|
[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: BadgeSettingHTMLFilter.HEX_BACKGROUND_COLOR,
|
||||||
[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: '#FFFFFF',
|
[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: BadgeSettingHTMLFilter.HEX_TEXT_COLOR,
|
||||||
|
[Setting.BADGE_MISSING_RESOURCE_BACKGROUND_COLOR]: BadgeSettingMissingResource.HEX_BACKGROUND_COLOR,
|
||||||
|
[Setting.BADGE_MISSING_RESOURCE_TEXT_COLOR]: BadgeSettingMissingResource.HEX_TEXT_COLOR,
|
||||||
[Setting.HIDE_DONATION_BUTTON]: false,
|
[Setting.HIDE_DONATION_BUTTON]: false,
|
||||||
[Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES]: false,
|
[Setting.CHANGE_BADGE_COLOR_MISSING_RESOURCES]: false,
|
||||||
};
|
};
|
||||||
|
@ -205,28 +251,6 @@ 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 = {
|
const Regex = {
|
||||||
'GOOGLE_FONTS': /fonts\.(googleapis|gstatic)\.com\/(?!.*(Material\+Icons|materialicons).*).*/,
|
'GOOGLE_FONTS': /fonts\.(googleapis|gstatic)\.com\/(?!.*(Material\+Icons|materialicons).*).*/,
|
||||||
'GOOGLE_MATERIAL_ICONS': /fonts\.(googleapis|gstatic)\.com\/.*\?family=.*Material\+Icons/,
|
'GOOGLE_MATERIAL_ICONS': /fonts\.(googleapis|gstatic)\.com\/.*\?family=.*Material\+Icons/,
|
||||||
|
|
|
@ -83,6 +83,8 @@ main._initializeSettings = function () {
|
||||||
wrappers.badgeDefaultBackgroundColor = items.badgeDefaultBackgroundColor;
|
wrappers.badgeDefaultBackgroundColor = items.badgeDefaultBackgroundColor;
|
||||||
wrappers.badgeHTMLfilterTextColor = items.badgeHTMLfilterTextColor;
|
wrappers.badgeHTMLfilterTextColor = items.badgeHTMLfilterTextColor;
|
||||||
wrappers.badgeHTMLFilterBackgroundColor = items.badgeHTMLFilterBackgroundColor;
|
wrappers.badgeHTMLFilterBackgroundColor = items.badgeHTMLFilterBackgroundColor;
|
||||||
|
wrappers.badgeMissingResourceTextColor = items.badgeMissingResourceTextColor;
|
||||||
|
wrappers.badgeMissingResourceBackgroundColor = items.badgeMissingResourceBackgroundColor;
|
||||||
|
|
||||||
wrappers.setBadgeTextColor({'color': items.badgeDefaultTextColor, 'type': 'default'});
|
wrappers.setBadgeTextColor({'color': items.badgeDefaultTextColor, 'type': 'default'});
|
||||||
wrappers.setBadgeBackgroundColor({'color': items.badgeDefaultBackgroundColor, 'type': 'default'});
|
wrappers.setBadgeBackgroundColor({'color': items.badgeDefaultBackgroundColor, 'type': 'default'});
|
||||||
|
|
|
@ -51,11 +51,11 @@ stateManager.registerInjection = function (tabIdentifier, injection, url) {
|
||||||
}
|
}
|
||||||
if (stateManager.showIconBadge === true) {
|
if (stateManager.showIconBadge === true) {
|
||||||
if (missingCount > 0 && stateManager.changeBadgeColorMissingResources) {
|
if (missingCount > 0 && stateManager.changeBadgeColorMissingResources) {
|
||||||
wrappers.setBadgeColoring(tabIdentifier, 'missing');
|
wrappers.setBadgeColoring(tabIdentifier, BadgeSettingMissingResource.TYPE);
|
||||||
} else if (listedToManipulateDOM) {
|
} else if (listedToManipulateDOM) {
|
||||||
wrappers.setBadgeColoring(tabIdentifier, 'htmlFilterOn');
|
wrappers.setBadgeColoring(tabIdentifier, BadgeSettingHTMLFilter.TYPE);
|
||||||
} else {
|
} else {
|
||||||
wrappers.setBadgeColoring(tabIdentifier, 'default');
|
wrappers.setBadgeColoring(tabIdentifier, BadgeSetting.TYPE);
|
||||||
}
|
}
|
||||||
wrappers.setBadgeText(tabIdentifier, injectionCount);
|
wrappers.setBadgeText(tabIdentifier, injectionCount);
|
||||||
}
|
}
|
||||||
|
|
|
@ -200,15 +200,10 @@ storageManager._validation = function (content) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// set values directly
|
|
||||||
wrappers.setIcon({'path': imported['selectedIcon']}, 'Enabled');
|
|
||||||
storageManager.amountInjected = imported['amountInjected'];
|
|
||||||
storageManager.statistics = imported['internalStatisticsData'];
|
|
||||||
|
|
||||||
storageManager.type.set(imported);
|
storageManager.type.set(imported);
|
||||||
|
|
||||||
alert(chrome.i18n.getMessage('dialogImportSuccessful'));
|
alert(chrome.i18n.getMessage('dialogImportSuccessful'));
|
||||||
chrome.tabs.reload();
|
chrome.runtime.reload();
|
||||||
};
|
};
|
||||||
|
|
||||||
storageManager._validateDomainsAndStatistics = function (type, obj) {
|
storageManager._validateDomainsAndStatistics = function (type, obj) {
|
||||||
|
|
|
@ -33,12 +33,16 @@ wrappers.setBadgeBackgroundColor = function (details) {
|
||||||
if (chrome.browserAction.setBadgeBackgroundColor === undefined) {
|
if (chrome.browserAction.setBadgeBackgroundColor === undefined) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (details.type === 'default') {
|
|
||||||
|
if (details.type === BadgeSetting.TYPE) {
|
||||||
storageManager.type.set({[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: details.color});
|
storageManager.type.set({[Setting.BADGE_DEFAULT_BACKGROUND_COLOR]: details.color});
|
||||||
wrappers.badgeDefaultBackgroundColor = details.color;
|
wrappers.badgeDefaultBackgroundColor = details.color;
|
||||||
} else if (details.type === 'html-filter') {
|
} else if (details.type === BadgeSettingHTMLFilter.TYPE) {
|
||||||
storageManager.type.set({[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: details.color});
|
storageManager.type.set({[Setting.BADGE_HTML_FILTER_BACKGROUND_COLOR]: details.color});
|
||||||
wrappers.badgeColorHTMLfilter = details.color;
|
wrappers.badgeColorHTMLfilter = details.color;
|
||||||
|
} else if (details.type === BadgeSettingMissingResource.TYPE) {
|
||||||
|
storageManager.type.set({[Setting.BADGE_MISSING_RESOURCE_BACKGROUND_COLOR]: details.color});
|
||||||
|
wrappers.badgeMissingResourceBackgroundColor = details.color;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -46,12 +50,16 @@ wrappers.setBadgeTextColor = function (details) {
|
||||||
if (chrome.browserAction.setBadgeTextColor === undefined) {
|
if (chrome.browserAction.setBadgeTextColor === undefined) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (details.type === 'default') {
|
|
||||||
|
if (details.type === BadgeSetting.TYPE) {
|
||||||
storageManager.type.set({[Setting.BADGE_DEFAULT_TEXT_COLOR]: details.color});
|
storageManager.type.set({[Setting.BADGE_DEFAULT_TEXT_COLOR]: details.color});
|
||||||
wrappers.badgeDefaultTextColor = details.color;
|
wrappers.badgeDefaultTextColor = details.color;
|
||||||
} else if (details.type === 'html-filter') {
|
} else if (details.type === BadgeSettingHTMLFilter.TYPE) {
|
||||||
storageManager.type.set({[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: details.color});
|
storageManager.type.set({[Setting.BADGE_HTML_FILTER_TEXT_COLOR]: details.color});
|
||||||
wrappers.badgeDefaultTextColorHTMLfilter = details.color;
|
wrappers.badgeDefaultTextColorHTMLfilter = details.color;
|
||||||
|
} else if (details.type === BadgeSettingMissingResource.TYPE) {
|
||||||
|
storageManager.type.set({[Setting.BADGE_MISSING_RESOURCE_TEXT_COLOR]: details.color});
|
||||||
|
wrappers.badgeMissingResourceTextColor = details.color;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -79,15 +87,15 @@ wrappers.setBadgeColoring = function (tabId, value) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (value === 'htmlFilterOn') {
|
if (value === BadgeSettingHTMLFilter.TYPE) {
|
||||||
textColor = wrappers.badgeHTMLfilterTextColor;
|
textColor = wrappers.badgeHTMLfilterTextColor;
|
||||||
backgroundColor = wrappers.badgeHTMLFilterBackgroundColor;
|
backgroundColor = wrappers.badgeHTMLFilterBackgroundColor;
|
||||||
} else if (value === 'default') {
|
} else if (value === BadgeSetting.TYPE) {
|
||||||
textColor = wrappers.badgeDefaultTextColor;
|
textColor = wrappers.badgeDefaultTextColor;
|
||||||
backgroundColor = wrappers.badgeDefaultBackgroundColor;
|
backgroundColor = wrappers.badgeDefaultBackgroundColor;
|
||||||
} else if (value === 'missing') {
|
} else if (value === BadgeSettingMissingResource.TYPE) {
|
||||||
textColor = 'white';
|
textColor = wrappers.badgeMissingResourceTextColor;
|
||||||
backgroundColor = 'blue';
|
backgroundColor = wrappers.badgeMissingResourceBackgroundColor;
|
||||||
} else {
|
} else {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,8 +44,9 @@ optionsOther._renderIconSection = function (opt) {
|
||||||
document.getElementById('icon-light').checked = true;
|
document.getElementById('icon-light').checked = true;
|
||||||
}
|
}
|
||||||
url = chrome.runtime.getURL(`icons/action/${selectedIcon.toLowerCase()}/icon38-default.png`);
|
url = chrome.runtime.getURL(`icons/action/${selectedIcon.toLowerCase()}/icon38-default.png`);
|
||||||
document.getElementById('icon-badge-preview').src = url;
|
document.getElementById(BadgeSetting.HTML_ICON_BADGE_PREVIEW).src = url;
|
||||||
document.getElementById('html-icon-badge-preview').src = url;
|
document.getElementById(BadgeSettingHTMLFilter.HTML_ICON_BADGE_PREVIEW).src = url;
|
||||||
|
document.getElementById(BadgeSettingMissingResource.HTML_ICON_BADGE_PREVIEW).src = url;
|
||||||
|
|
||||||
bgColor = opt.badgeDefaultBackgroundColor;
|
bgColor = opt.badgeDefaultBackgroundColor;
|
||||||
txtColor = opt.badgeDefaultTextColor;
|
txtColor = opt.badgeDefaultTextColor;
|
||||||
|
@ -54,6 +55,10 @@ optionsOther._renderIconSection = function (opt) {
|
||||||
bgColor = opt.badgeHTMLFilterBackgroundColor;
|
bgColor = opt.badgeHTMLFilterBackgroundColor;
|
||||||
txtColor = opt.badgeHTMLfilterTextColor;
|
txtColor = opt.badgeHTMLfilterTextColor;
|
||||||
optionsOther._createBadge(BadgeSettingHTMLFilter, bgColor, txtColor);
|
optionsOther._createBadge(BadgeSettingHTMLFilter, bgColor, txtColor);
|
||||||
|
|
||||||
|
bgColor = opt.badgeMissingResourceBackgroundColor;
|
||||||
|
txtColor = opt.badgeMissingResourceTextColor;
|
||||||
|
optionsOther._createBadge(BadgeSettingMissingResource, bgColor, txtColor);
|
||||||
};
|
};
|
||||||
|
|
||||||
optionsOther._createBadge = function (element, bgColor, txtColor) {
|
optionsOther._createBadge = function (element, bgColor, txtColor) {
|
||||||
|
@ -87,8 +92,9 @@ optionsOther._renderStorageSection = function (opt) {
|
||||||
optionsOther._setIcon = function (optionValue) {
|
optionsOther._setIcon = function (optionValue) {
|
||||||
wrappers.setIcon({'path': optionValue}, 'Enabled');
|
wrappers.setIcon({'path': optionValue}, 'Enabled');
|
||||||
let url = chrome.runtime.getURL(`icons/action/${optionValue.toLowerCase()}/icon38-default.png`);
|
let url = chrome.runtime.getURL(`icons/action/${optionValue.toLowerCase()}/icon38-default.png`);
|
||||||
document.getElementById('icon-badge-preview').src = url;
|
document.getElementById(BadgeSetting.HTML_ICON_BADGE_PREVIEW).src = url;
|
||||||
document.getElementById('html-icon-badge-preview').src = url;
|
document.getElementById(BadgeSettingHTMLFilter.HTML_ICON_BADGE_PREVIEW).src = url;
|
||||||
|
document.getElementById(BadgeSettingMissingResource.HTML_ICON_BADGE_PREVIEW).src = url;
|
||||||
};
|
};
|
||||||
|
|
||||||
optionsOther._preSelectStorage = function (type) {
|
optionsOther._preSelectStorage = function (type) {
|
||||||
|
@ -139,19 +145,17 @@ optionsOther._colorPicker = function (element) {
|
||||||
};
|
};
|
||||||
|
|
||||||
optionsOther._setDefaultColor = function ({target}) {
|
optionsOther._setDefaultColor = function ({target}) {
|
||||||
let element;
|
let element = optionsOther._getBadgeElement(target.id);
|
||||||
if (target.id === 'restore-text-color' || target.id === 'restore-background-color') {
|
|
||||||
element = BadgeSetting;
|
|
||||||
} else {
|
|
||||||
element = BadgeSettingHTMLFilter;
|
|
||||||
}
|
|
||||||
if (target.id === element.RESTORE_TEXT_COLOR) {
|
if (target.id === element.RESTORE_TEXT_COLOR) {
|
||||||
let txtColor = '#FFFFFF';
|
let txtColor = element.HEX_TEXT_COLOR;
|
||||||
|
wrappers.setBadgeTextColor({'type': element.TYPE, 'color': txtColor});
|
||||||
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
|
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
|
||||||
document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
|
document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
|
||||||
document.getElementById(element.BADGED_TEXT_COLOR).value = txtColor;
|
document.getElementById(element.BADGED_TEXT_COLOR).value = txtColor;
|
||||||
} else if (target.id === 'restore-background-color') {
|
} else if (target.id === element.RESTORE_BACKGROUND_COLOR) {
|
||||||
let bgColor = '#4A826C';
|
let bgColor = element.HEX_BACKGROUND_COLOR;
|
||||||
|
wrappers.setBadgeBackgroundColor({'type': element.TYPE, 'color': bgColor});
|
||||||
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
|
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
|
||||||
document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
|
document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
|
||||||
document.getElementById(element.BADGED_BACKGROUND_COLOR).value = bgColor;
|
document.getElementById(element.BADGED_BACKGROUND_COLOR).value = bgColor;
|
||||||
|
@ -159,19 +163,15 @@ optionsOther._setDefaultColor = function ({target}) {
|
||||||
};
|
};
|
||||||
|
|
||||||
optionsOther._onChangedHexColor = function ({target}) {
|
optionsOther._onChangedHexColor = function ({target}) {
|
||||||
let element;
|
let element = optionsOther._getBadgeElement(target.id);
|
||||||
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)) {
|
if (/#([a-f0-9]{3}){1,2}\b/i.test(target.value)) {
|
||||||
target.classList.remove('color-error');
|
target.classList.remove('color-error');
|
||||||
if (target.id === element.BADGED_TEXT_COLOR) {
|
if (target.id === element.BADGED_TEXT_COLOR) {
|
||||||
let txtColor = target.value;
|
let txtColor = target.value;
|
||||||
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
|
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.color = txtColor;
|
||||||
document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
|
document.getElementById(element.PRE_BADGED_TEXT_COLOR).style.backgroundColor = txtColor;
|
||||||
} else {
|
} else if (target.id === element.BADGED_BACKGROUND_COLOR) {
|
||||||
let bgColor = target.value;
|
let bgColor = target.value;
|
||||||
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
|
document.getElementById(element.COUNTER_PREVIEW_BADGE).style.backgroundColor = bgColor;
|
||||||
document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
|
document.getElementById(element.PRE_BADGED_BACKGROUND_COLOR).style.backgroundColor = bgColor;
|
||||||
|
@ -181,9 +181,27 @@ optionsOther._onChangedHexColor = function ({target}) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
optionsOther._getBadgeElement = function (targetId) {
|
||||||
|
switch (targetId) {
|
||||||
|
case BadgeSetting.RESTORE_TEXT_COLOR:
|
||||||
|
case BadgeSetting.RESTORE_BACKGROUND_COLOR:
|
||||||
|
return BadgeSetting;
|
||||||
|
case BadgeSettingHTMLFilter.RESTORE_TEXT_COLOR:
|
||||||
|
case BadgeSettingHTMLFilter.RESTORE_BACKGROUND_COLOR:
|
||||||
|
return BadgeSettingHTMLFilter;
|
||||||
|
case BadgeSettingMissingResource.RESTORE_TEXT_COLOR:
|
||||||
|
case BadgeSettingMissingResource.RESTORE_BACKGROUND_COLOR:
|
||||||
|
return BadgeSettingMissingResource;
|
||||||
|
default:
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
optionsOther.init = function (opt) {
|
optionsOther.init = function (opt) {
|
||||||
if (BrowserType.CHROMIUM) {
|
if (BrowserType.CHROMIUM) {
|
||||||
document.getElementById('div-badged-text-color').style.display = 'none';
|
document.getElementById('div-badged-text-color').style.display = 'none';
|
||||||
|
document.getElementById('html-div-badged-text-color').style.display = 'none';
|
||||||
|
document.getElementById('missing-div-badged-text-color').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('icon-default').addEventListener('change', options.onOptionChanged);
|
document.getElementById('icon-default').addEventListener('change', options.onOptionChanged);
|
||||||
|
|
|
@ -191,12 +191,16 @@ body {
|
||||||
padding: 0 30px 0 0;
|
padding: 0 30px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#badge-preview-top, #html-badge-preview-top {
|
#badge-preview-top,
|
||||||
|
#html-badge-preview-top,
|
||||||
|
#missing-badge-preview-top {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 38px;
|
width: 38px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#counter-preview-badge, #html-counter-preview-badge {
|
#counter-preview-badge,
|
||||||
|
#html-counter-preview-badge,
|
||||||
|
#missing-counter-preview-badge {
|
||||||
background: black;
|
background: black;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
color: white;
|
color: white;
|
||||||
|
@ -208,13 +212,16 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#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 {
|
#html-pre-badged-background-color, #html-pre-badged-text-color,
|
||||||
|
#missing-pre-badged-background-color, #missing-pre-badged-text-color {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#icon-badge-preview, #html-icon-badge-preview {
|
#icon-badge-preview,
|
||||||
|
#html-icon-badge-preview,
|
||||||
|
#missing-icon-badge-preview {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -238,7 +245,8 @@ div[class="color-picker:a"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#badged-background-color, #badged-text-color,
|
#badged-background-color, #badged-text-color,
|
||||||
#html-badged-background-color, #html-badged-text-color {
|
#html-badged-background-color, #html-badged-text-color,
|
||||||
|
#missing-badged-background-color, #missing-badged-text-color {
|
||||||
max-width: 150px;
|
max-width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -308,6 +308,25 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="div-badge">
|
||||||
|
<p>Missing Resource</p>
|
||||||
|
<div id="missing-badge-preview-top">
|
||||||
|
<div>
|
||||||
|
<img id="missing-icon-badge-preview" src="../../icons/action/default/icon38-default.png" alt="Default" class="icons">
|
||||||
|
<div id="missing-counter-preview-badge"><span>17</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="missing-badge-preview-bottom">
|
||||||
|
<div class="colorpicker">
|
||||||
|
<div id="missing-pre-badged-background-color"></div>
|
||||||
|
<input id="missing-badged-background-color" data-option="badgeMissingResourceBackgroundColor" class="input-text" maxlength="7"><img id="missing-restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
|
||||||
|
</div>
|
||||||
|
<div id="missing-div-badged-text-color" class="colorpicker">
|
||||||
|
<div id="missing-pre-badged-text-color"></div>
|
||||||
|
<input id="missing-badged-text-color" data-option="badgeMissingResourceTextColor" class="input-text" maxlength="7"><img id="missing-restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -88,6 +88,8 @@ options._renderOptionsPanel = function () {
|
||||||
'badgeDefaultTextColor': options._optionValues.badgeDefaultTextColor,
|
'badgeDefaultTextColor': options._optionValues.badgeDefaultTextColor,
|
||||||
'badgeHTMLFilterBackgroundColor': options._optionValues.badgeHTMLFilterBackgroundColor,
|
'badgeHTMLFilterBackgroundColor': options._optionValues.badgeHTMLFilterBackgroundColor,
|
||||||
'badgeHTMLfilterTextColor': options._optionValues.badgeHTMLfilterTextColor,
|
'badgeHTMLfilterTextColor': options._optionValues.badgeHTMLfilterTextColor,
|
||||||
|
'badgeMissingResourceBackgroundColor': options._optionValues.badgeMissingResourceBackgroundColor,
|
||||||
|
'badgeMissingResourceTextColor': options._optionValues.badgeMissingResourceTextColor,
|
||||||
'storageType': options._optionValues.storageType
|
'storageType': options._optionValues.storageType
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -74,6 +74,7 @@
|
||||||
<li>Unused permission removed (<a href="https://codeberg.org/nobody/LocalCDN/issue/612">#612</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>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>
|
<li>Customizable badge as HTML filter indicator (<a href="https://codeberg.org/nobody/LocalCDN/issue/613">#613</a>)</li>
|
||||||
|
<li>Customizable badge for missing resources and some code improvements (<a href="https://codeberg.org/nobody/LocalCDN/issue/613">#613</a>)</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="generator-section">
|
<div id="generator-section">
|
||||||
|
|
Loading…
Reference in New Issue