CatalystDevOrg · jdev082 · Dec 20, 2021 · Dec 20, 2021 · Dec 20, 2021 · Dec 20, 2021
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
 	"scripts": {
 		"start": "electron .",
 		"dev": "concurrently -k npm:start npm:tailwind",
-		"tailwind": "npx tailwindcss -i ./styles.css -o ./output/tailwind.css --minify --watch",
+		"tailwind": "tailwindcss -i ./styles.css -o ./output/tailwind.css --minify --watch",
 		"package": "electron-forge package",
 		"make": "electron-forge make"
 	},

diff --git a/src/index.html b/src/index.html
@@ -3,14 +3,23 @@
 
 <HEAD>
   <Title> Catalyst </Title>
-  <script src="loader.js"></script>
+  <script src="./tabs.js" defer></script>
+  <script src="./loader.js" defer></script>
   <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css">
   <link rel="stylesheet" type="text/css" href="../styles.css">
   <link rel="stylesheet" type="text/css" href="../output/tailwind.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </HEAD>
 
 <BODY class="min-w-full min-h-full dark:bg-black">
+  <div class="flex items-center px-4 mt-2">
+    <div id="tabs-bar" class="flex items-center flex-1 space-x-2 overflow-auto no-scrollbar">
+      <!-- tabs are inserted with JS -->
+    </div>
+    <button id="remove-tab" onClick="removeTab()"
+      class="text-center p-2 bg-green-300 hover:bg-green-400 transition rounded"><i style="color: black;"
+        class="fa fa-times-circle"></i></button>
+  </div>
   <div class="w-full min-h-3 p-2 flex justify-center pt-4">
     <input id="searchbar" type="text" style="width: 90%" class="min-w-fit bg-gray-100 p-2 rounded-t"
       placeholder="Browse a URL" />
@@ -19,12 +28,15 @@
         style="color: black;" class="fa fa-refresh"></i></button>
     <button id="back" onClick="backward()" class="text-center p-2 bg-blue-300 hover:bg-blue-400 transition"><i
         style="color: black;" class="fa fa-backward"></i></button>
-    <button id="forward" onClick="forward()"
+    <button id="forward" onClick="forward()" class="text-center p-2 bg-green-300 hover:bg-green-400 transition"><i
+        style="color: black;" class="fa fa-forward"></i></button>
+    <button id="create-tab" onClick="createTab()"
       class="text-center p-2 bg-green-300 hover:bg-green-400 transition rounded-r"><i style="color: black;"
-        class="fa fa-forward"></i></button>
+        class="fa fa-plus"></i></button>
 
   </div>
-  <webview style="width: 100vw; height: 95vh;" id="view" src=""></webview>
+  <div id="webviews"></div>
+  <!-- <webview style="width: 100vw; height: 95vh;" id="view" src="./welcome.html"></webview> -->
 </BODY>
 
 </HTML>
diff --git a/src/loader.js b/src/loader.js
@@ -1,18 +1,16 @@
 function loadWeb() {
-    var page = document.getElementById("searchbar").value;
-    document.getElementById("view").src = page;
+	var page = document.getElementById("searchbar").value;
+	document.querySelector(".current").src = page;
 }
 
-var webview = document.getElementById("view");
-
 function reload() {
-  view.reload();
+	document.querySelector(".current").reload();
 }
 
 function forward() {
-  view.goForward();
+	document.querySelector(".current").goForward();
 }
 
 function backward() {
-  view.goBack();
+	document.querySelector(".current").goBack();
 }
diff --git a/src/tabs.js b/src/tabs.js
@@ -0,0 +1,86 @@
+// Init variables
+let activeHash = "0";
+
+// Functions
+
+/**
+ * Creates a new tab
+ */
+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);
+	tab.classList.add("tab");
+	tab.id = `tab-${randomHash}`;
+	tab.onclick = () => {
+		switchTabs(randomHash);
+	};
+	tab.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";
+	view.src = "./welcome.html"; // will be changed when startpage settings are added
+	addListeners(view, randomHash);
+	document.getElementById("webviews").appendChild(view);
+	switchTabs(randomHash);
+}
+createTab();
+/**
+ * Switches the tab to the selected one
+ * @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 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;
+}
+
+function addListeners(view, hash) {
+	const tab = document.getElementById(`tab-${hash}`);
+	view.addEventListener("did-stop-loading", () => {
+		tab.innerText = view.getTitle();
+		tab.classList.remove("animate-pulse");
+	});
+	view.addEventListener("did-start-loading", () => {
+		tab.classList.add("animate-pulse");
+	});
+	view.addEventListener("page-title-updated", (e) => {
+		tab.innerText = e.title;
+	});
+}
+
+function removeTab() {
+	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
+			)
+	);
+}
diff --git a/src/welcome.html b/src/welcome.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="stylesheet" type="text/css" href="../output/tailwind.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Start - Catalyst</title>
+</head>
+
+<body>
+  <div class="p-2">
+    <h1 class="font-bold text-3xl">Catalyst</h1>
+    <p>Welcome to your new Catalyst browser!</p>
+    <p>Surf the web with an awesome browser by entering a URL in the search field above.</p>
+  </div>
+</body>
+
+</html>
diff --git a/styles.css b/styles.css
@@ -3,6 +3,19 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Custom Tailwind classes */
+@layer components {
+	.tab {
+		@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;
+	}
+	.view {
+		@apply w-[100vw] h-[100vh];
+	}
+}
+
 /* Custom Styles (should be removed soon) */
 body {
 	background-color: #ffffff;