Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove remaining jQuery .css code #30015

Merged
merged 4 commits into from
Mar 24, 2024
Merged

Remove remaining jQuery .css code #30015

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
defe16b
Remove remaining jQuery .css code
silverwind Mar 23, 2024
7d05d2a
Update web_src/js/features/imagediff.js
silverwind Mar 23, 2024
1b1c88a
simplify updateOpacity
silverwind Mar 23, 2024
3c59f30
Merge branch 'main' into rmcss2
GiteaBot Mar 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 48 additions & 44 deletions web_src/js/features/imagediff.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ export function initImageDiff() {
};

return {
image1: $(image1),
image2: $(image2),
$image1: $(image1),
$image2: $(image2),
size1,
size2,
max,
Expand Down Expand Up @@ -122,18 +122,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`;
Expand All @@ -143,7 +143,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`;
Expand All @@ -160,7 +160,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;
Expand All @@ -173,7 +173,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;
Expand Down Expand Up @@ -220,38 +220,42 @@ 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
// the "css(width, height)" is somewhat hacky and not easy to understand, it could be improved in the future
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That sentence no longer applies?

Suggested change
// the "css(width, height)" is somewhat hacky and not easy to understand, it could be improved in the future

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It still applies

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Anyone looking at that code knows it's hacky 😆

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh and sorry about merging too soon.

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"]');
delvh marked this conversation as resolved.
Show resolved Hide resolved
function updateOpacity() {
const image1 = sizes.$image1[0];
if (image1) {
const container = image1.parentNode;
container.style.opacity = `${rangeInput.value / 100}`;
}
}
rangeInput?.addEventListener('input', updateOpacity);
updateOpacity();
}
});
}