From 3bda9b7803d5364f72dfb80240dea2c893ec5ad3 Mon Sep 17 00:00:00 2001 From: 17ms <79069176+17ms@users.noreply.github.com> Date: Sun, 19 Feb 2023 22:31:30 +0200 Subject: [PATCH] efficient resizing, shortcuts, styling --- visual/4c-gallery.js | 131 ++++++++++++++++++++++++++++++------------- 1 file changed, 93 insertions(+), 38 deletions(-) diff --git a/visual/4c-gallery.js b/visual/4c-gallery.js index 7fddbea..09147ec 100644 --- a/visual/4c-gallery.js +++ b/visual/4c-gallery.js @@ -7,19 +7,25 @@ // @version 1.0 // ==/UserScript== -// TODO: buttons: dl & source, kb shortcuts, improved resizing, webm exclusion +/* +Keybindings: + - Changing images: Ctrl + Alt + Left/Right + - Resizing the frame: Ctrl + Alt + Up/Down +*/ + +// TODO: dl & source buttons, webm exclusion, frame toggling, maybe better styling const dragElement = (elem) => { - const dragMouseDown = (e) => { + const handler = (e) => { e = e || window.event e.preventDefault() pos3 = e.clientX pos4 = e.clientY - document.onmouseup = closeDragElement - document.onmousemove = elementDrag + document.onmouseup = closeDragger + document.onmousemove = enableDragger } - const elementDrag = (e) => { + const enableDragger = (e) => { e = e || window.event e.preventDefault() pos1 = pos3 - e.clientX @@ -31,7 +37,7 @@ const dragElement = (elem) => { elem.style.left = (elem.offsetLeft - pos1) + "px" } - const closeDragElement = () => { + const closeDragger = () => { document.onmouseup = null document.onmousemove = null } @@ -39,9 +45,9 @@ const dragElement = (elem) => { let pos1, pos2, pos3, pos4 if (document.getElementsByClassName("drDrag").length > 0) { - document.getElementsByClassName("drDrag")[0].onmousedown = dragMouseDown + document.getElementsByClassName("drDrag")[0].onmousedown = handler } else { - elem.onmousedown = dragMouseDown + elem.onmousedown = handler } } @@ -65,53 +71,104 @@ const nextImg = () => { galleryElem.src = sources[i] } -const limiter = document.getElementsByClassName("boardBanner")[0] +// couldn't work resizing out in css so decided to use this ugly js solution +const sizeUp = () => { + const e = document.getElementById("drGallery") + const newW = e.clientWidth + 100 + const newH = e.clientHeight + 90 + + if (newW > window.innerWidth || newH > window.innerHeight) { + return; + } + + document.getElementById("drGallery").style.width = newW + "px" + document.getElementById("drGallery").style.height = newH + "px" +} + +const sizeDown = () => { + const e = document.getElementById("drGallery") + const newW = e.clientWidth - 100 + const newH = e.clientHeight - 90 + + if (newW < 265 || newH < 240) { + return; + } + + document.getElementById("drGallery").style.width = newW + "px" + document.getElementById("drGallery").style.height = newH + "px" +} + +// TODO: implement downloader +//const dlImage = () => { } + +const keyDownEvent = (e) => { + if (!(e.ctrlKey && e.altKey)) { + return; + } + + if (e.key === "ArrowDown") { + sizeDown(document.getElementById("drGallery")) + } else if (e.key === "ArrowUp") { + sizeUp(document.getElementById("drGallery")) + } else if (e.key === "ArrowLeft") { + prevImg() + } else if (e.key === "ArrowRight") { + nextImg() + } +} + +const limitElem = document.getElementsByClassName("boardBanner")[0] const newNode = document.createElement("div") -newNode.innerHTML = `