finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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 $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]));
}
$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;
if (sizes.max.width > (diffContainerWidth - 24) / 2) {
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 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?.length) {
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 = 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' : '');
$container.find('.bounds-info-before .bounds-info-height').text(`${sizes.$image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : '');
if (sizes.$image2?.length) {
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];