diff --git a/src/assets/javascripts/data.js b/src/assets/javascripts/data.js deleted file mode 100644 index bf0666ba..00000000 --- a/src/assets/javascripts/data.js +++ /dev/null @@ -1,12 +0,0 @@ -"use strict"; - -let theme; -function setTheme(val) { - theme = val; - browser.storage.sync.set({ theme }) -}; - -export default { - theme, - setTheme, -} \ No newline at end of file diff --git a/src/assets/javascripts/helpers/common.js b/src/assets/javascripts/helpers/common.js index 74f8edf5..e6d4895f 100644 --- a/src/assets/javascripts/helpers/common.js +++ b/src/assets/javascripts/helpers/common.js @@ -4,7 +4,6 @@ import instagramHelper from "./instagram.js"; import mediumHelper from "./medium.js"; import redditHelper from "./reddit.js"; import searchHelper from "./search.js"; -import data from '../data.js' import translateHelper from "./translate.js"; import wikipediaHelper from "./wikipedia.js"; import mapsHelper from "./maps.js"; diff --git a/src/assets/javascripts/helpers/exceptions.js b/src/assets/javascripts/helpers/exceptions.js new file mode 100644 index 00000000..9b7f1b59 --- /dev/null +++ b/src/assets/javascripts/helpers/exceptions.js @@ -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, +} \ No newline at end of file diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js index be20b726..b8665dff 100644 --- a/src/assets/javascripts/helpers/youtube/youtube.js +++ b/src/assets/javascripts/helpers/youtube/youtube.js @@ -5,12 +5,12 @@ import commonHelper from '../common.js' window.browser = window.browser || window.chrome; 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?:\/\/(i|s)\.ytimg\.com\/vi\/.*\/..*/, - /https?:\/\/(www\.|music|)youtube\.com\/watch\?v\=..*/, + /https?:\/\/(www\.|music\.|)youtube\.com\/watch\?v\=..*/, /https?:\/\/youtu\.be\/..*/, diff --git a/src/pages/background/background.html b/src/pages/background/background.html index a24e1594..c9ae2a81 100644 --- a/src/pages/background/background.html +++ b/src/pages/background/background.html @@ -3,7 +3,6 @@ - diff --git a/src/pages/background/background.js b/src/pages/background/background.js index aa97e2f6..940a2ed7 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -11,6 +11,7 @@ import wikipediaHelper from "../../assets/javascripts/helpers/wikipedia.js"; import mediumHelper from "../../assets/javascripts/helpers/medium.js"; import imgurHelper from "../../assets/javascripts/helpers/imgur.js"; import tiktokHelper from "../../assets/javascripts/helpers/tiktok.js"; +import exceptionsHelper from "../../assets/javascripts/helpers/exceptions.js"; window.browser = window.browser || window.chrome; @@ -26,6 +27,7 @@ function wholeInit() { youtubeHelper.init() imgurHelper.init() tiktokHelper.init() + exceptionsHelper.init() } wholeInit(); @@ -43,7 +45,9 @@ browser.webRequest.onBeforeRequest.addListener( 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); diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html index 89b80b11..fbdc52ec 100644 --- a/src/pages/options/general/general.html +++ b/src/pages/options/general/general.html @@ -122,9 +122,36 @@ - - - +
+

Exceptions

+
+ +
+
+
+ +   + +   +
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js index 07097aaf..de69a487 100644 --- a/src/pages/options/general/general.js +++ b/src/pages/options/general/general.js @@ -1,49 +1,17 @@ "use strict"; -import data from "../../../assets/javascripts/data.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js"; - -import shared from "../shared.js"; - -const domparser = new DOMParser(); +import exceptionsHelper from "../../../assets/javascripts/helpers/exceptions.js"; let themeElement = document.getElementById("theme"); 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 = ` -// -// -// `; -// 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( - [ - // "exceptions", - "theme", - ], + ["theme"], (result) => { - data.theme = 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 = '...'; if (commonHelper.updateInstances()) { 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' ) } else 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) => `
${x} +
+
` + ).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(); + }) +}) \ No newline at end of file diff --git a/src/pages/options/shared.js b/src/pages/options/shared.js index 36f2ef27..ccc29693 100644 --- a/src/pages/options/shared.js +++ b/src/pages/options/shared.js @@ -17,96 +17,6 @@ function parseURL(urlString) { 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 { autocompletes, parseURL, diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index 8d7a7bb5..28b3121c 100644 --- a/src/pages/popup/popup.js +++ b/src/pages/popup/popup.js @@ -1,7 +1,6 @@ "use strict"; 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 twitterHelper from "../../assets/javascripts/helpers/twitter.js"; import instagramHelper from "../../assets/javascripts/helpers/instagram.js"; @@ -43,7 +42,6 @@ async function wholeInit() { }; wholeInit().then(() => { - if (data.theme) document.body.classList.add(data.theme); disableTwitterElement.checked = !twitterHelper.getDisableTwitter(); disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube(); disableInstagramElement.checked = !instagramHelper.getDisableInstagram(); diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 1ce529f1..6293184f 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -43,7 +43,6 @@ select { width: 350px; border-radius: 3px; box-sizing: border-box; - margin-bottom: var(--space); background-color: var(--bg-main); border-style: solid; border-color: #767676;