Render diff stats server-side (#13579)

Eliminates a flash on page load on the diff stat bars.
This commit is contained in:
silverwind 2020-11-16 00:50:06 +01:00 committed by GitHub
parent 0de546009e
commit efcba9b011
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 29 deletions

View file

@ -208,6 +208,9 @@ func NewFuncMap() []template.FuncMap {
} }
return path 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 { "Json": func(in interface{}) string {
out, err := json.Marshal(in) out, err := json.Marshal(in)
if err != nil { if err != nil {

View file

@ -38,12 +38,7 @@
<li> <li>
<div class="diff-counter count pull-right"> <div class="diff-counter count pull-right">
{{if not .IsBin}} {{if not .IsBin}}
<span class="add" data-line="{{.Addition}}">+{{.Addition}}</span> {{template "repo/diff/stats" .}}
<span class="bar">
<div class="pull-left add"></div>
<div class="pull-left del"></div>
</span>
<span class="del" data-line="{{.Deletion}}">-{{.Deletion}}</span>
{{else}} {{else}}
<span>{{$.i18n.Tr "repo.diff.bin"}}</span> <span>{{$.i18n.Tr "repo.diff.bin"}}</span>
{{end}} {{end}}
@ -60,12 +55,7 @@
<h4 class="ui top attached normal header rounded"> <h4 class="ui top attached normal header rounded">
<div class="diff-counter count ui left"> <div class="diff-counter count ui left">
{{if not $file.IsRenamed}} {{if not $file.IsRenamed}}
<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span> {{template "repo/diff/stats" .}}
<span class="bar">
<div class="pull-left add"></div>
<div class="pull-left del"></div>
</span>
<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
{{end}} {{end}}
</div> </div>
<span class="file">{{$file.Name}}</span> <span class="file">{{$file.Name}}</span>
@ -101,12 +91,7 @@
{{if $file.IsBin}} {{if $file.IsBin}}
{{$.i18n.Tr "repo.diff.bin"}} {{$.i18n.Tr "repo.diff.bin"}}
{{else if not $file.IsRenamed}} {{else if not $file.IsRenamed}}
<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span> {{template "repo/diff/stats" .}}
<span class="bar">
<div class="pull-left add"></div>
<div class="pull-left del"></div>
</span>
<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
{{end}} {{end}}
</div> </div>
<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span> <span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>

View file

@ -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>

View file

@ -1134,17 +1134,6 @@ async function initRepository() {
initReactionSelector(); 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 // Quick start and repository home
$('#repo-clone-ssh').on('click', function () { $('#repo-clone-ssh').on('click', function () {
$('.clone-url').text($(this).data('link')); $('.clone-url').text($(this).data('link'));