introduce template helper, octicon tweaks, js refactor

go-gitea · Nov 26, 2021 · c968fee · c968fee
1 parent 472a12e
commit c968fee
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 56 deletions.
diff --git a/modules/templates/helper.go b/modules/templates/helper.go
@@ -18,6 +18,7 @@ import (
 	"regexp"
 	"runtime"
 	"strings"
+	"strconv"
 	texttmpl "text/template"
 	"time"
 	"unicode"
@@ -92,18 +93,19 @@ func NewFuncMap() []template.FuncMap {
 		"CustomEmojis": func() map[string]string {
 			return setting.UI.CustomEmojisMap
 		},
-		"Safe":          Safe,
-		"SafeJS":        SafeJS,
-		"JSEscape":      JSEscape,
-		"Str2html":      Str2html,
-		"TimeSince":     timeutil.TimeSince,
-		"TimeSinceUnix": timeutil.TimeSinceUnix,
-		"RawTimeSince":  timeutil.RawTimeSince,
-		"FileSize":      base.FileSize,
-		"PrettyNumber":  base.PrettyNumber,
-		"Subtract":      base.Subtract,
-		"EntryIcon":     base.EntryIcon,
-		"MigrationIcon": MigrationIcon,
+		"Safe":           Safe,
+		"SafeJS":         SafeJS,
+		"JSEscape":       JSEscape,
+		"Str2html":       Str2html,
+		"TimeSince":      timeutil.TimeSince,
+		"TimeSinceUnix":  timeutil.TimeSinceUnix,
+		"RawTimeSince":   timeutil.RawTimeSince,
+		"FileSize":       base.FileSize,
+		"PrettyNumber":   base.PrettyNumber,
+		"JsPrettyNumber": JsPrettyNumber,
+		"Subtract":       base.Subtract,
+		"EntryIcon":      base.EntryIcon,
+		"MigrationIcon":  MigrationIcon,
 		"Add": func(a ...int) int {
 			sum := 0
 			for _, val := range a {
@@ -972,3 +974,23 @@ func mirrorRemoteAddress(m models.RemoteMirrorer) remoteAddress {
 
 	return a
 }
+
+// JsPrettyNumber renders a number using english decimal separators, e.g. 1,200
+// subsequent Js will replace the number with locale-specific separators
+func JsPrettyNumber(i interface{}) template.HTML {
+	var num int64
+	switch v := i.(type) {
+	case int:
+		num = int64(v)
+	case int8:
+		num = int64(v)
+	case int16:
+		num = int64(v)
+	case int32:
+		num = int64(v)
+	case int64:
+		num = v
+	}
+
+	return template.HTML(`<span class="js-pretty-number" data-value="` + strconv.FormatInt(num, 10) + `">` + base.PrettyNumber(num) + `</span>`)
+}
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
@@ -18,11 +18,11 @@
 				<div class="ui compact tiny menu">
 					<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
 						{{svg "octicon-milestone" 16 "mr-3"}}
-						<span class="js-format-pretty-number" data-original="{{.OpenCount}}">{{PrettyNumber .OpenCount}}</span>&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
+						{{JsPrettyNumber .OpenCount}}&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
 					</a>
 					<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=closed&q={{$.Keyword}}">
-						{{svg "octicon-milestone" 16 "mr-3"}}
-						<span class="js-format-pretty-number" data-original="{{.ClosedCount}}">{{PrettyNumber .ClosedCount}}</span>&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
+						{{svg "octicon-check" 16 "mr-3"}}
+						{{JsPrettyNumber .ClosedCount}}&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
 					</a>
 				</div>
 			</div>
@@ -80,8 +80,10 @@
 							{{end}}
 						{{end}}
 						<span class="issue-stats">
-							{{svg "octicon-issue-opened"}} <span class="js-format-pretty-number" data-original="{{.NumOpenIssues}}">{{PrettyNumber .NumOpenIssues}}</span>&nbsp;{{$.i18n.Tr "repo.issues.open_title"}}
-							{{svg "octicon-issue-closed"}} <span class="js-format-pretty-number" data-original="{{.NumClosedIssues}}">{{PrettyNumber .NumClosedIssues}}</span>&nbsp;{{$.i18n.Tr "repo.issues.closed_title"}}
+							{{svg "octicon-issue-opened" 16 "mr-3"}}
+							{{JsPrettyNumber .NumOpenIssues}}&nbsp;{{$.i18n.Tr "repo.issues.open_title"}}
+							{{svg "octicon-check" 16 "mr-3"}}
+							{{JsPrettyNumber .NumClosedIssues}}&nbsp;{{$.i18n.Tr "repo.issues.closed_title"}}
 							{{if .TotalTrackedTime}}{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}{{end}}
 							{{if .UpdatedUnix}}{{svg "octicon-clock"}} {{$.i18n.Tr "repo.milestones.update_ago" (.TimeSinceUpdate|Sec2Time)}}{{end}}
 						</span>

diff --git a/templates/repo/issue/openclose.tmpl b/templates/repo/issue/openclose.tmpl
@@ -1,10 +1,14 @@
 <div class="ui compact tiny menu">
 	<a class="{{if not .IsShowClosed}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-		{{svg "octicon-issue-opened" 16 "mr-3"}}
-		<span class="js-format-pretty-number" data-original="{{.IssueStats.OpenCount}}">{{PrettyNumber .IssueStats.OpenCount}}</span>&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
+		{{if .PageIsPullList}}
+			{{svg "octicon-git-pull-request" 16 "mr-3"}}
+		{{else}}
+			{{svg "octicon-issue-opened" 16 "mr-3"}}
+		{{end}}
+		{{JsPrettyNumber .IssueStats.OpenCount}}&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
 	</a>
 	<a class="{{if .IsShowClosed}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-		{{svg "octicon-issue-closed" 16 "mr-3"}}
-		<span class="js-format-pretty-number" data-original="{{.IssueStats.ClosedCount}}">{{PrettyNumber .IssueStats.ClosedCount}}</span>&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
-	</span>
+		{{svg "octicon-check" 16 "mr-3"}}
+		{{JsPrettyNumber .IssueStats.ClosedCount}}&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
+	</a>
 </div>
diff --git a/templates/repo/projects/list.tmpl b/templates/repo/projects/list.tmpl
@@ -14,12 +14,12 @@
 		{{template "base/alert" .}}
 		<div class="ui compact tiny menu">
 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
-				{{svg "octicon-project" 16 "mr-2"}}
-				<span class="js-format-pretty-number" data-original="{{.OpenCount}}">{{PrettyNumber .OpenCount}}</span>&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
+				{{svg "octicon-project" 16 "mr-3"}}
+				{{JsPrettyNumber .OpenCount}}&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
 			</a>
 			<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=closed">
-				{{svg "octicon-check" 16 "mr-2"}}
-				<span class="js-format-pretty-number" data-original="{{.ClosedCount}}">{{PrettyNumber .ClosedCount}}</span>&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
+				{{svg "octicon-check" 16 "mr-3"}}
+				{{JsPrettyNumber .ClosedCount}}&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
 			</a>
 		</div>
 
@@ -47,10 +47,10 @@
 							{{svg "octicon-clock"}} {{$.i18n.Tr "repo.milestones.closed" $closedDate|Str2html}}
 						{{end}}
 						<span class="issue-stats">
-							{{svg "octicon-issue-opened"}}
-							<span class="js-format-pretty-number" data-original="{{.NumOpenIssues}}">{{PrettyNumber .NumOpenIssues}}</span>&nbsp;{{$.i18n.Tr "repo.issues.open_title"}}
-							{{svg "octicon-issue-closed"}}
-							<span class="js-format-pretty-number" data-original="{{.NumOpenIssues}}">{{PrettyNumber .NumClosedIssues}}</span>&nbsp;{{$.i18n.Tr "repo.issues.closed_title"}}
+							{{svg "octicon-issue-opened" 16 "mr-3"}}
+							{{JsPrettyNumber .NumOpenIssues}}&nbsp;{{$.i18n.Tr "repo.issues.open_title"}}
+							{{svg "octicon-check" 16 "mr-3"}}
+							{{JsPrettyNumber .NumClosedIssues}}&nbsp;{{$.i18n.Tr "repo.issues.closed_title"}}
 						</span>
 					</div>
 					{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}

diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl
@@ -60,12 +60,16 @@
 					<div class="column">
 						<div class="ui compact tiny menu">
 							<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
-								{{svg "octicon-issue-opened" 16 "mr-3"}}
-								<span class="js-format-pretty-number" data-original="{{.ShownIssueStats.OpenCount}}">{{PrettyNumber .ShownIssueStats.OpenCount}}</span>&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
+								{{if .PageIsPulls}}
+									{{svg "octicon-git-pull-request" 16 "mr-3"}}
+								{{else}}
+									{{svg "octicon-issue-opened" 16 "mr-3"}}
+								{{end}}
+								{{JsPrettyNumber .ShownIssueStats.OpenCount}}&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
 							</a>
 							<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}">
-								{{svg "octicon-issue-closed" 16 "mr-3"}}
-								<span class="js-format-pretty-number" data-original="{{.ShownIssueStats.ClosedCount}}">{{PrettyNumber .ShownIssueStats.ClosedCount}}</span>&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
+								{{svg "octicon-check" 16 "mr-3"}}
+								{{JsPrettyNumber .ShownIssueStats.ClosedCount}}&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
 							</a>
 						</div>
 					</div>

diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
@@ -38,12 +38,12 @@
 					<div class="column">
 						<div class="ui compact tiny menu">
 							<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
-								{{svg "octicon-issue-opened" 16 "mr-3"}}
-								<span class="js-format-pretty-number" data-original="{{.MilestoneStats.OpenCount}}">{{PrettyNumber .MilestoneStats.OpenCount}}</span>&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
+								{{svg "octicon-milestone" 16 "mr-3"}}
+								{{JsPrettyNumber .MilestoneStats.OpenCount}}&nbsp;{{.i18n.Tr "repo.issues.open_title"}}
 							</a>
 							<a class="item{{if .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=closed&q={{$.Keyword}}">
-								{{svg "octicon-issue-closed" 16 "mr-3"}}
-								<span class="js-format-pretty-number" data-original="{{.MilestoneStats.ClosedCount}}">{{PrettyNumber .MilestoneStats.ClosedCount}}</span>&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
+								{{svg "octicon-check" 16 "mr-3"}}
+								{{JsPrettyNumber .MilestoneStats.ClosedCount}}&nbsp;{{.i18n.Tr "repo.issues.closed_title"}}
 							</a>
 						</div>
 					</div>
@@ -100,9 +100,13 @@
 									{{end}}
 								{{end}}
 								<span class="issue-stats">
-									{{svg "octicon-issue-opened"}} <span class="js-format-pretty-number" data-original="{{.NumOpenIssues}}">{{PrettyNumber .NumOpenIssues}}</span>&nbsp;{{$.i18n.Tr "repo.issues.open_title"}}
-									{{svg "octicon-issue-closed"}} <span class="js-format-pretty-number" data-original="{{.NumClosedIssues}}">{{PrettyNumber .NumClosedIssues}}</span>&nbsp;{{$.i18n.Tr "repo.issues.closed_title"}}
-									{{if .TotalTrackedTime}}{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}{{end}}
+									{{svg "octicon-issue-opened" 16 "mr-3"}}
+									{{JsPrettyNumber .NumOpenIssues}}&nbsp;{{$.i18n.Tr "repo.issues.open_title"}}
+									{{svg "octicon-check" 16 "mr-3"}}
+									{{JsPrettyNumber .NumClosedIssues}}&nbsp;{{$.i18n.Tr "repo.issues.closed_title"}}
+									{{if .TotalTrackedTime}}
+										{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}
+									{{end}}
 								</span>
 							</div>
 							{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
@@ -1,4 +1,4 @@
-import {mqBinarySearch, prettyNumber} from '../utils.js';
+import {mqBinarySearch} from '../utils.js';
 import createDropzone from './dropzone.js';
 import {initCompColorPicker} from './comp/ColorPicker.js';
 
@@ -318,15 +318,3 @@ export function initGlobalButtons() {
     });
   });
 }
