Travel3: Simple image and video display site

Reads the images and videos from filesystem and builds a site in
memroy.

1 files changed, 128 insertions, 0 deletions

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();
+    }
+});