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

Updated: Options page (#92 #93)

This commit is contained in:
nobody 2020-08-30 19:07:14 +02:00
parent aa8e1fba72
commit b05de30c76
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
6 changed files with 314 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
core/constants.js
View File

@ -198,6 +198,16 @@ const Regex = {
'FONT_AWESOME_WITH_CODE': /use\.fontawesome\.com\/[a-z0-9]{10}\.js/
};
const Links = {
'CODEBERG_HTML_FILTER': 'https://codeberg.org/nobody/LocalCDN/wiki/Blank-websites-or-weird-characters',
'CODEBERG_RULESET': 'https://codeberg.org/nobody/LocalCDN/wiki/Ruleset-generator-for-uBlock-Origin-or-uMatrix',
'WELCOME': chrome.extension.getURL('pages/welcome/welcome.html'),
'DONATE': chrome.extension.getURL('pages/donate/donate.html'),
'CHANGELOG': chrome.extension.getURL('pages/updates/updates.html'),
'FAQ': chrome.extension.getURL('pages/help/help.html'),
'STATISTICS': chrome.extension.getURL('pages/statistics/statistics.html')
};
// Supported charsets for TextDecoder()
// https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder/TextDecoder
const EncodingTypes = {

2
pages/base.css
View File

@ -64,7 +64,6 @@ a:hover {
}
.b-contain span {
line-height: 1.54;
font-size: 12px;
font-family: inherit;
}
@ -74,6 +73,7 @@ a:hover {
position: relative;
padding-left: 25px;
cursor: pointer;
line-height: 1.2;
}
.b-contain input[type="checkbox"] ~ .b-input {

52
pages/options/options.css
View File

@ -14,6 +14,24 @@ body {
margin-right: auto;
}
.option-buttons {
border: none;
padding: 5px 10px;
margin: 5px 10px;
background-color: transparent;
font-weight: normal;
cursor: pointer;
}
.option-buttons-active {
font-weight: bold;
border-bottom: 1px solid #555;
}
.option-buttons:hover {
background-color: #ccc;
}
.option {
display: flex;
flex-direction: column;
@ -24,7 +42,6 @@ body {
border-radius: 3px;
box-sizing: border-box;
margin-top: 25px;
max-width: 470px;
padding: 14px 16px;
}
@ -40,7 +57,6 @@ body {
#notice-locale {
background-color: #ffa500;
color: white;
font-weight: 600;
}
.without-checkbox {
@ -48,6 +64,18 @@ body {
padding: 0px !important;
}
#advanced-tab, #export-import-tab, #info-tab {
display: none;
}
.btn-group {
margin-top: 2rem;
}
.footer {
text-align: center;
}
/**
* Fonts
*/
@ -114,7 +142,7 @@ body {
* Icons
*/
#ruleset-help-icon {
.options-help-icon {
display: inline-block;
cursor: pointer;
background-image: url("../../icons/info-dark.svg");
@ -159,6 +187,7 @@ body {
background-color: #ea9700;
border: 1px solid #d88c00;
color: #fff;
font-weight: 600;
}
.button-warning:hover {
@ -253,6 +282,10 @@ body {
font-style: normal;
}
.storage-type {
margin: 5px 0px;
}
.option-disabled > .title-option > .b-contain,
.b-contain input[type="checkbox"]:disabled ~ .b-input {
cursor: default !important;
@ -307,9 +340,9 @@ body[dir="rtl"] .input-text {
.option-group {
background-color: #e1e1e1;
margin-top: 2rem;
padding: .7rem;
border-radius: 3px;
padding: 1.5rem;
border-radius: 5px;
margin: 20px 0px;
}
.option-links {
@ -318,12 +351,19 @@ body[dir="rtl"] .input-text {
.option-links-div > ul {
padding-top: 2rem;
margin-top: 0px;
}
.option-links-div > ul > li {
padding-bottom: .5rem;
}
@media only screen and (max-width: 500px) {
.option-group {
padding: 0.7rem;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #202023;

204
pages/options/options.html
View File

@ -16,6 +16,78 @@
<script defer src="../../core/resources.js"></script>
<script defer src="../../core/mappings.js"></script>
<script src="options.js"></script>
<div class="btn-group">
<input type="button" id="btn-general-tab" class="option-buttons option-buttons-active" data-option="general-tab" data-i18n-content="btnGeneral" value="General"/>
<input type="button" id="btn-advanced-tab" class="option-buttons" data-option="advanced-tab" data-i18n-content="btnAdvanced" value="Advanced"/>
<input type="button" id="btn-export-import-tab" class="option-buttons" data-option="export-import-tab" data-i18n-content="btnOther" value="Other"/>
<input type="button" id="btn-info-tab" class="option-buttons" data-option="info-tab" data-i18n-content="btnInfo" value="Info"/>
</div>
<div id="general-tab" class="tab-content">
<div class="option-group">
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="showIconBadge" type="checkbox">
<span data-i18n-content="showIconBadgeTitle"></span>
<div class="b-input"></div>
</label>
</div>
<div class="description-option" data-i18n-content="showIconBadgeDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="hideReleaseNotes" type="checkbox">
<span data-i18n-content="hideReleaseNotesTitle">Disable release notes</span>
<div class="b-input"></div>
</label>
</div>
<div class="description-option" data-i18n-content="hideReleaseNotesDescription">If enabled, you wont receive any information about new features in LocalCDN. This includes information about new uBlock/uMatrix rules.</div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="disablePrefetch" type="checkbox">
<span data-i18n-content="disablePrefetchTitle"></span>
<div class="b-input"></div>
</label>
</div>
<div class="description-option" data-i18n-content="disablePrefetchDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="stripMetadata" type="checkbox">
<span data-i18n-content="stripMetadataTitle"></span>
<div class="b-input"></div>
</label>
</div>
<div class="description-option" data-i18n-content="stripMetadataDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input id="checkbox-internal-statistics" data-option="internalStatistics" type="checkbox">
<span data-i18n-content="internalStatisticsTitle">Internal statistics</span>
<div class="b-input"></div>
</label>
</div>
<!-- TODO: Change if test successful -->
<div class="description-option" data-i18n-content="internalStatisticsDescription">This function is currently in an experimental stage. No data transmission. It's all local on your device.</div>
</section>
</div>
<div class="option-group">
<section class="option">
<div class="title-option without-checkbox" data-i18n-content="whitelistedDomainsTitle"></div>
<input id="tf-domains-whitelist" class="input-text without-checkbox" data-option="whitelistedDomains" type="text">
<div class="description-option without-checkbox" data-i18n-content="whitelistedDomainsDescription"></div>
</section>
</div>
</div>
<div id="advanced-tab" class="tab-content">
<section class="notice notice-warning hidden" id="notice-block-missing">
<div class="notice-head">
<span data-i18n-content="blockMissingTitle"></span>
@ -30,16 +102,6 @@
</div>
</section>
<div class="option-group">
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="showIconBadge" type="checkbox">
<span data-i18n-content="showIconBadgeTitle"></span>
<div class="b-input"></div>
</label>
</div>
<div class="description-option" data-i18n-content="showIconBadgeDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
@ -65,28 +127,6 @@
<div class="description-option"><input id="tf-domains-whitelist-google-fonts" class="input-text without-checkbox" data-option="allowedDomainsGoogleFonts" type="text"></div>
</div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="disablePrefetch" type="checkbox">
<span data-i18n-content="disablePrefetchTitle"></span>
<div class="b-input"></div>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="disablePrefetchDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="stripMetadata" type="checkbox">
<span data-i18n-content="stripMetadataTitle"></span>
<div class="b-input"></div>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="stripMetadataDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
@ -97,45 +137,6 @@
</div>
<div class="description-option" data-i18n-content="loggingDescription">Open "Browser Console" ( CTRL + SHIFT + J ) to show missing resources</div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="hideReleaseNotes" type="checkbox">
<span data-i18n-content="hideReleaseNotesTitle">Disable release notes</span>
<div class="b-input"></div>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="hideReleaseNotesDescription">If enabled, you wont receive any information about new features in LocalCDN. This includes information about new uBlock/uMatrix rules.</div>
</section>
<section id="section-icon-style" class="option">
<div class="title-option-select" data-i18n-content="chooseIconStyle">Choose an icon for this extension</div>
<div class="description-option">
<select id="selected-icon" data-option="selectedIcon">
<option value="Default">Default</option>
<option value="Light">Light</option>
<option value="Grey">Blue/Grey</option>
</select>
</div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input id="checkbox-internal-statistics" data-option="internalStatistics" type="checkbox">
<span data-i18n-content="internalStatisticsTitle">Internal statistics</span>
<div class="b-input"></div>
</label>
</div>
<!-- TODO: Change if test successful -->
<div class="description-option" data-i18n-content="internalStatisticsDescription">This function is currently in an experimental stage. No data transmission. It's all local on your device.</div>
</section>
</div>
<div class="option-group">
<section class="option">
<div class="title-option without-checkbox" data-i18n-content="whitelistedDomainsTitle"></div>
<input id="tf-domains-whitelist" class="input-text without-checkbox" data-option="whitelistedDomains" type="text">
<div class="description-option without-checkbox" data-i18n-content="whitelistedDomainsDescription"></div>
</section>
</div>
<div id="html-filter-div" class="option-group">
<section class="option">
@ -159,7 +160,7 @@
</div>
<div class="option-group">
<section class="option">
<div class="title-option without-checkbox"><span data-i18n-content="generateRuleSetTitle">Generate rule set</span><span id="ruleset-help-icon"></span></div>
<div class="title-option without-checkbox"><span data-i18n-content="generateRuleSetTitle">Generate rule set</span><span id="ruleset-help" class="options-help-icon"></span></div>
<div class="description-option without-checkbox">
<p class="without-checkbox" data-i18n-content="generateRuleSetDescription">In case you're using uBlock Origin or uMatrix you can generate the rules here. You have to add these rules manually in uBlock Origin or uMatrix.</p>
</div>
@ -182,17 +183,48 @@
<button id="button-copy-rule-set" value="Copy"><span data-i18n-content="copyRuleSet">Copy</span><span id="button-copy-rule-set-icon"></span></button>
</section>
</div>
<section class="notice notice-default hidden" id="notice-locale">
<div class="notice-body" dir="ltr">
<div class="notice-message">
Your preferred language is not yet fully supported. Please help out by translating this add-on on Weblate.
</div>
<a class="button button-notice button-warning" href="https://hosted.weblate.org/projects/localcdn/localcdn/" target="_blank" rel="noopener noreferrer">
Translate
</a>
<div id="export-import-tab" class="tab-content">
<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>
<select id="selected-icon" data-option="selectedIcon">
<option value="Default">Default</option>
<option value="Light">Light</option>
<option value="Grey">Blue/Grey</option>
</select>
</div>
</section>
<div class="option-links-div">
</div>
<div class="option-group">
<section class="option">
<div class="title-option without-checkbox"><span data-i18n-content="headerStorageType">Storage type</span><span id="sync-help" class="options-help-icon"></span></div>
<label class="b-contain storage-type" for="storage-type-local"><span data-i18n-content="labelStorageTypeLocal">Local (recommended)</span>
<input id="storage-type-local" name="storage-type" data-option="storageTypeLocal" type="radio" value="local">
<div class="b-input"></div>
</label>
<label class="b-contain storage-type" for="storage-type-sync"><span data-i18n-content="labelStorageTypeSync">Sync</span>
<input id="storage-type-sync" name="storage-type" data-option="storageTypeSync" type="radio" value="sync">
<div class="b-input"></div>
</label>
</section>
<section class="option">
<div class="title-option without-checkbox" data-i18n-content="headerImportExport">Import/Export</div>
<div class="import-export">
<input type="button" id="import-data" value="Import Data" data-i18n-content="labelImportData"/>
<input type="button" id="export-data" value="Export Data" data-i18n-content="labelExportData"/>
<div class="hidden">
<input id="import-file-picker" type="file" accept="text/plain">
</div>
</div>
</section>
</div>
</div>
<div id="info-tab" class="tab-content">
<div class="option-links-div option-group">
<ul class="option-links">
<li><a id="link-welcome-page" class="no-icon">Welcome page (In-App)</a></li>
<li><a id="link-changelog" class="no-icon">Changelog (In-App)</a></li>
@ -205,5 +237,17 @@
<li><a id="link-translate" href="https://hosted.weblate.org/projects/localcdn/localcdn/" target="_blank" rel="nofollow noopener noreferrer">Translate (www.weblate.org)</a></li>
</ul>
</div>
</div>
<section class="notice notice-default hidden" id="notice-locale">
<div class="notice-body" dir="ltr">
<div class="notice-message">
Your preferred language is not yet fully supported. Please help out by translating this add-on on Weblate.
</div>
<a class="button button-notice button-warning" href="https://hosted.weblate.org/projects/localcdn/localcdn/" target="_blank" rel="noopener noreferrer">
Translate
</a>
</div>
</section>
<p class="footer">LocalCDN v<span id="label-version"></span></p>
</body>
</html>

92
pages/options/options.js
View File

@ -45,8 +45,9 @@ options._renderContents = function () {
}
if (!chrome.browserAction.setIcon) {
document.getElementById('section-icon-style').style.display = 'none';
document.getElementById('icon-style-div').style.display = 'none';
}
document.getElementById('label-version').textContent = helpers.formatVersion(chrome.runtime.getManifest().version);
};
options._renderOptionsPanel = function () {
@ -98,16 +99,32 @@ options._renderOptionsPanel = function () {
document.getElementById('div-domains-whitelist-google-fonts').style.display = 'none';
}
if (elements.storageType === 'local') {
document.getElementById('storage-type-local').checked = true;
} else {
document.getElementById('storage-type-sync').checked = true;
}
document.getElementById('last-mapping-update').textContent += ' ' + lastMappingUpdate;
document.getElementById('negate-html-filter-list-warning').addEventListener('click', options._onClickHTMLFilterWarning);
document.getElementById('link-welcome-page').addEventListener('click', options._onClickWelcomePage);
document.getElementById('link-changelog').addEventListener('click', options._onClickChangelog);
document.getElementById('link-donate').addEventListener('click', options._onClickDonate);
document.getElementById('link-faq').addEventListener('click', options._onClickFaq);
document.getElementById('ruleset-help-icon').addEventListener('click', options._onClickRulesetHelp);
document.getElementById('link-statistic').addEventListener('click', options._onClickStatistics);
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); });
document.getElementById('link-changelog').addEventListener('click', function () { options._onLinkClick(Links.CHANGELOG); });
document.getElementById('link-donate').addEventListener('click', function () { options._onLinkClick(Links.DONATE); });
document.getElementById('link-faq').addEventListener('click', function () { options._onLinkClick(Links.FAQ);});
document.getElementById('ruleset-help').addEventListener('click', function () { options._onLinkClick(Links.CODEBERG_RULESET); });
document.getElementById('sync-help').addEventListener('click', function () { options._onLinkClick(Links.FAQ + '#sync'); });
document.getElementById('link-statistic').addEventListener('click', function () { options._onLinkClick(Links.STATISTICS); });
document.getElementById('btn-general-tab').addEventListener('click', options._changeTab);
document.getElementById('btn-advanced-tab').addEventListener('click', options._changeTab);
document.getElementById('btn-export-import-tab').addEventListener('click', options._changeTab);
document.getElementById('btn-info-tab').addEventListener('click', options._changeTab);
document.getElementById('storage-type-local').addEventListener('change', options._onStorageOptionChanged);
document.getElementById('storage-type-sync').addEventListener('change', options._onStorageOptionChanged);
document.getElementById('export-data').addEventListener('click', storageManager.export);
document.getElementById('import-data').addEventListener('click', storageManager.startImportFilePicker);
document.getElementById('import-file-picker').addEventListener('change', storageManager.handleImportFilePicker);
};
options._renderBlockMissingNotice = function () {
@ -199,7 +216,6 @@ options._getOptionElements = function () {
[Setting.ALLOWED_DOMAINS_GOOGLE_FONTS]: options._getOptionElement(Setting.ALLOWED_DOMAINS_GOOGLE_FONTS),
[Setting.STORAGE_TYPE]: options._getOptionElement(Setting.STORAGE_TYPE)
};
return optionElements;
};
@ -316,53 +332,29 @@ options._onStorageOptionChanged = function ({ target }) {
});
};
options._onClickHTMLFilterWarning = function () {
options._onLinkClick = function (url) {
chrome.tabs.create({
url: 'https://codeberg.org/nobody/LocalCDN/wiki/Blank-websites-or-weird-characters',
active: true,
url: url,
active: true
});
};
options._onClickWelcomePage = function () {
chrome.tabs.create({
url: chrome.extension.getURL('pages/welcome/welcome.html'),
active: true,
});
};
options._changeTab = function ({ target }) {
let tabContent, tabButton, optionKey;
options._onClickDonate = function () {
chrome.tabs.create({
url: chrome.extension.getURL('pages/donate/donate.html'),
active: true,
});
};
optionKey = target.getAttribute('data-option');
tabContent = document.getElementsByClassName('tab-content');
tabButton = document.getElementsByClassName('option-buttons');
options._onClickChangelog = function () {
chrome.tabs.create({
url: chrome.extension.getURL('pages/updates/updates.html'),
active: true,
});
};
options._onClickFaq = function () {
chrome.tabs.create({
url: chrome.extension.getURL('pages/help/help.html'),
active: true,
});
};
options._onClickRulesetHelp = function () {
chrome.tabs.create({
url: 'https://codeberg.org/nobody/LocalCDN/wiki/Ruleset-generator-for-uBlock-Origin-or-uMatrix',
active: true,
});
};
options._onClickStatistics = function () {
chrome.tabs.create({
url: chrome.extension.getURL('pages/statistics/statistics.html'),
active: true,
});
for (let i = 0; i < tabContent.length; i++) {
if (tabContent[i].id === optionKey) {
tabContent[i].style.display = 'block';
tabButton[i].classList.add('option-buttons-active');
} else {
tabContent[i].style.display = 'none';
tabButton[i].classList.remove('option-buttons-active');
}
}
};
/**

1
pages/updates/updates.html
View File

@ -29,6 +29,7 @@
<li>Added: Bootstrap Toggle v2.2.2 (<a href="https://codeberg.org/nobody/LocalCDN/issues/90">#90</a>)</li>
<li>Implemented: Open options in new tab (<a href="https://codeberg.org/nobody/LocalCDN/issues/91">#91</a>)</li>
<li>Implemented: Storage handler (<a href="https://codeberg.org/nobody/LocalCDN/issues/92">#92</a>)</li>
<li>Updated: Options page (<a href="https://codeberg.org/nobody/LocalCDN/issues/93">#93</a>)</li>
<li>Updated: Google Material Icons (<a href="https://codeberg.org/nobody/LocalCDN/issues/94">#94</a>)</li>
<li>Added: P2P Media Loader Hls.js (v0.6.2) (<a href="https://codeberg.org/nobody/LocalCDN/issues/95">#95</a>)</li>
</ul>