convert image utils to typescript

assets/jest.config.js

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

assets/js/utils/image.ts

@@ -1,9 +1,12 @@
 import { clearEl } from './dom';
 import store from './store';
 
-function showVideoThumb(img) {
+function showVideoThumb(img: HTMLDivElement) {
   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 vidEl = img.querySelector('video');
@@ -21,14 +24,18 @@ function showVideoThumb(img) {
   vidEl.classList.remove('hidden');
   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;
 }
 
-export function showThumb(img) {
+export function showThumb(img: HTMLDivElement) {
   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 picEl = img.querySelector('picture');
@@ -45,26 +52,30 @@ export function showThumb(img) {
   }
 
   imgEl.src = thumbUri;
-  if (uris[size].indexOf('.webm') !== -1) {
   const overlay = img.querySelector('.js-spoiler-info-overlay');
+  if (!overlay) return;
+
+  if (uris[size].indexOf('.webm') !== -1) {
     overlay.classList.remove('hidden');
     overlay.innerHTML = 'WebM';
   }
   else {
-    img.querySelector('.js-spoiler-info-overlay').classList.add('hidden');
+    overlay.classList.add('hidden');
   }
 
   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;
+  if (imageShowClasses) {
     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');
   if (!vidEl) return;
 
@@ -74,15 +85,17 @@ function hideVideoThumb(img, spoilerUri, reason) {
 
   imgEl.classList.remove('hidden');
   imgEl.src = spoilerUri;
+  if (imgOverlay) {
     imgOverlay.innerHTML = reason;
     imgOverlay.classList.remove('hidden');
+  }
 
   clearEl(vidEl);
   vidEl.classList.add('hidden');
   vidEl.pause();
 }
 
-export function hideThumb(img, spoilerUri, reason) {
+export function hideThumb(img: HTMLDivElement, spoilerUri: string, reason: string) {
   const picEl = img.querySelector('picture');
   if (!picEl) return hideVideoThumb(img, spoilerUri, reason);
 
@@ -93,11 +106,13 @@ export function hideThumb(img, spoilerUri, reason) {
 
   imgEl.srcset = '';
   imgEl.src = spoilerUri;
+  if (imgOverlay) {
     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);
 
   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;
 
   imgEl.src = spoilerUri;
+  if (imgReason) {
     imgReason.innerHTML = reason;
-
+  }
-  img.querySelector('.image-show').classList.add('hidden');
+
-  img.querySelector('.image-filtered').classList.remove('hidden');
+  img.querySelector('.image-show')?.classList.add('hidden');
+  img.querySelector('.image-filtered')?.classList.remove('hidden');
 }

assets/js/utils/store.ts

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