From e4a481e0ca7e952efdf7a96ccd33f80f527d8c86 Mon Sep 17 00:00:00 2001 From: silverwind 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 Co-authored-by: Giteabot --- 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(); } }); }