added mod preview browser

Instead of opening your normal web browser you can now just open the
page inside Viper, many changes aren't finished yet, notably the
webview.css file.

At some point I'll split the main.css into more files so the folder
makes sense even though there's currently only one file in there.

4 files changed, 56 insertions, 3 deletions

diff --git a/src/app/browser.js b/src/app/browser.js
index 4d14885..b3b1b59 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -83,6 +83,7 @@ var Browser = {
 				Browser.filters.toggle(false);
 				overlay.classList.remove("shown")
 				browser.classList.remove("shown")
+				preview.classList.remove("shown")
 				return
 			}
 		}
@@ -243,6 +244,20 @@ var Browser = {
 	}
 }
 
+var view = document.querySelector(".popup#preview webview");
+var Preview = {
+	show: () => {
+		preview.classList.add("shown")
+	},
+	hide: () => {
+		preview.classList.remove("shown")
+	},
+	set: (url, autoshow) => {
+		if (autoshow != false) {Preview.show()}
+		view.src = url;
+	}
+}
+
 function BrowserElFromObj(obj) {
 	let pkg = {...obj, ...obj.versions[0]};
 
@@ -325,7 +340,7 @@ function BrowserEl(properties) {
 			<div class="title">${properties.title}</div>
 			<div class="description">${properties.description}</div>
 			<button class="install" onclick='installFromURL("${properties.download}", ${JSON.stringify(properties.dependencies)}, true)'>${installstr}</button>
-			<button class="info" onclick="require('electron').shell.openExternal('${properties.url}')">${lang('gui.browser.info')}</button>
+			<button class="info" onclick="Preview.set('${properties.url}')">${lang('gui.browser.info')}</button>
 			<button class="visual">${properties.version}</button>
 			<button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button>
 		</div>
@@ -413,8 +428,16 @@ search.addEventListener("keyup", () => {
 	}
 })
 
-browser.addEventListener("scroll", () => {
-	Browser.filters.toggle(false);
+let events = ["scroll", "mousedown", "touchdown"];
+events.forEach((event) => {
+    browser.addEventListener(event, () => {
+		Preview.hide();
+		Browser.filters.toggle(false);
+	})
+});
+
+view.addEventListener("dom-ready", () => {
+	view.insertCSS(fs.readFileSync(__dirname + "/css/webview.css", "utf8"));
 })
 
 let checks = document.querySelectorAll(".check");
diff --git a/src/app/css/webview.css b/src/app/css/webview.css
new file mode 100644
index 0000000..4a3fd85
--- /dev/null
+++ b/src/app/css/webview.css
@@ -0,0 +1 @@
+/* this gets imported into the preview <webview> */
diff --git a/src/app/index.html b/src/app/index.html
index 02a150f..b146ba3 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -133,6 +133,14 @@
 				<div class="loading">%%gui.browser.loading%%</div>
 			</div>
 		</div>
+		<div class="popup small" id="preview">
+			<div class="misc fixed">
+				<button id="close" onclick="Preview.hide()">
+					<img src="icons/close.png">
+				</button>
+			</div>
+			<webview></webview>
+		</div>
 		
 		<nav class="gamesContainer">
 			<button id="vpBtn" onclick="page(0)"></button>
diff --git a/src/app/main.css b/src/app/main.css
index d7f8284..d51509b 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -97,6 +97,13 @@ button {
 	transform: scale(1.0);
 }
 
+.popup.small {
+	left: 30vw;
+	right: 30vw;
+	top: calc(var(--padding) * 2);
+	bottom: calc(var(--padding) * 2);
+}
+
 #overlay {
 	top: 0;
 	left: 0;
@@ -125,6 +132,11 @@ button {
 	flex-wrap: wrap;
 }
 
+.popup webview {
+	width: 100%;
+	height: 100%;
+}
+
 .popup .el, .popup .misc, .popup .loading {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 3.5);
@@ -152,6 +164,10 @@ button {
 	width: calc(50% - var(--spacing) * 4);
 }
 
+.popup#preview #close {
+	margin: var(--spacing) var(--spacing) 0 auto !important;
+}
+
 .popup .misc, .popup #search, .option .actions input {
 	--height: var(--mischeight);
 }
@@ -160,6 +176,11 @@ button {
 	display: flex;
 }
 
+.popup .misc.fixed {
+	width: 100%;
+	position: fixed;
+}
+
 .popup #search, .option .actions input, .option .actions select {
 	border: none;
 	outline: none;