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

View File

@ -198,6 +198,16 @@ const Regex = {
'FONT_AWESOME_WITH_CODE': /use\.fontawesome\.com\/[a-z0-9]{10}\.js/ '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() // Supported charsets for TextDecoder()
// https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder/TextDecoder // https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder/TextDecoder
const EncodingTypes = { const EncodingTypes = {

View File

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

View File

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

View File

@ -16,171 +16,227 @@
<script defer src="../../core/resources.js"></script> <script defer src="../../core/resources.js"></script>
<script defer src="../../core/mappings.js"></script> <script defer src="../../core/mappings.js"></script>
<script src="options.js"></script> <script src="options.js"></script>
<section class="notice notice-warning hidden" id="notice-block-missing">
<div class="notice-head"> <div class="btn-group">
<span data-i18n-content="blockMissingTitle"></span> <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>
<div class="notice-body" dir="ltr"> <div class="option-group">
<div class="notice-message" data-i18n-content="featureBreaksWebsitesDescription"> <section class="option">
This feature breaks websites. Do not leave it enabled, unless you are prepared to manually whitelist any affected domains. <div class="title-option without-checkbox" data-i18n-content="whitelistedDomainsTitle"></div>
</div> <input id="tf-domains-whitelist" class="input-text without-checkbox" data-option="whitelistedDomains" type="text">
<div class="button button-notice button-warning" id="button-block-missing" data-i18n-content="featureBreaksWebsitesButton"> <div class="description-option without-checkbox" data-i18n-content="whitelistedDomainsDescription"></div>
Disable </section>
</div>
</div> </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">
<input data-option="blockMissing" type="checkbox">
<span data-i18n-content="blockMissingTitle"></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="blockMissingDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="blockGoogleFonts" type="checkbox">
<span data-i18n-content="blockGoogleFontsTitle">Block Google Fonts</span>
<div class="b-input"></div>
</label>
</div>
<div class="description-option" data-i18n-content="blockGoogleFontsDescription">If you use the rules of the rule generator, requests to "fonts.googleapis.com" are allowed to substitute "Google Material Icons" automatically. If you want to block the other requests, enable this option.</div>
<div id="div-domains-whitelist-google-fonts">
<div class="description-option" data-i18n-content="labelDomainsWhitelistGoogleFonts">These domains are allowed to load Google Fonts. Separate multiple entries with semi-colons (;).</div>
<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">
<input data-option="enableLogging" type="checkbox">
<span data-i18n-content="loggingTitle">Enable logging in browser console</span>
<div class="b-input"></div>
</label>
</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>
<div class="option-group">
<section class="option"> <div id="advanced-tab" class="tab-content">
<div class="title-option without-checkbox" data-i18n-content="whitelistedDomainsTitle"></div> <section class="notice notice-warning hidden" id="notice-block-missing">
<input id="tf-domains-whitelist" class="input-text without-checkbox" data-option="whitelistedDomains" type="text"> <div class="notice-head">
<div class="description-option without-checkbox" data-i18n-content="whitelistedDomainsDescription"></div> <span data-i18n-content="blockMissingTitle"></span>
</div>
<div class="notice-body" dir="ltr">
<div class="notice-message" data-i18n-content="featureBreaksWebsitesDescription">
This feature breaks websites. Do not leave it enabled, unless you are prepared to manually whitelist any affected domains.
</div>
<div class="button button-notice button-warning" id="button-block-missing" data-i18n-content="featureBreaksWebsitesButton">
Disable
</div>
</div>
</section> </section>
<div class="option-group">
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="blockMissing" type="checkbox">
<span data-i18n-content="blockMissingTitle"></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="blockMissingDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="blockGoogleFonts" type="checkbox">
<span data-i18n-content="blockGoogleFontsTitle">Block Google Fonts</span>
<div class="b-input"></div>
</label>
</div>
<div class="description-option" data-i18n-content="blockGoogleFontsDescription">If you use the rules of the rule generator, requests to "fonts.googleapis.com" are allowed to substitute "Google Material Icons" automatically. If you want to block the other requests, enable this option.</div>
<div id="div-domains-whitelist-google-fonts">
<div class="description-option" data-i18n-content="labelDomainsWhitelistGoogleFonts">These domains are allowed to load Google Fonts. Separate multiple entries with semi-colons (;).</div>
<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="enableLogging" type="checkbox">
<span data-i18n-content="loggingTitle">Enable logging in browser console</span>
<div class="b-input"></div>
</label>
</div>
<div class="description-option" data-i18n-content="loggingDescription">Open "Browser Console" ( CTRL + SHIFT + J ) to show missing resources</div>
</section>
</div>
<div id="html-filter-div" class="option-group">
<section class="option">
<div id="html-filter-domains-title-exclude" class="title-option without-checkbox" data-i18n-content="htmlFilterDomainsTitleExclude">Do not apply HTML filter to these domains:</div>
<div id="html-filter-domains-title-include" class="title-option without-checkbox" data-i18n-content="htmlFilterDomainsTitleInclude">Apply HTML filter to these domains:</div>
<input id="tf-domains-manipulate-dom" class="input-text without-checkbox" data-option="domainsManipulateDOM" type="text">
<div class="description-option without-checkbox" data-i18n-content="htmlFilterDomainsDescription">Enter the domains to be handled or ignored by the HTML filter. Separate multiple entries with semi-colons (;).</div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="negateHtmlFilterList" type="checkbox">
<span data-i18n-content="negateHtmlFilterListTitle">Invert HTML filter</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="negateHtmlFilterListDescription">Enable this option to always apply the HTML filter. The domains in the list will be ignored then. If this option is disabled, the HTML filter is only applied to domains in the list.</div>
</section>
<a id="negate-html-filter-list-warning" data-i18n-content="negateHtmlFilterListWarning">This function can break websites. Please note the information on the Wiki page.</a>
</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" 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>
<div class="ruleset-generator">
<p id="last-mapping-update" class="description-option last-update without-checkbox" data-i18n-content="lastUpdate">Last update:</p>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-ublock-rules">uBlock
<input id="generate-ublock-rules" name="rule-sets" data-option="uBlock" type="radio" value="uBlock">
<div class="b-input"></div>
</label>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-umatrix-rules">uMatrix
<input id="generate-umatrix-rules" name="rule-sets" data-option="uMatrix" type="radio" value="uMatrix">
<div class="b-input"></div>
</label>
</div>
<textarea rows="12" cols="15" id="generated-rules" readonly></textarea>
<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>
</div> </div>
<div id="html-filter-div" class="option-group">
<section class="option"> <div id="export-import-tab" class="tab-content">
<div id="html-filter-domains-title-exclude" class="title-option without-checkbox" data-i18n-content="htmlFilterDomainsTitleExclude">Do not apply HTML filter to these domains:</div> <div id="icon-style-div" class="option-group">
<div id="html-filter-domains-title-include" class="title-option without-checkbox" data-i18n-content="htmlFilterDomainsTitleInclude">Apply HTML filter to these domains:</div> <section id="section-icon-style" class="option">
<input id="tf-domains-manipulate-dom" class="input-text without-checkbox" data-option="domainsManipulateDOM" type="text"> <div class="title-option without-checkbox" data-i18n-content="chooseIconStyle">Choose an icon for this extension</div>
<div class="description-option without-checkbox" data-i18n-content="htmlFilterDomainsDescription">Enter the domains to be handled or ignored by the HTML filter. Separate multiple entries with semi-colons (;).</div> <div>
</section> <select id="selected-icon" data-option="selectedIcon">
<section class="option"> <option value="Default">Default</option>
<div class="title-option"> <option value="Light">Light</option>
<label class="b-contain"> <option value="Grey">Blue/Grey</option>
<input data-option="negateHtmlFilterList" type="checkbox"> </select>
<span data-i18n-content="negateHtmlFilterListTitle">Invert HTML filter</span> </div>
</section>
</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> <div class="b-input"></div>
</label> </label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span> <label class="b-contain storage-type" for="storage-type-sync"><span data-i18n-content="labelStorageTypeSync">Sync</span>
</div> <input id="storage-type-sync" name="storage-type" data-option="storageTypeSync" type="radio" value="sync">
<div class="description-option" data-i18n-content="negateHtmlFilterListDescription">Enable this option to always apply the HTML filter. The domains in the list will be ignored then. If this option is disabled, the HTML filter is only applied to domains in the list.</div> <div class="b-input"></div>
</section> </label>
<a id="negate-html-filter-list-warning" data-i18n-content="negateHtmlFilterListWarning">This function can break websites. Please note the information on the Wiki page.</a> </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>
<div class="option-group">
<section class="option"> <div id="info-tab" class="tab-content">
<div class="title-option without-checkbox"><span data-i18n-content="generateRuleSetTitle">Generate rule set</span><span id="ruleset-help-icon"></span></div> <div class="option-links-div option-group">
<div class="description-option without-checkbox"> <ul class="option-links">
<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> <li><a id="link-welcome-page" class="no-icon">Welcome page (In-App)</a></li>
</div> <li><a id="link-changelog" class="no-icon">Changelog (In-App)</a></li>
<div class="ruleset-generator"> <li><a id="link-donate" class="no-icon">Donate (In-App)</a></li>
<p id="last-mapping-update" class="description-option last-update without-checkbox" data-i18n-content="lastUpdate">Last update:</p> <li><a id="link-faq" class="no-icon">FAQ (In-App)</a></li>
</div> <li><a id="link-statistic" class="no-icon"><span data-i18n-content="internalStatisticsTitle">Statistics</span> <span>(In-App)</span></a></li><br>
<div class="ruleset-generator"> <li><a id="link-codeberg" href="https://codeberg.org/nobody/LocalCDN" target="_blank" rel="nofollow noopener noreferrer">Source (www.codeberg.org)</a></li>
<label class="b-contain" for="generate-ublock-rules">uBlock <li><a id="link-website" href="https://www.localcdn.org" target="_blank" rel="nofollow noopener noreferrer">Website (www.localcdn.org)</a></li>
<input id="generate-ublock-rules" name="rule-sets" data-option="uBlock" type="radio" value="uBlock"> <li><a id="link-website-test" href="https://www.localcdn.org/test" target="_blank" rel="nofollow noopener noreferrer">Testing Utility (www.localcdn.org/test)</a></li>
<div class="b-input"></div> <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>
</label> </ul>
</div> </div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-umatrix-rules">uMatrix
<input id="generate-umatrix-rules" name="rule-sets" data-option="uMatrix" type="radio" value="uMatrix">
<div class="b-input"></div>
</label>
</div>
<textarea rows="12" cols="15" id="generated-rules" readonly></textarea>
<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> </div>
<section class="notice notice-default hidden" id="notice-locale"> <section class="notice notice-default hidden" id="notice-locale">
<div class="notice-body" dir="ltr"> <div class="notice-body" dir="ltr">
@ -192,18 +248,6 @@
</a> </a>
</div> </div>
</section> </section>
<div class="option-links-div"> <p class="footer">LocalCDN v<span id="label-version"></span></p>
<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>
<li><a id="link-donate" class="no-icon">Donate (In-App)</a></li>
<li><a id="link-faq" class="no-icon">FAQ (In-App)</a></li>
<li><a id="link-statistic" class="no-icon"><span data-i18n-content="internalStatisticsTitle">Statistics</span> <span>(In-App)</span></a></li><br>
<li><a id="link-codeberg" href="https://codeberg.org/nobody/LocalCDN" target="_blank" rel="nofollow noopener noreferrer">Source (www.codeberg.org)</a></li>
<li><a id="link-website" href="https://www.localcdn.org" target="_blank" rel="nofollow noopener noreferrer">Website (www.localcdn.org)</a></li>
<li><a id="link-website-test" href="https://www.localcdn.org/test" target="_blank" rel="nofollow noopener noreferrer">Testing Utility (www.localcdn.org/test)</a></li>
<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>
</body> </body>
</html> </html>

View File

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

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>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: 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>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>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> <li>Added: P2P Media Loader Hls.js (v0.6.2) (<a href="https://codeberg.org/nobody/LocalCDN/issues/95">#95</a>)</li>
</ul> </ul>