diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-05-30 18:53:15 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-05-30 18:53:15 +0800 |
| commit | ee99cf6313ba565523b3c43f61ffda4b71e2c39b (patch) | |
| tree | 176d0044803285f2cdbcf04cbf87edd2f0d07a1a /templates/repo | |
| parent | 32185efc1484c1d6ea3a5262a3c9779e8edb0b09 (diff) | |
| download | gitea-ee99cf6313ba565523b3c43f61ffda4b71e2c39b.tar.gz gitea-ee99cf6313ba565523b3c43f61ffda4b71e2c39b.zip | |
Refactor diffFileInfo / DiffTreeStore (#24998)
Follow #21012, #22399
Replace #24983, fix #24938
Help #24956
Now, the `window.config.pageData.diffFileInfo` itself is a reactive
store, so it's quite easy to sync values/states by it, no need to do
"doLoadMoreFiles" or "callback".
Screenshot: these two buttons both work. After complete loading, the UI
is also right.
<details>
</details>
Diffstat (limited to 'templates/repo')
| -rw-r--r-- | templates/repo/diff/box.tmpl | 52 |
1 files changed, 25 insertions, 27 deletions
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 132f999808..490465ea12 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -45,33 +45,31 @@ {{end}} </div> </div> - <script id="diff-data-script"> - (() => { - const diffData = { - files: [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}}},{{end}}], - isIncomplete: {{.Diff.IsIncomplete}}, - tooManyFilesMessage: "{{$.locale.Tr "repo.diff.too_many_files"}}", - binaryFileMessage: "{{$.locale.Tr "repo.diff.bin"}}", - showMoreMessage: "{{.locale.Tr "repo.diff.show_more"}}", - statisticsMessage: "{{.locale.Tr "repo.diff.stats_desc_file"}}", - fileTreeIsVisible: false, - fileListIsVisible: false, - isLoadingNewData: false, - diffEnd: {{.Diff.End}}, - link: "{{$.Link}}" - }; - if(window.config.pageData.diffFileInfo) { - // Page is already loaded - add the data to our existing data - window.config.pageData.diffFileInfo.files.push(...diffData.files); - window.config.pageData.diffFileInfo.isIncomplete = diffData.isIncomplete; - window.config.pageData.diffFileInfo.diffEnd = diffData.diffEnd; - window.config.pageData.diffFileInfo.link = diffData.link; - } else { - // new load of page - populate initial data - window.config.pageData.diffFileInfo = diffData; - } - })(); - </script> + <script id="diff-data-script" type="module"> + const diffDataFiles = [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}}},{{end}}]; + const diffData = { + isIncomplete: {{.Diff.IsIncomplete}}, + tooManyFilesMessage: "{{$.locale.Tr "repo.diff.too_many_files"}}", + binaryFileMessage: "{{$.locale.Tr "repo.diff.bin"}}", + showMoreMessage: "{{.locale.Tr "repo.diff.show_more"}}", + statisticsMessage: "{{.locale.Tr "repo.diff.stats_desc_file"}}", + linkLoadMore: "{{$.Link}}?skip-to={{.Diff.End}}&file-only=true", + }; + + // for first time loading, the diffFileInfo is a plain object + // after the Vue component is mounted, the diffFileInfo is a reactive object + // keep in mind that this script block would be executed many times when loading more files, by "loadMoreFiles" + let diffFileInfo = window.config.pageData.diffFileInfo || { + files:[], + fileTreeIsVisible: false, + fileListIsVisible: false, + isLoadingNewData: false, + selectedItem: '', + }; + diffFileInfo = Object.assign(diffFileInfo, diffData); + diffFileInfo.files.push(...diffDataFiles); + window.config.pageData.diffFileInfo = diffFileInfo; + </script> <div id="diff-file-list"></div> <div id="diff-container"> <div id="diff-file-tree" class="gt-hidden"></div> |