From e4a481e0ca7e952efdf7a96ccd33f80f527d8c86 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 24 Mar 2024 03:01:57 +0100
Subject: [PATCH] Remove remaining jQuery .css code (#30015)
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>
---
web_src/js/features/imagediff.js | 89 ++++++++++++++++----------------
1 file changed, 45 insertions(+), 44 deletions(-)
diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js
index d567632f5f..53bf2109ba 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,
@@ -124,18 +124,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`;
@@ -145,7 +145,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`;
@@ -162,7 +162,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;
@@ -175,7 +175,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;
@@ -222,38 +222,39 @@ 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
+ 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() {
+ if (sizes?.$image1?.[0]) {
+ sizes.$image1[0].parentNode.style.opacity = `${rangeInput.value / 100}`;
+ }
+ }
+ rangeInput?.addEventListener('input', updateOpacity);
+ updateOpacity();
}
});
}