propagate mime down to javascript

Author: silverwind

templates/repo/diff/box.tmpl

@@ -200,9 +200,9 @@
 								<div id="diff-rendered-{{$file.NameHash}}" class="file-body file-code {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}} gt-overflow-x-scroll">
 									<table class="chroma gt-w-100">
 										{{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}}
 									</table>
 								</div>

templates/repo/diff/image_diff.tmpl

@@ -1,7 +1,12 @@
 {{if or .blobBase .blobHead}}
 <tr>
 	<td colspan="2">
-		<div class="image-diff" data-path-before="{{.root.BeforeRawPath}}/{{PathEscapeSegments .file.OldName}}" data-path-after="{{.root.RawPath}}/{{PathEscapeSegments .file.Name}}">
+		<div class="image-diff"
+			data-path-before="{{.root.BeforeRawPath}}/{{PathEscapeSegments .file.OldName}}"
+			data-path-after="{{.root.RawPath}}/{{PathEscapeSegments .file.Name}}"
+			data-mime-before="{{.stBase.GetMimeType}}"
+			data-mime-after="{{.stHead.GetMimeType}}"
+		>
 			<div class="ui secondary pointing tabular top attached borderless menu new-menu">
 				<div class="new-menu-inner">
 					<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a>

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);