From defe16ba86bfbea7877b95a102637de4a0cb46d5 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 23 Mar 2024 02:03:32 +0100
Subject: [PATCH 1/3] Remove remaining jQuery .css code

---
 web_src/js/features/imagediff.js | 92 +++++++++++++++++---------------
 1 file changed, 48 insertions(+), 44 deletions(-)

diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js
index 7b77b30ccc761..1d0c1243a85cd 100644
--- a/web_src/js/features/imagediff.js
+++ b/web_src/js/features/imagediff.js
@@ -54,8 +54,8 @@ export function initImageDiff() {
     };
 
     return {
-      image1: $(image1),
-      image2: $(image2),
+      $image1: $(image1),
+      $image2: $(image2),
       size1,
       size2,
       max,
@@ -122,18 +122,18 @@ export function initImageDiff() {
         factor = (diffContainerWidth - 24) / 2 / sizes.max.width;
       }
 
-      const widthChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalWidth !== sizes.image2[0].naturalWidth;
-      const heightChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalHeight !== sizes.image2[0].naturalHeight;
-      if (sizes.image1.length !== 0) {
-        $container.find('.bounds-info-after .bounds-info-width').text(`${sizes.image1[0].naturalWidth}px`).addClass(widthChanged ? 'green' : '');
-        $container.find('.bounds-info-after .bounds-info-height').text(`${sizes.image1[0].naturalHeight}px`).addClass(heightChanged ? 'green' : '');
+      const widthChanged = sizes.$image1.length !== 0 && sizes.$image2.length !== 0 && sizes.$image1[0].naturalWidth !== sizes.$image2[0].naturalWidth;
+      const heightChanged = sizes.$image1.length !== 0 && sizes.$image2.length !== 0 && sizes.$image1[0].naturalHeight !== sizes.$image2[0].naturalHeight;
+      if (sizes.$image1.length !== 0) {
+        $container.find('.bounds-info-after .bounds-info-width').text(`${sizes.$image1[0].naturalWidth}px`).addClass(widthChanged ? 'green' : '');
+        $container.find('.bounds-info-after .bounds-info-height').text(`${sizes.$image1[0].naturalHeight}px`).addClass(heightChanged ? 'green' : '');
       }
-      if (sizes.image2.length !== 0) {
-        $container.find('.bounds-info-before .bounds-info-width').text(`${sizes.image2[0].naturalWidth}px`).addClass(widthChanged ? 'red' : '');
-        $container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : '');
+      if (sizes.$image2.length !== 0) {
+        $container.find('.bounds-info-before .bounds-info-width').text(`${sizes.$image2[0].naturalWidth}px`).addClass(widthChanged ? 'red' : '');
+        $container.find('.bounds-info-before .bounds-info-height').text(`${sizes.$image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : '');
       }
 
-      const image1 = sizes.image1[0];
+      const image1 = sizes.$image1[0];
       if (image1) {
         const container = image1.parentNode;
         image1.style.width = `${sizes.size1.width * factor}px`;
@@ -143,7 +143,7 @@ export function initImageDiff() {
         container.style.height = `${sizes.size1.height * factor + 2}px`;
       }
 
-      const image2 = sizes.image2[0];
+      const image2 = sizes.$image2[0];
       if (image2) {
         const container = image2.parentNode;
         image2.style.width = `${sizes.size2.width * factor}px`;
@@ -160,7 +160,7 @@ export function initImageDiff() {
         factor = (diffContainerWidth - 12) / sizes.max.width;
       }
 
-      const image1 = sizes.image1[0];
+      const image1 = sizes.$image1[0];
       if (image1) {
         const container = image1.parentNode;
         const swipeFrame = container.parentNode;
@@ -173,7 +173,7 @@ export function initImageDiff() {
         swipeFrame.style.width = `${sizes.max.width * factor + 2}px`;
       }
 
-      const image2 = sizes.image2[0];
+      const image2 = sizes.$image2[0];
       if (image2) {
         const container = image2.parentNode;
         const swipeFrame = container.parentNode;
@@ -220,38 +220,42 @@ export function initImageDiff() {
         factor = (diffContainerWidth - 12) / sizes.max.width;
       }
 
-      sizes.image1.css({
-        width: sizes.size1.width * factor,
-        height: sizes.size1.height * factor,
-      });
-      sizes.image2.css({
-        width: sizes.size2.width * factor,
-        height: sizes.size2.height * factor,
-      });
-      sizes.image1.parent().css({
-        margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`,
-        width: sizes.size1.width * factor + 2,
-        height: sizes.size1.height * factor + 2,
-      });
-      sizes.image2.parent().css({
-        margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`,
-        width: sizes.size2.width * factor + 2,
-        height: sizes.size2.height * factor + 2,
-      });
+      const image1 = sizes.$image1[0];
+      if (image1) {
+        const container = image1.parentNode;
+        image1.style.width = `${sizes.size1.width * factor}px`;
+        image1.style.height = `${sizes.size1.height * factor}px`;
+        container.style.margin = `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`;
+        container.style.width = `${sizes.size1.width * factor + 2}px`;
+        container.style.height = `${sizes.size1.height * factor + 2}px`;
+      }
 
-      // some inner elements are `position: absolute`, so the container's height must be large enough
-      // the "css(width, height)" is somewhat hacky and not easy to understand, it could be improved in the future
-      sizes.image2.parent().parent().css({
-        width: sizes.max.width * factor + 2,
-        height: sizes.max.height * factor + 2,
-      });
+      const image2 = sizes.$image2[0];
+      if (image2) {
+        const container = image2.parentNode;
+        const overlayFrame = container.parentNode;
+        image2.style.width = `${sizes.size2.width * factor}px`;
+        image2.style.height = `${sizes.size2.height * factor}px`;
+        container.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`;
+        container.style.width = `${sizes.size2.width * factor + 2}px`;
+        container.style.height = `${sizes.size2.height * factor + 2}px`;
 
-      const $range = $container.find("input[type='range']");
-      const onInput = () => sizes.image1.parent().css({
-        opacity: $range.val() / 100,
-      });
-      $range.on('input', onInput);
-      onInput();
+        // some inner elements are `position: absolute`, so the container's height must be large enough
+        // the "css(width, height)" is somewhat hacky and not easy to understand, it could be improved in the future
+        overlayFrame.style.width = `${sizes.max.width * factor + 2}px`;
+        overlayFrame.style.height = `${sizes.max.height * factor + 2}px`;
+      }
+
+      const rangeInput = $container[0].querySelector('input[type="range"]');
+      function updateOpacity() {
+        const image1 = sizes.$image1[0];
+        if (image1) {
+          const container = image1.parentNode;
+          container.style.opacity = `${rangeInput.value / 100}`;
+        }
+      }
+      rangeInput?.addEventListener('input', updateOpacity);
+      updateOpacity();
     }
   });
 }

