Added memorial day slideshow
Signed-off-by: James Ketrenos <james.p.ketrenos@intel.com>
This commit is contained in:
James Ketrenos
parent
8428e1c06d
commit
d2d0cf837b
165
frontend/slideshow.html
Executable file
165
frontend/slideshow.html
Executable file
@ -0,0 +1,165 @@
|
||||
<html>
|
||||
<script src="src/ketr-photos/fetch.js"></script>
|
||||
<base href="/photos/">
|
||||
<body>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#photo {
|
||||
position: fixed;
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
#placeholder {
|
||||
position: absolute;
|
||||
left: -1000px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#info {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
padding: 0.5em 1em;
|
||||
background-color: #444;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
}
|
||||
</style>
|
||||
<img id="placeholder"></img>
|
||||
<div id="photo">
|
||||
</div>
|
||||
<div id="info">
|
||||
Loading photoset...
|
||||
</div>
|
||||
<script>
|
||||
var base, placeholder, info, photos = [], photoIndex;
|
||||
|
||||
function shuffle(array) {
|
||||
var index = array.length, tmp, random;
|
||||
|
||||
while (index) {
|
||||
random = Math.floor(Math.random() * index);
|
||||
index--;
|
||||
|
||||
// And swap it with the current element.
|
||||
tmp = array[index];
|
||||
array[index] = array[random];
|
||||
array[random] = tmp;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
function loadPhoto(index) {
|
||||
var photo = photos[index];
|
||||
placeholder.src = base + photo.path /* + "thumbs/scaled/"*/ + photo.filename;
|
||||
}
|
||||
|
||||
function nextPhoto() {
|
||||
photoIndex = (photoIndex + 1) % photos.length;
|
||||
loadPhoto(photoIndex);
|
||||
}
|
||||
|
||||
var scheduled = false;
|
||||
function schedule() {
|
||||
if (scheduled) {
|
||||
clearTimeout(scheduled);
|
||||
}
|
||||
scheduled = setTimeout(function () {
|
||||
scheduled = undefined;
|
||||
nextPhoto();
|
||||
}, 3 * 1000);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var tmp = document.querySelector("base");
|
||||
if (tmp) {
|
||||
base = new URL(tmp.href).pathname.replace(/\/$/, "") + "/"; /* Make sure there is a trailing slash */
|
||||
} else {
|
||||
base = "/";
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", function(event) {
|
||||
if (event.keyCode == 37) { /* left */
|
||||
if (photoIndex == 0) {
|
||||
photoIndex = photos.length;
|
||||
}
|
||||
photoIndex--;
|
||||
loadPhoto(photoIndex);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.keyCode == 39) { /* right */
|
||||
photoIndex = (photoIndex + 1) % photos.length;
|
||||
loadPhoto(photoIndex);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(event.keyCode);
|
||||
});
|
||||
|
||||
info = document.getElementById("info");
|
||||
placeholder = document.getElementById("placeholder");
|
||||
|
||||
placeholder.onload = function() {
|
||||
var item = photos[photoIndex],
|
||||
days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
|
||||
months = [ "January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December" ],
|
||||
taken = new Date(item.taken);
|
||||
|
||||
info.textContent = "Photo taken on " +
|
||||
days[taken.getDay()] + ", " +
|
||||
months[taken.getMonth()] + " " +
|
||||
taken.getDate() + " " +
|
||||
taken.getFullYear();
|
||||
|
||||
photo.style.backgroundImage = "url(" + placeholder.src + ")";
|
||||
|
||||
schedule();
|
||||
};
|
||||
|
||||
placeholder.onerror = function() {
|
||||
info.textContent = "Error loading photo. Trying next photo.";
|
||||
nextPhoto();
|
||||
}
|
||||
|
||||
window.fetch("api/v1/photos/holiday/memorial%20day", function(error, xhr) {
|
||||
if (error && xhr.status != 404) {
|
||||
console.log("Unable to fetch holiday: " + error);
|
||||
return;
|
||||
}
|
||||
|
||||
var results;
|
||||
try {
|
||||
results = JSON.parse(xhr.responseText);
|
||||
} catch (___) {
|
||||
info.textContent = "Unable to parse results"
|
||||
return;
|
||||
}
|
||||
|
||||
if (results.items.length) {
|
||||
photos = shuffle(results.items);
|
||||
photoIndex = -1;
|
||||
nextPhoto();
|
||||
} else {
|
||||
info.textContent = "No photos found.";
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
@ -554,6 +554,7 @@ router.get("/holiday/:holiday", function(req, res/*, next*/) {
|
||||
|
||||
/* Lookup the date for the holiday on every year from 'startYear' (1990) to today */
|
||||
for (let year = startYear; year <= moment().year(); year++) {
|
||||
console.log("Getting year: " + year);
|
||||
let holiday = moment(year + "-01-01", "YYYY-MM-DD").holiday(req.params.holiday);
|
||||
if (!holiday) {
|
||||
/* 'Leap Year' doesn't exist every year... */
|
||||
@ -573,7 +574,7 @@ router.get("/holiday/:holiday", function(req, res/*, next*/) {
|
||||
let direction = extraDays < 0 ? -1 : 1;
|
||||
|
||||
for (let i = 0; i <= Math.abs(extraDays); i++) {
|
||||
let comparison = "strftime('%Y-%m-%d',taken)='" + holiday.format("YYYY-MM-DD") + "'";
|
||||
let comparison = "strftime('%Y-%m-%d',taken)='" + holiday.format("YYYY-MM-DD") + "'";
|
||||
/* If no holiday has been set yet, start the comparison function passed to WHERE
|
||||
* otherwise append it with OR. */
|
||||
if (!dayIsHoliday) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user