Skip to content

Remove remaining jQuery .css code #30015

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

Merged
merged 4 commits into from
Mar 24, 2024
Merged

Remove remaining jQuery .css code #30015

Changes from all commits
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
89 changes: 45 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 @@ -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`;
Expand All @@ -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`;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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();
}
});
}