Testing data + transformation functionality
Toni Melisma
3 years ago
parent
5a3fd3b21c
commit
77209b2203
@ -0,0 +1 @@
|
||||
/home/toni/go/src/github.com/tonimelisma/fastgallery/testing/source/2021-02-25 15.40.44.png
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
@ -0,0 +1,33 @@
|
||||
.box {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#modalMedia {
|
||||
max-width: 100%;
|
||||
max-height: calc(100% - 74px);
|
||||
}
|
||||
|
||||
.modalImage {
|
||||
object-fit: scale-down;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#modalDownload {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#modalHeader,
|
||||
#modalFooter {
|
||||
height: 37px;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.modalControl:hover,
|
||||
.modalControl:focus {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@ -0,0 +1,150 @@
|
||||
// check that the HTML page including us has set the pictures array
|
||||
if (typeof pictures == 'undefined') {
|
||||
throw new Error("pictures array not defined")
|
||||
}
|
||||
|
||||
// Hard-coded configuration
|
||||
const videoExtension = "mp4"
|
||||
const videoMIMEType = "video/mp4"
|
||||
|
||||
// global variable maintains currently shown picture number (pictures[] array)
|
||||
var currentPicture
|
||||
|
||||
// create hover effect shadow for all box elements
|
||||
const hoverOnBox = (event) => {
|
||||
event.target.classList.remove("box-shadow")
|
||||
event.target.classList.remove("border-gray")
|
||||
event.target.classList.add("box-shadow-large")
|
||||
event.target.classList.add("border-gray-dark")
|
||||
}
|
||||
|
||||
const hoverOffBox = (event) => {
|
||||
event.target.classList.remove("border-gray-dark")
|
||||
event.target.classList.remove("box-shadow-large")
|
||||
event.target.classList.add("box-shadow")
|
||||
event.target.classList.add("border-gray")
|
||||
}
|
||||
|
||||
const registerBoxEventHandlers = (element) => {
|
||||
element.addEventListener("mouseenter", hoverOnBox)
|
||||
element.addEventListener("mouseleave", hoverOffBox)
|
||||
}
|
||||
|
||||
var boxes = document.getElementsByClassName("box")
|
||||
for (let box of boxes) {
|
||||
registerBoxEventHandlers(box)
|
||||
}
|
||||
|
||||
// create hover effect for modal navigation elements
|
||||
// const hoverOnNav = (event) => {}
|
||||
|
||||
// logic to show and hide picture modal
|
||||
const displayModal = (display) => {
|
||||
if (display) {
|
||||
document.getElementById("modal").hidden = false
|
||||
document.getElementById("thumbnails").hidden = true
|
||||
} else {
|
||||
document.getElementById("thumbnails").hidden = false
|
||||
document.getElementById("modal").hidden = true
|
||||
document.getElementById("modalMedia").innerHTML = ""
|
||||
window.location.hash = ""
|
||||
}
|
||||
}
|
||||
|
||||
// TODO add swipe support https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
|
||||
|
||||
// modal previous and next picture button logic
|
||||
const preload = (number) => {
|
||||
var preloadLink = document.createElement("link")
|
||||
preloadLink.rel = "prefetch"
|
||||
preloadLink.href = encodeURI(pictures[number].fullsize)
|
||||
const fileExtension = preloadLink.href.split("\.").pop()
|
||||
if (fileExtension == videoExtension) {
|
||||
preloadLink.as = "video"
|
||||
} else {
|
||||
preloadLink.as = "image"
|
||||
}
|
||||
document.head.appendChild(preloadLink)
|
||||
}
|
||||
const prevPicture = () => {
|
||||
changePicture(getPrevPicture())
|
||||
preload(getPrevPicture())
|
||||
}
|
||||
|
||||
const getPrevPicture = () => {
|
||||
if (!isNaN(currentPicture)) {
|
||||
if (currentPicture === 0) {
|
||||
return (pictures.length - 1)
|
||||
} else if (currentPicture < 0 || currentPicture >= pictures.length) {
|
||||
console.error("Invalid currentPicture, 0.." + pictures.length - 1 + ": " + currentPicture)
|
||||
} else {
|
||||
return (currentPicture - 1)
|
||||
}
|
||||
} else {
|
||||
console.error("Invalid currentPicture, NaN: " + currentPicture)
|
||||
}
|
||||
}
|
||||
|
||||
const nextPicture = () => {
|
||||
changePicture(getNextPicture())
|
||||
preload(getNextPicture())
|
||||
}
|
||||
|
||||
const getNextPicture = () => {
|
||||
if (!isNaN(currentPicture)) {
|
||||
if (currentPicture === pictures.length - 1) {
|
||||
return (0)
|
||||
} else if (currentPicture < 0 || currentPicture >= pictures.length) {
|
||||
console.error("Invalid currentPicture, 0.." + pictures.length - 1 + ": " + currentPicture)
|
||||
} else {
|
||||
return (currentPicture + 1)
|
||||
}
|
||||
} else {
|
||||
console.error("Invalid currentPicture, NaN: " + currentPicture)
|
||||
}
|
||||
}
|
||||
|
||||
// function to change picture in modal, used by hashNavigate, and next/prevPicture
|
||||
const changePicture = (number) => {
|
||||
thumbnailFilename = pictures[number].thumbnail
|
||||
window.location.hash = pictures[number].filename
|
||||
const fileExtension = pictures[number].fullsize.split("\.").pop()
|
||||
if (fileExtension == videoExtension) {
|
||||
document.getElementById("modalMedia").innerHTML = "<video controls><source src=\"" + encodeURI(pictures[number].fullsize) + "\" type=\"" + videoMIMEType + "\"></video>"
|
||||
} else {
|
||||
document.getElementById("modalMedia").innerHTML = "<img src=\"" + encodeURI(pictures[number].fullsize) + "\" alt=\"" + pictures[number].filename + "\" class=\"modalImage\">"
|
||||
}
|
||||
document.getElementById("modalDescription").innerHTML = pictures[number].filename
|
||||
document.getElementById("modalDownload").href = pictures[number].original
|
||||
currentPicture = number
|
||||
}
|
||||
|
||||
// if URL links directly to thumbnail via hash link, open modal for that pic on page load
|
||||
const hashNavigate = () => {
|
||||
if (window.location.hash) {
|
||||
const filename = decodeURI(window.location.hash.substring(1))
|
||||
id = pictures.findIndex(item => item.filename == filename)
|
||||
if (id != -1 && id >= 0 && id < pictures.length) {
|
||||
changePicture(id)
|
||||
displayModal(true)
|
||||
} else {
|
||||
displayModal(false)
|
||||
console.error("Invalid thumbnail link provided after # in URI")
|
||||
}
|
||||
} else {
|
||||
displayModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
const checkKey = (event) => {
|
||||
if (event.key === "ArrowLeft") {
|
||||
prevPicture()
|
||||
} else if (event.key === "ArrowRight") {
|
||||
nextPicture()
|
||||
} else if (event.key === "Escape") {
|
||||
displayModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
document.onkeydown = checkKey
|
||||
window.onpopstate = hashNavigate
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 721 KiB |
Loading…
Reference in New Issue