2023-02-16 21:20:12 +01:00
|
|
|
// ==UserScript==
|
|
|
|
// @name Draggable gallery for media
|
|
|
|
// @namespace Violentmonkey Scripts
|
|
|
|
// @author 17ms
|
2023-02-17 07:40:07 +01:00
|
|
|
// @match *://boards.4chan*.org/*/thread/*
|
|
|
|
// @exclude *://boards.4chan*.org/*/catalog
|
2023-02-16 21:20:12 +01:00
|
|
|
// @version 1.0
|
|
|
|
// ==/UserScript==
|
|
|
|
|
2023-02-20 00:13:51 +01:00
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
|
|
|
|
// Decrease frame size, increase frame size, previous image, next image, toggle frame visibility, go to the source hash
|
|
|
|
const keybindings = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Escape", "Tab"]
|
2023-02-21 21:11:13 +01:00
|
|
|
const excludeWebm = true
|
2023-02-16 22:38:55 +01:00
|
|
|
|
2023-02-16 21:20:12 +01:00
|
|
|
const dragElement = (elem) => {
|
2023-02-19 21:31:30 +01:00
|
|
|
const handler = (e) => {
|
2023-02-16 22:38:55 +01:00
|
|
|
e = e || window.event
|
|
|
|
e.preventDefault()
|
|
|
|
pos3 = e.clientX
|
|
|
|
pos4 = e.clientY
|
2023-02-19 21:31:30 +01:00
|
|
|
document.onmouseup = closeDragger
|
|
|
|
document.onmousemove = enableDragger
|
2023-02-16 22:38:55 +01:00
|
|
|
}
|
|
|
|
|
2023-02-19 21:31:30 +01:00
|
|
|
const enableDragger = (e) => {
|
2023-02-16 22:38:55 +01:00
|
|
|
e = e || window.event
|
|
|
|
e.preventDefault()
|
|
|
|
pos1 = pos3 - e.clientX
|
|
|
|
pos2 = pos4 - e.clientY
|
|
|
|
pos3 = e.clientX
|
|
|
|
pos4 = e.clientY
|
|
|
|
|
|
|
|
elem.style.top = (elem.offsetTop - pos2) + "px"
|
|
|
|
elem.style.left = (elem.offsetLeft - pos1) + "px"
|
|
|
|
}
|
|
|
|
|
2023-02-19 21:31:30 +01:00
|
|
|
const closeDragger = () => {
|
2023-02-16 22:38:55 +01:00
|
|
|
document.onmouseup = null
|
|
|
|
document.onmousemove = null
|
|
|
|
}
|
|
|
|
|
|
|
|
let pos1, pos2, pos3, pos4
|
|
|
|
|
|
|
|
if (document.getElementsByClassName("drDrag").length > 0) {
|
2023-02-19 21:31:30 +01:00
|
|
|
document.getElementsByClassName("drDrag")[0].onmousedown = handler
|
2023-02-16 22:38:55 +01:00
|
|
|
} else {
|
2023-02-19 21:31:30 +01:00
|
|
|
elem.onmousedown = handler
|
2023-02-16 22:38:55 +01:00
|
|
|
}
|
2023-02-16 21:20:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const prevImg = () => {
|
2023-02-16 22:38:55 +01:00
|
|
|
if (i === 0) {
|
|
|
|
i = sources.length - 1
|
|
|
|
} else {
|
|
|
|
i--
|
|
|
|
}
|
2023-02-16 21:20:12 +01:00
|
|
|
|
2023-02-21 21:43:15 +01:00
|
|
|
galleryElem.src = sources[i][0]
|
2023-02-16 21:20:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const nextImg = () => {
|
2023-02-16 22:38:55 +01:00
|
|
|
if (i === sources.length - 1) {
|
|
|
|
i = 0
|
|
|
|
} else {
|
|
|
|
i++
|
|
|
|
}
|
2023-02-16 21:20:12 +01:00
|
|
|
|
2023-02-21 21:43:15 +01:00
|
|
|
galleryElem.src = sources[i][0]
|
2023-02-16 21:20:12 +01:00
|
|
|
}
|
|
|
|
|
2023-02-20 00:13:51 +01:00
|
|
|
// could probably be improved with proper css
|
2023-02-19 21:31:30 +01:00
|
|
|
const sizeUp = () => {
|
|
|
|
const e = document.getElementById("drGallery")
|
|
|
|
const newW = e.clientWidth + 100
|
|
|
|
const newH = e.clientHeight + 90
|
|
|
|
|
|
|
|
if (newW > window.innerWidth || newH > window.innerHeight) {
|
2023-02-20 00:13:51 +01:00
|
|
|
return
|
2023-02-19 21:31:30 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
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) {
|
2023-02-20 00:13:51 +01:00
|
|
|
return
|
2023-02-19 21:31:30 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
document.getElementById("drGallery").style.width = newW + "px"
|
|
|
|
document.getElementById("drGallery").style.height = newH + "px"
|
|
|
|
}
|
|
|
|
|
2023-02-20 00:13:51 +01:00
|
|
|
const moveToHash = () => {
|
2023-02-21 21:43:15 +01:00
|
|
|
const hash = sources[i][1]
|
2023-02-20 00:13:51 +01:00
|
|
|
const url = window.location.href.split("#")[0]
|
|
|
|
|
|
|
|
window.location.href = url + hash
|
|
|
|
}
|
2023-02-19 21:31:30 +01:00
|
|
|
|
2023-02-20 00:13:51 +01:00
|
|
|
const keyDownEvent = async (e) => {
|
2023-02-19 21:31:30 +01:00
|
|
|
if (!(e.ctrlKey && e.altKey)) {
|
2023-02-20 00:13:51 +01:00
|
|
|
return
|
2023-02-19 21:31:30 +01:00
|
|
|
}
|
|
|
|
|
2023-02-20 00:13:51 +01:00
|
|
|
if (e.key === keybindings[0]) {
|
2023-02-19 21:31:30 +01:00
|
|
|
sizeDown(document.getElementById("drGallery"))
|
2023-02-20 00:13:51 +01:00
|
|
|
} else if (e.key === keybindings[1]) {
|
2023-02-19 21:31:30 +01:00
|
|
|
sizeUp(document.getElementById("drGallery"))
|
2023-02-20 00:13:51 +01:00
|
|
|
} else if (e.key === keybindings[2]) {
|
2023-02-19 21:31:30 +01:00
|
|
|
prevImg()
|
2023-02-20 00:13:51 +01:00
|
|
|
} else if (e.key === keybindings[3]) {
|
2023-02-19 21:31:30 +01:00
|
|
|
nextImg()
|
2023-02-20 00:13:51 +01:00
|
|
|
} else if (e.key === keybindings[4]) {
|
|
|
|
document.getElementById("drGallery").toggleAttribute("hidden")
|
|
|
|
} else if (e.key === keybindings[5]) {
|
|
|
|
moveToHash()
|
2023-02-19 21:31:30 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-02-21 21:11:13 +01:00
|
|
|
const createElements = () => {
|
|
|
|
const limitElem = document.getElementsByClassName("boardBanner")[0]
|
|
|
|
const newNode = document.createElement("div")
|
|
|
|
newNode.innerHTML = `<div hidden id="drGallery">
|
2023-02-16 21:20:12 +01:00
|
|
|
<div id="drHeader" class="drag drDrag">Gallery</div>
|
2023-02-19 21:31:30 +01:00
|
|
|
<div id="drContainer"><img id="drImg" src="" alt="" /></div>
|
2023-02-16 21:20:12 +01:00
|
|
|
</div>`
|
|
|
|
|
2023-02-21 21:11:13 +01:00
|
|
|
const stylesheet = document.createElement("style")
|
|
|
|
stylesheet.innerText = `#drGallery {
|
2023-02-16 21:20:12 +01:00
|
|
|
position: absolute;
|
|
|
|
z-index: 9;
|
2023-02-19 21:31:30 +01:00
|
|
|
font-weight: bold;
|
2023-02-16 21:20:12 +01:00
|
|
|
text-align: center;
|
2023-02-19 21:31:30 +01:00
|
|
|
border: 1px solid black;
|
|
|
|
width: 265px;
|
|
|
|
height: 240px;
|
|
|
|
min-width: 265px;
|
|
|
|
min-height: 240px;
|
|
|
|
max-width: 100%;
|
|
|
|
max-height: 100%;
|
|
|
|
margin: 0px;
|
2023-02-16 21:20:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#drHeader {
|
2023-02-19 21:31:30 +01:00
|
|
|
z-index: 10;
|
|
|
|
min-height: max-content;
|
|
|
|
max-height: max-content;
|
2023-02-16 21:20:12 +01:00
|
|
|
padding: 5px;
|
2023-02-19 21:31:30 +01:00
|
|
|
cursor: move;
|
2023-02-16 21:20:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#drContainer {
|
2023-02-19 21:31:30 +01:00
|
|
|
width: inherit;
|
|
|
|
height: 85%;
|
|
|
|
position: relative;
|
2023-02-16 21:20:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#drContainer img {
|
|
|
|
max-height: 100%;
|
2023-02-19 21:31:30 +01:00
|
|
|
max-width: 100%;
|
|
|
|
width: auto;
|
|
|
|
height: auto;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
margin: auto;
|
2023-02-16 21:20:12 +01:00
|
|
|
}`
|
|
|
|
|
2023-02-21 21:11:13 +01:00
|
|
|
document.head.appendChild(stylesheet)
|
|
|
|
document.body.insertBefore(newNode, limitElem)
|
|
|
|
}
|
2023-02-16 21:20:12 +01:00
|
|
|
|
2023-02-21 21:11:13 +01:00
|
|
|
const collectSources = () => {
|
|
|
|
let sources = []
|
2023-02-20 00:13:51 +01:00
|
|
|
|
2023-02-21 21:11:13 +01:00
|
|
|
const fileDivs = document.getElementsByClassName("fileThumb")
|
|
|
|
const hashPrefix = document.getElementsByClassName("postNum")[0].children[0].hash.slice(0, 3)
|
2023-02-20 00:13:51 +01:00
|
|
|
|
2023-02-21 21:11:13 +01:00
|
|
|
for (let e of fileDivs) {
|
|
|
|
const s = e.href.split(".")
|
|
|
|
const filetype = s[s.length - 1]
|
2023-02-16 21:20:12 +01:00
|
|
|
|
2023-02-21 21:11:13 +01:00
|
|
|
if (excludeWebm && filetype === "webm") {
|
2023-02-21 21:43:15 +01:00
|
|
|
continue
|
2023-02-21 21:11:13 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// div's id to post's hash (prefix x): fT12345678 => #px12345678
|
2023-02-21 21:43:15 +01:00
|
|
|
sources.push([e.href, hashPrefix + e.parentElement.id.slice(2)])
|
2023-02-21 21:11:13 +01:00
|
|
|
}
|
|
|
|
|
2023-02-21 21:43:15 +01:00
|
|
|
return sources
|
2023-02-16 21:20:12 +01:00
|
|
|
}
|
|
|
|
|
2023-02-21 21:11:13 +01:00
|
|
|
createElements()
|
|
|
|
|
|
|
|
let i = 0
|
2023-02-21 21:43:15 +01:00
|
|
|
const sources = collectSources()
|
|
|
|
|
2023-02-16 21:20:12 +01:00
|
|
|
const galleryElem = document.getElementById("drImg")
|
2023-02-20 00:13:51 +01:00
|
|
|
document.addEventListener("keyup", keyDownEvent, false)
|
2023-02-16 21:20:12 +01:00
|
|
|
dragElement(document.getElementById("drGallery"))
|