From b05de30c76c944394b3f3e6f7934e74bd0415fd0 Mon Sep 17 00:00:00 2001 From: nobody Date: Sun, 30 Aug 2020 19:07:14 +0200 Subject: [PATCH] Updated: Options page (#92 #93) --- core/constants.js | 10 + pages/base.css | 2 +- pages/options/options.css | 52 ++++- pages/options/options.html | 384 +++++++++++++++++++++---------------- pages/options/options.js | 92 ++++----- pages/updates/updates.html | 1 + 6 files changed, 314 insertions(+), 227 deletions(-) diff --git a/core/constants.js b/core/constants.js index 3942b548..71a4e2cf 100644 --- a/core/constants.js +++ b/core/constants.js @@ -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 = { diff --git a/pages/base.css b/pages/base.css index 941040ad..499a8ad4 100644 --- a/pages/base.css +++ b/pages/base.css @@ -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 { diff --git a/pages/options/options.css b/pages/options/options.css index 4cd79e12..001f9a65 100644 --- a/pages/options/options.css +++ b/pages/options/options.css @@ -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; diff --git a/pages/options/options.html b/pages/options/options.html index 47d62e47..5819e96f 100644 --- a/pages/options/options.html +++ b/pages/options/options.html @@ -16,171 +16,227 @@ - -
-
-
- -
-
-
-
-
- - -
-
-
-
-
- -
-
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.
-
-
These domains are allowed to load Google Fonts. Separate multiple entries with semi-colons (;).
-
-
-
-
-
- - -
-
-
-
-
- - -
-
-
-
-
- -
-
Open "Browser Console" ( CTRL + SHIFT + J ) to show missing resources
-
-
-
- - -
-
If enabled, you wont receive any information about new features in LocalCDN. This includes information about new uBlock/uMatrix rules.
-
-
-
Choose an icon for this extension
-
- -
-
-
-
- -
- -
This function is currently in an experimental stage. No data transmission. It's all local on your device.
-
-
-
-
- -
+ +
+ +
+
+
+ + +
+
+
+
+
+ +
+
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.
+
+
These domains are allowed to load Google Fonts. Separate multiple entries with semi-colons (;).
+
+
+
+
+
+ +
+
Open "Browser Console" ( CTRL + SHIFT + J ) to show missing resources
+
+
+
+
+
Do not apply HTML filter to these domains:
+
Apply HTML filter to these domains:
+ +
Enter the domains to be handled or ignored by the HTML filter. Separate multiple entries with semi-colons (;).
+
+
+
+ + +
+
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.
+
+ This function can break websites. Please note the information on the Wiki page. +
+
+
+
Generate rule set
+
+

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.

+
+
+

Last update:

+
+
+ +
+
+ +
+ + +
+
-
-
-
Do not apply HTML filter to these domains:
-
Apply HTML filter to these domains:
- -
Enter the domains to be handled or ignored by the HTML filter. Separate multiple entries with semi-colons (;).
-
-
-
-
- This function can break websites. Please note the information on the Wiki page. + +
+
+
Import/Export
+
+ + + +
+
+
-
-
-
Generate rule set
-
-

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.

-
-
-

Last update:

-
-
- -
-
- -
- - -
+ +
+
+ +
-
- -
+

LocalCDN v

diff --git a/pages/options/options.js b/pages/options/options.js index 402d86df..5bd155d2 100644 --- a/pages/options/options.js +++ b/pages/options/options.js @@ -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'); + } + } }; /** diff --git a/pages/updates/updates.html b/pages/updates/updates.html index 9e4174ca..06c7a61b 100644 --- a/pages/updates/updates.html +++ b/pages/updates/updates.html @@ -29,6 +29,7 @@
  • Added: Bootstrap Toggle v2.2.2 (#90)
  • Implemented: Open options in new tab (#91)
  • Implemented: Storage handler (#92)
    • +
  • Updated: Options page (#93)
  • Updated: Google Material Icons (#94)
  • Added: P2P Media Loader Hls.js (v0.6.2) (#95)