hpz937/PhotoGal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add routing, move code to classes; misc changes

Browse Source
This commit is contained in:
hpz937
2024-08-27 20:59:58 -05:00
parent 5438f9e358
commit 86827a7b10
13 changed files with 434 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/public/css/styles.css
View File

File diff suppressed because one or more lines are too long

100
web/public/gallery.php
View File

@@ -1,100 +0,0 @@
<?php
// public/gallery.php
use Hpz\Photogal\Database;
use Hpz\Photogal\Image;
require_once '../vendor/autoload.php';
$dotenv = Dotenv\Dotenv::createImmutable('../');
$dotenv->load();
if (!isset($_ENV['DB_FILE_PATH'])) {
die('DB_FILE_PATH is not set in the .env file');
}
if (!file_exists('../' . $_ENV['DB_FILE_PATH'])) {
die('Database file does not exist');
}
// Get the selected album
$album = $_GET['album'] ?? '';
$album = urldecode($album);
if (empty($album)) {
header("Location: index.php");
exit;
}
// Pagination settings
$limit = 24; // Number of images per page
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($page - 1) * $limit;
// Create a new Database connection
$dbFilePath = '../' . $_ENV['DB_FILE_PATH'];
$database = new Database($dbFilePath);
$image = new Image($database);
// Get images and total count for the selected album
$images = $image->getImages($album, $limit, $offset);
$totalImages = $image->countImages($album);
$totalPages = ceil($totalImages / $limit);
// Limit the number of pages displayed in the pagination
$paginationRange = $_ENV['PAGINATION_RANGE'] ?? 5;
$startPage = max(1, $page - floor($paginationRange / 2));
$endPage = min($totalPages, $startPage + $paginationRange - 1);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery - <?= htmlspecialchars($album) ?></title>
<link href="/css/styles.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<h1 class="text-3xl font-bold mb-4"><?= htmlspecialchars($album) ?> - Gallery</h1>
<a href="index.php" class="text-blue-500 mb-4 inline-block">← Back to Albums</a>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<?php foreach ($images as $image): ?>
<div class="relative bg-white shadow-md rounded-lg overflow-hidden group">
<img src="images/<?= $album ?>/thumbs/<?= $image['title'] ?>.webp" alt="<?= htmlspecialchars($image['title']) ?>" class="w-full h-full object-cover cursor-pointer" data-big="images/<?= $album ?>/big/<?= $image['title'] ?>.webp" data-original="images/<?= $album ?>/photos/<?= $image['filename'] ?>" onclick="openLightbox(this)">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center title-overlay">
<h2 class="text-lg font-semibold text-white"><?= htmlspecialchars($image['title']) ?></h2>
</div>
</div>
<?php endforeach; ?>
</div>
<!-- Pagination Controls -->
<div class="mt-6">
<?php if ($totalPages > 1): ?>
<nav class="flex justify-center">
<?php if ($page > 1): ?>
<a href="?album=<?= urlencode($album) ?>&page=<?= $page - 1 ?>" class="px-4 py-2 bg-gray-300 rounded-l hover:bg-gray-400">Previous</a>
<?php endif; ?>
<?php for ($i = $startPage; $i <= $endPage; $i++): ?>
<a href="?album=<?= urlencode($album) ?>&page=<?= $i ?>" class="px-4 py-2 <?= $i == $page ? 'bg-gray-500 text-white' : 'bg-gray-300' ?> hover:bg-gray-400"><?= $i ?></a>
<?php endfor; ?>
<?php if ($page < $totalPages): ?>
<a href="?album=<?= urlencode($album) ?>&page=<?= $page + 1 ?>" class="px-4 py-2 bg-gray-300 rounded-r hover:bg-gray-400">Next</a>
<?php endif; ?>
</nav>
<?php endif; ?>
</div>
</div>
<!-- Lightbox -->
<div id="lightbox" class="lightbox" onclick="closeLightbox()">
<img id="lightbox-img" src="" alt="Lightbox Image" onwheel="zoomImage(event)">
<div id="original-button" class="original-button" onclick="loadOriginal(event)">View Original</div>
</div>
<script type="text/javascript" src="/js/app.min.js"></script>
</body>
</html>

