From 24a80cc6a0ea243373dddbaf883697db413a010e Mon Sep 17 00:00:00 2001 From: webdev03 <75148774+webdev03@users.noreply.github.com> Date: Tue, 21 Dec 2021 09:33:49 +1300 Subject: [PATCH 1/6] move elements around and create background for tabs --- src/index.html | 20 +++++++++++--------- src/tabs.js | 2 ++ styles.css | 2 +- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index b395d152..aaa813f2 100644 --- a/src/index.html +++ b/src/index.html @@ -12,31 +12,33 @@ -
+
- +
+ +
+
- -
- + \ No newline at end of file diff --git a/src/tabs.js b/src/tabs.js index aa1ea54f..bc8e6bda 100644 --- a/src/tabs.js +++ b/src/tabs.js @@ -10,6 +10,8 @@ function createTab() { let tab = document.createElement("div"); // Some parts taken from MystPi/Ninetails on Github. Thank you so much!!! let randomHash = + Math.random().toString(36).substring(2, 15) + + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); tab.classList.add("tab"); diff --git a/styles.css b/styles.css index ab38b38f..2775db4d 100644 --- a/styles.css +++ b/styles.css @@ -12,7 +12,7 @@ @apply transition flex items-center flex-1 max-w-md p-2 overflow-hidden text-sm text-white bg-emerald-500 rounded cursor-default whitespace-nowrap font-bold; } .view { - @apply w-[100vw] h-[100vh]; + @apply min-w-[100vw] min-h-[100vh]; } } From 46966b849fc75b7ec83b5b2a93ee74b87bde2370 Mon Sep 17 00:00:00 2001 From: webdev03 <75148774+webdev03@users.noreply.github.com> Date: Tue, 21 Dec 2021 12:57:39 +1300 Subject: [PATCH 2/6] more tab updates --- src/functions.js | 12 ++++++++++ src/index.html | 15 ++++++++---- src/loader.js | 5 ---- src/search.js | 59 ++++++++++++++++++++++++++++++++++++++++++++++++ src/tabs.js | 18 +++++++++------ styles.css | 8 ++++++- 6 files changed, 99 insertions(+), 18 deletions(-) create mode 100644 src/functions.js create mode 100644 src/search.js diff --git a/src/functions.js b/src/functions.js new file mode 100644 index 00000000..f7c844e4 --- /dev/null +++ b/src/functions.js @@ -0,0 +1,12 @@ +function generateHashkey() { + return ( + Math.random().toString(36).substring(2, 15) + + Math.random().toString(36).substring(2, 15) + + Math.random().toString(36).substring(2, 15) + + Math.random().toString(36).substring(2, 15) + + Math.random().toString(36).substring(2, 15) + + Math.random().toString(36).substring(2, 15) + + Math.random().toString(36).substring(2, 15) + + Math.random().toString(36).substring(2, 15) + ); +} diff --git a/src/index.html b/src/index.html index aaa813f2..8b6a4aff 100644 --- a/src/index.html +++ b/src/index.html @@ -3,20 +3,22 @@ Catalyst + + - -
+
-
+ placeholder="Browse the Web" /> +
+
+ +
diff --git a/src/loader.js b/src/loader.js index 4d5e32bb..b712f609 100644 --- a/src/loader.js +++ b/src/loader.js @@ -1,8 +1,3 @@ -function loadWeb() { - var page = document.getElementById("searchbar").value; - document.querySelector(".current").src = page; -} - function reload() { document.querySelector(".current").reload(); } diff --git a/src/search.js b/src/search.js new file mode 100644 index 00000000..9e70d0ad --- /dev/null +++ b/src/search.js @@ -0,0 +1,59 @@ +// protocols +const protocols = ["https", "http"]; +const removeChildren = (parent) => { + while (parent.lastChild) { + parent.removeChild(parent.lastChild); + } +}; +const searchbar = document.getElementById("searchbar"); +const suggestionsEl = document.getElementById("autocomplete-suggestions"); +searchbar.addEventListener("input", async () => { + if (shouldAutocomplete(searchbar.value)) { + // This is for duckduckgo only, in the future, this may be something else, but I think DDG is fine for now. + const autoCompleteCheck = await fetch( + `https://duckduckgo.com/ac/?q=${searchbar.value}` + ); + if (!autoCompleteCheck.ok) return; + const autocomplete = await autoCompleteCheck.json(); + removeChildren(suggestionsEl); + for (let index = 0; index < autocomplete.length; index++) { + const suggestionText = autocomplete[index].phrase; + // insert suggestion + let suggestion = document.createElement("button"); + let suggestionHash = generateHashkey(); + suggestion.innerText = suggestionText; + suggestion.classList.add("suggestion"); + suggestion.id = "suggestion-" + suggestionHash; + suggestion.addEventListener("click", () => { + document.getElementById("searchbar").value = suggestionText; + loadURL(); + removeChildren(suggestionsEl); + }); + suggestionsEl.appendChild(suggestion); + suggestionsEl.appendChild(document.createElement("hr")); + } + } else { + removeChildren(suggestionsEl); + } +}); + +function loadURL() { + var page = document.getElementById("searchbar").value; + if (shouldAutocomplete(page)) { + document.querySelector( + ".current" + ).src = `https://duckduckgo.com/?q=${page}`; + } else { + document.querySelector(".current").src = page; + } + removeChildren(suggestionsEl); +} +function shouldAutocomplete(input) { + for (let index = 0; index < protocols.length; index++) { + const protocol = protocols[index]; + if (input.startsWith(`${protocol}://`)) { + return false; + } + } + return true; +} diff --git a/src/tabs.js b/src/tabs.js index 2de37377..ee5df147 100644 --- a/src/tabs.js +++ b/src/tabs.js @@ -9,11 +9,7 @@ let activeHash = "0"; function createTab() { let tab = document.createElement("div"); // Some parts taken from MystPi/Ninetails on Github. Thank you so much!!! - let randomHash = - Math.random().toString(36).substring(2, 15) + - Math.random().toString(36).substring(2, 15) + - Math.random().toString(36).substring(2, 15) + - Math.random().toString(36).substring(2, 15); + let randomHash = generateHashkey(); tab.classList.add("tab"); tab.id = `tab-${randomHash}`; tab.onclick = () => { @@ -24,9 +20,9 @@ function createTab() { let view = document.createElement("webview"); view.id = "view-" + randomHash; view.classList.add("view"); - view.allowpopups = "allowpopups"; + view.allowpopups = false; view.webpreferences = "nativeWindowOpen=true"; - view.useragent = "Catalyst" + view.useragent = "Catalyst"; view.src = "./welcome.html"; // will be changed when startpage settings are added addListeners(view, randomHash); document.getElementById("webviews").appendChild(view); @@ -66,12 +62,20 @@ function addListeners(view, hash) { view.addEventListener("did-stop-loading", () => { tab.innerText = view.getTitle(); tab.classList.remove("animate-pulse"); + let viewURL = view.getURL(); + if (!viewURL.startsWith("file://")) { + document.getElementById("searchbar").value = viewURL; + } }); view.addEventListener("did-start-loading", () => { tab.classList.add("animate-pulse"); }); view.addEventListener("page-title-updated", (e) => { tab.innerText = e.title; + let viewURL = view.getURL(); + if (!viewURL.startsWith("file://")) { + document.getElementById("searchbar").value = viewURL; + } }); } diff --git a/styles.css b/styles.css index 2775db4d..18dd3ee6 100644 --- a/styles.css +++ b/styles.css @@ -9,11 +9,17 @@ @apply transition flex items-center flex-1 max-w-md p-2 overflow-hidden text-sm text-gray-600 bg-emerald-100 rounded cursor-pointer whitespace-nowrap; } .active-tab { - @apply transition flex items-center flex-1 max-w-md p-2 overflow-hidden text-sm text-white bg-emerald-500 rounded cursor-default whitespace-nowrap font-bold; + @apply transition flex items-center flex-1 max-w-md p-3 overflow-hidden text-sm text-white bg-emerald-500 rounded cursor-default whitespace-nowrap font-bold; } .view { @apply min-w-[100vw] min-h-[100vh]; } + .suggestion { + @apply w-screen bg-emerald-200 min-h-[30px] p-2; + } + .suggestions-box { + @apply absolute rounded-3xl; + } } /* Custom Styles (should be removed soon) */ From 61482c1772dee00f5703fe43a76c49b896221954 Mon Sep 17 00:00:00 2001 From: webdev03 <75148774+webdev03@users.noreply.github.com> Date: Tue, 21 Dec 2021 12:59:56 +1300 Subject: [PATCH 3/6] fix rounded corner --- src/index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index 8b6a4aff..95db0f22 100644 --- a/src/index.html +++ b/src/index.html @@ -35,8 +35,9 @@ style="color: black;" class="fa fa-refresh"> - +
From 7c9aea9b37083ebc329de4b3e22b9b299e44dea0 Mon Sep 17 00:00:00 2001 From: webdev03 <75148774+webdev03@users.noreply.github.com> Date: Tue, 21 Dec 2021 13:20:29 +1300 Subject: [PATCH 4/6] more minor changes --- src/index.html | 14 +++++++------- src/search.js | 1 - styles.css | 7 +++++-- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index 95db0f22..26dd75fe 100644 --- a/src/index.html +++ b/src/index.html @@ -28,16 +28,16 @@
- + + - - - +
diff --git a/src/search.js b/src/search.js index 9e70d0ad..27441d5f 100644 --- a/src/search.js +++ b/src/search.js @@ -30,7 +30,6 @@ searchbar.addEventListener("input", async () => { removeChildren(suggestionsEl); }); suggestionsEl.appendChild(suggestion); - suggestionsEl.appendChild(document.createElement("hr")); } } else { removeChildren(suggestionsEl); diff --git a/styles.css b/styles.css index 18dd3ee6..6c345077 100644 --- a/styles.css +++ b/styles.css @@ -15,10 +15,13 @@ @apply min-w-[100vw] min-h-[100vh]; } .suggestion { - @apply w-screen bg-emerald-200 min-h-[30px] p-2; + @apply w-screen border-solid p-2 border-blue-500; } .suggestions-box { - @apply absolute rounded-3xl; + @apply absolute rounded-xl bg-red-200 border-blue-500; + } + *:focus { + @apply outline-emerald-600; } } From 1c246a027c4128c9978f6e25c4bb7cfdc9ef0006 Mon Sep 17 00:00:00 2001 From: webdev03 <75148774+webdev03@users.noreply.github.com> Date: Tue, 21 Dec 2021 13:44:54 +1300 Subject: [PATCH 5/6] favicon support --- src/tabs.js | 36 +++++++++++++++++++++++++++++++----- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/src/tabs.js b/src/tabs.js index ee5df147..f6f8cf37 100644 --- a/src/tabs.js +++ b/src/tabs.js @@ -1,6 +1,6 @@ // Init variables let activeHash = "0"; - +let hasFavicon = {}; // Functions /** @@ -8,6 +8,7 @@ let activeHash = "0"; */ function createTab() { let tab = document.createElement("div"); + let span = document.createElement("span"); // Some parts taken from MystPi/Ninetails on Github. Thank you so much!!! let randomHash = generateHashkey(); tab.classList.add("tab"); @@ -15,7 +16,7 @@ function createTab() { tab.onclick = () => { switchTabs(randomHash); }; - tab.innerText = "New Tab"; + span.innerText = "New Tab"; document.getElementById("tabs-bar").appendChild(tab); let view = document.createElement("webview"); view.id = "view-" + randomHash; @@ -24,6 +25,12 @@ function createTab() { view.webpreferences = "nativeWindowOpen=true"; view.useragent = "Catalyst"; view.src = "./welcome.html"; // will be changed when startpage settings are added + let image = document.createElement("img"); + image.width = "16"; + image.height = "16"; + image.style.border = "0"; + tab.appendChild(image); + tab.appendChild(span); addListeners(view, randomHash); document.getElementById("webviews").appendChild(view); switchTabs(randomHash); @@ -50,7 +57,6 @@ function switchTabs(tabHash) { x.style.display = "none"; x.classList.remove("current"); }); - document.getElementById("view-" + tabHash).style.display = "flex"; document.getElementById("view-" + tabHash).classList.add("current"); view = document.getElementById("view-" + tabHash); @@ -59,8 +65,14 @@ function switchTabs(tabHash) { function addListeners(view, hash) { const tab = document.getElementById(`tab-${hash}`); + hasFavicon[hash] = false; + if (!hasFavicon[hash]) { + tab.getElementsByTagName("img")[0].style.display = "none"; + } else { + tab.getElementsByTagName("img")[0].style.display = "inline"; + } view.addEventListener("did-stop-loading", () => { - tab.innerText = view.getTitle(); + tab.getElementsByTagName("span")[0].innerText = view.getTitle(); tab.classList.remove("animate-pulse"); let viewURL = view.getURL(); if (!viewURL.startsWith("file://")) { @@ -69,14 +81,28 @@ function addListeners(view, hash) { }); view.addEventListener("did-start-loading", () => { tab.classList.add("animate-pulse"); + tab.getElementsByTagName("img")[0].style.display = "none"; }); view.addEventListener("page-title-updated", (e) => { - tab.innerText = e.title; + tab.getElementsByTagName("span")[0].innerText = e.title; let viewURL = view.getURL(); if (!viewURL.startsWith("file://")) { document.getElementById("searchbar").value = viewURL; } }); + view.addEventListener("page-favicon-updated", (e) => { + if (e.favicons.length > 0) { + hasFavicon[hash] = true; + let icon = e.favicons[0]; + let img = tab.getElementsByTagName("img")[0]; + img.style.display = "inline"; + tab.getElementsByTagName("span")[0].classList.add("px-2"); + img.src = icon; + } else { + hasFavicon[hash] = false; + tab.getElementsByTagName("img")[0].style.display = "none"; + } + }); } function removeTab() { From c5472e0062d209c5bea96e4d22855db510242f63 Mon Sep 17 00:00:00 2001 From: webdev03 <75148774+webdev03@users.noreply.github.com> Date: Tue, 21 Dec 2021 13:53:16 +1300 Subject: [PATCH 6/6] fix span padding --- src/tabs.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/tabs.js b/src/tabs.js index f6f8cf37..3a98248e 100644 --- a/src/tabs.js +++ b/src/tabs.js @@ -100,6 +100,7 @@ function addListeners(view, hash) { img.src = icon; } else { hasFavicon[hash] = false; + tab.getElementsByTagName("span")[0].classList.remove("px-2"); tab.getElementsByTagName("img")[0].style.display = "none"; } });