From 7d05d2a1d9bf62e6c3005b8f78b45bc025e62404 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 23 Mar 2024 11:40:21 +0100
Subject: [PATCH 2/3] Update web_src/js/features/imagediff.js

Co-authored-by: delvh <dev.lh@web.de>
---
 web_src/js/features/imagediff.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js
index 1d0c1243a85cd..8d7ec0c30ce24 100644
--- a/web_src/js/features/imagediff.js
+++ b/web_src/js/features/imagediff.js
@@ -241,7 +241,6 @@ export function initImageDiff() {
         container.style.height = `${sizes.size2.height * factor + 2}px`;
 
         // some inner elements are `position: absolute`, so the container's height must be large enough
-        // the "css(width, height)" is somewhat hacky and not easy to understand, it could be improved in the future
         overlayFrame.style.width = `${sizes.max.width * factor + 2}px`;
         overlayFrame.style.height = `${sizes.max.height * factor + 2}px`;
       }

From 1b1c88acdde741fc968579da83c106b1d1c12cae Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 23 Mar 2024 12:29:03 +0100
Subject: [PATCH 3/3] simplify updateOpacity

---
 web_src/js/features/imagediff.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js
index 8d7ec0c30ce24..64e4f0a12eef4 100644
--- a/web_src/js/features/imagediff.js
+++ b/web_src/js/features/imagediff.js
@@ -247,10 +247,8 @@ export function initImageDiff() {
 
       const rangeInput = $container[0].querySelector('input[type="range"]');
       function updateOpacity() {
-        const image1 = sizes.$image1[0];
-        if (image1) {
-          const container = image1.parentNode;
-          container.style.opacity = `${rangeInput.value / 100}`;
+        if (sizes?.$image1?.[0]) {
+          sizes.$image1[0].parentNode.style.opacity = `${rangeInput.value / 100}`;
         }
       }
       rangeInput?.addEventListener('input', updateOpacity);