From 3ed569b717e649eea324b44089201fc16ce605bc Mon Sep 17 00:00:00 2001 From: JaydenDev Date: Sat, 9 Apr 2022 13:03:33 -0500 Subject: [PATCH 1/4] init --- .pnpm-debug.log | 19 +++++++++++++++++++ pnpm-lock.yaml | 44 +++++++++++++++++++++++++++++++++----------- 2 files changed, 52 insertions(+), 11 deletions(-) create mode 100644 .pnpm-debug.log diff --git a/.pnpm-debug.log b/.pnpm-debug.log new file mode 100644 index 00000000..76fd5346 --- /dev/null +++ b/.pnpm-debug.log @@ -0,0 +1,19 @@ +{ + "0 debug pnpm:scope": { + "selected": 1 + }, + "1 error pnpm": { + "errno": 1, + "code": "ELIFECYCLE", + "pkgid": "catalyst@0.0.1", + "stage": "dev", + "script": "concurrently -k npm:start npm:tailwind", + "pkgname": "catalyst", + "err": { + "name": "pnpm", + "message": "catalyst@0.0.1 dev: `concurrently -k npm:start npm:tailwind`\nExit status 1", + "code": "ELIFECYCLE", + "stack": "pnpm: catalyst@0.0.1 dev: `concurrently -k npm:start npm:tailwind`\nExit status 1\n at EventEmitter. (C:\\Users\\wills\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:105724:20)\n at EventEmitter.emit (node:events:526:28)\n at ChildProcess. (C:\\Users\\wills\\AppData\\Roaming\\npm\\node_modules\\pnpm\\dist\\pnpm.cjs:92285:18)\n at ChildProcess.emit (node:events:526:28)\n at maybeClose (node:internal/child_process:1090:16)\n at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)" + } + } +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc6e6616..6f53b14a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,9 +8,9 @@ specifiers: '@electron-forge/maker-squirrel': ^6.0.0-beta.63 '@electron-forge/maker-zip': ^6.0.0-beta.63 '@electron-forge/publisher-github': ^6.0.0-beta.61 - concurrently: ^7.0.0 + concurrently: ^7.1.0 cross-fetch: ^3.1.5 - electron: ^17.0.1 + electron: ^18.0.3 electron-reloader: ^1.2.3 electron-squirrel-startup: ^1.0.0 tailwindcss: ^3.0.23 @@ -27,8 +27,8 @@ devDependencies: '@electron-forge/maker-squirrel': 6.0.0-beta.63 '@electron-forge/maker-zip': 6.0.0-beta.63 '@electron-forge/publisher-github': 6.0.0-beta.63 - concurrently: 7.0.0 - electron: 17.3.1 + concurrently: 7.1.0 + electron: 18.0.3 electron-reloader: 1.2.3 tailwindcss: 3.0.23 @@ -638,11 +638,12 @@ packages: /@types/minimatch/3.0.5: resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==} + requiresBuild: true dev: true optional: true - /@types/node/14.18.12: - resolution: {integrity: sha512-q4jlIR71hUpWTnGhXWcakgkZeHa3CCjcQcnuzU8M891BAWA2jHiziiWEPEkdS5pFsz7H9HJiy8BrK7tBRNrY7A==} + /@types/node/16.11.26: + resolution: {integrity: sha512-GZ7bu5A6+4DtG7q9GsoHXy3ALcgeIHP4NnL0Vv2wu0uUB/yQex26v0tf6/na1mm0+bS9Uw+0DFex7aaKr2qawQ==} dev: true /@types/node/17.0.23: @@ -863,6 +864,7 @@ packages: /author-regex/1.0.0: resolution: {integrity: sha1-0IiFvmubv5Q5/gh8dihyRfCoFFA=} engines: {node: '>=0.8'} + requiresBuild: true dev: true /aws-sign2/0.7.0: @@ -875,6 +877,7 @@ packages: /balanced-match/1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + requiresBuild: true dev: true /base32-encode/1.2.0: @@ -935,6 +938,7 @@ packages: /brace-expansion/1.1.11: resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} + requiresBuild: true dependencies: balanced-match: 1.0.2 concat-map: 0.0.1 @@ -1206,6 +1210,7 @@ packages: /commander/5.1.0: resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==} engines: {node: '>= 6'} + requiresBuild: true dev: true /compare-version/0.1.2: @@ -1215,6 +1220,7 @@ packages: /concat-map/0.0.1: resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=} + requiresBuild: true dev: true /concat-stream/1.6.2: @@ -1227,8 +1233,8 @@ packages: typedarray: 0.0.6 dev: true - /concurrently/7.0.0: - resolution: {integrity: sha512-WKM7PUsI8wyXpF80H+zjHP32fsgsHNQfPLw/e70Z5dYkV7hF+rf8q3D+ScWJIEr57CpkO3OWBko6hwhQLPR8Pw==} + /concurrently/7.1.0: + resolution: {integrity: sha512-Bz0tMlYKZRUDqJlNiF/OImojMB9ruKUz6GCfmhFnSapXgPe+3xzY4byqoKG9tUZ7L2PGEUjfLPOLfIX3labnmw==} engines: {node: ^12.20.0 || ^14.13.0 || >=16.0.0} hasBin: true dependencies: @@ -1673,14 +1679,14 @@ packages: dev: true optional: true - /electron/17.3.1: - resolution: {integrity: sha512-C5E3uvXo1cmI+xYtbiMCW8AAGhBL0HbLA6cqD7FJmBoPtY88W/3A/km5z8oPGORyBNgSe7tSoHx4a6jWJIR+og==} + /electron/18.0.3: + resolution: {integrity: sha512-QRUZkGL8O/8CyDmTLSjBeRsZmGTPlPVeWnnpkdNqgHYYaOc/A881FKMiNzvQ9Cj0a+rUavDdwBUfUL82U3Ay7w==} engines: {node: '>= 8.6'} hasBin: true requiresBuild: true dependencies: '@electron/get': 1.14.1 - '@types/node': 14.18.12 + '@types/node': 16.11.26 extract-zip: 1.7.0 transitivePeerDependencies: - supports-color @@ -1712,6 +1718,7 @@ packages: /end-of-stream/1.4.4: resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==} + requiresBuild: true dependencies: once: 1.4.0 dev: true @@ -1997,6 +2004,7 @@ packages: /fs.realpath/1.0.0: resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=} + requiresBuild: true dev: true /fsevents/2.3.2: @@ -2377,6 +2385,7 @@ packages: /inflight/1.0.6: resolution: {integrity: sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=} + requiresBuild: true dependencies: once: 1.4.0 wrappy: 1.0.2 @@ -2507,6 +2516,7 @@ packages: /is-stream/1.1.0: resolution: {integrity: sha1-EtSj3U5o4Lec6428hBc66A2RykQ=} engines: {node: '>=0.10.0'} + requiresBuild: true dev: true /is-typedarray/1.0.0: @@ -2957,6 +2967,7 @@ packages: /nice-try/1.0.5: resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==} + requiresBuild: true dev: true /node-abi/3.8.0: @@ -3055,6 +3066,7 @@ packages: /npm-run-path/2.0.2: resolution: {integrity: sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=} engines: {node: '>=4'} + requiresBuild: true dependencies: path-key: 2.0.1 dev: true @@ -3166,6 +3178,7 @@ packages: /p-finally/1.0.0: resolution: {integrity: sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=} engines: {node: '>=4'} + requiresBuild: true dev: true /p-is-promise/2.1.0: @@ -3297,16 +3310,19 @@ packages: /path-is-absolute/1.0.1: resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=} engines: {node: '>=0.10.0'} + requiresBuild: true dev: true /path-key/2.0.1: resolution: {integrity: sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=} engines: {node: '>=4'} + requiresBuild: true dev: true /path-key/3.1.1: resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} engines: {node: '>=8'} + requiresBuild: true dev: true /path-parse/1.0.7: @@ -3794,6 +3810,7 @@ packages: /shebang-command/1.2.0: resolution: {integrity: sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: shebang-regex: 1.0.0 dev: true @@ -3801,6 +3818,7 @@ packages: /shebang-command/2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} + requiresBuild: true dependencies: shebang-regex: 3.0.0 dev: true @@ -3808,11 +3826,13 @@ packages: /shebang-regex/1.0.0: resolution: {integrity: sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=} engines: {node: '>=0.10.0'} + requiresBuild: true dev: true /shebang-regex/3.0.0: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} + requiresBuild: true dev: true /signal-exit/3.0.7: @@ -3987,6 +4007,7 @@ packages: /strip-eof/1.0.0: resolution: {integrity: sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=} engines: {node: '>=0.10.0'} + requiresBuild: true dev: true /strip-outer/1.0.1: @@ -4394,6 +4415,7 @@ packages: /wrappy/1.0.2: resolution: {integrity: sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=} + requiresBuild: true dev: true /xmlbuilder/9.0.7: From 0d3ea6fdd6ca927b40c08cb2df8c6913a0273d28 Mon Sep 17 00:00:00 2001 From: JaydenDev Date: Sat, 9 Apr 2022 13:14:53 -0500 Subject: [PATCH 2/4] make UI more compact --- src/index.html | 17 +++----- src/preferences.js | 96 +++++++++++++++++++++++----------------------- 2 files changed, 52 insertions(+), 61 deletions(-) diff --git a/src/index.html b/src/index.html index c81a8db0..6bc6908d 100644 --- a/src/index.html +++ b/src/index.html @@ -24,8 +24,8 @@ -
-
+
+
@@ -38,12 +38,12 @@
-
+
- +
-
+
@@ -84,13 +84,6 @@

