Update options/popup layout (+ mobile)

This commit is contained in:
magnolia1234 2020-11-05 22:21:41 +01:00
parent fc46a96dbb
commit 22276235fd
11 changed files with 138 additions and 18 deletions

View file

@ -357,7 +357,7 @@ Remember to check the [previous requests](https://bitbucket.org/magnolia1234/byp
Add your own custom site (also for testing).
Check 'Options'-link in popup-menu and go to custom sites.
* by default BPC has limited permissions, but you can opt-in to enable custom sites (and also clear cookies for non-listed sites).
Make sure the (new) site is checked under Options (or check on/off-buton).
Make sure the (new) site is checked under Options (or check on/off-button).
By default sites' cookies/local storage are removed after page loads (to bypass article limit).
Also you can enable Googlebot user-agent or disable Javascript for (sub)domain(s)/external sources.

View file

@ -281,7 +281,8 @@ const userAgentMobileB = "Chrome/80.0.3987.92 Mobile Safari/537.36 (compatible;
var enabledSites = [];
var disabledSites = [];
var defaultSites_domains = Object.values(defaultSites).concat(ad_region_domains, au_comm_media_domains, au_news_corp_domains, au_prov_news_domains, nymag_domains);
var defaultSites_grouped_domains = Object.values(defaultSites);
var defaultSites_domains = defaultSites_grouped_domains.concat(ad_region_domains, au_comm_media_domains, au_news_corp_domains, au_prov_news_domains, nymag_domains);
var customSites = {};
var customSites_domains = [];
@ -835,7 +836,7 @@ function site_switch() {
}, function (tabs) {
if (tabs.length > 0 && tabs[0].url && tabs[0].url.indexOf("http") !== -1) {
let currentUrl = tabs[0].url;
let isDefaultSite = matchUrlDomain(defaultSites_domains, currentUrl);
let isDefaultSite = matchUrlDomain(defaultSites_grouped_domains, currentUrl);
let defaultSite_title = isDefaultSite ? Object.keys(defaultSites).find(key => defaultSites[key] === isDefaultSite) : '';
let isCustomSite = matchUrlDomain(Object.values(customSites_domains), currentUrl);
let customSite_title = isCustomSite ? Object.keys(customSites).find(key => customSites[key].domain === isCustomSite) : '';
@ -868,6 +869,22 @@ function site_switch() {
});
}
function popup_show_toggle_tab(callback) {
ext_api.tabs.query({
active: true,
currentWindow: true
}, function (tabs) {
if (tabs.length > 0 && tabs[0].url && tabs[0].url.indexOf("http") !== -1) {
let currentUrl = tabs[0].url;
let isDefaultSiteGrouped = matchUrlDomain(defaultSites_grouped_domains, currentUrl);
let isDefaultSite = matchUrlDomain(defaultSites_domains, currentUrl);
let isCustomSite = matchUrlDomain(Object.values(customSites_domains), currentUrl);
let domain = isDefaultSiteGrouped || (!isDefaultSite && isCustomSite);
callback(domain);
}
});
};
// remove cookies after page load
ext_api.webRequest.onCompleted.addListener(function (details) {
var domainVar = matchUrlDomain(remove_cookies, details.url);

View file

@ -8,6 +8,7 @@ Fix-update Telegraph.co.uk (overlay)
Fix Chrome-icon for dark/incognito mode (all permitted sites)
Fix clearCookies (Chrome .domain cookies)
Fix updateBadge (grouped sites)
Update options/popup layout (+ mobile)
* v1.9.3.0 (2020-11-01)
Add Deutsche Wirtschafts Nachrichten

View file

@ -339,5 +339,5 @@
"webRequest",
"webRequestBlocking"
],
"version": "1.9.3.4"
"version": "1.9.3.5"
}

View file

@ -7,3 +7,7 @@ html, body {
button {
margin: 0.2em 0.2em 0.5em 0;
}
* {
box-sizing: border-box;
}

View file

@ -3,6 +3,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bypass Paywalls Clean (setCookie/custom sites opt-in)</title>
<link rel="stylesheet" href="opt-in.css"/>
<script src="opt-in.js"></script>

View file

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bypass Paywalls Clean Options</title>
<style>
#bypass_sites label {
@ -10,6 +11,9 @@
body {
font-size: 100%;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>

View file

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bypass Paywalls Clean Options Custom</title>
<style>
#bypass_sites label, #add_site label {
@ -10,6 +11,9 @@
body {
font-size: 100%;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>

View file

@ -1,17 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="popup_switch.css"/>
<style>
body {
font-size: 100%;
}
div {
margin: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div style="width:100%"><strong>Bypass Paywalls Clean <span id="version"></span></strong>
<br><a href="options.html" style="color:black" target="_blank">Options</a> |
<div style="width:275px"><strong>Bypass Paywalls Clean <span id="version"></span></strong><span id="site_switch_span">&nbsp;&nbsp;</span></div>
<div><a href="options.html" style="color:black" target="_blank">Options</a> |
<a href="options_custom.html" style="color:black" target="_blank">Custom</a> |
<a href="https://bitbucket.org/magnolia1234/bypass-paywalls-firefox-clean/src/master/README.md" style="color:black" target="_blank">BitBucket</a> |
<button id="site_switch" title="en/disable current site in BPC">on/off</button> |
<button id="clear_cookies" title="clear cookies (and local storage) for current site">clear cookies</button>
<br><a href="https://bitbucket.org/magnolia1234/bypass-paywalls-firefox-clean/raw/master/changelog.txt" style="color:black" target="_blank">Changelog</a>
<span id="version_new"></span></div>
<a href="https://bitbucket.org/magnolia1234/bypass-paywalls-firefox-clean/src/master/README.md" style="color:black" target="_blank">BitBucket</a></div>
<div><a href="https://bitbucket.org/magnolia1234/bypass-paywalls-firefox-clean/raw/master/changelog.txt" style="color:black" target="_blank">Changelog</a> |
<button id="clear_cookies" title="clear cookies (and local storage) for current site">clear cookies</button></div>
<div><span id="version_new"></span></div>
<script src="version.js"></script>
<script src="popup.js"></script>
</body>

View file

@ -1,9 +1,30 @@
var ext_api = chrome || browser;
document.getElementById("site_switch").addEventListener('click', function() {
ext_api.extension.getBackgroundPage().site_switch();
window.close();
});
document.getElementById("clear_cookies").addEventListener('click', function() {
function popup_show_toggle(domain) {
if (domain) {
var site_switch_span = document.getElementById('site_switch_span');
let labelEl = document.createElement('label');
labelEl.setAttribute('class', 'switch');
let inputEl = document.createElement('input');
inputEl.setAttribute('id', 'site_switch');
inputEl.setAttribute('type', 'checkbox');
if (ext_api.extension.getBackgroundPage().enabledSites.includes(domain))
inputEl.setAttribute('checked', true);
labelEl.appendChild(inputEl);
let spanEl = document.createElement('span');
spanEl.setAttribute('class', 'slider round');
spanEl.setAttribute('title', 'en/disable current site in BPC');
labelEl.appendChild(spanEl);
site_switch_span.appendChild(labelEl);
document.getElementById("site_switch").addEventListener('click', function () {
ext_api.extension.getBackgroundPage().site_switch();
window.close();
});
}
};
ext_api.extension.getBackgroundPage().popup_show_toggle_tab(popup_show_toggle);
document.getElementById("clear_cookies").addEventListener('click', function () {
ext_api.extension.getBackgroundPage().clear_cookies();
window.close();
});
});

58
popup_switch.css Normal file
View file

@ -0,0 +1,58 @@
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: blue;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: red;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
.slider.round {
border-radius: 9px;
}
.slider.round:before {
border-radius: 50%;
}