aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-05-16 23:51:26 +0200
committer0neGal <mail@0negal.com>2022-05-16 23:51:26 +0200
commit31545f96ac56e0bbc7d0ed59f86015d693d464d9 (patch)
tree883361501c42f71460d52047b7ac708e9de29ac1
parent716a05ed8673302129aecfc10f680cbf1fa882c7 (diff)
downloadViper-31545f96ac56e0bbc7d0ed59f86015d693d464d9.tar.gz
Viper-31545f96ac56e0bbc7d0ed59f86015d693d464d9.zip
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.
-rw-r--r--src/app/browser.js29
-rw-r--r--src/app/css/webview.css1
-rw-r--r--src/app/index.html8
-rw-r--r--src/app/main.css21
-rw-r--r--src/index.js1
5 files changed, 57 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;
diff --git a/src/index.js b/src/index.js
index 6c3c79c..e718ef9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,6 +29,7 @@ function start() {
frame: false,
icon: path.join(__dirname, "assets/icons/512x512.png"),
webPreferences: {
+ webviewTag: true,
nodeIntegration: true,
contextIsolation: false,
},