114 lines
4.3 KiB
PHP
114 lines
4.3 KiB
PHP
|
<!DOCTYPE html>
|
||
|
|
<!-- Copyright (C) 2021 Alexander Rosenberg
|
||
|
|
- This file is AGPL v3. See LICENSE file for more information
|
||
|
|
-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<?php
|
||
|
|
const INITIAL_ALBUMS = 15;
|
||
|
|
require 'library.php';
|
||
|
|
require 'Album.php';
|
||
|
|
if ($_SERVER['REQUEST_METHOD'] != 'GET' && $_SERVER['REQUEST_METHOD'] != 'HEAD') {
|
||
|
|
http_response_code(406);
|
||
|
|
display_error_message('Request method not supported');
|
||
|
|
exit(0);
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
<title><?php $LIBRARY_INFO['name'] ?></title>
|
||
|
|
<link rel="stylesheet" href="global.css" />
|
||
|
|
<link rel="stylesheet" href="index.css" />
|
||
|
|
<link rel="stylesheet" href="Album.css" />
|
||
|
|
<link rel="icon" type="image/svg" href="favicon.svg" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<div id="library-name">
|
||
|
|
<?php
|
||
|
|
echo htmlspecialchars($LIBRARY_INFO['name'], ENT_QUOTES | ENT_HTML5);
|
||
|
|
?>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div id="thumbnail-grid-wrapper">
|
||
|
|
<?php
|
||
|
|
$size = min(count($LIBRARY_INFO['albums']), INITIAL_ALBUMS);
|
||
|
|
for ($i = 0; $i < $size; ++$i) {
|
||
|
|
$album = new Album($LIBRARY_INFO['albums'][$i]);
|
||
|
|
if (!$album->is_valid()) {
|
||
|
|
display_error_message("Could not open album: '" . $album->get_name() . "'");
|
||
|
|
} else {
|
||
|
|
echo $album->get_html();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var last_index = <?php echo $size; ?> - 1;
|
||
|
|
var thumbnail_wrapper = document.getElementById('thumbnail-grid-wrapper');
|
||
|
|
var last_album = thumbnail_wrapper.children[last_index];
|
||
|
|
var all_images = <?php echo $size < INITIAL_ALBUMS ? 'true' : 'false'; ?>;
|
||
|
|
|
||
|
|
function get_more_images() {
|
||
|
|
if (!all_images) {
|
||
|
|
var req = new XMLHttpRequest();
|
||
|
|
req.open('GET', 'get-album-entries.php?start=' + (last_index + 1) + '&end=' + (last_index + <?php echo INITIAL_ALBUMS; ?>));
|
||
|
|
|
||
|
|
req.onreadystatechange = function() {
|
||
|
|
var DONE = 4;
|
||
|
|
var OK = 200;
|
||
|
|
if (req.readyState === DONE) {
|
||
|
|
if (req.status === OK) {
|
||
|
|
if (req.responseText.length === 0) {
|
||
|
|
all_images = true;
|
||
|
|
} else {
|
||
|
|
observer.unobserve(last_album);
|
||
|
|
last_index += <?php echo INITIAL_ALBUMS; ?>;
|
||
|
|
thumbnail_wrapper.innerHTML += req.responseText;
|
||
|
|
last_album = thumbnail_wrapper.children[last_index];
|
||
|
|
observer.observe(last_album);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
thumbnail_wrapper.innerHTML += '<div style="font-size: 2vw; color: red;">Could not connect to server</div>';
|
||
|
|
all_images = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
req.send(null);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var observer = new IntersectionObserver(function(entries) {
|
||
|
|
if(entries[0].isIntersecting === true) {
|
||
|
|
get_more_images();
|
||
|
|
}
|
||
|
|
}, { threshold: [0] });
|
||
|
|
|
||
|
|
observer.observe(last_album);
|
||
|
|
|
||
|
|
// Handle resize stuff
|
||
|
|
function windowResizeHandler() {
|
||
|
|
albums = document.querySelectorAll('.album-wrapper');
|
||
|
|
if (window.innerWidth < 1000) {
|
||
|
|
albums.forEach((e) => {
|
||
|
|
img = e.firstChild;
|
||
|
|
c = e.children[1];
|
||
|
|
t = e.lastChild;
|
||
|
|
img.style.width = "85vw";
|
||
|
|
img.style.height = "85vw";
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
albums.forEach((e) => {
|
||
|
|
img = e.firstChild;
|
||
|
|
c = e.children[1];
|
||
|
|
t = e.lastChild;
|
||
|
|
img.style.width = "20vw";
|
||
|
|
img.style.height = "20vw";
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener("resize", windowResizeHandler, true);
|
||
|
|
window.onload = windowResizeHandler;
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|