Toggle button for Google Fonts (#620)

This commit is contained in:
nobody 2021-08-13 06:15:10 +02:00
parent 89872e8162
commit e7ff3a2a15
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
6 changed files with 134 additions and 25 deletions

View File

@ -61,6 +61,10 @@ messenger._handleMessageReceived = function (message, sender, sendResponse) {
sendResponse({'value': Boolean(helpers.checkAllowlisted(value, requestAnalyzer.domainsManipulateDOM))});
return MessageResponse.SYNCHRONOUS;
case 'domain:fetch-is-google-fonts':
sendResponse({'value': Boolean(helpers.checkAllowlisted(value, interceptor.allowedDomainsGoogleFonts))});
return MessageResponse.SYNCHRONOUS;
case 'allowlist:add-domain':
stateManager.addDomainToAllowlist(value).then(function () {
sendResponse({'value': true});
@ -85,6 +89,18 @@ messenger._handleMessageReceived = function (message, sender, sendResponse) {
});
return MessageResponse.ASYNCHRONOUS;
case 'google-fonts:add-domain':
stateManager.addDomainToGoogleFontsList(value).then(function () {
sendResponse({'value': true});
});
return MessageResponse.ASYNCHRONOUS;
case 'google-fonts:remove-domain':
stateManager.removeDomainFromGoogleFontsList(value).then(function () {
sendResponse({'value': true});
});
return MessageResponse.ASYNCHRONOUS;
case 'statistic:delete':
storageManager.statistics = {};
break;
@ -103,6 +119,7 @@ messenger._handleMessageReceived = function (message, sender, sendResponse) {
popup.negateHtmlFilterList = stateManager.getInvertOption;
popup.loggingStatus = stateManager.logging;
popup.hideDonationButton = stateManager.hideDonationButton;
popup.blockGoogleFonts = interceptor.blockGoogleFonts;
sendResponse({'data': popup});
return MessageResponse.ASYNCHRONOUS;
}

View File

@ -123,6 +123,25 @@ stateManager.removeDomainFromManipulateDOMlist = function (domain) {
});
};
stateManager.addDomainToGoogleFontsList = function (domain) {
return new Promise((resolve) => {
let allowedDomainsGoogleFonts = interceptor.allowedDomainsGoogleFonts;
allowedDomainsGoogleFonts[domain] = true;
storageManager.type.set({allowedDomainsGoogleFonts}, resolve);
});
};
stateManager.removeDomainFromGoogleFontsList = function (domain) {
return new Promise((resolve) => {
let allowedDomainsGoogleFonts = interceptor.allowedDomainsGoogleFonts;
delete allowedDomainsGoogleFonts[domain];
storageManager.type.set({allowedDomainsGoogleFonts}, resolve);
});
};
/**
* Private Methods

View File

@ -270,7 +270,7 @@ footer {
/**
* Toggles
*/
#protection-toggle, #manipulateDOM-toggle {
#protection-toggle, #manipulateDOM-toggle, #google-fonts-toggle {
cursor: pointer;
float: right;
-moz-user-select: none;

View File

@ -47,6 +47,17 @@
<a id="manipulateDOM-indicator" data-i18n-content="labelManipulateDOM" data-link="faq-html-filter">Filter HTML source code</a>
</div>
</div>
<div class="subpanel" id="div-google-fonts">
<div id="google-fonts-toggle">
<label class="switch">
<input type="checkbox" id="google-fonts-toggle-switch">
<span id="toggle-switch-google-fonts" class="slider"></span>
</label>
</div>
<div class="label-domain">
<span>Google Fonts</span>
</div>
</div>
</div>
<div id="extension-context" class="panel">
<div id="injection-counter" class="counter">0</div>

View File

@ -43,6 +43,7 @@ popup._renderContents = function () {
popup._determineTargetTab()
.then(popup._determineDomainAllowlistStatus)
.then(popup._determineStatusManipulateDOM)
.then(popup._determineStatusGoogleFonts)
.then(popup._determineResourceInjections)
.then(popup._determineNegateHtmlFilterOption)
.then(popup._renderContextualContents);
@ -101,9 +102,11 @@ popup._renderContextualContents = function () {
popup._renderDomainAllowlistPanel = function () {
let websiteContextElement, protectionToggleElement, domainIndicatorElement,
manipulateDOMToggleElement, manipulateDOMToggleStyle;
manipulateDOMToggleElement, manipulateDOMToggleStyle, googleFontsToggleElement, googleFontsToggleStyle;
websiteContextElement = document.getElementById('website-context');
websiteContextElement.setAttribute('class', 'panel');
protectionToggleElement = document.getElementById('protection-toggle-switch');
domainIndicatorElement = document.getElementById('domain-indicator');
@ -112,35 +115,55 @@ popup._renderDomainAllowlistPanel = function () {
manipulateDOMToggleElement = document.getElementById('manipulateDOM-toggle-switch');
manipulateDOMToggleStyle = document.getElementById('toggle-switch-manipulateDOM');
googleFontsToggleElement = document.getElementById('google-fonts-toggle-switch');
googleFontsToggleStyle = document.getElementById('toggle-switch-google-fonts');
if (popup._domainIsAllowlisted === true) {
manipulateDOMToggleElement.disabled = true;
protectionToggleElement.checked = false;
manipulateDOMToggleStyle.setAttribute('class', 'slider-disabled');
googleFontsToggleElement.disabled = true;
googleFontsToggleStyle.setAttribute('class', 'slider-disabled');
protectionToggleElement.checked = false;
protectionToggleElement.addEventListener('click', popup._enableProtection);
} else {
manipulateDOMToggleElement.disabled = false;
manipulateDOMToggleStyle.setAttribute('class', 'slider');
protectionToggleElement.checked = true;
protectionToggleElement.addEventListener('click', popup._disableProtection);
if (popup.negateHtmlFilterList && !popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = true;
manipulateDOMToggleElement.addEventListener('click', popup._enableManipulateDOM);
} else if (!popup.negateHtmlFilterList && !popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = false;
manipulateDOMToggleElement.addEventListener('click', popup._enableManipulateDOM);
} else if (popup.negateHtmlFilterList && popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = false;
manipulateDOMToggleElement.addEventListener('click', popup._disableManipulateDOM);
} else if (!popup.negateHtmlFilterList && popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = true;
manipulateDOMToggleElement.addEventListener('click', popup._disableManipulateDOM);
}
return;
}
websiteContextElement.setAttribute('class', 'panel');
if (popup._blockGoogleFonts === false) {
document.getElementById('div-google-fonts').hidden = true;
}
googleFontsToggleStyle.setAttribute('class', 'slider');
googleFontsToggleElement.disabled = false;
if (popup._domainGoogleFonts) {
googleFontsToggleElement.checked = true;
googleFontsToggleElement.addEventListener('click', popup._disableGoogleFonts);
} else {
googleFontsToggleElement.checked = false;
googleFontsToggleElement.addEventListener('click', popup._enableGoogleFonts);
}
manipulateDOMToggleElement.disabled = false;
manipulateDOMToggleStyle.setAttribute('class', 'slider');
protectionToggleElement.checked = true;
protectionToggleElement.addEventListener('click', popup._disableProtection);
if (popup.negateHtmlFilterList && !popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = true;
manipulateDOMToggleElement.addEventListener('click', popup._enableManipulateDOM);
} else if (!popup.negateHtmlFilterList && !popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = false;
manipulateDOMToggleElement.addEventListener('click', popup._enableManipulateDOM);
} else if (popup.negateHtmlFilterList && popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = false;
manipulateDOMToggleElement.addEventListener('click', popup._disableManipulateDOM);
} else if (!popup.negateHtmlFilterList && popup._domainManipulateDOM) {
manipulateDOMToggleElement.checked = true;
manipulateDOMToggleElement.addEventListener('click', popup._disableManipulateDOM);
}
};
popup._renderInjectionPanel = function (groupedInjections) {
@ -196,6 +219,28 @@ popup._disableManipulateDOM = function () {
});
};
popup._enableGoogleFonts = function () {
let message = {
'topic': 'google-fonts:add-domain',
'value': popup._domain,
};
chrome.runtime.sendMessage(message, function () {
popup._onToggled();
});
};
popup._disableGoogleFonts = function () {
let message = {
'topic': 'google-fonts:remove-domain',
'value': popup._domain,
};
chrome.runtime.sendMessage(message, function () {
popup._onToggled();
});
};
popup._determineDomainAllowlistStatus = function () {
return new Promise((resolve) => {
let message = {
@ -228,6 +273,20 @@ popup._determineStatusManipulateDOM = function () {
});
};
popup._determineStatusGoogleFonts = function () {
return new Promise((resolve) => {
let message = {
'topic': 'domain:fetch-is-google-fonts',
'value': popup._domain,
};
chrome.runtime.sendMessage(message, function (response) {
popup._domainGoogleFonts = response.value;
resolve();
});
});
};
popup._determineResourceInjections = function () {
return new Promise((resolve) => {
let message = {
@ -266,6 +325,7 @@ popup._getData = function () {
popup.negateHtmlFilterList = items.data.negateHtmlFilterList;
popup._loggingStatus = items.data.loggingStatus;
popup.hideDonationButton = items.data.hideDonationButton;
popup._blockGoogleFonts = items.data.blockGoogleFonts;
resolve();
});
});
@ -558,5 +618,6 @@ popup._onLoggingButtonClicked = function () {
popup.negateHtmlFilterList = false;
popup._statisticsStatus = false;
popup._loggingStatus = false;
popup._blockGoogleFonts = true;
document.addEventListener('DOMContentLoaded', popup._onDocumentLoaded);

View File

@ -80,6 +80,7 @@
<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>
<li>i18n implemented (<a href="https://codeberg.org/nobody/LocalCDN/issue/613">#613</a>)</li>
<li>Toggle button for Google Fonts (<a href="https://codeberg.org/nobody/LocalCDN/issue/620">#620</a>)</li>
</ul>
</div>
<div id="generator-section">