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
129
130
131
132
133
134
135
136
137
138
|
import { clearEl } from './dom';
import store from './store';
function showVideoThumb(img) {
const size = img.dataset.size;
const uris = JSON.parse(img.dataset.uris);
const thumbUri = uris[size];
const vidEl = img.querySelector('video');
if (!vidEl) return false;
const imgEl = img.querySelector('img');
if (!imgEl || imgEl.classList.contains('hidden')) return false;
imgEl.classList.add('hidden');
vidEl.innerHTML = `
<source src="${thumbUri}" type="video/webm"/>
`;
vidEl.classList.remove('hidden');
vidEl.play();
img.querySelector('.js-spoiler-info-overlay').classList.add('hidden');
return true;
}
function showThumb(img) {
const size = img.dataset.size;
const uris = JSON.parse(img.dataset.uris);
const thumbUri = uris[size].replace(/(webm|mp4)$/, 'gif');
const vidEl = img.querySelector('video');
if (vidEl) return showVideoThumb(img);
const imgEl = img.querySelector('img');
if (!imgEl || imgEl.src.indexOf(thumbUri) !== -1) return false;
if (store.get('serve_hidpi') && !thumbUri.endsWith('.gif')) {
// Check whether the HiDPI option is enabled, and make an exception for GIFs due to their size
imgEl.srcset = `${thumbUri} 1x, ${uris.medium} 2x`;
}
imgEl.src = thumbUri;
imgEl.classList.remove('hidden');
if (uris[size].indexOf('.webm') !== -1 || uris[size].indexOf('.mp4') !== -1) {
const overlay = img.querySelector('.js-spoiler-info-overlay');
overlay.classList.remove('hidden');
overlay.innerHTML = 'WebM';
}
else {
img.querySelector('.js-spoiler-info-overlay').classList.add('hidden');
}
return true;
}
function showBlock(img) {
img.querySelector('.image-filtered').classList.add('hidden');
const imageShowClasses = img.querySelector('.image-show').classList;
imageShowClasses.remove('hidden');
imageShowClasses.add('spoiler-pending');
}
function hideVideoThumb(img, spoilerUri, reason) {
const vidEl = img.querySelector('video');
if (!vidEl) return;
const imgEl = img.querySelector('img');
if (!imgEl) return;
const imgOverlay = img.querySelector('.js-spoiler-info-overlay');
imgEl.classList.remove('hidden');
imgEl.src = spoilerUri;
imgOverlay.innerHTML = reason;
imgOverlay.classList.remove('hidden');
clearEl(vidEl);
vidEl.classList.add('hidden');
vidEl.pause();
}
function hideThumb(img, spoilerUri, reason) {
const vidEl = img.querySelector('video');
const imgEl = img.querySelector('img');
if (vidEl) return hideVideoThumb(img, spoilerUri, reason);
if (!imgEl) return false;
const imgOverlay = img.querySelector('.js-spoiler-info-overlay');
if (imgOverlay.innerHTML.indexOf(reason) === -1) {
imgOverlay.innerHTML = reason;
}
imgOverlay.classList.remove('hidden');
if (imgEl.src.indexOf(spoilerUri) === -1) {
imgEl.srcset = '';
imgEl.src = spoilerUri;
imgEl.classList.remove('hidden');
}
}
function spoilerThumb(img, spoilerUri, reason) {
hideThumb(img, spoilerUri, reason);
switch (window.booru.spoilerType) {
case 'click':
img.addEventListener('click', event => { if (showThumb(img)) event.preventDefault(); });
img.addEventListener('mouseleave', () => hideThumb(img, spoilerUri, reason));
break;
case 'hover':
img.addEventListener('mouseenter', () => showThumb(img));
img.addEventListener('mouseleave', () => hideThumb(img, spoilerUri, reason));
break;
default:
break;
}
}
function spoilerBlock(img, spoilerUri, reason) {
const imgEl = img.querySelector('.image-filtered img');
const imgReason = img.querySelector('.filter-explanation');
if (!imgEl) return;
imgEl.src = spoilerUri;
imgReason.innerHTML = reason;
img.querySelector('.image-show').classList.add('hidden');
img.querySelector('.image-filtered').classList.remove('hidden');
}
export { showThumb, showBlock, spoilerThumb, spoilerBlock, hideThumb };
|
