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. 89
      web_src/js/features/imagediff.js

89
web_src/js/features/imagediff.js
Unescape View File

@ -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();
}
});
}

Write Preview
Loading…
Cancel
Save