ae/userscripts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flexbox, proportional resizing & improved styling

Browse Source
This commit is contained in:
17ms 2023-03-17 18:34:12 +02:00
parent ea469f6995
commit 292321fa26
1 changed files with 27 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
visual/4c-gallery.js
View File

@ -11,7 +11,7 @@
// Shortcuts: decrease size, increase size, previous image, next image, jump to the source hash (i.e. post) // Shortcuts: decrease size, increase size, previous image, next image, jump to the source hash (i.e. post)
const keys = ["-", "+", "j", "k", "i"] const keys = ["-", "+", "j", "k", "i"]
const excludeWebm = true const excludeWebm = true // not tested with webms enabled
const dragElement = (elem) => { const dragElement = (elem) => {
const handler = (e) => { const handler = (e) => {
@ -69,31 +69,28 @@ const nextImg = () => {
imgElem.src = imgs[i].src imgElem.src = imgs[i].src
} }
// could probably be improved with proper css
const sizeUp = () => { const sizeUp = () => {
const e = document.getElementById("drGallery") const newW = baseElem.clientWidth + 200
const newW = e.clientWidth + 100 const newH = Math.round(newW * ratioMultiplier)
const newH = e.clientHeight + 90
if (newW > window.innerWidth || newH > window.innerHeight) { if (newW > window.innerWidth) {
return return
} }
document.getElementById("drGallery").style.width = newW + "px" baseElem.style.width = newW + "px"
document.getElementById("drGallery").style.height = newH + "px" baseElem.style.height = newH + "px"
} }
const sizeDown = () => { const sizeDown = () => {
const e = document.getElementById("drGallery") const newW = baseElem.clientWidth - 200
const newW = e.clientWidth - 100 const newH = Math.round(newW * ratioMultiplier)
const newH = e.clientHeight - 90
if (newW < 265 || newH < 240) { if (newW < 265 || newH < 240) {
return return
} }
document.getElementById("drGallery").style.width = newW + "px" baseElem.style.width = newW + "px"
document.getElementById("drGallery").style.height = newH + "px" baseElem.style.height = newH + "px"
} }
const moveToHash = () => { const moveToHash = () => {
@ -118,9 +115,9 @@ const keyUpEvent = async (e) => {
} }
if (e.key === keys[0]) { if (e.key === keys[0]) {
sizeDown(document.getElementById("drGallery")) sizeDown()
} else if (e.key === keys[1]) { } else if (e.key === keys[1]) {
sizeUp(document.getElementById("drGallery")) sizeUp()
} else if (e.key === keys[2]) { } else if (e.key === keys[2]) {
prevImg() prevImg()
} else if (e.key === keys[3]) { } else if (e.key === keys[3]) {
@ -133,11 +130,14 @@ const keyUpEvent = async (e) => {
const createElements = () => { const createElements = () => {
const limitElem = document.getElementsByClassName("boardBanner")[0] const limitElem = document.getElementsByClassName("boardBanner")[0]
const newNode = document.createElement("div") const newNode = document.createElement("div")
newNode.innerHTML = `<div id="drGallery" class="reply"> newNode.innerHTML = `<div id="drGallery" class="reply drDrag drag">
<div id="drHeader" class="drag drDrag">Gallery</div> <div id="drHeader">Gallery</div>
<div id="drContainer"><img id="drImg" src="" alt="" /></div> <div id="drContainer"><img id="drImg" src="" alt="" /></div>
</div>` </div>`
const initW = "265px"
const initH = Math.round(265 * ratioMultiplier) + "px"
const stylesheet = document.createElement("style") const stylesheet = document.createElement("style")
stylesheet.innerText = `#drGallery { stylesheet.innerText = `#drGallery {
position: absolute; position: absolute;
@ -145,33 +145,28 @@ const createElements = () => {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
border: 1px solid black; border: 1px solid black;
width: 265px; width: ${initW};
height: 240px; height: ${initH};
min-width: 265px; min-width: ${initW};
min-height: 240px; min-height: ${initH};
max-width: 100%;
max-height: 100%;
margin: 0px;
display: none; display: none;
flex-direction: column;
} }
#drHeader { #drHeader {
z-index: 10;
min-height: max-content; min-height: max-content;
max-height: max-content;
padding: 5px; padding: 5px;
cursor: move;
} }
#drContainer { #drContainer {
width: inherit; width: inherit;
height: 85%; height: 100%;
position: relative; position: relative;
} }
#drContainer img { #drContainer img {
max-height: 100%;
max-width: 100%; max-width: 100%;
max-height: 98%;
width: auto; width: auto;
height: auto; height: auto;
position: absolute; position: absolute;
@ -209,15 +204,16 @@ const collectSources = () => {
} }
window.toggleGalleryVisibility = () => { window.toggleGalleryVisibility = () => {
if (baseElem.style.display === "block") { if (baseElem.style.display === "flex") {
baseElem.style.display = "none" baseElem.style.display = "none"
document.removeEventListener("keyup", keyUpEvent, false) document.removeEventListener("keyup", keyUpEvent, false)
} else { } else {
baseElem.style.display = "block" baseElem.style.display = "flex"
document.addEventListener("keyup", keyUpEvent, false) document.addEventListener("keyup", keyUpEvent, false)
} }
} }
const ratioMultiplier = window.screen.availHeight / window.screen.availWidth
createElements() createElements()
let i = 0 let i = 0