blob: f48d888e78b5537c28153aac4f215feea138720c (
plain)
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
|
{% extends "_layouts/base.html" %}
{% load static %}
{% load i18n %}
{% block head %}
<link type="text/css" rel="stylesheet" href="{% static 'css/core/screenshots.css' %}" />
{% endblock head %}
{% block content %}
<div class="scr-room">
<div class="scr-monitor" id="scr-monitor">
<img class="scr-img" id="scr-img" alt="" />
<div class="scr-noise" id="scr-noise">{% trans "no signal" %}</div>
</div>
</div>
<div class="scr-hint" id="scr-hint">{% trans "press ← or → to change picture" %}</div>
<div class="scr-zoom" id="scr-zoom">
<img class="scr-zoom-img" id="scr-zoom-img" alt="" />
</div>
<script id="scr-data" type="application/json">[{% for s in shots %}{"id":"{{ s.id }}","url":"{{ s.url }}"}{% if not forloop.last %},{% endif %}{% endfor %}]</script>
<script>
(function() {
var shots = JSON.parse(document.getElementById('scr-data').textContent || '[]');
var img = document.getElementById('scr-img');
var noise = document.getElementById('scr-noise');
var hint = document.getElementById('scr-hint');
var zoom = document.getElementById('scr-zoom');
var zoomImg = document.getElementById('scr-zoom-img');
var monitor = document.getElementById('scr-monitor');
if (!shots.length) {
img.style.display = 'none';
noise.style.display = 'flex';
hint.style.display = 'none';
return;
}
var idx = 0;
var cache = {};
var AHEAD = 4;
function preload(i) {
if (i < 0 || i >= shots.length || cache[i]) return;
var im = new Image();
im.src = shots[i].url;
cache[i] = im;
}
function show(i) {
idx = (i + shots.length) % shots.length;
img.src = shots[idx].url;
for (var j = 1; j <= AHEAD; j++) preload(idx + j);
preload(idx - 1);
hint.textContent = (idx + 1) + ' / ' + shots.length + ' — {% trans "press ← or → to change picture" %}';
}
function navigate(dir) {
show(idx + dir);
if (zoom.classList.contains('is-open')) zoomImg.src = shots[idx].url;
}
function openZoom() {
zoomImg.src = shots[idx].url;
zoom.classList.add('is-open');
document.body.style.overflow = 'hidden';
}
function closeZoom() {
zoom.classList.remove('is-open');
document.body.style.overflow = '';
}
monitor.addEventListener('click', openZoom);
zoom.addEventListener('click', closeZoom);
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && zoom.classList.contains('is-open')) { closeZoom(); return; }
if (e.key === 'ArrowLeft') { e.preventDefault(); navigate(-1); }
else if (e.key === 'ArrowRight') { e.preventDefault(); navigate(1); }
});
show(0);
})();
</script>
{% endblock content %}
|
