From 7f689d581700e7f0d17d38bd248e9f4f5025155e Mon Sep 17 00:00:00 2001 From: MeowcaTheoRange Date: Thu, 23 Nov 2023 17:30:36 -0600 Subject: [PATCH] Fix image display, add window shortcuts --- views/projects/hex/scripts/index.js | 3 +- views/projects/woz/scripts/index.js | 2 +- views/scripts/windows.js | 53 +++++++++++++++++++++++++++-- views/styles/windows.css | 10 +++--- 4 files changed, 60 insertions(+), 8 deletions(-) diff --git a/views/projects/hex/scripts/index.js b/views/projects/hex/scripts/index.js index 52aabec..7ae5958 100755 --- a/views/projects/hex/scripts/index.js +++ b/views/projects/hex/scripts/index.js @@ -55,7 +55,7 @@ function initDocument(hx, w, h, t) { Result - + `, @@ -81,6 +81,7 @@ function createFlag(hex, w, h, type, canvas) { const ctx = canvas.getContext("2d"); canvas.width = w; canvas.height = h; + canvas.style.aspectRatio = `${w / h}`; // Initialize stuff diff --git a/views/projects/woz/scripts/index.js b/views/projects/woz/scripts/index.js index 9d65817..197bbf6 100755 --- a/views/projects/woz/scripts/index.js +++ b/views/projects/woz/scripts/index.js @@ -24,7 +24,7 @@ function initDocument(hx, w, h, t) { Result - + `, diff --git a/views/scripts/windows.js b/views/scripts/windows.js index 4314672..65be3e8 100755 --- a/views/scripts/windows.js +++ b/views/scripts/windows.js @@ -55,6 +55,9 @@ class WindowObject { this.windowManager.addEventListener("touchend", (e) => this.event__dragMouseUp(e, true) ); + this.windowObject.addEventListener("keydown", (e) => + this.event__responseKeyDown(e) + ); this.windowObject.addEventListener("mousedown", (e) => WindowObject.raiseWindow(this.windowObject) @@ -167,6 +170,49 @@ class WindowObject { } } + event__responseKeyDown(e) { + e.preventDefault(); + + switch (e.code) { + case "Backspace": + this.destroy(); + break; + case "Space": + this.maximizeWindow(); + break; + case "ArrowUp": + if (e.shiftKey) + this.windowObject.style.height = + this.windowObject.offsetHeight - 10 + "px"; + else + this.windowObject.style.top = this.windowObject.offsetTop - 10 + "px"; + break; + case "ArrowDown": + if (e.shiftKey) + this.windowObject.style.height = + this.windowObject.offsetHeight + 10 + "px"; + else + this.windowObject.style.top = this.windowObject.offsetTop + 10 + "px"; + break; + case "ArrowLeft": + if (e.shiftKey) + this.windowObject.style.width = + this.windowObject.offsetWidth - 10 + "px"; + else + this.windowObject.style.left = + this.windowObject.offsetLeft - 10 + "px"; + break; + case "ArrowRight": + if (e.shiftKey) + this.windowObject.style.width = + this.windowObject.offsetWidth + 10 + "px"; + else + this.windowObject.style.left = + this.windowObject.offsetLeft + 10 + "px"; + break; + } + } + static raiseWindow(windowObj) { windowObj.parentElement.querySelectorAll(".window-object").forEach((x) => { if (x.style.zIndex > 50) x.style.zIndex -= 1; @@ -180,8 +226,11 @@ class WindowObject { static createWindow(windowRef, content, srcdoc, w, h) { const windowObject = document.createElement("div"); windowObject.classList.add("window-object"); - windowObject.style.width = `calc(${w}px + 1.5em)`; - windowObject.style.height = `calc(${h}px + 3.5em)`; + windowObject.style.width = `calc(${w}px + 2.75em)`; + windowObject.style.height = `calc(${h}px + 4.5em)`; + windowObject.style.left = `calc(50vw - ${w / 2}px)`; + windowObject.style.top = `calc(50vh - ${h / 2}px)`; + windowObject.tabIndex = "0"; { const windowManager = document.createElement("div"); diff --git a/views/styles/windows.css b/views/styles/windows.css index d73b7c7..907d9de 100755 --- a/views/styles/windows.css +++ b/views/styles/windows.css @@ -16,10 +16,10 @@ div.window-object { grid-template-rows: max-content auto; grid-gap: 0.25em; position: fixed; - top: calc(50vh - 150px); - left: calc(50vw - 200px); - width: 400px; - height: 300px; + width: 600px; + height: 500px; + left: calc(50vw - 300px); + top: calc(50vh - 250px); min-width: 10em; min-height: 2em; @@ -145,4 +145,6 @@ div.window-object > iframe.window-content { height: 100%; width: 100%; border: var(--border-style); + min-height: 0; + min-width: 0; }