Testing assets + refactoring
Toni Melisma
3 years ago
parent
77209b2203
commit
b10c8c3bd6
@ -0,0 +1,19 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Launch file",
|
||||
"type": "go",
|
||||
"request": "launch",
|
||||
"mode": "debug",
|
||||
"program": "${file}",
|
||||
"args": [
|
||||
"../../testing/source/",
|
||||
"../../testing/gallery/"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
/home/toni/go/src/github.com/tonimelisma/fastgallery/testing/source/2021-02-25 15.40.44.png
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
@ -1,33 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
@ -1,150 +0,0 @@
|
||||
// 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.
|
Before Width: | Height: | Size: 3.7 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue