From 6232d13f5321b87ddf12a1aa36b4545da45f173d Mon Sep 17 00:00:00 2001 From: Joel Klinghed Date: Wed, 17 Nov 2021 22:34:57 +0100 Subject: Travel3: Simple image and video display site Reads the images and videos from filesystem and builds a site in memroy. --- example/static/img/placeholder_img.svg | 86 +++++++++++++++++++++ example/static/img/placeholder_video.svg | 1 + example/static/js/media.js | 128 +++++++++++++++++++++++++++++++ example/static/style/base.css | 34 ++++++++ example/static/style/viewer.css | 37 +++++++++ 5 files changed, 286 insertions(+) create mode 100644 example/static/img/placeholder_img.svg create mode 100644 example/static/img/placeholder_video.svg create mode 100644 example/static/js/media.js create mode 100644 example/static/style/base.css create mode 100644 example/static/style/viewer.css (limited to 'example/static') diff --git a/example/static/img/placeholder_img.svg b/example/static/img/placeholder_img.svg new file mode 100644 index 0000000..779d14f --- /dev/null +++ b/example/static/img/placeholder_img.svg @@ -0,0 +1,86 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/example/static/img/placeholder_video.svg b/example/static/img/placeholder_video.svg new file mode 100644 index 0000000..e4a337b --- /dev/null +++ b/example/static/img/placeholder_video.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/example/static/js/media.js b/example/static/js/media.js new file mode 100644 index 0000000..e7ae59d --- /dev/null +++ b/example/static/js/media.js @@ -0,0 +1,128 @@ +"use strict"; + +class Media { + constructor(type, src, width, height, location, date) { + this.type = type; + this.src = src; + this.width = width; + this.height = height; + this.location = location; + this.date = date; + } +} + +class Image extends Media { + constructor(src, width, height, location, date, transform) { + super('image', src, width, height, location, date); + this.transform = transform; + } +} + +class Video extends Media { + constructor(src, width, height, location, date, length) { + super('video', src, width, height, location, date); + this.length = length; + } +} + +var media = []; + +function show_location(lat, lng) { + window.open("https://google.com/maps?q=" + lat + "," + lng); + + // Avoid default action + return false; +} + +function show_media(index, push_state) { + let m = media[index]; + + if (push_state) { + window.history.pushState( + {'index': index}, document.title, '?media=' + index); + } + + let previous = index > 0 ? index - 1 : media.length - 1; + let next = index + 1; + if (next == media.length) + next = 0; + + document.getElementById('number').innerText = + (1 + index) + '/' + (1 + media.length); + let img = document.querySelector('img.content'); + let video = document.querySelector('video.content'); + if (m.type == 'image') { + video.style.display = 'none'; + img.onload = function() { img.style.transform = m.transform; }; + img.src = m.src; + img.style.display = 'inline'; + } else { + img.style.display = 'none'; + video.src = m.src; + video.style.display = 'inline'; + } + + let location = document.getElementById('location'); + if (m.location.length == 0) { + location.style.display = 'none'; + } else { + location.style.display = 'inline'; + location.onclick = function(event) { + return show_location(m.location[0], m.location[1]); + }; + } + + document.getElementById('previous').onclick = + function(event) { return show_media(previous, true); }; + document.getElementById('next').onclick = + function(event) { return show_media(next, true); }; + document.getElementById('download').href = m.src; + + // Avoid default action + return false; +} + +function show_from_query_string() { + let params = new URLSearchParams(window.location.search); + let index = parseInt(params.get("media"), 10); + if (isNaN(index)) + index = 0; + show_media(index, false); +} + +window.onpopstate = function(event) { + if (event.state) { + show_media(event.state.index, false); + } else { + show_from_query_string(); + } +}; + +document.addEventListener('DOMContentLoaded', (event) => { + show_from_query_string(); + + document.getElementById('close').onclick = + function(event) { + let slash = window.location.pathname.lastIndexOf('/') + let new_path = window.location.pathname.substring(0, slash); + window.location.assign(window.location.protocol + "//" + + window.location.host + new_path); + return false; + }; +}); + +document.addEventListener('keydown', (event) => { + if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey || + event.isComposing) { + return; + } + if (event.key == 'ArrowLeft') { + document.getElementById('previous').onclick(); + } else if (event.key == 'ArrowRight') { + document.getElementById('next').onclick(); + } else if (event.key == 'Escape') { + document.getElementById('close').onclick(); + } else if (event.key == 'D') { + document.getElementById('download').onclick(); + } +}); diff --git a/example/static/style/base.css b/example/static/style/base.css new file mode 100644 index 0000000..d77b27b --- /dev/null +++ b/example/static/style/base.css @@ -0,0 +1,34 @@ +body { + font-family: Helvetica, Arial, sans-serif; +} + +.trips { + margin: auto; +} + +.trip a { + font-size: 150%; +} + +a.maps { + font-size: 90%; +} + +.subtitle { + text-color: lightgrey; + font-size: 90%; +} + +img.thumbnail { + background-size: contain; + background-position: center; + background-repeat: no-repeat; +} + +img.image { + background-image: url('../img/placeholder_img.svg'); +} + +img.video { + background-image: url('../img/placeholder_video.svg'); +} diff --git a/example/static/style/viewer.css b/example/static/style/viewer.css new file mode 100644 index 0000000..5881f84 --- /dev/null +++ b/example/static/style/viewer.css @@ -0,0 +1,37 @@ +body { + background-color: black; + color: lightgrey; + margin: 0; +} + +#header { + height: 3em; +} + +#header a { + color: lightgrey; + height: 2.5em; + font-weight: bold; + text-decoration: none; + cursor: pointer; + margin: 0 0.5em; +} + +#header li { + margin: 0 1em; +} + +#header ul { + height: 100%; + list-style: none; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0; +} + +.content { + object-fit: scale-down; + width: 100%; + height: calc(100vh - 3em); +} -- cgit v1.2.3-70-g09d2