From 7a6015b5498930240fefef3409257888049431f6 Mon Sep 17 00:00:00 2001
From: Luna D <cod7777@yandex.ru>
Date: Thu, 6 Jun 2024 20:42:04 -0400
Subject: [PATCH] Convert duplicate report comparison scripts to TypeScript

---
 assets/js/duplicate_reports.js | 42 ----------------------------------
 assets/js/duplicate_reports.ts | 42 ++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 42 deletions(-)
 delete mode 100644 assets/js/duplicate_reports.js
 create mode 100644 assets/js/duplicate_reports.ts

diff --git a/assets/js/duplicate_reports.js b/assets/js/duplicate_reports.js
deleted file mode 100644
index a6794ec4..00000000
--- a/assets/js/duplicate_reports.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Interactive behavior for duplicate reports.
- */
-
-import { $, $$ } from './utils/dom';
-
-function setupDupeReports() {
-  const [ onion, slider ] = $$('.onion-skin__image, .onion-skin__slider');
-  const swipe = $('.swipe__image');
-
-  if (swipe) setupSwipe(swipe);
-  if (onion) setupOnionSkin(onion, slider);
-}
-
-function setupSwipe(swipe) {
-  const [ clip, divider ] = $$('#clip rect, #divider', swipe);
-  const { width } = swipe.viewBox.baseVal;
-
-  function moveDivider({ clientX }) {
-    // Move center to cursor
-    const rect = swipe.getBoundingClientRect();
-    const newX = (clientX - rect.left) * (width / rect.width);
-
-    divider.setAttribute('x', newX);
-    clip.setAttribute('width', newX);
-  }
-
-  swipe.addEventListener('mousemove', moveDivider);
-}
-
-function setupOnionSkin(onion, slider) {
-  const target = $('#target', onion);
-
-  function setOpacity() {
-    target.setAttribute('opacity', slider.value);
-  }
-
-  setOpacity();
-  slider.addEventListener('input', setOpacity);
-}
-
-export { setupDupeReports };
diff --git a/assets/js/duplicate_reports.ts b/assets/js/duplicate_reports.ts
new file mode 100644
index 00000000..55cdfeb1
--- /dev/null
+++ b/assets/js/duplicate_reports.ts
@@ -0,0 +1,42 @@
+/**
+ * Interactive behavior for duplicate reports.
+ */
+
+import { assertNotNull } from './utils/assert';
+import { $, $$ } from './utils/dom';
+
+export function setupDupeReports() {
+  const onion = $<SVGSVGElement>('.onion-skin__image');
+  const slider = $<HTMLInputElement>('.onion-skin__slider');
+  const swipe = $<SVGSVGElement>('.swipe__image');
+
+  if (swipe) setupSwipe(swipe);
+  if (onion && slider) setupOnionSkin(onion, slider);
+}
+
+function setupSwipe(swipe: SVGSVGElement) {
+  const [ clip, divider ] = $$<SVGRectElement>('#clip rect, #divider', swipe);
+  const { width } = swipe.viewBox.baseVal;
+
+  function moveDivider({ clientX }: MouseEvent) {
+    // Move center to cursor
+    const rect = swipe.getBoundingClientRect();
+    const newX = (clientX - rect.left) * (width / rect.width);
+
+    divider.setAttribute('x', newX.toString());
+    clip.setAttribute('width', newX.toString());
+  }
+
+  swipe.addEventListener('mousemove', moveDivider);
+}
+
+function setupOnionSkin(onion: SVGSVGElement, slider: HTMLInputElement) {
+  const target = assertNotNull($<SVGImageElement>('#target', onion));
+
+  function setOpacity() {
+    target.setAttribute('opacity', slider.value);
+  }
+
+  setOpacity();
+  slider.addEventListener('input', setOpacity);
+}