devol
/
libredirect
mirror of https://codeberg.org/LibRedirect/libredirect.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Rewrote Exceptions logic and design #29

This commit is contained in:
ManeraKai 2022-02-12 20:40:36 +03:00
parent 9b73898584
commit 531e7c5fb4
No known key found for this signature in database
GPG Key ID: 5ABC31FFD562E337
11 changed files with 151 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/javascripts/data.js
View File

@ -1,12 +0,0 @@
"use strict";
let theme;
function setTheme(val) {
theme = val;
browser.storage.sync.set({ theme })
};
export default {
theme,
setTheme,
}

1
src/assets/javascripts/helpers/common.js
View File

@ -4,7 +4,6 @@ import instagramHelper from "./instagram.js";
import mediumHelper from "./medium.js"; import mediumHelper from "./medium.js";
import redditHelper from "./reddit.js"; import redditHelper from "./reddit.js";
import searchHelper from "./search.js"; import searchHelper from "./search.js";
import data from '../data.js'
import translateHelper from "./translate.js"; import translateHelper from "./translate.js";
import wikipediaHelper from "./wikipedia.js"; import wikipediaHelper from "./wikipedia.js";
import mapsHelper from "./maps.js"; import mapsHelper from "./maps.js";

35
src/assets/javascripts/helpers/exceptions.js Normal file
View File

@ -0,0 +1,35 @@
"use strict";
let exceptions = {
"url": [],
"regex": [],
};
const getExceptions = () => exceptions;
function setExceptions(val) {
exceptions = val;
browser.storage.sync.set({ exceptions })
console.log("exceptions: ", val)
}
async function init() {
let result = await browser.storage.sync.get("exceptions");
if (result.exceptions) exceptions = result.exceptions;
}
function isException(url) {
for (const item of exceptions.url) {
console.log(item, `${url.protocol}//${url.host}`)
if (item == `${url.protocol}//${url.host}`) return true;
}
for (const item of exceptions.regex)
if (new RegExp(item).test(url.href)) return true;
return false;
}
export default {
getExceptions,
setExceptions,
isException,
init,
}

4
src/assets/javascripts/helpers/youtube/youtube.js
View File

