<!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 'options.php';
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
echo htmlspecialchars($LIBRARY_INFO['name'], ENT_QUOTES | ENT_HTML5);
?>
</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>