git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Forbid jQuery .css and refactor all usage (#29852)

Browse source 
Tested all functionality. There is a [pre-existing
bug](https://github.com/go-gitea/gitea/issues/29853) when moving a
project panels which is not caused by this refactoring.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit fa100618c4b644346bf5666f92d33dce0747d0a2)
This commit is contained in:
silverwind 2024-03-19 17:28:46 +01:00 • committed by Earl Warren
parent 272dffb0d6
commit 8c3d7c049a
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
7 changed files with 78 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

108
web_src/js/features/imagediff.js
View file

@ -133,24 +133,25 @@ export function initImageDiff() {
$container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : '');
}
sizes.image1.css({
width: sizes.size1.width * factor,
height: sizes.size1.height * factor
});
sizes.image1.parent().css({
margin: `10px auto`,
width: sizes.size1.width * factor + 2,
height: sizes.size1.height * factor + 2
});
sizes.image2.css({
width: sizes.size2.width * factor,
height: sizes.size2.height * factor
});
sizes.image2.parent().css({
margin: `10px auto`,
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 = '10px auto';
container.style.width = `${sizes.size1.width * factor + 2}px`;
container.style.height = `${sizes.size1.height * factor + 2}px`;
}
const image2 = sizes.image2[0];
if (image2) {
const container = image2.parentNode;
image2.style.width = `${sizes.size2.width * factor}px`;
image2.style.height = `${sizes.size2.height * factor}px`;
container.style.margin = '10px auto';
container.style.width = `${sizes.size2.width * factor + 2}px`;
container.style.height = `${sizes.size2.height * factor + 2}px`;
}
}
function initSwipe(sizes) {
@ -159,36 +160,39 @@ export function initImageDiff() {
factor = (diffContainerWidth - 12) / sizes.max.width;
}
sizes.image1.css({
width: sizes.size1.width * factor,
height: sizes.size1.height * factor
});
sizes.image1.parent().css({
margin: `0px ${sizes.ratio[0] * factor}px`,
width: sizes.size1.width * factor + 2,
height: sizes.size1.height * factor + 2
});
sizes.image1.parent().parent().css({
padding: `${sizes.ratio[1] * factor}px 0 0 0`,
width: sizes.max.width * factor + 2
});
sizes.image2.css({
width: sizes.size2.width * factor,
height: sizes.size2.height * factor
});
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
});
sizes.image2.parent().parent().css({
width: sizes.max.width * factor + 2,
height: sizes.max.height * factor + 2
});
$container.find('.diff-swipe').css({
width: sizes.max.width * factor + 2,
height: sizes.max.height * factor + 30 /* extra height for inner "position: absolute" elements */,
});
const image1 = sizes.image1[0];
if (image1) {
const container = image1.parentNode;
const swipeFrame = container.parentNode;
image1.style.width = `${sizes.size1.width * factor}px`;
image1.style.height = `${sizes.size1.height * factor}px`;
container.style.margin = `0px ${sizes.ratio[0] * factor}px`;
container.style.width = `${sizes.size1.width * factor + 2}px`;
container.style.height = `${sizes.size1.height * factor + 2}px`;
swipeFrame.style.padding = `${sizes.ratio[1] * factor}px 0 0 0`;
swipeFrame.style.width = `${sizes.max.width * factor + 2}px`;
}
const image2 = sizes.image2[0];
if (image2) {
const container = image2.parentNode;
const swipeFrame = 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`;
swipeFrame.style.width = `${sizes.max.width * factor + 2}px`;
swipeFrame.style.height = `${sizes.max.height * factor + 2}px`;
}
// extra height for inner "position: absolute" elements
const swipe = $container.find('.diff-swipe')[0];
if (swipe) {
swipe.style.width = `${sizes.max.width * factor + 2}px`;
swipe.style.height = `${sizes.max.height * factor + 30}px`;
}
$container.find('.swipe-bar').on('mousedown', function(e) {
e.preventDefault();
@ -200,13 +204,9 @@ export function initImageDiff() {
e2.preventDefault();
const value = Math.max(0, Math.min(e2.clientX - $swipeFrame.offset().left, width));
$swipeBar[0].style.left = `${value}px`;
$container.find('.swipe-container')[0].style.width = `${$swipeFrame.width() - value}px`;
$swipeBar.css({
left: value
});
$container.find('.swipe-container').css({
width: $swipeFrame.width() - value
});
$(document).on('mouseup.diff-swipe', () => {
$(document).off('.diff-swipe');
});