-
-export function initGlobalFormattingReplacement() {
-  const lang = document.documentElement.lang;
-
-  for (const el of document.querySelectorAll('.js-format-pretty-number')) {
-    const num = Number(el.getAttribute('data-original'));
-    const formatted = prettyNumber(num, lang);
-    if (formatted && formatted !== el.textContent) {
-      el.textContent = formatted;
-    }
-  }
-}
diff --git a/web_src/js/features/formatting.js b/web_src/js/features/formatting.js
@@ -0,0 +1,15 @@
+import {prettyNumber} from '../utils.js';
+
+const {lang} = document.documentElement;
+
+export function initFormattingReplacements() {
+  // replace english formatted numbers with locale-specific separators
+  for (const el of document.getElementsByClassName('js-pretty-number')) {
+    const num = Number(el.getAttribute('data-value'));
+    console.log(num);
+    const formatted = prettyNumber(num, lang);
+    if (formatted && formatted !== el.textContent) {
+      el.textContent = formatted;
+    }
+  }
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
@@ -44,7 +44,6 @@ import {
   initGlobalCommon,
   initGlobalDropzone,
   initGlobalEnterQuickSubmit,
-  initGlobalFormattingReplacement,
   initGlobalFormDirtyLeaveConfirm,
   initGlobalLinkActions,
   initHeadNavbarContentToggle,
@@ -75,6 +74,11 @@ import {initRepoBranchButton} from './features/repo-branch.js';
 import {initCommonOrganization} from './features/common-organization.js';
 import {initRepoWikiForm} from './features/repo-wiki.js';
 import {initRepoCommentForm, initRepository} from './features/repo-legacy.js';
+import {initFormattingReplacements} from './features/formatting.js';
+
+// Run time-critical code as soon as possible. This is safe to do because this
+// script appears at the end of <body> and rendered HTML is accessible at that point.
+initFormattingReplacements();
 
 // Silence fomantic's error logging when tabs are used without a target content element
 $.fn.tab.settings.silent = true;
@@ -86,7 +90,6 @@ $(document).ready(() => {
 
   initGlobalButtonClickOnEnter();
   initGlobalButtons();
-  initGlobalFormattingReplacement();
   initGlobalCopyToClipboardListener();
   initGlobalDropzone();
   initGlobalEnterQuickSubmit();