Preferences

If Catalyst should use Dark Mode.


-

If Catalyst should automatically suggest autocompletions for your searches with DuckDuckGo.

diff --git a/src/preferences.js b/src/preferences.js index f61df671..a82d5b86 100644 --- a/src/preferences.js +++ b/src/preferences.js @@ -6,26 +6,24 @@ evaluatePreferences(); * Toggles the preferences viewer */ function togglePreferences() { - preferences = getPreferences(); - preferencesBox.classList.toggle("hidden"); - if (!preferencesBox.classList.contains("hidden")) { - // run preferences - evaluatePreferences(); - // update fields in preferences - document.getElementById("pref-darkmode").checked = preferences.dark; - addCheckboxListener(document.getElementById("pref-darkmode"), "dark"); - document.getElementById("pref-autocomplete").checked = preferences.autocomplete; - addCheckboxListener(document.getElementById("pref-autocomplete"), "autocomplete"); - document.getElementById("pref-bookmarks").checked = preferences.bookmarks; - addCheckboxListener(document.getElementById("pref-bookmarks"), "bookmarks"); - if (preferences.agent.toString().length > 1) { - document.getElementById("pref-useragent").value = - preferences.agent || "Catalyst/{{version}}"; - } else { - document.getElementById("pref-useragent").value = preferences.agent; - } - addTextListener(document.getElementById("pref-useragent"), "agent"); - } + preferences = getPreferences(); + preferencesBox.classList.toggle("hidden"); + if (!preferencesBox.classList.contains("hidden")) { + // run preferences + evaluatePreferences(); + // update fields in preferences + document.getElementById("pref-darkmode").checked = preferences.dark; + addCheckboxListener(document.getElementById("pref-darkmode"), "dark"); + document.getElementById("pref-autocomplete").checked = preferences.autocomplete; + addCheckboxListener(document.getElementById("pref-autocomplete"), "autocomplete"); + document.getElementById("pref-bookmarks").checked = preferences.bookmarks; + addCheckboxListener(document.getElementById("pref-bookmarks"), "bookmarks"); + if (preferences.agent.toString().length > 1) { + document.getElementById("pref-useragent").value = + preferences.agent || "Catalyst/{{version}}"; + } else {} + addTextListener(document.getElementById("pref-useragent"), "agent"); + } } /** @@ -33,13 +31,13 @@ function togglePreferences() { * @returns {Object} */ function getPreferences() { - if (!window.localStorage.getItem("preferences")) { - window.localStorage.setItem( - "preferences", - JSON.stringify({ dark: false, agent: "", autocomplete: true, bookmarks: false }) - ); - } - return JSON.parse(window.localStorage.getItem("preferences")); + if (!window.localStorage.getItem("preferences")) { + window.localStorage.setItem( + "preferences", + JSON.stringify({ dark: false, agent: "", autocomplete: true, bookmarks: false }) + ); + } + return JSON.parse(window.localStorage.getItem("preferences")); } /** @@ -48,10 +46,10 @@ function getPreferences() { * @param {string} prefKey The key in "preferences" for this element. */ function addCheckboxListener(element, prefKey) { - element.addEventListener("change", () => { - preferences[prefKey] = !!element.checked; - updatePreferences(); - }); + element.addEventListener("change", () => { + preferences[prefKey] = !!element.checked; + updatePreferences(); + }); } /** * Adds a Text input listener @@ -59,37 +57,37 @@ function addCheckboxListener(element, prefKey) { * @param {string} prefKey The key in "preferences" for this element. */ function addTextListener(element, prefKey) { - element.addEventListener("input", () => { - preferences[prefKey] = element.value; - updatePreferences(); - }); + element.addEventListener("input", () => { + preferences[prefKey] = element.value; + updatePreferences(); + }); } /** * Updates the preferences in LocalStorage to the new preferences and evaluates the new ones */ function updatePreferences() { - window.localStorage.setItem("preferences", JSON.stringify(preferences)); - evaluatePreferences(); + window.localStorage.setItem("preferences", JSON.stringify(preferences)); + evaluatePreferences(); } /** * Evaluates the preferences in the preferences variable */ function evaluatePreferences() { - if (preferences.dark) { - document.documentElement.classList.add("dark"); - } else { - document.documentElement.classList.remove("dark"); - } - if (preferences.bookmarks && JSON.parse(window.localStorage.getItem("bookmarks")).length > 0) { - document.getElementById("bookmarks").classList.remove("hidden"); - } else { - document.getElementById("bookmarks").classList.add("hidden"); - } + if (preferences.dark) { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } + if (preferences.bookmarks && JSON.parse(window.localStorage.getItem("bookmarks")).length > 0) { + document.getElementById("bookmarks").classList.remove("hidden"); + } else { + document.getElementById("bookmarks").classList.add("hidden"); + } } (async() => { - const vstr = document.getElementById("verstring"); - vstr.innerText = vstr.innerText.replace("{{version}}", (await getPackageJSON()).version) + const vstr = document.getElementById("verstring"); + vstr.innerText = vstr.innerText.replace("{{version}}", (await getPackageJSON()).version) })() \ No newline at end of file From 2e00d6faf5debb2e1022c27fec780eebdff839c3 Mon Sep 17 00:00:00 2001 From: JaydenDev Date: Sat, 9 Apr 2022 13:27:34 -0500 Subject: [PATCH 3/4] add UI animations --- src/index.html | 4 +- src/listeners.js | 9 +- src/tabs.js | 239 +++++++++++++++++++++++---------------------- tailwind.config.js | 19 ++-- 4 files changed, 143 insertions(+), 128 deletions(-) diff --git a/src/index.html b/src/index.html index 6bc6908d..512c6d66 100644 --- a/src/index.html +++ b/src/index.html @@ -38,7 +38,7 @@
-
+
-
+
diff --git a/src/listeners.js b/src/listeners.js index e617ff4c..6da4da53 100644 --- a/src/listeners.js +++ b/src/listeners.js @@ -1,3 +1,8 @@ document.getElementById("more-btn").addEventListener("click", () => { - document.getElementById("more-menu").classList.toggle("hidden"); -}); + document.getElementById("more-menu").classList.toggle("hidden"); + // add 'animate-bounce' class for 2 seconds + document.getElementById("more-menu").classList.add("animate-bounce"); + setTimeout(() => { + document.getElementById("more-menu").classList.remove("animate-bounce"); + }, 550); +}); \ No newline at end of file diff --git a/src/tabs.js b/src/tabs.js index cef3a3be..88b6995f 100644 --- a/src/tabs.js +++ b/src/tabs.js @@ -8,40 +8,40 @@ let hasFavicon = {}; * @param {string} url The URL of the page to go to, optional. */ async function createTab(url) { - url = url || "./welcome.html"; - const packageJSON = await getPackageJSON(); - const inputAgent = JSON.parse( - window.localStorage.getItem("preferences") - ).agent; - 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"); - tab.id = `tab-${randomHash}`; - tab.onclick = () => { - switchTabs(randomHash); - }; - span.innerText = "New Tab"; - document.getElementById("tabs-bar").appendChild(tab); - let view = document.createElement("webview"); - view.id = "view-" + randomHash; - view.classList.add("view"); - view.allowpopups = "allowpopups"; - view.webpreferences = "nativeWindowOpen=true"; - if (!inputAgent.length < 1) { - view.useragent = inputAgent.replace("{{version}}", packageJSON.version); - } - view.src = url; - 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); + url = url || "./welcome.html"; + const packageJSON = await getPackageJSON(); + const inputAgent = JSON.parse( + window.localStorage.getItem("preferences") + ).agent; + 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"); + tab.id = `tab-${randomHash}`; + tab.onclick = () => { + switchTabs(randomHash); + }; + span.innerText = "New Tab"; + document.getElementById("tabs-bar").appendChild(tab); + let view = document.createElement("webview"); + view.id = "view-" + randomHash; + view.classList.add("view"); + view.allowpopups = "allowpopups"; + view.webpreferences = "nativeWindowOpen=true"; + if (!inputAgent.length < 1) { + view.useragent = inputAgent.replace("{{version}}", packageJSON.version); + } + view.src = url; + 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); } createTab(); @@ -50,99 +50,104 @@ createTab(); * @param {string} tabHash - The random hash of the tab to switch to */ function switchTabs(tabHash) { - let currentTab = document.querySelector(".active-tab"); - if (currentTab) { - currentTab.classList.remove("active-tab"); - currentTab.classList.add("tab"); - } + let currentTab = document.querySelector(".active-tab"); + if (currentTab) { + currentTab.classList.remove("active-tab"); + currentTab.classList.add("tab"); + } - let activeTab = document.getElementById("tab-" + tabHash); - activeTab.classList.add("active-tab"); - activeTab.classList.remove("tab"); + let activeTab = document.getElementById("tab-" + tabHash); + activeTab.classList.add("active-tab"); + activeTab.classList.remove("tab"); - let views = document.querySelectorAll(".view"); - views.forEach((x) => { - 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); - activeHash = tabHash; + let views = document.querySelectorAll(".view"); + views.forEach((x) => { + 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); + activeHash = tabHash; + // add 'animate-bounce' class to the active tab for 2 seconds + activeTab.classList.add("animate-bounce"); + setTimeout(() => { + activeTab.classList.remove("animate-bounce"); + }, 1000); } 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.getElementsByTagName("span")[0].innerText = view.getTitle(); - tab.classList.remove("animate-pulse"); - let viewURL = view.getURL(); - if (!viewURL.startsWith("file://")) { - document.getElementById("searchbar").value = viewURL; - } - removeChildren(document.getElementById("autocomplete-suggestions")); - }); - view.addEventListener("did-start-loading", () => { - tab.classList.add("animate-pulse"); - tab.getElementsByTagName("img")[0].style.display = "none"; - removeChildren(document.getElementById("autocomplete-suggestions")); - }); - view.addEventListener("page-title-updated", (e) => { - tab.getElementsByTagName("span")[0].innerText = e.title; - let viewURL = view.getURL(); - if (!viewURL.startsWith("file://")) { - document.getElementById("searchbar").value = viewURL; - } - }); - view.addEventListener("new-window", (e) => createTab(e.url)); - view.addEventListener("close", removeTab); - 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("span")[0].classList.remove("px-2"); - tab.getElementsByTagName("img")[0].style.display = "none"; - } - }); + 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.getElementsByTagName("span")[0].innerText = view.getTitle(); + tab.classList.remove("animate-pulse"); + let viewURL = view.getURL(); + if (!viewURL.startsWith("file://")) { + document.getElementById("searchbar").value = viewURL; + } + removeChildren(document.getElementById("autocomplete-suggestions")); + }); + view.addEventListener("did-start-loading", () => { + tab.classList.add("animate-pulse"); + tab.getElementsByTagName("img")[0].style.display = "none"; + removeChildren(document.getElementById("autocomplete-suggestions")); + }); + view.addEventListener("page-title-updated", (e) => { + tab.getElementsByTagName("span")[0].innerText = e.title; + let viewURL = view.getURL(); + if (!viewURL.startsWith("file://")) { + document.getElementById("searchbar").value = viewURL; + } + }); + view.addEventListener("new-window", (e) => createTab(e.url)); + view.addEventListener("close", removeTab); + 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("span")[0].classList.remove("px-2"); + tab.getElementsByTagName("img")[0].style.display = "none"; + } + }); } function removeTab() { - if (document.getElementById("webviews").childNodes.length === 1) return; - document.querySelector(".current").remove(); - document.querySelector(".active-tab").remove(); - switchTabs( - document - .getElementById("tabs-bar") - .lastElementChild.id.substring( - 4, - document.getElementById("tabs-bar").lastElementChild.id.length - ) - ); + if (document.getElementById("webviews").childNodes.length === 1) return; + document.querySelector(".current").remove(); + document.querySelector(".active-tab").remove(); + switchTabs( + document + .getElementById("tabs-bar") + .lastElementChild.id.substring( + 4, + document.getElementById("tabs-bar").lastElementChild.id.length + ) + ); } document.addEventListener("keydown", (e) => handleTabShortcuts(e)); function handleTabShortcuts(e) { - // on macos, e.ctrlKey isn't true when pressing cmd, so use e.metaKey too - const isModifier = e.metaKey || e.ctrlKey; - if (isModifier && e.key === "t") { - createTab(); - e.preventDefault(); - } - if (isModifier && e.key === "w") { - removeTab(); - e.preventDefault(); - } -}; + // on macos, e.ctrlKey isn't true when pressing cmd, so use e.metaKey too + const isModifier = e.metaKey || e.ctrlKey; + if (isModifier && e.key === "t") { + createTab(); + e.preventDefault(); + } + if (isModifier && e.key === "w") { + removeTab(); + e.preventDefault(); + } +}; \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 19009caa..4b99b365 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,13 @@ module.exports = { - content: ["./src/**/*.{html,js}"], - darkMode: "class", - theme: { - extend: {}, - }, - plugins: [], -}; + content: ["./src/**/*.{html,js}"], + darkMode: "class", + extend: { + // that is actual animation + keyframes: theme => ({ + fadeOut: { + '0%': { backgroundColor: theme('colors.red.300') }, + '100%': { backgroundColor: theme('colors.transparent') }, + }, + }), + } +} \ No newline at end of file From 867c775bacbf9d381906d06c90ff4ecff062f290 Mon Sep 17 00:00:00 2001 From: JaydenDev Date: Sat, 9 Apr 2022 13:49:54 -0500 Subject: [PATCH 4/4] UI improvements finished --- main/main.js | 133 +++++++++++++++++++++++++------------------------ src/index.html | 26 +++++----- 2 files changed, 80 insertions(+), 79 deletions(-) diff --git a/main/main.js b/main/main.js index 5364d4a6..8dcb8703 100644 --- a/main/main.js +++ b/main/main.js @@ -4,96 +4,97 @@ const path = require("path"); const fetch = require("cross-fetch"); // fix bug where application runs during installation -if(require("electron-squirrel-startup")) app.quit(); +if (require("electron-squirrel-startup")) app.quit(); let mainWindow; + function createWindow() { - // Create the browser window. - mainWindow = new BrowserWindow({ - width: 1024, - height: 768, - webPreferences: { - preload: path.join(__dirname, "preload.js"), - webviewTag: true, - nodeIntegration: false - }, - title: "Catalyst", - icon: path.join(__dirname, "../assets/icon.png"), - }); - mainWindow.setMenuBarVisibility(false); + // Create the browser window. + mainWindow = new BrowserWindow({ + width: 1024, + height: 768, + webPreferences: { + preload: path.join(__dirname, "preload.js"), + webviewTag: true, + nodeIntegration: false + }, + title: "Catalyst", + icon: path.join(__dirname, "../assets/icon.png"), + }); + mainWindow.setMenuBarVisibility(false); - // and load the index.html of the app. - mainWindow.loadFile("./src/index.html"); + // and load the index.html of the app. + mainWindow.loadFile("./src/index.html"); - // Open the DevTools. - // mainWindow.webContents.openDevTools() - checkForUpdate(mainWindow); + // Open the DevTools. + // mainWindow.webContents.openDevTools() + checkForUpdate(mainWindow); } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.whenReady().then(() => { - createWindow(); + createWindow(); - app.on("activate", function () { - // On macOS it's common to re-create a window in the app when the - // dock icon is clicked and there are no other windows open. - if (BrowserWindow.getAllWindows().length === 0) createWindow(); - }); + app.on("activate", function() { + // On macOS it's common to re-create a window in the app when the + // dock icon is clicked and there are no other windows open. + if (BrowserWindow.getAllWindows().length === 0) createWindow(); + }); }); // Quit when all windows are closed, except on macOS. There, it's common // for applications and their menu bar to stay active until the user quits // explicitly with Cmd + Q. -app.on("window-all-closed", function () { - if (process.platform !== "darwin") app.quit(); +app.on("window-all-closed", function() { + if (process.platform !== "darwin") app.quit(); }); -app.on("web-contents-created", function (event, contents) { - if (contents.getType() === "webview") { - contents.on("new-window", function (newWindowEvent) { - newWindowEvent.preventDefault(); - }); - } +app.on("web-contents-created", function(event, contents) { + if (contents.getType() === "webview") { + contents.on("new-window", function(newWindowEvent) { + newWindowEvent.preventDefault(); + }); + } }); // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here. try { - require("electron-reloader")(module); + require("electron-reloader")(module); } catch {} async function checkForUpdate(windowToDialog) { - try { - const githubFetch = await fetch( - "https://api.github.com/repos/JaydenDev/Catalyst/releases" - ); - if (!githubFetch.ok) { - // this means that - return; - } - const releaseJSON = await githubFetch.json(); - const replacerRegex = /["."]/gm; - const appVersionStr = app.getVersion(); - const tagVersionInt = Number(appVersionStr.replace(replacerRegex, "")); - for (let i in releaseJSON) { - const release = releaseJSON[i]; - if (release.draft || release.prerelease) continue; - const replaced = release["tag_name"].replace(replacerRegex, ""); - if ( - tagVersionInt < - Number(replaced.startsWith("v") ? replaced.slice(1) : replaced) - ) { - dialog.showMessageBox(windowToDialog, { - message: "An update is available for Catalyst.", - detail: `Go to github.com/JaydenDev/Catalyst/releases to install Catalyst ${release["tag_name"]}`, - type: "info", - }); - return; - } - } - } catch (error) { - console.error(error); - } -} + try { + const githubFetch = await fetch( + "https://api.github.com/repos/JaydenDev/Catalyst/releases" + ); + if (!githubFetch.ok) { + // this means that + return; + } + const releaseJSON = await githubFetch.json(); + const replacerRegex = /["."]/gm; + const appVersionStr = app.getVersion(); + const tagVersionInt = Number(appVersionStr.replace(replacerRegex, "")); + for (let i in releaseJSON) { + const release = releaseJSON[i]; + if (release.draft || release.prerelease) continue; + const replaced = release["tag_name"].replace(replacerRegex, ""); + if ( + tagVersionInt < + Number(replaced.startsWith("v") ? replaced.slice(1) : replaced) + ) { + dialog.showMessageBox(windowToDialog, { + message: "An update is available for Catalyst.", + detail: `Go to github.com/JaydenDev/Catalyst/releases to install Catalyst ${release["tag_name"]}`, + type: "info", + }); + return; + } + } + } catch (error) { + console.error(error); + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 512c6d66..81549530 100644 --- a/src/index.html +++ b/src/index.html @@ -38,7 +38,7 @@
-
+
-