Render diff stats server-side (#13579)
Eliminates a flash on page load on the diff stat bars.
This commit is contained in:
		
							parent
							
								
									0de546009e
								
							
						
					
					
						commit
						efcba9b011
					
				| 
						 | 
					@ -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 {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
 | 
												<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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>
 | 
				
			||||||
| 
						 | 
					@ -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'));
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue