From efcba9b011b328a425d8b2c8d9f2273bfbaa7340 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 16 Nov 2020 00:50:06 +0100
Subject: [PATCH] Render diff stats server-side (#13579)

Eliminates a flash on page load on the diff stat bars.
---
 modules/templates/helper.go    |  3 +++
 templates/repo/diff/box.tmpl   | 21 +++------------------
 templates/repo/diff/stats.tmpl |  6 ++++++
 web_src/js/index.js            | 11 -----------
 4 files changed, 12 insertions(+), 29 deletions(-)
 create mode 100644 templates/repo/diff/stats.tmpl

diff --git a/modules/templates/helper.go b/modules/templates/helper.go
index e4107dfa9..e1c5d5d86 100644
--- a/modules/templates/helper.go
+++ b/modules/templates/helper.go
@@ -208,6 +208,9 @@ func NewFuncMap() []template.FuncMap {
 			}
 			return path
 		},
+		"DiffStatsWidth": func(adds int, dels int) string {
+			return fmt.Sprintf("%f", float64(adds)/(float64(adds)+float64(dels))*100)
+		},
 		"Json": func(in interface{}) string {
 			out, err := json.Marshal(in)
 			if err != nil {
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 05f056feb..d34d9b8fd 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -38,12 +38,7 @@
 				<li>
 					<div class="diff-counter count pull-right">
 						{{if not .IsBin}}
-							<span class="add" data-line="{{.Addition}}">+{{.Addition}}</span>
-							<span class="bar">
-								<div class="pull-left add"></div>
-								<div class="pull-left del"></div>
-							</span>
-							<span class="del" data-line="{{.Deletion}}">-{{.Deletion}}</span>
+							{{template "repo/diff/stats" .}}
 						{{else}}
 							<span>{{$.i18n.Tr "repo.diff.bin"}}</span>
 						{{end}}
@@ -60,12 +55,7 @@
 					<h4 class="ui top attached normal header rounded">
 						<div class="diff-counter count ui left">
 							{{if not $file.IsRenamed}}
-								<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
-								<span class="bar">
-									<div class="pull-left add"></div>
-									<div class="pull-left del"></div>
-								</span>
-								<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
+								{{template "repo/diff/stats" .}}
 							{{end}}
 						</div>
 						<span class="file">{{$file.Name}}</span>
@@ -101,12 +91,7 @@
 								{{if $file.IsBin}}
 									{{$.i18n.Tr "repo.diff.bin"}}
 								{{else if not $file.IsRenamed}}
-									<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
-									<span class="bar">
-										<div class="pull-left add"></div>
-										<div class="pull-left del"></div>
-									</span>
-									<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
+									{{template "repo/diff/stats" .}}
 								{{end}}
 							</div>
 							<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
diff --git a/templates/repo/diff/stats.tmpl b/templates/repo/diff/stats.tmpl
new file mode 100644
index 000000000..7e5d34c3d
--- /dev/null
+++ b/templates/repo/diff/stats.tmpl
@@ -0,0 +1,6 @@
+<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
+<span class="bar">
+	<div class="pull-left add" style="width: {{DiffStatsWidth .Addition .Deletion}}%"></div>
+	<div class="pull-left del"></div>
+</span>
+<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 1d36dcf6b..1f4c9a509 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1134,17 +1134,6 @@ async function initRepository() {
     initReactionSelector();
   }
 
-  // Diff
-  if ($('.repository.diff').length > 0) {
-    $('.diff-counter').each(function () {
-      const $item = $(this);
-      const addLine = $item.find('span[data-line].add').data('line');
-      const delLine = $item.find('span[data-line].del').data('line');
-      const addPercent = parseFloat(addLine) / (parseFloat(addLine) + parseFloat(delLine)) * 100;
-      $item.find('.bar .add').css('width', `${addPercent}%`);
-    });
-  }
-
   // Quick start and repository home
   $('#repo-clone-ssh').on('click', function () {
     $('.clone-url').text($(this).data('link'));