mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases 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>
pull/29998/head
silverwind 8 months ago committed by GitHub
parent e3e08dcc51
commit e4a481e0ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 45 additions and 44 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 87
      web_src/js/features/imagediff.js

87
web_src/js/features/imagediff.js
Unescape 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, const image2 = sizes.$image2[0];
height: sizes.size1.height * factor + 2, if (image2) {
}); const container = image2.parentNode;
sizes.image2.parent().css({ const overlayFrame = container.parentNode;
margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, image2.style.width = `${sizes.size2.width * factor}px`;
width: sizes.size2.width * factor + 2, image2.style.height = `${sizes.size2.height * factor}px`;
height: sizes.size2.height * factor + 2, 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`;
// some inner elements are `position: absolute`, so the container's height must be large enough // 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 overlayFrame.style.width = `${sizes.max.width * factor + 2}px`;
sizes.image2.parent().parent().css({ overlayFrame.style.height = `${sizes.max.height * factor + 2}px`;
width: sizes.max.width * factor + 2, }
height: sizes.max.height * factor + 2,
});
const $range = $container.find("input[type='range']"); const rangeInput = $container[0].querySelector('input[type="range"]');
const onInput = () => sizes.image1.parent().css({ function updateOpacity() {
opacity: $range.val() / 100, if (sizes?.$image1?.[0]) {
}); sizes.$image1[0].parentNode.style.opacity = `${rangeInput.value / 100}`;
$range.on('input', onInput); }
onInput(); }
rangeInput?.addEventListener('input', updateOpacity);
updateOpacity();
} }
}); });
} }

Write Preview
Loading…
Cancel
Save