@ -5,12 +5,12 @@ import commonHelper from '../common.js'
window.browser = window.browser || window.chrome; window.browser = window.browser || window.chrome;
const targets = [ const targets = [
/https?:\/\/(www\.|music|m)youtube\.com(\/.*|$)/, /https?:\/\/(www\.|music\.|m\.|)youtube\.com(\/.*|$)/,
/https?:\/\/img\.youtube\.com\/vi\/.*\/..*/, // https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api /https?:\/\/img\.youtube\.com\/vi\/.*\/..*/, // https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
/https?:\/\/(i|s)\.ytimg\.com\/vi\/.*\/..*/, /https?:\/\/(i|s)\.ytimg\.com\/vi\/.*\/..*/,
/https?:\/\/(www\.|music|)youtube\.com\/watch\?v\=..*/, /https?:\/\/(www\.|music\.|)youtube\.com\/watch\?v\=..*/,
/https?:\/\/youtu\.be\/..*/, /https?:\/\/youtu\.be\/..*/,

1
src/pages/background/background.html
View File

@ -3,7 +3,6 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<script type="module" src="../../assets/javascripts/data.js"></script>
<script type="module" src="background.js"></script> <script type="module" src="background.js"></script>
</head> </head>

6
src/pages/background/background.js
View File

@ -11,6 +11,7 @@ import wikipediaHelper from "../../assets/javascripts/helpers/wikipedia.js";
import mediumHelper from "../../assets/javascripts/helpers/medium.js"; import mediumHelper from "../../assets/javascripts/helpers/medium.js";
import imgurHelper from "../../assets/javascripts/helpers/imgur.js"; import imgurHelper from "../../assets/javascripts/helpers/imgur.js";
import tiktokHelper from "../../assets/javascripts/helpers/tiktok.js"; import tiktokHelper from "../../assets/javascripts/helpers/tiktok.js";
import exceptionsHelper from "../../assets/javascripts/helpers/exceptions.js";
window.browser = window.browser || window.chrome; window.browser = window.browser || window.chrome;
@ -26,6 +27,7 @@ function wholeInit() {
youtubeHelper.init() youtubeHelper.init()
imgurHelper.init() imgurHelper.init()
tiktokHelper.init() tiktokHelper.init()
exceptionsHelper.init()
} }
wholeInit(); wholeInit();
@ -43,7 +45,9 @@ browser.webRequest.onBeforeRequest.addListener(
var newUrl; var newUrl;
if (youtubeHelper.isYoutube(url)) newUrl = youtubeHelper.redirect(url, initiator, details.type) if (exceptionsHelper.isException(url)) newUrl = null;
else if (youtubeHelper.isYoutube(url)) newUrl = youtubeHelper.redirect(url, initiator, details.type)
else if (twitterHelper.isTwitter(url)) newUrl = twitterHelper.redirect(url, initiator); else if (twitterHelper.isTwitter(url)) newUrl = twitterHelper.redirect(url, initiator);

27
src/pages/options/general/general.html
View File

@ -122,6 +122,33 @@
</a> </a>
</div> </div>
<div class="some-block option-block">
<h4>Exceptions</h4>
</div>
<form id="custom-exceptions-instance-form">
<div class="some-block option-block">
<div class="some-block" style="padding:0;">
<input id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" />
&nbsp;
<select id="exceptions-custom-instance-type">
<option value="url">URL</option>
<option value="regex">Regex</option>
</select>
&nbsp;
</div>
<button type="submit" class="add" id="exceptions-add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</svg>
</button>
</div>
</form>
<div class="checklist" id="exceptions-custom-checklist"></div>
</a>
</section>
<script type="module" src="../init.js"></script> <script type="module" src="../init.js"></script>
<script type="module" src="./general.js"></script> <script type="module" src="./general.js"></script>
<!-- <script src="../../assets/javascripts/localise.js"></script> --> <!-- <script src="../../assets/javascripts/localise.js"></script> -->

115
src/pages/options/general/general.js
View File

@ -1,49 +1,17 @@
"use strict"; "use strict";
import data from "../../../assets/javascripts/data.js";
import commonHelper from "../../../assets/javascripts/helpers/common.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js";
import exceptionsHelper from "../../../assets/javascripts/helpers/exceptions.js";
import shared from "../shared.js";
const domparser = new DOMParser();
let themeElement = document.getElementById("theme"); let themeElement = document.getElementById("theme");
window.browser = window.browser || window.chrome; window.browser = window.browser || window.chrome;
// function prependExceptionsItem(item, index) {
// const li = document.createElement("li");
// li.appendChild(document.createTextNode(item.toString()));
// const button = document.createElement("button");
// li.appendChild(button);
// document.getElementById("exceptions-items").prepend(li);
// const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
// <line x1='368' y1='368' x2='144' y2='144'
// style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
// <line x1='368' y1='144' x2='144' y2='368'
// style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
// </svg>`;
// button.appendChild(domparser.parseFromString(svg, "image/svg+xml").documentElement);
// button.addEventListener("click", () => {
// exceptions.splice(index, 1);
// browser.storage.sync.set({ exceptions: exceptions });
// li.remove();
// });
// }
browser.storage.sync.get( browser.storage.sync.get(
[ ["theme"],
// "exceptions",
"theme",
],
(result) => { (result) => {
data.theme = result.theme || "";
themeElement.value = result.theme || ""; themeElement.value = result.theme || "";
if (result.theme) document.body.classList.add(result.theme);
// data.exceptions = result.exceptions || [];
// data.exceptions.forEach(prependExceptionsItem);
shared.autocompletes.forEach((value) => {
});
} }
); );
@ -56,10 +24,85 @@ document.querySelector("#update-instances").addEventListener("click", () => {
document.querySelector("#update-instances").innerHTML = '...'; document.querySelector("#update-instances").innerHTML = '...';
if (commonHelper.updateInstances()) { if (commonHelper.updateInstances()) {
document.querySelector("#update-instances").innerHTML = 'Done!'; document.querySelector("#update-instances").innerHTML = 'Done!';
new Promise(resolve => setTimeout(resolve, 1500)).then( // Sleep 1500ms new Promise(resolve => setTimeout(resolve, 1500)).then( // sleep 1500ms
() => document.querySelector("#update-instances").innerHTML = 'Update Instances' () => document.querySelector("#update-instances").innerHTML = 'Update Instances'
) )
} }
else else
document.querySelector("#update-instances").innerHTML = 'Failed Miserabely'; document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
}); });
let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance");
let instanceTypeElement = document.getElementById("exceptions-custom-instance-type");
let instanceType = "url"
exceptionsHelper.init().then(() => {
instanceTypeElement.addEventListener("change",
(event) => {
instanceType = event.target.options[instanceTypeElement.selectedIndex].value
if (instanceType == 'url') {
nameCustomInstanceInput.setAttribute("type", "url");
nameCustomInstanceInput.setAttribute("placeholder", "https://www.google.com");
}
else if (instanceType == 'regex') {
nameCustomInstanceInput.setAttribute("type", "text");
nameCustomInstanceInput.setAttribute("placeholder", "https?:\/\/(www\.|music|)youtube\.com\/watch\?v\=..*");
}
}
)
let exceptionsCustomInstances = exceptionsHelper.getExceptions();
function calcExceptionsCustomInstances() {
console.log("exceptionsCustomInstances", exceptionsCustomInstances)
document.getElementById("exceptions-custom-checklist").innerHTML =
[...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex].map(
(x) => `<div>${x}<button class="add" id="clear-${x}">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
</svg>
</button>
</div>
<hr>`
).join('\n');
for (const x of [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]) {
document.getElementById(`clear-${x}`).addEventListener("click",
() => {
console.log(x);
let index;
index = exceptionsCustomInstances.url.indexOf(x);
if (index > -1)
exceptionsCustomInstances.url.splice(index, 1);
else {
index = exceptionsCustomInstances.regex.indexOf(x);
if (index > -1)
exceptionsCustomInstances.regex.splice(index, 1);
}
exceptionsHelper.setExceptions(exceptionsCustomInstances);
calcExceptionsCustomInstances();
});
}
}
calcExceptionsCustomInstances();
document.getElementById("custom-exceptions-instance-form").addEventListener("submit", (event) => {
event.preventDefault();
let val
if (instanceType == 'url') {
if (nameCustomInstanceInput.validity.valid) {
let url = new URL(nameCustomInstanceInput.value);
val = `${url.protocol}//${url.host}`
if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val)
}
} else if (instanceType == 'regex') {
val = nameCustomInstanceInput.value
if (val.trim() != '' && !exceptionsCustomInstances.regex.includes(val)) exceptionsCustomInstances.regex.push(val)
}
if (val) {
exceptionsHelper.setExceptions(exceptionsCustomInstances);
console.log("exceptionsCustomInstances", exceptionsCustomInstances)
nameCustomInstanceInput.value = '';
}
calcExceptionsCustomInstances();
})
})

