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

Replace ajax with fetch, improve image diff (#27267)

Browse source 
1. Dropzone attachment removal, pretty simple replacement
2. Image diff: The previous code fetched every image twice, once via
`img[src]` and once via `$.ajax`. Now it's only fetched once and a
second time only when necessary. The image diff code was partially
rewritten.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-10-11 14:34:21 +02:00 • committed by GitHub
parent dc04044716
commit 73b63d9311
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 96 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,14 @@
import $ from 'jquery';
import {hideElem} from '../utils/dom.js';
import {GET} from '../modules/fetch.js';
import {hideElem, loadElem} from '../utils/dom.js';
import {parseDom} from '../utils.js';
function getDefaultSvgBoundsIfUndefined(svgXml, src) {
function getDefaultSvgBoundsIfUndefined(text, src) {
const DefaultSize = 300;
const MaxSize = 99999;
const svg = svgXml.documentElement;
const svgDoc = parseDom(text, 'image/svg+xml');
const svg = svgDoc.documentElement;
const width = svg?.width?.baseVal;
const height = svg?.height?.baseVal;
if (width === undefined || height === undefined) {
@ -65,73 +68,53 @@ export function initImageDiff() {
};
}
$('.image-diff:not([data-image-diff-loaded])').each(function() {
$('.image-diff:not([data-image-diff-loaded])').each(async function() {
const $container = $(this);
$container.attr('data-image-diff-loaded', 'true');
// the container may be hidden by "viewed" checkbox, so use the parent's width for reference
const diffContainerWidth = Math.max($container.closest('.diff-file-box').width() - 300, 100);
const pathAfter = $container.data('path-after');
const pathBefore = $container.data('path-before');
const imageInfos = [{
loaded: false,
path: pathAfter,
$image: $container.find('img.image-after'),
path: this.getAttribute('data-path-after'),
mime: this.getAttribute('data-mime-after'),
$images: $container.find('img.image-after'), // matches 3 <img>
$boundsInfo: $container.find('.bounds-info-after')
}, {
loaded: false,
path: pathBefore,
$image: $container.find('img.image-before'),
path: this.getAttribute('data-path-before'),
mime: this.getAttribute('data-mime-before'),
$images: $container.find('img.image-before'), // matches 3 <img>
$boundsInfo: $container.find('.bounds-info-before')
}];
for (const info of imageInfos) {
if (info.$image.length > 0) {
$.ajax({
url: info.path,
success: (data, _, jqXHR) => {
info.$image.on('load', () => {
info.loaded = true;
setReadyIfLoaded();
}).on('error', () => {
info.loaded = true;
setReadyIfLoaded();
info.$boundsInfo.text('(image error)');
});
info.$image.attr('src', info.path);
if (jqXHR.getResponseHeader('Content-Type') === 'image/svg+xml') {
const bounds = getDefaultSvgBoundsIfUndefined(data, info.path);
if (bounds) {
info.$image.attr('width', bounds.width);
info.$image.attr('height', bounds.height);
hideElem(info.$boundsInfo);
}
}
}
});
} else {
info.loaded = true;
setReadyIfLoaded();
await Promise.all(imageInfos.map(async (info) => {
const [success] = await Promise.all(Array.from(info.$images, (img) => {
return loadElem(img, info.path);
}));
// only the first images is associated with $boundsInfo
if (!success) info.$boundsInfo.text('(image error)');
if (info.mime === 'image/svg+xml') {
const resp = await GET(info.path);
const text = await resp.text();
const bounds = getDefaultSvgBoundsIfUndefined(text, info.path);
if (bounds) {
info.$images.attr('width', bounds.width);
info.$images.attr('height', bounds.height);
hideElem(info.$boundsInfo);
}
}
}));
const $imagesAfter = imageInfos[0].$images;
const $imagesBefore = imageInfos[1].$images;
initSideBySide(createContext($imagesAfter[0], $imagesBefore[0]));
if ($imagesAfter.length > 0 && $imagesBefore.length > 0) {
initSwipe(createContext($imagesAfter[1], $imagesBefore[1]));
initOverlay(createContext($imagesAfter[2], $imagesBefore[2]));
}
function setReadyIfLoaded() {
if (imageInfos[0].loaded && imageInfos[1].loaded) {
initViews(imageInfos[0].$image, imageInfos[1].$image);
}
}
function initViews($imageAfter, $imageBefore) {
initSideBySide(createContext($imageAfter[0], $imageBefore[0]));
if ($imageAfter.length > 0 && $imageBefore.length > 0) {
initSwipe(createContext($imageAfter[1], $imageBefore[1]));
initOverlay(createContext($imageAfter[2], $imageBefore[2]));
}
$container.find('> .image-diff-tabs').removeClass('is-loading');
}
$container.find('> .image-diff-tabs').removeClass('is-loading');
function initSideBySide(sizes) {
let factor = 1;