tom/forkjo
tom/forkjo
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 1

Remove jQuery class from the image diff (#30140)

Browse source 
- Switched from jQuery class functions to plain JavaScript `classList`
- Tested the image diff and it works as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit 849eee8db70c8999d54350b85ea7a16fc44dc404)
This commit is contained in:
Yarden Shoham 2024-03-29 15:40:17 +03:00 committed by Gergely Nagy
parent 66f9a4ee68
commit ee33869f84
No known key found for this signature in database
1 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
web_src/js/features/imagediff.js
View file

@ -110,15 +110,15 @@ export function initImageDiff() {
const $imagesAfter = imageInfos[0].$images; const $imagesAfter = imageInfos[0].$images;
const $imagesBefore = imageInfos[1].$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) { if ($imagesAfter.length > 0 && $imagesBefore.length > 0) {
initSwipe(createContext($imagesAfter[1], $imagesBefore[1])); initSwipe(createContext($imagesAfter[1], $imagesBefore[1]));
initOverlay(createContext($imagesAfter[2], $imagesBefore[2])); initOverlay(createContext($imagesAfter[2], $imagesBefore[2]));
} }
$container.find('> .image-diff-tabs').removeClass('is-loading'); this.querySelector(':scope > .image-diff-tabs')?.classList.remove('is-loading');
function initSideBySide(sizes) { function initSideBySide(container, sizes) {
let factor = 1; let factor = 1;
if (sizes.max.width > (diffContainerWidth - 24) / 2) { if (sizes.max.width > (diffContainerWidth - 24) / 2) {
factor = (diffContainerWidth - 24) / 2 / sizes.max.width; factor = (diffContainerWidth - 24) / 2 / sizes.max.width;
@ -126,13 +126,24 @@ export function initImageDiff() {
const widthChanged = sizes.$image1.length !== 0 && sizes.$image2.length !== 0 && sizes.$image1[0].naturalWidth !== sizes.$image2[0].naturalWidth; 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; const heightChanged = sizes.$image1.length !== 0 && sizes.$image2.length !== 0 && sizes.$image1[0].naturalHeight !== sizes.$image2[0].naturalHeight;
if (sizes.$image1.length !== 0) { if (sizes.$image1?.length) {
$container.find('.bounds-info-after .bounds-info-width').text(`${sizes.$image1[0].naturalWidth}px`).addClass(widthChanged ? 'green' : ''); const boundsInfoAfterWidth = container.querySelector('.bounds-info-after .bounds-info-width');
$container.find('.bounds-info-after .bounds-info-height').text(`${sizes.$image1[0].naturalHeight}px`).addClass(heightChanged ? 'green' : ''); boundsInfoAfterWidth.textContent = `${sizes.$image1[0].naturalWidth}px`;
if (widthChanged) boundsInfoAfterWidth.classList.add('green');
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 !== 0) {
$container.find('.bounds-info-before .bounds-info-width').text(`${sizes.$image2[0].naturalWidth}px`).addClass(widthChanged ? 'red' : ''); if (sizes.$image2?.length) {
$container.find('.bounds-info-before .bounds-info-height').text(`${sizes.$image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : ''); 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 = container.querySelector('.bounds-info-before .bounds-info-height');
boundsInfoBeforeHeight.textContent = `${sizes.$image2[0].naturalHeight}px`;
if (heightChanged) boundsInfoBeforeHeight.classList.add('red');
} }
const image1 = sizes.$image1[0]; const image1 = sizes.$image1[0];