90
src/pages/options/shared.js
View File

@ -17,96 +17,6 @@ function parseURL(urlString) {
return ""; return "";
} }
function autocomplete(input, list) {
let currentFocus;
input.addEventListener("focus", (e) => {
showOptions(e, true);
});
input.addEventListener("input", (e) => {
const val = e.target.value;
if (!val) {
return false;
}
currentFocus = -1;
showOptions(e);
});
input.addEventListener("keydown", function (e) {
let x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) {
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function showOptions(event, showAll = false) {
let div,
i,
val = event.target.value;
closeAllLists();
div = document.createElement("div");
div.setAttribute("id", event.target.id + "autocomplete-list");
div.setAttribute("class", "autocomplete-items");
event.target.parentNode.appendChild(div);
for (i = 0; i < list.length; i++) {
if (list[i].toLowerCase().indexOf(val.toLowerCase()) > -1) {
div.appendChild(getItem(list[i], val));
} else if (showAll) {
div.appendChild(getItem(list[i], val));
}
}
}
function getItem(item, val) {
const div = document.createElement("div");
const strong = document.createElement("strong");
strong.textContent = item.substr(0, val.length);
div.innerText = item.substr(val.length);
const hiddenInput = document.createElement("input");
hiddenInput.type = "hidden";
hiddenInput.value = item;
div.prepend(strong);
div.appendChild(hiddenInput);
div.addEventListener("click", function (e) {
input.value = div.getElementsByTagName("input")[0].value;
input.dispatchEvent(new Event("input"));
closeAllLists();
});
return div;
}
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = x.length - 1;
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (let i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
let x = document.getElementsByClassName("autocomplete-items");
for (let i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != input) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", (e) => {
if (!autocompletes.find((element) => element.id === e.target.id)) {
closeAllLists(e.target);
}
});
}
export default { export default {
autocompletes, autocompletes,
parseURL, parseURL,

2
src/pages/popup/popup.js
View File

@ -1,7 +1,6 @@
"use strict"; "use strict";
import commonHelper from "../../assets/javascripts/helpers/common.js"; import commonHelper from "../../assets/javascripts/helpers/common.js";
import data from "../../assets/javascripts/data.js";
import youtubeHelper from "../../assets/javascripts/helpers/youtube/youtube.js"; import youtubeHelper from "../../assets/javascripts/helpers/youtube/youtube.js";
import twitterHelper from "../../assets/javascripts/helpers/twitter.js"; import twitterHelper from "../../assets/javascripts/helpers/twitter.js";
import instagramHelper from "../../assets/javascripts/helpers/instagram.js"; import instagramHelper from "../../assets/javascripts/helpers/instagram.js";
@ -43,7 +42,6 @@ async function wholeInit() {
}; };
wholeInit().then(() => { wholeInit().then(() => {
if (data.theme) document.body.classList.add(data.theme);
disableTwitterElement.checked = !twitterHelper.getDisableTwitter(); disableTwitterElement.checked = !twitterHelper.getDisableTwitter();
disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube(); disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube();
disableInstagramElement.checked = !instagramHelper.getDisableInstagram(); disableInstagramElement.checked = !instagramHelper.getDisableInstagram();

1
src/pages/stylesheets/styles.css
View File

@ -43,7 +43,6 @@ select {
width: 350px; width: 350px;
border-radius: 3px; border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: var(--space);
background-color: var(--bg-main); background-color: var(--bg-main);
border-style: solid; border-style: solid;
border-color: #767676; border-color: #767676;