From aeb15d999080bd8a7a567f084057bb52d7644b56 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 25 Sep 2023 23:57:00 +0200 Subject: [PATCH 01/25] Replace two cases of jQuery ajax with fetch --- web_src/js/features/common-global.js | 7 ++-- web_src/js/features/imagediff.js | 50 +++++++++++++++------------- 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index bc775ae545296..2d8289d4e33d0 100644 --- a/web_src/js/features/common-global.js +++ b/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}), }); } }); diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 23b048f295361..0c115588c4a35 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -1,11 +1,15 @@ import $ from 'jquery'; +import {GET} from '../modules/fetch.js'; import {hideElem} from '../utils/dom.js'; +import {parseUrl} from '../utils.js'; -function getDefaultSvgBoundsIfUndefined(svgXml, src) { +function getDefaultSvgBoundsIfUndefined(text, src) { const DefaultSize = 300; const MaxSize = 99999; - const svg = svgXml.documentElement; + const parser = new DOMParser(); + const svgDoc = parser.parseFromString(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 +69,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 +92,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(); From 0290d7d9d3b24e284dad620360b4b42862c60b28 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 26 Sep 2023 00:21:44 +0200 Subject: [PATCH 02/25] use shared xml functions --- web_src/js/features/imagediff.js | 5 ++--- web_src/js/svg.js | 10 ++++------ web_src/js/utils.js | 11 +++++++++++ 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 0c115588c4a35..dacc0b401c297 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -1,14 +1,13 @@ import $ from 'jquery'; import {GET} from '../modules/fetch.js'; import {hideElem} from '../utils/dom.js'; -import {parseUrl} from '../utils.js'; +import {parseUrl, parseXml} from '../utils.js'; function getDefaultSvgBoundsIfUndefined(text, src) { const DefaultSize = 300; const MaxSize = 99999; - const parser = new DOMParser(); - const svgDoc = parser.parseFromString(text, 'image/svg+xml'); + const svgDoc = parseXml(text, 'image/svg+xml'); const svg = svgDoc.documentElement; const width = svg?.width?.baseVal; const height = svg?.height?.baseVal; diff --git a/web_src/js/svg.js b/web_src/js/svg.js index 46372e7d623b9..1d31f7db73947 100644 --- a/web_src/js/svg.js +++ b/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}; } diff --git a/web_src/js/utils.js b/web_src/js/utils.js index 1b701e1c6a53f..01bf27ce020a2 100644 --- a/web_src/js/utils.js +++ b/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); +} From a4717dd0c77425d308229dc6f5fba3eb1871c200 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 29 Sep 2023 20:08:03 +0200 Subject: [PATCH 03/25] rename to parseDom --- web_src/js/features/imagediff.js | 4 ++-- web_src/js/svg.js | 6 +++--- web_src/js/utils.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index dacc0b401c297..a7c9a11fce804 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -1,13 +1,13 @@ import $ from 'jquery'; import {GET} from '../modules/fetch.js'; import {hideElem} from '../utils/dom.js'; -import {parseUrl, parseXml} from '../utils.js'; +import {parseUrl, parseDom} from '../utils.js'; function getDefaultSvgBoundsIfUndefined(text, src) { const DefaultSize = 300; const MaxSize = 99999; - const svgDoc = parseXml(text, 'image/svg+xml'); + const svgDoc = parseDom(text, 'image/svg+xml'); const svg = svgDoc.documentElement; const width = svg?.width?.baseVal; const height = svg?.height?.baseVal; diff --git a/web_src/js/svg.js b/web_src/js/svg.js index 1d31f7db73947..c2a96fba3f040 100644 --- a/web_src/js/svg.js +++ b/web_src/js/svg.js @@ -1,5 +1,5 @@ import {h} from 'vue'; -import {parseXml, serializeXml} from './utils.js'; +import {parseDom, 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'; @@ -151,7 +151,7 @@ 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 = parseXml(svgs[name], 'image/svg+xml'); + const document = parseDom(svgs[name], 'image/svg+xml'); const svgNode = document.firstChild; if (size !== 16) { svgNode.setAttribute('width', String(size)); @@ -174,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 = parseXml(svgOuterHtml, 'image/svg+xml'); + const svgDoc = parseDom(svgOuterHtml, 'image/svg+xml'); const svgOuter = svgDoc.firstChild; return {svgOuter, svgInnerHtml}; } diff --git a/web_src/js/utils.js b/web_src/js/utils.js index 01bf27ce020a2..f5a3f21d05d73 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -132,7 +132,7 @@ export function decodeURLEncodedBase64(base64url) { const parser = new DOMParser(); const serializer = new XMLSerializer(); -export function parseXml(text, contentType) { +export function parseDom(text, contentType) { return parser.parseFromString(text, contentType); } From 18c0b39c6909d36f9772de66ea99d285bb26bf9b Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 29 Sep 2023 20:08:33 +0200 Subject: [PATCH 04/25] rename vars --- web_src/js/utils.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web_src/js/utils.js b/web_src/js/utils.js index f5a3f21d05d73..c82e42d349045 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -129,13 +129,13 @@ export function decodeURLEncodedBase64(base64url) { .replace(/-/g, '+')); } -const parser = new DOMParser(); -const serializer = new XMLSerializer(); +const domParser = new DOMParser(); +const xmlSerializer = new XMLSerializer(); export function parseDom(text, contentType) { - return parser.parseFromString(text, contentType); + return domParser.parseFromString(text, contentType); } export function serializeXml(node) { - return serializer.serializeToString(node); + return xmlSerializer.serializeToString(node); } From b4217d4ed827b8d92952ec94f45f2199a4caa209 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 29 Sep 2023 20:20:21 +0200 Subject: [PATCH 05/25] remove comment --- web_src/js/features/imagediff.js | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index a7c9a11fce804..78b852c55880a 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -101,7 +101,6 @@ export function initImageDiff() { }); info.$image.attr('src', info.path); - // 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(); From 8039365c48961873ded8a37406a3450291c463f0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Oct 2023 20:28:17 +0200 Subject: [PATCH 06/25] make SniffedType accessible in diff --- routers/web/repo/compare.go | 27 +++++++++++++++++---------- templates/repo/diff/box.tmpl | 4 +++- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/routers/web/repo/compare.go b/routers/web/repo/compare.go index ecc8e66702b6f..8519a71eedc29 100644 --- a/routers/web/repo/compare.go +++ b/routers/web/repo/compare.go @@ -34,6 +34,7 @@ import ( api "code.gitea.io/gitea/modules/structs" "code.gitea.io/gitea/modules/upload" "code.gitea.io/gitea/modules/util" + "code.gitea.io/gitea/modules/typesniffer" "code.gitea.io/gitea/services/gitdiff" ) @@ -60,6 +61,21 @@ func setCompareContext(ctx *context.Context, before, head *git.Commit, headOwner return blob } + ctx.Data["GetSniffedTypeForBlob"] = func(blob *git.Blob) typesniffer.SniffedType { + st := typesniffer.SniffedType{} + + if blob == nil { + return st + } + + st, err := blob.GuessContentType() + if err != nil { + log.Error("GuessContentType failed: %v", err) + return st + } + return st + } + setPathsCompareContext(ctx, before, head, headOwner, headName) setImageCompareContext(ctx) setCsvCompareContext(ctx) @@ -87,16 +103,7 @@ func setPathsCompareContext(ctx *context.Context, base, head *git.Commit, headOw // setImageCompareContext sets context data that is required by image compare template func setImageCompareContext(ctx *context.Context) { - ctx.Data["IsBlobAnImage"] = func(blob *git.Blob) bool { - if blob == nil { - return false - } - - st, err := blob.GuessContentType() - if err != nil { - log.Error("GuessContentType failed: %v", err) - return false - } + ctx.Data["IsSniffedTypeImage"] = func(st typesniffer.SniffedType) bool { return st.IsImage() && (setting.UI.SVG.Enabled || !st.IsSvgImage()) } } diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 94a5a9a295894..b7133025bdafc 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -97,7 +97,9 @@ {{/*notice: the index of Diff.Files should not be used for element ID, because the index will be restarted from 0 when doing load-more for PRs with a lot of files*/}} {{$blobBase := call $.GetBlobByPathForCommit $.BeforeCommit $file.OldName}} {{$blobHead := call $.GetBlobByPathForCommit $.HeadCommit $file.Name}} - {{$isImage := or (call $.IsBlobAnImage $blobBase) (call $.IsBlobAnImage $blobHead)}} + {{$stBase := call $.GetSniffedTypeForBlob $blobBase}} + {{$stHead := call $.GetSniffedTypeForBlob $blobHead}} + {{$isImage:= or (call $.IsSniffedTypeImage $stBase) (call $.IsSniffedTypeImage $stHead)}} {{$isCsv := (call $.IsCsvFile $file)}} {{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}} {{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}} From 9ae1c4a2212d5b2bc87507ed513cc027eaacefe7 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Oct 2023 20:39:12 +0200 Subject: [PATCH 07/25] propagate mime down to javascript --- templates/repo/diff/box.tmpl | 4 ++-- templates/repo/diff/image_diff.tmpl | 7 ++++++- web_src/js/features/imagediff.js | 10 +++++----- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index b7133025bdafc..d8d35bbcce4c5 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -200,9 +200,9 @@
{{if $isImage}} - {{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}} + {{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead "stBase" $stBase "stHead" $stHead}} {{else}} - {{template "repo/diff/csv_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}} + {{template "repo/diff/csv_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead "stBase" $stBase "stHead" $stHead}} {{end}}
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index 8abce9479e15d..6be4c5dd670b5 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -1,7 +1,12 @@ {{if or .blobBase .blobHead}} -
+
{{ctx.Locale.Tr "repo.diff.image.side_by_side"}} diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 78b852c55880a..fd31d05a41740 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -74,17 +74,17 @@ export function initImageDiff() { // 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, + path: this.getAttribute('data-path-after'), + mime: this.getAttribute('data-mime-after'), $image: $container.find('img.image-after'), $boundsInfo: $container.find('.bounds-info-after') }, { loaded: false, - path: pathBefore, + path: this.getAttribute('data-path-before'), + mime: this.getAttribute('data-mime-before'), $image: $container.find('img.image-before'), $boundsInfo: $container.find('.bounds-info-before') }]; @@ -101,7 +101,7 @@ export function initImageDiff() { }); info.$image.attr('src', info.path); - if (parseUrl(info.path).pathname.toLowerCase().endsWith('.svg')) { + if (info.mime === 'image/svg+xml') { const resp = await GET(info.path); const text = await resp.text(); const bounds = getDefaultSvgBoundsIfUndefined(text, info.path); From 69d41a2350b85ad0a018f12af285fb5671225980 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Oct 2023 20:42:51 +0200 Subject: [PATCH 08/25] fix lint --- web_src/js/features/imagediff.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index fd31d05a41740..b363435b0f0d9 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import {GET} from '../modules/fetch.js'; import {hideElem} from '../utils/dom.js'; -import {parseUrl, parseDom} from '../utils.js'; +import {parseDom} from '../utils.js'; function getDefaultSvgBoundsIfUndefined(text, src) { const DefaultSize = 300; From 34a862c745c3a3ae8f657fba1bb4bf1025329819 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Oct 2023 20:47:25 +0200 Subject: [PATCH 09/25] use previous function naming style --- routers/web/repo/compare.go | 2 +- templates/repo/diff/box.tmpl | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/routers/web/repo/compare.go b/routers/web/repo/compare.go index 8519a71eedc29..d84a04d9f82e5 100644 --- a/routers/web/repo/compare.go +++ b/routers/web/repo/compare.go @@ -103,7 +103,7 @@ func setPathsCompareContext(ctx *context.Context, base, head *git.Commit, headOw // setImageCompareContext sets context data that is required by image compare template func setImageCompareContext(ctx *context.Context) { - ctx.Data["IsSniffedTypeImage"] = func(st typesniffer.SniffedType) bool { + ctx.Data["IsSniffedTypeAnImage"] = func(st typesniffer.SniffedType) bool { return st.IsImage() && (setting.UI.SVG.Enabled || !st.IsSvgImage()) } } diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index d8d35bbcce4c5..0a97bf979c258 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -99,7 +99,7 @@ {{$blobHead := call $.GetBlobByPathForCommit $.HeadCommit $file.Name}} {{$stBase := call $.GetSniffedTypeForBlob $blobBase}} {{$stHead := call $.GetSniffedTypeForBlob $blobHead}} - {{$isImage:= or (call $.IsSniffedTypeImage $stBase) (call $.IsSniffedTypeImage $stHead)}} + {{$isImage:= or (call $.IsSniffedTypeAnImage $stBase) (call $.IsSniffedAnTypeImage $stHead)}} {{$isCsv := (call $.IsCsvFile $file)}} {{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}} {{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}} From eb064c479979880af6ea2a80b67fc7bcbe95a29d Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Oct 2023 20:48:30 +0200 Subject: [PATCH 10/25] fix name --- templates/repo/diff/box.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 0a97bf979c258..c6a98c3d6a894 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -99,7 +99,7 @@ {{$blobHead := call $.GetBlobByPathForCommit $.HeadCommit $file.Name}} {{$stBase := call $.GetSniffedTypeForBlob $blobBase}} {{$stHead := call $.GetSniffedTypeForBlob $blobHead}} - {{$isImage:= or (call $.IsSniffedTypeAnImage $stBase) (call $.IsSniffedAnTypeImage $stHead)}} + {{$isImage:= or (call $.IsSniffedTypeAnImage $stBase) (call $.IsSniffedTypeAnImage $stHead)}} {{$isCsv := (call $.IsCsvFile $file)}} {{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}} {{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}} From 94a6485b99075d536be2ddcfb74b989c013da97a Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Oct 2023 20:56:34 +0200 Subject: [PATCH 11/25] fmt --- routers/web/repo/compare.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/routers/web/repo/compare.go b/routers/web/repo/compare.go index d84a04d9f82e5..52bc81060a14c 100644 --- a/routers/web/repo/compare.go +++ b/routers/web/repo/compare.go @@ -32,9 +32,9 @@ import ( "code.gitea.io/gitea/modules/markup" "code.gitea.io/gitea/modules/setting" api "code.gitea.io/gitea/modules/structs" + "code.gitea.io/gitea/modules/typesniffer" "code.gitea.io/gitea/modules/upload" "code.gitea.io/gitea/modules/util" - "code.gitea.io/gitea/modules/typesniffer" "code.gitea.io/gitea/services/gitdiff" ) From c83a48e38e4ac55a403db3b7efdd8edb5456b439 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Oct 2023 22:21:43 +0200 Subject: [PATCH 12/25] rewrite image loading --- web_src/js/features/imagediff.js | 93 +++++++++++++++++--------------- 1 file changed, 51 insertions(+), 42 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index b363435b0f0d9..5cd36341f85a8 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -38,6 +38,39 @@ function getDefaultSvgBoundsIfUndefined(text, src) { return null; } +async function handleSvgSize(info) { + 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); + } + } +} + +function loadImage(el, src) { + return new Promise((resolve) => { + if (!el) resolve(); + + function onLoad({target}) { + if (target === el) resolve(); + el.removeEventListener('load', onLoad); + } + + function onError({target}) { + if (target === el) resolve(true); + el.removeEventListener('error', onError); + } + + el.addEventListener('load', onLoad); + el.addEventListener('error', onError); + el.src = src; + }); +} + export function initImageDiff() { function createContext(image1, image2) { const size1 = { @@ -76,63 +109,39 @@ export function initImageDiff() { const diffContainerWidth = Math.max($container.closest('.diff-file-box').width() - 300, 100); const imageInfos = [{ - loaded: false, path: this.getAttribute('data-path-after'), mime: this.getAttribute('data-mime-after'), - $image: $container.find('img.image-after'), + $images: $container.find('img.image-after'), // matches 3 $boundsInfo: $container.find('.bounds-info-after') }, { - loaded: false, path: this.getAttribute('data-path-before'), mime: this.getAttribute('data-mime-before'), - $image: $container.find('img.image-before'), + $images: $container.find('img.image-before'), // matches 3 $boundsInfo: $container.find('.bounds-info-before') }]; - for (const info of imageInfos) { - if (info.$image.length > 0) { - 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 (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.$image.attr('width', bounds.width); - info.$image.attr('height', bounds.height); - hideElem(info.$boundsInfo); - } - } + await Promise.all(imageInfos.map(async (info) => { + const [hadError] = await Promise.all(Array.from(info.$images, (img) => { + return loadImage(img, info.path); + })); + if (hadError) { + info.$boundsInfo.text('(image error)'); } else { - info.loaded = true; - setReadyIfLoaded(); - } - } - - function setReadyIfLoaded() { - if (imageInfos[0].loaded && imageInfos[1].loaded) { - initViews(imageInfos[0].$image, imageInfos[1].$image); + await handleSvgSize(info); } - } + })); - 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])); - } + const $imagesAfter = imageInfos[0].$images; + const $imagesBefore = imageInfos[1].$images; - $container.find('> .image-diff-tabs').removeClass('is-loading'); + 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])); } + $container.find('> .image-diff-tabs').removeClass('is-loading'); + function initSideBySide(sizes) { let factor = 1; if (sizes.max.width > (diffContainerWidth - 24) / 2) { From e967cb450b5f6d328f74c0d25559513d65c9ddd8 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Oct 2023 22:24:59 +0200 Subject: [PATCH 13/25] invert return value --- web_src/js/features/imagediff.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 5cd36341f85a8..ee37bbc285544 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -53,15 +53,15 @@ async function handleSvgSize(info) { function loadImage(el, src) { return new Promise((resolve) => { - if (!el) resolve(); + if (!el) resolve(true); function onLoad({target}) { - if (target === el) resolve(); + if (target === el) resolve(true); el.removeEventListener('load', onLoad); } function onError({target}) { - if (target === el) resolve(true); + if (target === el) resolve(false); el.removeEventListener('error', onError); } @@ -121,13 +121,13 @@ export function initImageDiff() { }]; await Promise.all(imageInfos.map(async (info) => { - const [hadError] = await Promise.all(Array.from(info.$images, (img) => { + const [success] = await Promise.all(Array.from(info.$images, (img) => { return loadImage(img, info.path); })); - if (hadError) { - info.$boundsInfo.text('(image error)'); - } else { + if (success) { await handleSvgSize(info); + } else { + info.$boundsInfo.text('(image error)'); } })); From f5f72f436ef9bf8fcbb26013f24b62e173bafd0a Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Oct 2023 22:56:36 +0200 Subject: [PATCH 14/25] move loadImage into utils/dom.js --- web_src/js/features/imagediff.js | 23 ++--------------------- web_src/js/utils/dom.js | 22 ++++++++++++++++++++++ 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index ee37bbc285544..bb40ef1636f9d 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -1,6 +1,6 @@ import $ from 'jquery'; import {GET} from '../modules/fetch.js'; -import {hideElem} from '../utils/dom.js'; +import {hideElem, loadImage} from '../utils/dom.js'; import {parseDom} from '../utils.js'; function getDefaultSvgBoundsIfUndefined(text, src) { @@ -51,26 +51,6 @@ async function handleSvgSize(info) { } } -function loadImage(el, src) { - return new Promise((resolve) => { - if (!el) resolve(true); - - function onLoad({target}) { - if (target === el) resolve(true); - el.removeEventListener('load', onLoad); - } - - function onError({target}) { - if (target === el) resolve(false); - el.removeEventListener('error', onError); - } - - el.addEventListener('load', onLoad); - el.addEventListener('error', onError); - el.src = src; - }); -} - export function initImageDiff() { function createContext(image1, image2) { const size1 = { @@ -122,6 +102,7 @@ export function initImageDiff() { await Promise.all(imageInfos.map(async (info) => { const [success] = await Promise.all(Array.from(info.$images, (img) => { + if (!img) return true; return loadImage(img, info.path); })); if (success) { diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index cdc52b1a74258..965e6119cd7a1 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -183,3 +183,25 @@ export function autosize(textarea, {viewportMarginBottom = 0} = {}) { export function onInputDebounce(fn) { return debounce(300, fn); } + +/** + * Load a image into a element. Promise resolves when it's done loading. + * @param {Node} el - A node + * @param {string} src - A source URL + * @returns {Promise} success - Whether an error has occured during loading + */ +export function loadImage(el, src) { + return new Promise((resolve) => { + function onLoad({target}) { + if (target === el) resolve(true); + el.removeEventListener('load', onLoad); + } + function onError({target}) { + if (target === el) resolve(false); + el.removeEventListener('error', onError); + } + el.addEventListener('load', onLoad); + el.addEventListener('error', onError); + el.src = src; + }); +} From e42dfb88aace9fef47fe1b51bef519a9d8229311 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 2 Oct 2023 22:57:19 +0200 Subject: [PATCH 15/25] improve doc --- web_src/js/utils/dom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index 965e6119cd7a1..c88543125ab93 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -188,7 +188,7 @@ export function onInputDebounce(fn) { * Load a image into a element. Promise resolves when it's done loading. * @param {Node} el - A node * @param {string} src - A source URL - * @returns {Promise} success - Whether an error has occured during loading + * @returns {Promise} success - Whether the loading was successful */ export function loadImage(el, src) { return new Promise((resolve) => { From c6ac19e942e77882c9785b26b20da18a75af1378 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 3 Oct 2023 01:13:24 +0200 Subject: [PATCH 16/25] rename to loadElement, remove unnecessary target check --- web_src/js/features/imagediff.js | 4 ++-- web_src/js/utils/dom.js | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index bb40ef1636f9d..a04d1e107df0c 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -1,6 +1,6 @@ import $ from 'jquery'; import {GET} from '../modules/fetch.js'; -import {hideElem, loadImage} from '../utils/dom.js'; +import {hideElem, loadElement} from '../utils/dom.js'; import {parseDom} from '../utils.js'; function getDefaultSvgBoundsIfUndefined(text, src) { @@ -103,7 +103,7 @@ export function initImageDiff() { await Promise.all(imageInfos.map(async (info) => { const [success] = await Promise.all(Array.from(info.$images, (img) => { if (!img) return true; - return loadImage(img, info.path); + return loadElement(img, info.path); })); if (success) { await handleSvgSize(info); diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index c88543125ab93..a1d8c0446b24e 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -185,19 +185,19 @@ export function onInputDebounce(fn) { } /** - * Load a image into a element. Promise resolves when it's done loading. + * Set the `src` attribute on an element and returns a promise that resolves once it's loaded. * @param {Node} el - A node * @param {string} src - A source URL * @returns {Promise} success - Whether the loading was successful */ -export function loadImage(el, src) { +export function loadElement(el, src) { return new Promise((resolve) => { - function onLoad({target}) { - if (target === el) resolve(true); + function onLoad() { + resolve(true); el.removeEventListener('load', onLoad); } - function onError({target}) { - if (target === el) resolve(false); + function onError() { + resolve(false); el.removeEventListener('error', onError); } el.addEventListener('load', onLoad); From f996bc5e556164497f74f68f1d1963f9c8e7d022 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 3 Oct 2023 01:16:53 +0200 Subject: [PATCH 17/25] doc --- web_src/js/utils/dom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index a1d8c0446b24e..16afa8583a5d6 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -186,7 +186,7 @@ export function onInputDebounce(fn) { /** * Set the `src` attribute on an element and returns a promise that resolves once it's loaded. - * @param {Node} el - A node + * @param {Node} el - A DOM node that has a `load` event * @param {string} src - A source URL * @returns {Promise} success - Whether the loading was successful */ From acacbca3d01804ee9d9be2b47fe184584ae1d3c0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 3 Oct 2023 01:17:49 +0200 Subject: [PATCH 18/25] rename --- web_src/js/features/imagediff.js | 4 ++-- web_src/js/utils/dom.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index a04d1e107df0c..e57928325bb34 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -1,6 +1,6 @@ import $ from 'jquery'; import {GET} from '../modules/fetch.js'; -import {hideElem, loadElement} from '../utils/dom.js'; +import {hideElem, loadElem} from '../utils/dom.js'; import {parseDom} from '../utils.js'; function getDefaultSvgBoundsIfUndefined(text, src) { @@ -103,7 +103,7 @@ export function initImageDiff() { await Promise.all(imageInfos.map(async (info) => { const [success] = await Promise.all(Array.from(info.$images, (img) => { if (!img) return true; - return loadElement(img, info.path); + return loadElem(img, info.path); })); if (success) { await handleSvgSize(info); diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index 16afa8583a5d6..6cfb9f212a2c3 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -190,7 +190,7 @@ export function onInputDebounce(fn) { * @param {string} src - A source URL * @returns {Promise} success - Whether the loading was successful */ -export function loadElement(el, src) { +export function loadElem(el, src) { return new Promise((resolve) => { function onLoad() { resolve(true); From 4c0212ae0d75f20b6d05684c112167a9ef1f2998 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 3 Oct 2023 22:09:46 +0200 Subject: [PATCH 19/25] rename vars to sniffedType --- templates/repo/diff/box.tmpl | 10 +++++----- templates/repo/diff/image_diff.tmpl | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index c6a98c3d6a894..289ed90d3fd3f 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -97,9 +97,9 @@ {{/*notice: the index of Diff.Files should not be used for element ID, because the index will be restarted from 0 when doing load-more for PRs with a lot of files*/}} {{$blobBase := call $.GetBlobByPathForCommit $.BeforeCommit $file.OldName}} {{$blobHead := call $.GetBlobByPathForCommit $.HeadCommit $file.Name}} - {{$stBase := call $.GetSniffedTypeForBlob $blobBase}} - {{$stHead := call $.GetSniffedTypeForBlob $blobHead}} - {{$isImage:= or (call $.IsSniffedTypeAnImage $stBase) (call $.IsSniffedTypeAnImage $stHead)}} + {{$sniffedTypeBase := call $.GetSniffedTypeForBlob $blobBase}} + {{$sniffedTypeHead := call $.GetSniffedTypeForBlob $blobHead}} + {{$isImage:= or (call $.IsSniffedTypeAnImage $sniffedTypeBase) (call $.IsSniffedTypeAnImage $sniffedTypeHead)}} {{$isCsv := (call $.IsCsvFile $file)}} {{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}} {{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}} @@ -200,9 +200,9 @@
{{if $isImage}} - {{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead "stBase" $stBase "stHead" $stHead}} + {{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead "sniffedTypeBase" $sniffedTypeBase "sniffedTypeHead" $sniffedTypeHead}} {{else}} - {{template "repo/diff/csv_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead "stBase" $stBase "stHead" $stHead}} + {{template "repo/diff/csv_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead "sniffedTypeBase" $sniffedTypeBase "sniffedTypeHead" $sniffedTypeHead}} {{end}}
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index 6be4c5dd670b5..02cca784f6760 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -4,8 +4,8 @@
From cc8721fdd59a43e5c1ede2eb10ff069778976e8a Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 3 Oct 2023 22:21:18 +0200 Subject: [PATCH 20/25] always call handleSvgSize, inline handleSvgSize again --- web_src/js/features/imagediff.js | 28 +++++++++++----------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index e57928325bb34..752b1cd6406dd 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -38,19 +38,6 @@ function getDefaultSvgBoundsIfUndefined(text, src) { return null; } -async function handleSvgSize(info) { - 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); - } - } -} - export function initImageDiff() { function createContext(image1, image2) { const size1 = { @@ -105,10 +92,17 @@ export function initImageDiff() { if (!img) return true; return loadElem(img, info.path); })); - if (success) { - await handleSvgSize(info); - } else { - info.$boundsInfo.text('(image error)'); + // 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); + } } })); From 31a7de8304086b4bba6f5ea4441f6886d41a4b0c Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 3 Oct 2023 23:09:43 +0200 Subject: [PATCH 21/25] use regular comment and add mdn link --- web_src/js/utils/dom.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index 6cfb9f212a2c3..e8ab6e4638c9d 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -184,12 +184,9 @@ export function onInputDebounce(fn) { return debounce(300, fn); } -/** - * Set the `src` attribute on an element and returns a promise that resolves once it's loaded. - * @param {Node} el - A DOM node that has a `load` event - * @param {string} src - A source URL - * @returns {Promise} success - Whether the loading was successful - */ +// Set the `src` attribute on an element and returns a promise that resolves once the element +// has loaded. Suitable for all elements mention in: +// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event export function loadElem(el, src) { return new Promise((resolve) => { function onLoad() { From 126c027d5b0af9b432b1c28a069d23da3f1708d6 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 3 Oct 2023 23:14:04 +0200 Subject: [PATCH 22/25] small refactor --- web_src/js/features/imagediff.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 752b1cd6406dd..a6df0e1137dca 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -89,8 +89,7 @@ export function initImageDiff() { await Promise.all(imageInfos.map(async (info) => { const [success] = await Promise.all(Array.from(info.$images, (img) => { - if (!img) return true; - return loadElem(img, info.path); + return !img ? true : loadElem(img, info.path); })); // only the first images is associated with $boundsInfo if (!success) info.$boundsInfo.text('(image error)'); From 6c3544cd35be6923111e086056e59ec962e9dcb9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 3 Oct 2023 23:17:05 +0200 Subject: [PATCH 23/25] small refactor in request --- web_src/js/modules/fetch.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/web_src/js/modules/fetch.js b/web_src/js/modules/fetch.js index 9fccf4a81ef5d..b3529d27fcfa1 100644 --- a/web_src/js/modules/fetch.js +++ b/web_src/js/modules/fetch.js @@ -11,9 +11,7 @@ const safeMethods = new Set(['GET', 'HEAD', 'OPTIONS', 'TRACE']); export function request(url, {method = 'GET', headers = {}, data, body, ...other} = {}) { let contentType; if (!body) { - if (data instanceof FormData) { - body = data; - } else if (data instanceof URLSearchParams) { + if (data instanceof FormData || data instanceof URLSearchParams) { body = data; } else if (isObject(data) || Array.isArray(data)) { contentType = 'application/json'; From 12b49b5ff4a75863b7ad098e94c7bed97f375f5a Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 9 Oct 2023 20:23:43 +0200 Subject: [PATCH 24/25] remove dead condition --- web_src/js/features/imagediff.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index a6df0e1137dca..80b7e83385cc7 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -89,7 +89,7 @@ export function initImageDiff() { await Promise.all(imageInfos.map(async (info) => { const [success] = await Promise.all(Array.from(info.$images, (img) => { - return !img ? true : loadElem(img, info.path); + return loadElem(img, info.path); })); // only the first images is associated with $boundsInfo if (!success) info.$boundsInfo.text('(image error)'); From d34ba3a5019af3dab01104c3e43ca1d10afe6bf4 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 11 Oct 2023 13:35:15 +0200 Subject: [PATCH 25/25] use once parameter on addEventListener --- web_src/js/utils/dom.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index e8ab6e4638c9d..403933883ad23 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -185,20 +185,12 @@ export function onInputDebounce(fn) { } // Set the `src` attribute on an element and returns a promise that resolves once the element -// has loaded. Suitable for all elements mention in: +// has loaded or errored. Suitable for all elements mention in: // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event export function loadElem(el, src) { return new Promise((resolve) => { - function onLoad() { - resolve(true); - el.removeEventListener('load', onLoad); - } - function onError() { - resolve(false); - el.removeEventListener('error', onError); - } - el.addEventListener('load', onLoad); - el.addEventListener('error', onError); + el.addEventListener('load', () => resolve(true), {once: true}); + el.addEventListener('error', () => resolve(false), {once: true}); el.src = src; }); }