Replace ajax with fetch, improve image diff

web_src/js/features/common-global.js

@@ -11,7 +11,7 @@ import {htmlEscape} from 'escape-goat';
 import {showTemporaryTooltip} from '../modules/tippy.js';
 import {confirmModal} from './comp/ConfirmModal.js';
 import {showErrorToast} from '../modules/toast.js';
-import {request} from '../modules/fetch.js';
+import {request, POST} from '../modules/fetch.js';
 
 const {appUrl, appSubUrl, csrfToken, i18n} = window.config;
 
@@ -243,9 +243,8 @@ export function initGlobalDropzone() {
         this.on('removedfile', (file) => {
           $(`#${file.uuid}`).remove();
           if ($dropzone.data('remove-url')) {
-            $.post($dropzone.data('remove-url'), {
-              file: file.uuid,
-              _csrf: csrfToken,
+            POST($dropzone.data('remove-url'), {
+              data: new URLSearchParams({file: file.uuid}),
             });
           }
         });

web_src/js/features/imagediff.js

@@ -1,11 +1,14 @@
 import $ from 'jquery';
+import {GET} from '../modules/fetch.js';
 import {hideElem} from '../utils/dom.js';
+import {parseUrl, parseXml} from '../utils.js';
 
-function getDefaultSvgBoundsIfUndefined(svgXml, src) {
+function getDefaultSvgBoundsIfUndefined(text, src) {
   const DefaultSize = 300;
   const MaxSize = 99999;
 
-  const svg = svgXml.documentElement;
+  const svgDoc = parseXml(text, 'image/svg+xml');
+  const svg = svgDoc.documentElement;
   const width = svg?.width?.baseVal;
   const height = svg?.height?.baseVal;
   if (width === undefined || height === undefined) {
@@ -65,7 +68,7 @@ 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');
 
@@ -88,29 +91,27 @@ export function initImageDiff() {
 
     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);
+        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);
-              }
-            }
+        // this may be dead code as we currently do not render SVGs images in image diffs
+        if (parseUrl(info.path).pathname.toLowerCase().endsWith('.svg')) {
+          const resp = await GET(info.path);
+          const text = await resp.text();
+          const bounds = getDefaultSvgBoundsIfUndefined(text, info.path);
+          if (bounds) {
+            info.$image.attr('width', bounds.width);
+            info.$image.attr('height', bounds.height);
+            hideElem(info.$boundsInfo);
           }
-        });
+        }
       } else {
         info.loaded = true;
         setReadyIfLoaded();

web_src/js/svg.js

@@ -1,4 +1,5 @@
 import {h} from 'vue';
+import {parseXml, serializeXml} from './utils.js';
 import giteaDoubleChevronLeft from '../../public/assets/img/svg/gitea-double-chevron-left.svg';
 import giteaDoubleChevronRight from '../../public/assets/img/svg/gitea-double-chevron-right.svg';
 import giteaEmptyCheckbox from '../../public/assets/img/svg/gitea-empty-checkbox.svg';
@@ -145,22 +146,19 @@ const svgs = {
 //  At the moment, developers must check, pick and fill the names manually,
 //  most of the SVG icons in assets couldn't be used directly.
 
-const parser = new DOMParser();
-const serializer = new XMLSerializer();
-
 // retrieve an HTML string for given SVG icon name, size and additional classes
 export function svg(name, size = 16, className = '') {
   if (!(name in svgs)) throw new Error(`Unknown SVG icon: ${name}`);
   if (size === 16 && !className) return svgs[name];
 
-  const document = parser.parseFromString(svgs[name], 'image/svg+xml');
+  const document = parseXml(svgs[name], 'image/svg+xml');
   const svgNode = document.firstChild;
   if (size !== 16) {
     svgNode.setAttribute('width', String(size));
     svgNode.setAttribute('height', String(size));
   }
   if (className) svgNode.classList.add(...className.split(/\s+/).filter(Boolean));
-  return serializer.serializeToString(svgNode);
+  return serializeXml(svgNode);
 }
 
 export function svgParseOuterInner(name) {
@@ -176,7 +174,7 @@ export function svgParseOuterInner(name) {
   if (p1 === -1 || p2 === -1) throw new Error(`Invalid SVG icon: ${name}`);
   const svgInnerHtml = svgStr.slice(p1 + 1, p2);
   const svgOuterHtml = svgStr.slice(0, p1 + 1) + svgStr.slice(p2);
-  const svgDoc = parser.parseFromString(svgOuterHtml, 'image/svg+xml');
+  const svgDoc = parseXml(svgOuterHtml, 'image/svg+xml');
   const svgOuter = svgDoc.firstChild;
   return {svgOuter, svgInnerHtml};
 }

web_src/js/utils.js

@@ -128,3 +128,14 @@ export function decodeURLEncodedBase64(base64url) {
     .replace(/_/g, '/')
     .replace(/-/g, '+'));
 }
+
+const parser = new DOMParser();
+const serializer = new XMLSerializer();
+
+export function parseXml(text, contentType) {
+  return parser.parseFromString(text, contentType);
+}
+
+export function serializeXml(node) {
+  return serializer.serializeToString(node);
+}