84
web/public/index.php
View File

@@ -4,10 +4,12 @@
require_once '../vendor/autoload.php';
use Hpz\Photogal\Database;
use Hpz\Photogal\Image;
use Hpz\Photogal\Album;
use Hpz\Photogal\Gallery;
$dotenv = Dotenv\Dotenv::createImmutable('../');
$dotenv->load();
if (!isset($_ENV['DB_FILE_PATH'])) {
die('DB_FILE_PATH is not set in the .env file');
}
@@ -18,48 +20,46 @@ if (!file_exists('../' . $_ENV['DB_FILE_PATH'])) {
// Create a new Database connection
$dbFilePath = '../' . $_ENV['DB_FILE_PATH'];
$database = new Database($dbFilePath);
$image = new Image($database);
// Get the list of albums
$albumsQuery = "SELECT DISTINCT album FROM images";
$albumsResult = $database->getConnection()->query($albumsQuery);
$albums = [];
while ($row = $albumsResult->fetchArray(SQLITE3_ASSOC)) {
$albums[] = $row['album'];
}
$albumClass = new Album($database);
$galleryClass = new Gallery($database);
// Fetch the first image from each album
$albumPreviews = [];
foreach ($albums as $album) {
$albumPreviews[$album] = $image->getImages($album, 1, 0)[0] ?? null;
$requestUri = trim($_SERVER['REQUEST_URI'], '/');
$requestParts = explode('/', $requestUri);
if ($requestParts[0] === 'gallery' && isset($requestParts[1])) {
// Gallery view
$album = urldecode($requestParts[1]);
$page = isset($requestParts[2]) ? (int)$requestParts[2] : 1;
// Retrieve limit, sort order, and sort direction from cookies or defaults
$limit = $_COOKIE['limit'] ?? 24;
$sortOrder = $_COOKIE['sortOrder'] ?? 'modified_date';
$sortDirection = $_COOKIE['sortDirection'] ?? 'DESC';
// Get images and total count for the selected album
$offset = ($page - 1) * $limit;
$images = $galleryClass->getGalleryImages($album, $limit, $offset, $sortOrder, $sortDirection);
$totalImages = $galleryClass->countImages($album);
$totalPages = ceil($totalImages / $limit);
// Limit the number of pages displayed in the pagination
$paginationRange = $_ENV['PAGINATION_RANGE'] ?? 5;
$startPage = max(1, $page - floor($paginationRange / 2));
$endPage = min($totalPages, $startPage + $paginationRange - 1);
// Render gallery view
include '../src/views/gallery.phtml';
} else {
// Album view
$albums = $albumClass->getAlbums();
$albumPreviews = [];
foreach ($albums as $album) {
$albumPreviews[$album] = $albumClass->getAlbumPreview($album);
}
// Render album view
include '../src/views/albums.phtml';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Gallery - Select Album</title>
<link href="/css/styles.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<h1 class="text-3xl font-bold mb-4">Select an Album</h1>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<?php foreach ($albumPreviews as $album => $image): ?>
<?php if ($image): ?>
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<a href="gallery.php?album=<?= urlencode($album) ?>">
<img src="images/<?= $album ?>/thumbs/<?= $image['title'] ?>.webp" alt="<?= htmlspecialchars($album) ?>" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold"><?= htmlspecialchars($album) ?></h2>
</div>
</a>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
</body>
</html>

2
web/public/js/app.min.js vendored
View File

@@ -1 +1 @@
function openLightbox(element){const lightbox=document.getElementById("lightbox"),lightboxImg=document.getElementById("lightbox-img");lightboxImg.src=element.dataset.big,lightboxImg.setAttribute("data-original",element.dataset.original),lightbox.classList.add("active")}function closeLightbox(){document.getElementById("lightbox").classList.remove("active");const lightboxImg=document.getElementById("lightbox-img");lightboxImg.src="",lightboxImg.style.transform="scale(1)"}function zoomImage(event){event.preventDefault();const img=event.target;let scale=img.style.transform?parseFloat(img.style.transform.replace("scale(","").replace(")","")):1;event.deltaY<0?scale+=.1:scale-=.1,scale<1&&(scale=1),img.style.transform=`scale(${scale})`,img.style.transformOrigin=`${event.offsetX}px ${event.offsetY}px`}function loadOriginal(event){event.stopPropagation();const lightboxImg=document.getElementById("lightbox-img"),originalSrc=lightboxImg.getAttribute("data-original");lightboxImg.src=originalSrc,lightboxImg.style.transform="scale(1)"}
let currentImageIndex=0,images=[];function openLightbox(element){images=Array.from(document.querySelectorAll("#gallery img")).map((img=>({big:img.dataset.big,original:img.dataset.original}))),currentImageIndex=images.findIndex((img=>img.big===element.dataset.big)),-1!==currentImageIndex?(updateLightbox(),document.addEventListener("keydown",handleKeydown)):console.error("Error: Image not found in the array")}function updateLightbox(){const lightboxImg=document.getElementById("lightbox-img");lightboxImg.src=images[currentImageIndex].big,lightboxImg.setAttribute("data-original",images[currentImageIndex].original),lightboxImg.style.transform="scale(1)",lightboxImg.style.maxWidth="100%",lightboxImg.style.maxHeight="100vh";document.getElementById("lightbox").classList.add("active");document.getElementById("original-button").style.display="block",updateNavigationButtons()}function updateNavigationButtons(){const prevButton=document.getElementById("lightbox-prev"),nextButton=document.getElementById("lightbox-next");prevButton.style.display=0===currentImageIndex?"none":"block",nextButton.style.display=currentImageIndex===images.length-1?"none":"block"}function closeLightbox(event){if("keydown"===event.type||"lightbox"===event.target.id){document.getElementById("lightbox").classList.remove("active");const lightboxImg=document.getElementById("lightbox-img");lightboxImg.src="",lightboxImg.style.transform="scale(1)",document.removeEventListener("keydown",handleKeydown)}}function zoomImage(event){event.preventDefault();const img=event.target;let scale=img.style.transform?parseFloat(img.style.transform.replace("scale(","").replace(")","")):1;event.deltaY<0?scale+=.1:scale-=.1,scale<1&&(scale=1),img.style.transform=`scale(${scale})`,img.style.transformOrigin=`${event.offsetX}px ${event.offsetY}px`}function loadOriginal(event){event.stopPropagation();const lightboxImg=document.getElementById("lightbox-img"),originalSrc=lightboxImg.getAttribute("data-original");lightboxImg.src=originalSrc,lightboxImg.style.transform="scale(1)";document.getElementById("original-button").style.display="none"}function navigateLightbox(direction){currentImageIndex+=direction,currentImageIndex<0?currentImageIndex=0:currentImageIndex>=images.length&&(currentImageIndex=images.length-1),updateLightbox()}function handleKeydown(event){"ArrowLeft"===event.key?currentImageIndex>0&&navigateLightbox(-1):"ArrowRight"===event.key?currentImageIndex<images.length-1&&navigateLightbox(1):"Escape"===event.key&&closeLightbox({type:"keydown"})}function debounce(func,wait=200){let timeout;return function(...args){const context=this;clearTimeout(timeout),timeout=setTimeout((()=>func.apply(context,args)),wait)}}document.getElementById("lightbox").addEventListener("click",(function(event){"lightbox"===event.target.id&&closeLightbox(event)})),document.addEventListener("DOMContentLoaded",(function(){const album=document.getElementById("gallery").dataset.album;function applyFilters(){const sortOrder=document.getElementById("sortOrder").value,sortDirection=document.getElementById("sortDirection").innerText.includes("Descending")?"DESC":"ASC",limit=document.getElementById("limit").value;document.cookie=`sortOrder=${sortOrder}; path=/`,document.cookie=`sortDirection=${sortDirection}; path=/`,document.cookie=`limit=${limit}; path=/`,window.location.href=`/gallery/${album}/1`}document.getElementById("sortOrder").addEventListener("change",applyFilters),document.getElementById("limit").addEventListener("change",applyFilters),document.getElementById("sortDirection").addEventListener("click",(function(){const sortButton=document.getElementById("sortDirection");sortButton.innerText.includes("Descending")?sortButton.innerText="Ascending ▲":sortButton.innerText="Descending ▼";applyFilters()}))}));