efficient resizing, shortcuts, styling

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 = `<div id="drGallery" class="extPanel reply">
+newNode.innerHTML = `<div id="drGallery">
   <div id="drHeader" class="drag drDrag">Gallery</div>
-  <div id="drContainer">
-    <img id="drImg" src="" alt="" />
-  </div>
-  <div id="drHeader">
-    <button id="drPrev">\<</button>
-    <button id="drNext">\></button>
-  </div>
+  <div id="drContainer"><img id="drImg" src="" alt="" /></div>
 </div>`
 
-const styleSheet = document.createElement("style")
-styleSheet.innerText = `#drGallery {
+const stylesheet = document.createElement("style")
+stylesheet.innerText = `#drGallery {
   position: absolute;
   z-index: 9;
+  font-weight: bold;
   text-align: center;
+  border: 1px solid black;
+  width: 265px;
+  height: 240px;
+  min-width: 265px;
+  min-height: 240px;
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0px;
 }
 
 #drHeader {
-  font-weight: bold;
-  text-align: center;
-  height: 20px;
+  z-index: 10;
+  min-height: max-content;
+  max-height: max-content;
   padding: 5px;
+  cursor: move;
 }
 
 #drContainer {
-  resize: both;
-  overflow: auto;
-  min-width: 100px;
-  min-height: 100px;
-  max-width: 100%;
-  max-height: 100%;
+  width: inherit;
+  height: 85%;
+  position: relative;
 }
 
 #drContainer img {
-  max-width: 100%;
   max-height: 100%;
-}
-
-#drButton {
-  padding: 5px;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
 }`
 
-document.head.appendChild(styleSheet)
-document.body.insertBefore(newNode, limiter)
+document.head.appendChild(stylesheet)
+document.body.insertBefore(newNode, limitElem)
 
 let i = 0
 let sources = []
@@ -122,7 +179,5 @@ for (let e of elems) {
 }
 
 const galleryElem = document.getElementById("drImg")
-
-document.getElementById("drPrev").onclick = () => prevImg()
-document.getElementById("drNext").onclick = () => nextImg()
+document.addEventListener("keydown", keyDownEvent, false)
 dragElement(document.getElementById("drGallery"))