diff --git a/visual/4c-gallery.js b/visual/4c-gallery.js new file mode 100644 index 0000000..a07bc74 --- /dev/null +++ b/visual/4c-gallery.js @@ -0,0 +1,126 @@ +// ==UserScript== +// @name Draggable gallery for media +// @namespace Violentmonkey Scripts +// @author 17ms +// @match *://boards.4channel.org/*/thread/* +// @match *://boards.4chan.org/*/thread/* +// @version 1.0 +// ==/UserScript== + +const dragElement = (elem) => { + const dragMouseDown = (e) => { + e = e || window.event + e.preventDefault() + pos3 = e.clientX + pos4 = e.clientY + document.onmouseup = closeDragElement + document.onmousemove = elementDrag + } + + const elementDrag = (e) => { + 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" + } + + const closeDragElement = () => { + document.onmouseup = null + document.onmousemove = null + } + + let pos1, pos2, pos3, pos4 + + if (document.getElementsByClassName("drDrag").length > 0) { + document.getElementsByClassName("drDrag")[0].onmousedown = dragMouseDown + } else { + elem.onmousedown = dragMouseDown + } +} + +const prevImg = () => { + if (i === 0) { + i = sources.length - 1 + } else { + i-- + } + + galleryElem.src = sources[i] +} + +const nextImg = () => { + if (i === sources.length - 1) { + i = 0 + } else { + i++ + } + + galleryElem.src = sources[i] +} + +const limiter = document.getElementsByClassName("boardBanner")[0] +const newNode = document.createElement("div") +newNode.innerHTML = `
+
Gallery
+
+ +
+
+ + +
+
` + +const styleSheet = document.createElement("style") +styleSheet.innerText = `#drGallery { + position: absolute; + z-index: 9; + text-align: center; +} + +#drHeader { + font-weight: bold; + text-align: center; + height: 20px; + padding: 5px; +} + +#drContainer { + resize: both; + overflow: auto; + min-width: 100px; + min-height: 100px; + max-width: 100%; + max-height: 100%; +} + +#drContainer img { + max-width: 100%; + max-height: 100%; +} + +#drButton { + padding: 5px; +}` + +document.head.appendChild(styleSheet) +document.body.insertBefore(newNode, limiter) + +let i = 0 +let sources = [] +const elems = document.getElementsByClassName("fileThumb") + +for (let e of elems) { + sources.push(e.href) +} + +const galleryElem = document.getElementById("drImg") + +document.getElementById("drPrev").onclick = () => prevImg() +document.getElementById("drNext").onclick = () => nextImg() +dragElement(document.getElementById("drGallery"))