118 lines
3.1 KiB
JavaScript
118 lines
3.1 KiB
JavaScript
// `photos` variable populated by script tag in place page html
|
|
viewState = null;
|
|
galleryContainer = document.getElementById("galleryContainer");
|
|
galleryImage = document.getElementById("galleryImage");
|
|
previewLinks = document.getElementsByClassName("previewLink");
|
|
headerImage = document.getElementById("headerImage");
|
|
|
|
touchDragThreshold = 50;
|
|
directionDetermined = false;
|
|
|
|
// null is used when no information is supposed to be available.
|
|
// functions set these to useful values during touch events.
|
|
touchDragStartX = null;
|
|
touchDirection = null;
|
|
|
|
// changes to style.rotate are necessary because transformed elements
|
|
// get stuck in front of the gallery images
|
|
|
|
function enlargeImage (filename) {
|
|
viewState = photos.indexOf(filename);
|
|
galleryImage.fullRes = filename;
|
|
galleryImage.src = "/compressed/compressed_" + filename;
|
|
galleryContainer.style.display = "block";
|
|
headerImage.style.rotate = "none";
|
|
};
|
|
|
|
function delGallery () {
|
|
galleryContainer.style.display = "none";
|
|
galleryImage.src = "";
|
|
headerImage.style.rotate = "-3deg";
|
|
};
|
|
|
|
function nextImage () {
|
|
viewState++;
|
|
if (viewState == previewLinks.length) {
|
|
viewState = 0;
|
|
};
|
|
galleryImage.fullRes = photos[viewState];
|
|
galleryImage.src = "/compressed/compressed_" + photos[viewState];
|
|
};
|
|
|
|
function prevImage () {
|
|
viewState--;
|
|
if (viewState == -1) {
|
|
viewState = previewLinks.length - 1;
|
|
};
|
|
galleryImage.fullRes = photos[viewState];
|
|
galleryImage.src = "/compressed/compressed_" + photos[viewState];
|
|
};
|
|
|
|
function imageNewTab () {
|
|
window.open(galleryImage.fullRes, "_blank")
|
|
};
|
|
|
|
function keyHandler (event) {
|
|
if (event.key == "ArrowRight" | event.key == "Space") {
|
|
nextImage();
|
|
} else if (event.key == "ArrowLeft") {
|
|
prevImage();
|
|
} else if (event.key == "Escape" | event.key == "q") {
|
|
delGallery();
|
|
}
|
|
};
|
|
|
|
function delGalleryHandler (event) {
|
|
if (event.target.id == "galleryContainer") {
|
|
delGallery();
|
|
};
|
|
};
|
|
|
|
function mouseUpHandler (event) {
|
|
console.log("mousedown");
|
|
if (event.clientX > window.innerWidth / 2) {
|
|
nextImage();
|
|
} else {
|
|
prevImage();
|
|
};
|
|
};
|
|
|
|
function onTouchMove (event) {
|
|
event.preventDefault();
|
|
screenX = event.changedTouches[0].screenX;
|
|
if (!directionDetermined && touchDragStartX == null) {
|
|
touchDragStartX = screenX;
|
|
};
|
|
touchDelta = Math.abs(touchDragStartX - screenX);
|
|
if (!directionDetermined && (touchDelta > touchDragThreshold)) {
|
|
touchDirection = touchDragStartX > screenX;
|
|
touchDragStartX = null;
|
|
directionDetermined = true;
|
|
};
|
|
};
|
|
|
|
function onTouchEnd (event) {
|
|
event.preventDefault();
|
|
// poorly phrased, but this must reset state to default
|
|
directionDetermined = false;
|
|
touchDragStartX = null;
|
|
if (touchDirection == null) {
|
|
return;
|
|
};
|
|
if (touchDirection) {
|
|
nextImage();
|
|
} else {
|
|
prevImage();
|
|
};
|
|
touchDirection = null;
|
|
};
|
|
|
|
document.onkeydown = keyHandler;
|
|
document.body.onclick = delGalleryHandler;
|
|
galleryImage.addEventListener("mouseup", mouseUpHandler);
|
|
galleryImage.addEventListener("touchmove", onTouchMove);
|
|
galleryImage.addEventListener("touchend", onTouchEnd);
|
|
galleryImage.addEventListener("touchstart", function (event) {
|
|
event.preventDefault();
|
|
});
|