PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-27 21:47:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

convert image utils to typescript

Browse source
This commit is contained in:
SeinopSys 2022-03-26 00:44:28 +01:00 committed by Luna D
parent 7f7228631d
commit 445b31bbd7
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
3 changed files with 44 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/jest.config.js
View file

@ -16,7 +16,7 @@ export default {
functions: 0, functions: 0,
lines: 0, lines: 0,
}, },
'./js/utils/**/*.js': { './js/utils/**/*.ts': {
statements: 100, statements: 100,
branches: 100, branches: 100,
functions: 100, functions: 100,

67
assets/js/utils/image.js → assets/js/utils/image.ts
View file

@ -1,9 +1,12 @@
import { clearEl } from './dom'; import { clearEl } from './dom';
import store from './store'; import store from './store';
function showVideoThumb(img) { function showVideoThumb(img: HTMLDivElement) {
const size = img.dataset.size; const size = img.dataset.size;
const uris = JSON.parse(img.dataset.uris); const urisString = img.dataset.uris;
if (!size || !urisString) return;
const uris = JSON.parse(urisString);
const thumbUri = uris[size]; const thumbUri = uris[size];
const vidEl = img.querySelector('video'); const vidEl = img.querySelector('video');
@ -21,14 +24,18 @@ function showVideoThumb(img) {
vidEl.classList.remove('hidden'); vidEl.classList.remove('hidden');
vidEl.play(); vidEl.play();
img.querySelector('.js-spoiler-info-overlay').classList.add('hidden'); const overlay = img.querySelector('.js-spoiler-info-overlay');
if (overlay) overlay.classList.add('hidden');
return true; return true;
} }
export function showThumb(img) { export function showThumb(img: HTMLDivElement) {
const size = img.dataset.size; const size = img.dataset.size;
const uris = JSON.parse(img.dataset.uris); const urisString = img.dataset.uris;
if (!size || !urisString) return;
const uris = JSON.parse(urisString);
const thumbUri = uris[size].replace(/webm$/, 'gif'); const thumbUri = uris[size].replace(/webm$/, 'gif');
const picEl = img.querySelector('picture'); const picEl = img.querySelector('picture');
@ -45,26 +52,30 @@ export function showThumb(img) {
} }
imgEl.src = thumbUri; imgEl.src = thumbUri;
const overlay = img.querySelector('.js-spoiler-info-overlay');
if (!overlay) return;
if (uris[size].indexOf('.webm') !== -1) { if (uris[size].indexOf('.webm') !== -1) {
const overlay = img.querySelector('.js-spoiler-info-overlay');
overlay.classList.remove('hidden'); overlay.classList.remove('hidden');
overlay.innerHTML = 'WebM'; overlay.innerHTML = 'WebM';
} }
else { else {
img.querySelector('.js-spoiler-info-overlay').classList.add('hidden'); overlay.classList.add('hidden');
} }
return true; return true;
} }
export function showBlock(img) { export function showBlock(img: HTMLDivElement) {
img.querySelector('.image-filtered').classList.add('hidden'); img.querySelector('.image-filtered')?.classList.add('hidden');
const imageShowClasses = img.querySelector('.image-show').classList; const imageShowClasses = img.querySelector('.image-show')?.classList;
imageShowClasses.remove('hidden'); if (imageShowClasses) {
imageShowClasses.add('spoiler-pending'); imageShowClasses.remove('hidden');
imageShowClasses.add('spoiler-pending');
}
} }
function hideVideoThumb(img, spoilerUri, reason) { function hideVideoThumb(img: HTMLDivElement, spoilerUri: string, reason: string) {
const vidEl = img.querySelector('video'); const vidEl = img.querySelector('video');
if (!vidEl) return; if (!vidEl) return;
@ -74,15 +85,17 @@ function hideVideoThumb(img, spoilerUri, reason) {
imgEl.classList.remove('hidden'); imgEl.classList.remove('hidden');
imgEl.src = spoilerUri; imgEl.src = spoilerUri;
imgOverlay.innerHTML = reason; if (imgOverlay) {
imgOverlay.classList.remove('hidden'); imgOverlay.innerHTML = reason;
imgOverlay.classList.remove('hidden');
}
clearEl(vidEl); clearEl(vidEl);
vidEl.classList.add('hidden'); vidEl.classList.add('hidden');
vidEl.pause(); vidEl.pause();
} }
export function hideThumb(img, spoilerUri, reason) { export function hideThumb(img: HTMLDivElement, spoilerUri: string, reason: string) {
const picEl = img.querySelector('picture'); const picEl = img.querySelector('picture');
if (!picEl) return hideVideoThumb(img, spoilerUri, reason); if (!picEl) return hideVideoThumb(img, spoilerUri, reason);
@ -93,11 +106,13 @@ export function hideThumb(img, spoilerUri, reason) {
imgEl.srcset = ''; imgEl.srcset = '';
imgEl.src = spoilerUri; imgEl.src = spoilerUri;
imgOverlay.innerHTML = reason; if (imgOverlay) {
imgOverlay.classList.remove('hidden'); imgOverlay.innerHTML = reason;
imgOverlay.classList.remove('hidden');
}
} }
export function spoilerThumb(img, spoilerUri, reason) { export function spoilerThumb(img: HTMLDivElement, spoilerUri: string, reason: string) {
hideThumb(img, spoilerUri, reason); hideThumb(img, spoilerUri, reason);
switch (window.booru.spoilerType) { switch (window.booru.spoilerType) {
@ -114,15 +129,17 @@ export function spoilerThumb(img, spoilerUri, reason) {
} }
} }
export function spoilerBlock(img, spoilerUri, reason) { export function spoilerBlock(img: HTMLDivElement, spoilerUri: string, reason: string) {
const imgEl = img.querySelector('.image-filtered img'); const imgEl = img.querySelector<HTMLImageElement>('.image-filtered img');
const imgReason = img.querySelector('.filter-explanation'); const imgReason = img.querySelector<HTMLElement>('.filter-explanation');
if (!imgEl) return; if (!imgEl) return;
imgEl.src = spoilerUri; imgEl.src = spoilerUri;
imgReason.innerHTML = reason; if (imgReason) {
imgReason.innerHTML = reason;
}
img.querySelector('.image-show').classList.add('hidden'); img.querySelector('.image-show')?.classList.add('hidden');
img.querySelector('.image-filtered').classList.remove('hidden'); img.querySelector('.image-filtered')?.classList.remove('hidden');
} }

2
assets/js/utils/store.ts
View file

@ -59,7 +59,7 @@ export default {
const lastUpdatedKey = key + lastUpdatedSuffix; const lastUpdatedKey = key + lastUpdatedSuffix;
const lastUpdatedTime = this.get<number>(lastUpdatedKey); const lastUpdatedTime = this.get<number>(lastUpdatedKey);
return lastUpdatedTime !== null && Date.now() > lastUpdatedTime; return lastUpdatedTime === null || Date.now() > lastUpdatedTime;
}, },
}; };