From e50df48c3b776f31dd7c2bfdec387e3ca3ca9241 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 27 Mar 2024 13:41:15 +0000 Subject: [PATCH 1/7] Remove jQuery class from the image diff - Switched from jQuery class functions to plain JavaScript `classList` - Tested the image diff and it works as before Signed-off-by: Yarden Shoham --- web_src/js/features/imagediff.js | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 53bf2109ba86c..f73896e460ebc 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -116,7 +116,9 @@ export function initImageDiff() { initOverlay(createContext($imagesAfter[2], $imagesBefore[2])); } - $container.find('> .image-diff-tabs').removeClass('is-loading'); + for (const el of Array.from(this.children).filter((child) => child.classList.contains('image-diff-tabs'))) { + el.classList.remove('is-loading'); + } function initSideBySide(sizes) { let factor = 1; @@ -126,13 +128,24 @@ export function initImageDiff() { 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.$image1 && sizes.$image1.length !== 0) { + const boundsInfoAfterWidth = this.querySelector('.bounds-info-after .bounds-info-width'); + boundsInfoAfterWidth.textContent = `${sizes.$image1[0].naturalWidth}px`; + boundsInfoAfterWidth.classList.add(widthChanged ? 'green' : ''); + + const boundsInfoAfterHeight = this.querySelector('.bounds-info-after .bounds-info-height'); + boundsInfoAfterHeight.textContent = `${sizes.$image1[0].naturalHeight}px`; + boundsInfoAfterHeight.classList.add(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 && sizes.$image2.length !== 0) { + const boundsInfoBeforeWidth = this.querySelector('.bounds-info-before .bounds-info-width'); + boundsInfoBeforeWidth.textContent = `${sizes.$image2[0].naturalWidth}px`; + boundsInfoBeforeWidth.classList.add(widthChanged ? 'red' : ''); + + const boundsInfoBeforeHeight = this.querySelector('.bounds-info-before .bounds-info-height'); + boundsInfoBeforeHeight.textContent = `${sizes.$image2[0].naturalHeight}px`; + boundsInfoBeforeHeight.classList.add(heightChanged ? 'red' : ''); } const image1 = sizes.$image1[0]; From 69982e1385c828db0c27f23e880fe4d5648ed9f5 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 27 Mar 2024 13:47:46 +0000 Subject: [PATCH 2/7] Fix if --- web_src/js/features/imagediff.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index f73896e460ebc..3dbf51fd7c8a4 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -131,21 +131,21 @@ export function initImageDiff() { if (sizes.$image1 && sizes.$image1.length !== 0) { const boundsInfoAfterWidth = this.querySelector('.bounds-info-after .bounds-info-width'); boundsInfoAfterWidth.textContent = `${sizes.$image1[0].naturalWidth}px`; - boundsInfoAfterWidth.classList.add(widthChanged ? 'green' : ''); + if (widthChanged) boundsInfoAfterWidth.classList.add('green'); const boundsInfoAfterHeight = this.querySelector('.bounds-info-after .bounds-info-height'); boundsInfoAfterHeight.textContent = `${sizes.$image1[0].naturalHeight}px`; - boundsInfoAfterHeight.classList.add(heightChanged ? 'green' : ''); + if (heightChanged) boundsInfoAfterHeight.classList.add('green'); } if (sizes.$image2 && sizes.$image2.length !== 0) { const boundsInfoBeforeWidth = this.querySelector('.bounds-info-before .bounds-info-width'); boundsInfoBeforeWidth.textContent = `${sizes.$image2[0].naturalWidth}px`; - boundsInfoBeforeWidth.classList.add(widthChanged ? 'red' : ''); + if (widthChanged) boundsInfoBeforeWidth.classList.add('red'); const boundsInfoBeforeHeight = this.querySelector('.bounds-info-before .bounds-info-height'); boundsInfoBeforeHeight.textContent = `${sizes.$image2[0].naturalHeight}px`; - boundsInfoBeforeHeight.classList.add(heightChanged ? 'red' : ''); + if (heightChanged) boundsInfoBeforeHeight.classList.add('red'); } const image1 = sizes.$image1[0]; From a867afb42886a794c131b80005261ecfebbd25f9 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 27 Mar 2024 18:35:35 +0200 Subject: [PATCH 3/7] Apply suggestions from code review Co-authored-by: silverwind --- web_src/js/features/imagediff.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 3dbf51fd7c8a4..fe045d1132a9b 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -128,7 +128,7 @@ export function initImageDiff() { 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 && sizes.$image1.length !== 0) { + if (sizes.$image1?.length) { const boundsInfoAfterWidth = this.querySelector('.bounds-info-after .bounds-info-width'); boundsInfoAfterWidth.textContent = `${sizes.$image1[0].naturalWidth}px`; if (widthChanged) boundsInfoAfterWidth.classList.add('green'); @@ -138,7 +138,7 @@ export function initImageDiff() { if (heightChanged) boundsInfoAfterHeight.classList.add('green'); } - if (sizes.$image2 && sizes.$image2.length !== 0) { + if (sizes.$image2?.length) { const boundsInfoBeforeWidth = this.querySelector('.bounds-info-before .bounds-info-width'); boundsInfoBeforeWidth.textContent = `${sizes.$image2[0].naturalWidth}px`; if (widthChanged) boundsInfoBeforeWidth.classList.add('red'); From f906716c09d432c7743c9f46f10fafdf212716aa Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Thu, 28 Mar 2024 06:15:29 +0000 Subject: [PATCH 4/7] Use :scope --- web_src/js/features/imagediff.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index fe045d1132a9b..9b3065eb0e523 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -116,7 +116,7 @@ export function initImageDiff() { initOverlay(createContext($imagesAfter[2], $imagesBefore[2])); } - for (const el of Array.from(this.children).filter((child) => child.classList.contains('image-diff-tabs'))) { + for (const el of this.querySelectorAll(':scope > .image-diff-tabs')) { el.classList.remove('is-loading'); } From a59b533cc5ba040069d9bbe5d693fdd681d02de7 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Thu, 28 Mar 2024 06:15:45 +0000 Subject: [PATCH 5/7] Fix `this` --- web_src/js/features/imagediff.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 9b3065eb0e523..89428fa928ab2 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -110,7 +110,7 @@ export function initImageDiff() { const $imagesAfter = imageInfos[0].$images; const $imagesBefore = imageInfos[1].$images; - initSideBySide(createContext($imagesAfter[0], $imagesBefore[0])); + initSideBySide(this, createContext($imagesAfter[0], $imagesBefore[0])); if ($imagesAfter.length > 0 && $imagesBefore.length > 0) { initSwipe(createContext($imagesAfter[1], $imagesBefore[1])); initOverlay(createContext($imagesAfter[2], $imagesBefore[2])); @@ -120,7 +120,7 @@ export function initImageDiff() { el.classList.remove('is-loading'); } - function initSideBySide(sizes) { + function initSideBySide(el, sizes) { let factor = 1; if (sizes.max.width > (diffContainerWidth - 24) / 2) { factor = (diffContainerWidth - 24) / 2 / sizes.max.width; @@ -129,21 +129,21 @@ export function initImageDiff() { 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) { - const boundsInfoAfterWidth = this.querySelector('.bounds-info-after .bounds-info-width'); + const boundsInfoAfterWidth = el.querySelector('.bounds-info-after .bounds-info-width'); boundsInfoAfterWidth.textContent = `${sizes.$image1[0].naturalWidth}px`; if (widthChanged) boundsInfoAfterWidth.classList.add('green'); - const boundsInfoAfterHeight = this.querySelector('.bounds-info-after .bounds-info-height'); + const boundsInfoAfterHeight = el.querySelector('.bounds-info-after .bounds-info-height'); boundsInfoAfterHeight.textContent = `${sizes.$image1[0].naturalHeight}px`; if (heightChanged) boundsInfoAfterHeight.classList.add('green'); } if (sizes.$image2?.length) { - const boundsInfoBeforeWidth = this.querySelector('.bounds-info-before .bounds-info-width'); + const boundsInfoBeforeWidth = el.querySelector('.bounds-info-before .bounds-info-width'); boundsInfoBeforeWidth.textContent = `${sizes.$image2[0].naturalWidth}px`; if (widthChanged) boundsInfoBeforeWidth.classList.add('red'); - const boundsInfoBeforeHeight = this.querySelector('.bounds-info-before .bounds-info-height'); + const boundsInfoBeforeHeight = el.querySelector('.bounds-info-before .bounds-info-height'); boundsInfoBeforeHeight.textContent = `${sizes.$image2[0].naturalHeight}px`; if (heightChanged) boundsInfoBeforeHeight.classList.add('red'); } From ecb3b1c93303f20f226c1f47fad2439ba1b16aa1 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 29 Mar 2024 12:32:16 +0000 Subject: [PATCH 6/7] Make it singular Co-authored-by: wxiaoguang --- web_src/js/features/imagediff.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 89428fa928ab2..ab3cc3142f9e3 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -116,9 +116,7 @@ export function initImageDiff() { initOverlay(createContext($imagesAfter[2], $imagesBefore[2])); } - for (const el of this.querySelectorAll(':scope > .image-diff-tabs')) { - el.classList.remove('is-loading'); - } + this.querySelector(':scope > .image-diff-tabs')?.classList.remove('is-loading'); function initSideBySide(el, sizes) { let factor = 1; From 7e657f33e268c25deb734f202a6dd6ac9a43feb8 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 29 Mar 2024 12:33:41 +0000 Subject: [PATCH 7/7] Rename el to container --- web_src/js/features/imagediff.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index ab3cc3142f9e3..192a64283473b 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -118,7 +118,7 @@ export function initImageDiff() { this.querySelector(':scope > .image-diff-tabs')?.classList.remove('is-loading'); - function initSideBySide(el, sizes) { + function initSideBySide(container, sizes) { let factor = 1; if (sizes.max.width > (diffContainerWidth - 24) / 2) { factor = (diffContainerWidth - 24) / 2 / sizes.max.width; @@ -127,21 +127,21 @@ export function initImageDiff() { 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) { - const boundsInfoAfterWidth = el.querySelector('.bounds-info-after .bounds-info-width'); + const boundsInfoAfterWidth = container.querySelector('.bounds-info-after .bounds-info-width'); boundsInfoAfterWidth.textContent = `${sizes.$image1[0].naturalWidth}px`; if (widthChanged) boundsInfoAfterWidth.classList.add('green'); - const boundsInfoAfterHeight = el.querySelector('.bounds-info-after .bounds-info-height'); + const boundsInfoAfterHeight = container.querySelector('.bounds-info-after .bounds-info-height'); boundsInfoAfterHeight.textContent = `${sizes.$image1[0].naturalHeight}px`; if (heightChanged) boundsInfoAfterHeight.classList.add('green'); } if (sizes.$image2?.length) { - const boundsInfoBeforeWidth = el.querySelector('.bounds-info-before .bounds-info-width'); + const boundsInfoBeforeWidth = container.querySelector('.bounds-info-before .bounds-info-width'); boundsInfoBeforeWidth.textContent = `${sizes.$image2[0].naturalWidth}px`; if (widthChanged) boundsInfoBeforeWidth.classList.add('red'); - const boundsInfoBeforeHeight = el.querySelector('.bounds-info-before .bounds-info-height'); + const boundsInfoBeforeHeight = container.querySelector('.bounds-info-before .bounds-info-height'); boundsInfoBeforeHeight.textContent = `${sizes.$image2[0].naturalHeight}px`; if (heightChanged) boundsInfoBeforeHeight.classList.add('red'); }