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

Remove remaining jQuery .css code (#30015)

Browse source 
The linter missed these because they were set on a object. Tested and I
also renamed those properties to add `$` indicating a jQuery selection.

---------

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit e4a481e0ca7e952efdf7a96ccd33f80f527d8c86)
This commit is contained in:
silverwind 2024-03-24 03:01:57 +01:00 committed by Earl Warren
parent a9a2f5200b
commit 1ac099cf0f
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
1 changed files with 45 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -54,8 +54,8 @@ export function initImageDiff() {
}; };
return { return {
image1: $(image1), $image1: $(image1),
image2: $(image2), $image2: $(image2),
size1, size1,
size2, size2,
max, max,
@ -124,18 +124,18 @@ export function initImageDiff() {
factor = (diffContainerWidth - 24) / 2 / sizes.max.width; 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 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 !== 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-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' : ''); $container.find('.bounds-info-after .bounds-info-height').text(`${sizes.$image1[0].naturalHeight}px`).addClass(heightChanged ? 'green' : '');
} }
if (sizes.image2.length !== 0) { 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-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' : ''); $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) { if (image1) {
const container = image1.parentNode; const container = image1.parentNode;
image1.style.width = `${sizes.size1.width * factor}px`; image1.style.width = `${sizes.size1.width * factor}px`;
@ -145,7 +145,7 @@ export function initImageDiff() {
container.style.height = `${sizes.size1.height * factor + 2}px`; container.style.height = `${sizes.size1.height * factor + 2}px`;
} }
const image2 = sizes.image2[0]; const image2 = sizes.$image2[0];
if (image2) { if (image2) {
const container = image2.parentNode; const container = image2.parentNode;
image2.style.width = `${sizes.size2.width * factor}px`; image2.style.width = `${sizes.size2.width * factor}px`;
@ -162,7 +162,7 @@ export function initImageDiff() {
factor = (diffContainerWidth - 12) / sizes.max.width; factor = (diffContainerWidth - 12) / sizes.max.width;
} }
const image1 = sizes.image1[0]; const image1 = sizes.$image1[0];
if (image1) { if (image1) {
const container = image1.parentNode; const container = image1.parentNode;
const swipeFrame = container.parentNode; const swipeFrame = container.parentNode;
@ -175,7 +175,7 @@ export function initImageDiff() {
swipeFrame.style.width = `${sizes.max.width * factor + 2}px`; swipeFrame.style.width = `${sizes.max.width * factor + 2}px`;
} }
const image2 = sizes.image2[0]; const image2 = sizes.$image2[0];
if (image2) { if (image2) {
const container = image2.parentNode; const container = image2.parentNode;
const swipeFrame = container.parentNode; const swipeFrame = container.parentNode;
@ -222,38 +222,39 @@ export function initImageDiff() {
factor = (diffContainerWidth - 12) / sizes.max.width; factor = (diffContainerWidth - 12) / sizes.max.width;
} }
sizes.image1.css({ const image1 = sizes.$image1[0];
width: sizes.size1.width * factor, if (image1) {
height: sizes.size1.height * factor, const container = image1.parentNode;
}); image1.style.width = `${sizes.size1.width * factor}px`;
sizes.image2.css({ image1.style.height = `${sizes.size1.height * factor}px`;
width: sizes.size2.width * factor, container.style.margin = `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`;
height: sizes.size2.height * factor, container.style.width = `${sizes.size1.width * factor + 2}px`;
}); container.style.height = `${sizes.size1.height * factor + 2}px`;
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,
});
// some inner elements are `position: absolute`, so the container's height must be large enough const image2 = sizes.$image2[0];
// the "css(width, height)" is somewhat hacky and not easy to understand, it could be improved in the future if (image2) {
sizes.image2.parent().parent().css({ const container = image2.parentNode;
width: sizes.max.width * factor + 2, const overlayFrame = container.parentNode;
height: sizes.max.height * factor + 2, 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']"); // some inner elements are `position: absolute`, so the container's height must be large enough
const onInput = () => sizes.image1.parent().css({ overlayFrame.style.width = `${sizes.max.width * factor + 2}px`;
opacity: $range.val() / 100, overlayFrame.style.height = `${sizes.max.height * factor + 2}px`;
}); }
$range.on('input', onInput);
onInput(); const rangeInput = $container[0].querySelector('input[type="range"]');
function updateOpacity() {
if (sizes?.$image1?.[0]) {
sizes.$image1[0].parentNode.style.opacity = `${rangeInput.value / 100}`;
}
}
rangeInput?.addEventListener('input', updateOpacity);
updateOpacity();
} }
}); });
} }