From 292321fa269521b98dae0e14874e3e5c52640c76 Mon Sep 17 00:00:00 2001 From: 17ms <79069176+17ms@users.noreply.github.com> Date: Fri, 17 Mar 2023 18:34:12 +0200 Subject: [PATCH] flexbox, proportional resizing & improved styling --- visual/4c-gallery.js | 58 +++++++++++++++++++++----------------------- 1 file changed, 27 insertions(+), 31 deletions(-) diff --git a/visual/4c-gallery.js b/visual/4c-gallery.js index e76d59a..4936c73 100644 --- a/visual/4c-gallery.js +++ b/visual/4c-gallery.js @@ -11,7 +11,7 @@ // Shortcuts: decrease size, increase size, previous image, next image, jump to the source hash (i.e. post) const keys = ["-", "+", "j", "k", "i"] -const excludeWebm = true +const excludeWebm = true // not tested with webms enabled const dragElement = (elem) => { const handler = (e) => { @@ -69,31 +69,28 @@ const nextImg = () => { imgElem.src = imgs[i].src } -// could probably be improved with proper css const sizeUp = () => { - const e = document.getElementById("drGallery") - const newW = e.clientWidth + 100 - const newH = e.clientHeight + 90 + const newW = baseElem.clientWidth + 200 + const newH = Math.round(newW * ratioMultiplier) - if (newW > window.innerWidth || newH > window.innerHeight) { + if (newW > window.innerWidth) { return } - document.getElementById("drGallery").style.width = newW + "px" - document.getElementById("drGallery").style.height = newH + "px" + baseElem.style.width = newW + "px" + baseElem.style.height = newH + "px" } const sizeDown = () => { - const e = document.getElementById("drGallery") - const newW = e.clientWidth - 100 - const newH = e.clientHeight - 90 + const newW = baseElem.clientWidth - 200 + const newH = Math.round(newW * ratioMultiplier) if (newW < 265 || newH < 240) { return } - document.getElementById("drGallery").style.width = newW + "px" - document.getElementById("drGallery").style.height = newH + "px" + baseElem.style.width = newW + "px" + baseElem.style.height = newH + "px" } const moveToHash = () => { @@ -118,9 +115,9 @@ const keyUpEvent = async (e) => { } if (e.key === keys[0]) { - sizeDown(document.getElementById("drGallery")) + sizeDown() } else if (e.key === keys[1]) { - sizeUp(document.getElementById("drGallery")) + sizeUp() } else if (e.key === keys[2]) { prevImg() } else if (e.key === keys[3]) { @@ -133,11 +130,14 @@ const keyUpEvent = async (e) => { const createElements = () => { const limitElem = document.getElementsByClassName("boardBanner")[0] const newNode = document.createElement("div") - newNode.innerHTML = `