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

preload images, css, improved kb shortcuts compatibility

Browse Source
This commit is contained in:
17ms 2023-02-28 21:06:19 +02:00
parent 27f7974d48
commit 8a3e5ecfde
1 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
visual/4c-gallery.js
View File

@ -1,16 +1,16 @@
// ==UserScript== // ==UserScript==
// @name 4c-gallery // @name 4c-gallery
// @description Draggable image viewer // @description Draggable image viewer
// @namespace Violentmonkey Scripts
// @author 17ms // @author 17ms
// @license MIT License
// @namespace Violentmonkey Scripts
// @match *://boards.4chan*.org/*/thread/* // @match *://boards.4chan*.org/*/thread/*
// @exclude *://boards.4chan*.org/*/catalog // @exclude *://boards.4chan*.org/*/catalog
// @version 1.0 // @version 1.0
// ==/UserScript== // ==/UserScript==
// https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values // Shortcuts: decrease size, increase size, previous image, next image, jump to the source hash (i.e. post)
// Decrease frame size, increase frame size, previous image, next image, toggle frame visibility, go to the source hash const keys = ["-", "+", "j", "k", "i"]
const keybindings = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Escape", "Tab"]
const excludeWebm = true const excludeWebm = true
const dragElement = (elem) => { const dragElement = (elem) => {
@ -51,22 +51,22 @@ const dragElement = (elem) => {
const prevImg = () => { const prevImg = () => {
if (i === 0) { if (i === 0) {
i = sources.length - 1 i = imgs.length - 1
} else { } else {
i-- i--
} }
galleryElem.src = sources[i][0] imgElem.src = imgs[i].src
} }
const nextImg = () => { const nextImg = () => {
if (i === sources.length - 1) { if (i === imgs.length - 1) {
i = 0 i = 0
} else { } else {
i++ i++
} }
galleryElem.src = sources[i][0] imgElem.src = imgs[i].src
} }
// could probably be improved with proper css // could probably be improved with proper css
@ -103,22 +103,25 @@ const moveToHash = () => {
window.location.href = url + hash window.location.href = url + hash
} }
const keyDownEvent = async (e) => { const preloadImgs = async () => {
if (!(e.ctrlKey && e.altKey)) { for (let s of sources) {
return let img = new Image()
img.src = s[0]
await img.decode()
imgs.push(img)
} }
}
if (e.key === keybindings[0]) { const keyDownEvent = async (e) => {
if (e.key === keys[0]) {
sizeDown(document.getElementById("drGallery")) sizeDown(document.getElementById("drGallery"))
} else if (e.key === keybindings[1]) { } else if (e.key === keys[1]) {
sizeUp(document.getElementById("drGallery")) sizeUp(document.getElementById("drGallery"))
} else if (e.key === keybindings[2]) { } else if (e.key === keys[2]) {
prevImg() prevImg()
} else if (e.key === keybindings[3]) { } else if (e.key === keys[3]) {
nextImg() nextImg()
} else if (e.key === keybindings[4]) { } else if (e.key === keys[4]) {
document.getElementById("drGallery").toggleAttribute("hidden")
} else if (e.key === keybindings[5]) {
moveToHash() moveToHash()
} }
} }
@ -126,7 +129,7 @@ const keyDownEvent = 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 hidden id="drGallery"> newNode.innerHTML = `<div id="drGallery" class="reply">
<div id="drHeader" class="drag drDrag">Gallery</div> <div id="drHeader" class="drag drDrag">Gallery</div>
<div id="drContainer"><img id="drImg" src="" alt="" /></div> <div id="drContainer"><img id="drImg" src="" alt="" /></div>
</div>` </div>`
@ -145,6 +148,7 @@ const createElements = () => {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
margin: 0px; margin: 0px;
display: none;
} }
#drHeader { #drHeader {
@ -176,6 +180,7 @@ const createElements = () => {
document.head.appendChild(stylesheet) document.head.appendChild(stylesheet)
document.body.insertBefore(newNode, limitElem) document.body.insertBefore(newNode, limitElem)
document.getElementsByClassName("navLinks desktop")[0].innerHTML += " [<a href='javascript:toggleGalleryVisibility()'>Gallery</a>]"
} }
const collectSources = () => { const collectSources = () => {
@ -199,11 +204,23 @@ const collectSources = () => {
return sources return sources
} }
window.toggleGalleryVisibility = () => {
if (baseElem.style.display === "block") {
baseElem.style.display = "none"
} else {
baseElem.style.display = "block"
}
}
createElements() createElements()
let i = 0 let i = 0
let imgs = []
const sources = collectSources() const sources = collectSources()
preloadImgs().then(() => console.log("4c-gallery: All images loaded"))
const galleryElem = document.getElementById("drImg")
const baseElem = document.getElementById("drGallery")
const imgElem = document.getElementById("drImg")
document.addEventListener("keyup", keyDownEvent, false) document.addEventListener("keyup", keyDownEvent, false)
dragElement(document.getElementById("drGallery")) dragElement(baseElem)