1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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();
}
});
|
