diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app/browser.js | 29 | ||||
| -rw-r--r-- | src/app/css/webview.css | 1 | ||||
| -rw-r--r-- | src/app/index.html | 8 | ||||
| -rw-r--r-- | src/app/main.css | 21 | ||||
| -rw-r--r-- | src/index.js | 1 |
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, }, |