Skip to content

Commit f178c00

Browse files
wxiaoguangwxiaoguang
committed
refactor
1 parent 542cec9 commit f178c00

File tree

3 files changed

+90
-99
lines changed

3 files changed

+90
-99
lines changed

‎templates/repo/branch_dropdown.tmpl

Lines changed: 69 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,101 +2,111 @@
22
{{$defaultBranch := $.root.BranchName}}{{if and .root.IsViewTag (not .noTag)}}{{$defaultBranch = .root.TagName}}{{end}}{{if eq $defaultBranch ""}}{{$defaultBranch = $.root.Repository.DefaultBranch}}{{end}}
33
{{$type := ""}}{{if and .root.IsViewTag (not .noTag)}}{{$type = "tag"}}{{else if .root.IsViewBranch}}{{$type = "branch"}}{{else}}{{$type = "tree"}}{{end}}
44
{{$showBranchesInDropdown := not .root.HideBranchesInDropdown}}
5+
6+
<script type="module">
7+
const data = {
8+
'textReleaseCompare': {{.root.locale.Tr "repo.release.compare"}},
9+
'textCreateTag': {{.root.locale.Tr "repo.tag.create_tag"}},
10+
'textCreateBranch': {{.root.locale.Tr "repo.branch.create_branch"}},
11+
'textCreateBranchFrom': {{.root.locale.Tr "repo.branch.create_from"}},
12+
'textBranches': {{.root.locale.Tr "repo.branches"}},
13+
'textTags': {{.root.locale.Tr "repo.tags"}},
14+
15+
'mode': '{{if or .root.IsViewTag .isTag}}tags{{else}}branches{{end}}',
16+
'showBranchesInDropdown': {{$showBranchesInDropdown}},
17+
'searchFieldPlaceholder': '{{if $.noTag}}{{.root.locale.Tr "repo.pulls.filter_branch"}}{{else if $showBranchesInDropdown}}{{.root.locale.Tr "repo.filter_branch_and_tag"}}{{else}}{{.root.locale.Tr "repo.find_tag"}}{{end}}...',
18+
'branchForm': {{$.branchForm}},
19+
'canCreateBranch': {{if .canCreateBranch}}{{.canCreateBranch}}{{else}}{{.root.CanCreateBranch}}{{end}},
20+
'setAction': {{.setAction}},
21+
'submitForm': {{.submitForm}},
22+
'viewType': {{$type}},
23+
'refName': {{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}},
24+
'commitIdShort': {{ShortSha .root.CommitID}},
25+
'tagName': {{.root.TagName}},
26+
'branchName': {{.root.BranchName}},
27+
'noTag': {{.noTag}},
28+
'branches': {{.root.Branches}},
29+
'tags': {{.root.Tags}},
30+
'defaultBranch': {{$defaultBranch}},
31+
'branchURLPrefix': '{{if .branchURLPrefix}}{{.branchURLPrefix}}{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/branch/{{end}}',
32+
'branchURLSuffix': '{{if .branchURLSuffix}}{{.branchURLSuffix}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}',
33+
'tagURLPrefix': '{{if .tagURLPrefix}}{{.tagURLPrefix}}{{else if $release}}{{$.root.RepoLink}}/compare/{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/tag/{{end}}',
34+
'tagURLSuffix': '{{if .tagURLSuffix}}{{.tagURLSuffix}}{{else if $release}}...{{if $release.IsDraft}}{{PathEscapeSegments $release.Target}}{{else}}{{if $release.TagName}}{{PathEscapeSegments $release.TagName}}{{else}}{{PathEscapeSegments $release.Sha1}}{{end}}{{end}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}',
35+
'repoLink': {{.root.RepoLink}},
36+
'treePath': {{.root.TreePath}},
37+
'branchNameSubURL': {{.root.BranchNameSubURL}},
38+
'noResults': {{.root.locale.Tr "repo.pulls.no_results"}},
39+
};
40+
{{if .release}}
41+
data['release'] = {
42+
'tagName': {{.release.TagName}},
43+
};
44+
{{end}}
45+
window.config.pageData['branchDropdownDataList'] = window.config.pageData['branchDropdownDataList'] || [];
46+
window.config.pageData['branchDropdownDataList'].push(data);
47+
</script>
48+
549
<div class="fitted item choose reference">
6-
<div class="ui floating filter dropdown custom"
7-
data-branch-form="{{if $.branchForm}}{{$.branchForm}}{{end}}"
8-
data-can-create-branch="{{if .canCreateBranch}}{{.canCreateBranch}}{{else}}{{.root.CanCreateBranch}}{{end}}"
9-
data-no-results="{{.root.locale.Tr "repo.pulls.no_results"}}"
10-
data-set-action="{{.setAction}}" data-submit-form="{{.submitForm}}"
11-
data-view-type="{{$type}}"
12-
data-ref-name="{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}"
13-
data-branch-url-prefix="{{if .branchURLPrefix}}{{.branchURLPrefix}}{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/branch/{{end}}"
14-
data-branch-url-suffix="{{if .branchURLSuffix}}{{.branchURLSuffix}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}"
15-
data-tag-url-prefix="{{if .tagURLPrefix}}{{.tagURLPrefix}}{{else if $release}}{{$.root.RepoLink}}/compare/{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/tag/{{end}}"
16-
data-tag-url-suffix="{{if .tagURLSuffix}}{{.tagURLSuffix}}{{else if $release}}...{{if $release.IsDraft}}{{PathEscapeSegments $release.Target}}{{else}}{{if $release.TagName}}{{PathEscapeSegments $release.TagName}}{{else}}{{PathEscapeSegments $release.Sha1}}{{end}}{{end}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}">
50+
<div class="ui floating filter dropdown custom">
1751
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
1852
<span class="text gt-df gt-ac gt-mr-2">
19-
{{if $release}}
20-
{{.root.locale.Tr "repo.release.compare"}}
21-
{{else}}
22-
<span :class="{visible: isViewTag}" v-if="isViewTag" {{if not (eq $type "tag")}}v-cloak{{end}}>{{svg "octicon-tag"}}</span>
23-
<span :class="{visible: isViewBranch}" v-if="isViewBranch" {{if not (eq $type "branch")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span>
24-
<span :class="{visible: isViewTree}" v-if="isViewTree" {{if not (eq $type "tree")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span>
25-
<strong ref="dropdownRefName" class="gt-ml-3">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
26-
{{end}}
53+
{{/* v-cloak is used to hide unnecessary elements before Vue componment is mounted */}}
54+
<span v-cloak v-if="release">${ textReleaseCompare }</span>
55+
<span :class="{visible: isViewTag}" v-if="isViewTag" {{if not (eq $type "tag")}}v-cloak{{end}}>{{svg "octicon-tag"}}</span>
56+
<span :class="{visible: isViewBranch}" v-if="isViewBranch" {{if not (eq $type "branch")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span>
57+
<span :class="{visible: isViewTree}" v-if="isViewTree" {{if not (eq $type "tree")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span>
58+
<strong ref="dropdownRefName" class="gt-ml-3">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
2759
</span>
2860
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
2961
</button>
30-
<div class="data gt-hidden" data-mode="{{if or .root.IsViewTag .isTag}}tags{{else}}branches{{end}}">
31-
{{if $showBranchesInDropdown}}
32-
{{range .root.Branches}}
33-
<div class="item branch {{if eq $defaultBranch .}}selected{{end}}" data-url="{{PathEscapeSegments .}}">{{.}}</div>
34-
{{end}}
35-
{{end}}
36-
{{if (not .noTag)}}
37-
{{range .root.Tags}}
38-
{{if $release}}
39-
<div class="item tag {{if eq $release.TagName .}}selected{{end}}" data-url="{{PathEscapeSegments .}}">{{.}}</div>
40-
{{else}}
41-
<div class="item tag {{if eq $defaultBranch .}}selected{{end}}" data-url="{{PathEscapeSegments .}}">{{.}}</div>
42-
{{end}}
43-
{{end}}
44-
{{end}}
45-
</div>
4662
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
4763
<div class="ui icon search input">
4864
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
49-
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" placeholder="{{if $.noTag}}{{.root.locale.Tr "repo.pulls.filter_branch"}}{{else if $showBranchesInDropdown}}{{.root.locale.Tr "repo.filter_branch_and_tag"}}{{else}}{{.root.locale.Tr "repo.find_tag"}}{{end}}...">
65+
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
5066
</div>
51-
{{if $showBranchesInDropdown}}
67+
<template v-if="showBranchesInDropdown">
5268
<div class="header branch-tag-choice">
5369
<div class="ui grid">
5470
<div class="two column row">
5571
<a class="reference column" href="#" @click="createTag = false; mode = 'branches'; focusSearchField()">
56-
<span class="text" :class="{black: mode == 'branches'}">
57-
{{svg "octicon-git-branch" 16 "gt-mr-2"}}{{.root.locale.Tr "repo.branches"}}
72+
<span class="text" :class="{black: mode === 'branches'}">
73+
{{svg "octicon-git-branch" 16 "gt-mr-2"}}${ textBranches }
5874
</span>
5975
</a>
60-
{{if not .noTag}}
76+
<template v-if="!noTag">
6177
<a class="reference column" href="#" @click="createTag = true; mode = 'tags'; focusSearchField()">
62-
<span class="text" :class="{black: mode == 'tags'}">
63-
{{svg "octicon-tag" 16 "gt-mr-2"}}{{.root.locale.Tr "repo.tags"}}
78+
<span class="text" :class="{black: mode === 'tags'}">
79+
{{svg "octicon-tag" 16 "gt-mr-2"}}${ textTags }
6480
</span>
6581
</a>
66-
{{end}}
82+
</template>
6783
</div>
6884
</div>
6985
</div>
70-
{{end}}
86+
</template>
7187
<div class="scrolling menu" ref="scrollContainer">
72-
<div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active == index}" @click="selectItem(item)" :ref="'listItem' + index">${ item.name }</div>
73-
<div class="item" v-if="showCreateNewBranch" :class="{active: active == filteredItems.length}" :ref="'listItem' + filteredItems.length">
88+
<div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active === index}" @click="selectItem(item)" :ref="'listItem' + index">${ item.name }</div>
89+
<div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length">
7490
<a href="#" @click="createNewBranch()">
7591
<div v-show="createTag">
7692
<i class="reference tags icon"></i>
77-
{{.root.locale.Tr "repo.tag.create_tag" `${ searchTerm }` | Safe}}
93+
<span v-html="textCreateTag.replace('%s', searchTerm)"></span>
7894
</div>
7995
<div v-show="!createTag">
8096
{{svg "octicon-git-branch"}}
81-
{{.root.locale.Tr "repo.branch.create_branch" `${ searchTerm }` | Safe}}
97+
<span v-html="textCreateBranch.replace('%s', searchTerm)"></span>
8298
</div>
8399
<div class="text small">
84-
{{if or .root.IsViewBranch $release}}
85-
{{.root.locale.Tr "repo.branch.create_from" .root.BranchName}}
86-
{{else if .root.IsViewTag}}
87-
{{.root.locale.Tr "repo.branch.create_from" .root.TagName}}
88-
{{else}}
89-
{{.root.locale.Tr "repo.branch.create_from" (ShortSha .root.CommitID)}}
90-
{{end}}
100+
<span v-if="isViewBranch || release">${ textCreateBranchFrom.replace('%s', branchName) }</span>
101+
<span v-else-if="isViewTag">${ textCreateBranchFrom.replace('%s', tagName) }</span>
102+
<span v-else>${ textCreateBranchFrom.replace('%s', commitIdShort) }</span>
91103
</div>
92104
</a>
93105
<form ref="newBranchForm" action="{{.root.RepoLink}}/branches/_new/{{.root.BranchNameSubURL}}" method="post">
94-
{{.root.CsrfTokenHtml}}
106+
<input type="hidden" name="_csrf" :value="csrfToken">
95107
<input type="hidden" name="new_branch_name" v-model="searchTerm">
96108
<input type="hidden" name="create_tag" v-model="createTag">
97-
{{if $.root.TreePath}}
98-
<input type="hidden" name="current_path" value="{{.root.TreePath}}">
99-
{{end}}
109+
<input type="hidden" name="current_path" v-model="treePath" v-if="treePath">
100110
</form>
101111
</div>
102112
</div>

‎web_src/js/components/RepoBranchTagDropdown.js

Lines changed: 20 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,35 @@ import $ from 'jquery';
33
import {vueDelimiters} from './VueComponentLoader.js';
44

55
export function initRepoBranchTagDropdown(selector) {
6-
$(selector).each(function () {
7-
const $dropdown = $(this);
8-
const $data = $dropdown.find('.data');
6+
$(selector).each(function (dropdownIndex, elRoot) {
97
const data = {
8+
csrfToken: window.config.csrfToken,
109
items: [],
11-
mode: $data.data('mode'),
1210
searchTerm: '',
13-
refName: '',
14-
noResults: '',
15-
canCreateBranch: false,
1611
menuVisible: false,
1712
createTag: false,
13+
release: null,
14+
1815
isViewTag: false,
1916
isViewBranch: false,
2017
isViewTree: false,
18+
2119
active: 0,
22-
branchForm: '',
23-
branchURLPrefix: '',
24-
branchURLSuffix: '',
25-
tagURLPrefix: '',
26-
tagURLSuffix: '',
27-
setAction: false,
28-
submitForm: false,
20+
21+
...window.config.pageData.branchDropdownDataList[dropdownIndex],
2922
};
30-
$data.find('.item').each(function () {
31-
data.items.push({
32-
name: $(this).text(),
33-
url: $(this).data('url'),
34-
branch: $(this).hasClass('branch'),
35-
tag: $(this).hasClass('tag'),
36-
selected: $(this).hasClass('selected')
37-
});
38-
});
39-
$data.remove();
4023

41-
// eslint-disable-next-line unicorn/no-this-assignment
42-
const elRoot = this;
24+
if (data.showBranchesInDropdown) {
25+
for (const branch of data.branches) {
26+
data.items.push({name: branch, url: branch, branch: true, tag: false, selected: branch === data.defaultBranch});
27+
}
28+
}
29+
if (!data.noTag) {
30+
for (const tag of data.tags) {
31+
data.items.push({name: tag, url: tag, branch: false, tag: true, selected: tag === data.release?.tagName});
32+
}
33+
}
34+
4335
const view = createApp({
4436
delimiters: vueDelimiters,
4537
data() {
@@ -77,10 +69,7 @@ export function initRepoBranchTagDropdown(selector) {
7769
},
7870

7971
beforeMount() {
80-
this.noResults = elRoot.getAttribute('data-no-results');
81-
this.canCreateBranch = elRoot.getAttribute('data-can-create-branch') === 'true';
82-
this.branchForm = elRoot.getAttribute('data-branch-form');
83-
switch (elRoot.getAttribute('data-view-type')) {
72+
switch (data.viewType) {
8473
case 'tree':
8574
this.isViewTree = true;
8675
break;
@@ -91,14 +80,6 @@ export function initRepoBranchTagDropdown(selector) {
9180
this.isViewBranch = true;
9281
break;
9382
}
94-
this.refName = elRoot.getAttribute('data-ref-name');
95-
this.branchURLPrefix = elRoot.getAttribute('data-branch-url-prefix');
96-
this.branchURLSuffix = elRoot.getAttribute('data-branch-url-suffix');
97-
this.tagURLPrefix = elRoot.getAttribute('data-tag-url-prefix');
98-
this.tagURLSuffix = elRoot.getAttribute('data-tag-url-suffix');
99-
this.setAction = elRoot.getAttribute('data-set-action') === 'true';
100-
this.submitForm = elRoot.getAttribute('data-submit-form') === 'true';
101-
10283

10384
document.body.addEventListener('click', (event) => {
10485
if (elRoot.contains(event.target)) return;
@@ -116,7 +97,7 @@ export function initRepoBranchTagDropdown(selector) {
11697
}
11798
item.selected = true;
11899
const url = (item.tag) ? this.tagURLPrefix + item.url + this.tagURLSuffix : this.branchURLPrefix + item.url + this.branchURLSuffix;
119-
if (this.branchForm === '') {
100+
if (!this.branchForm) {
120101
window.location.href = url;
121102
} else {
122103
this.isViewTree = false;

‎web_src/js/features/repo-legacy.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -485,7 +485,7 @@ export function initRepository() {
485485
// File list and commits
486486
if ($('.repository.file.list').length > 0 || $('.branch-dropdown').length > 0 ||
487487
$('.repository.commits').length > 0 || $('.repository.release').length > 0) {
488-
initRepoBranchTagDropdown('.choose.reference .dropdown');
488+
initRepoBranchTagDropdown('.choose.reference .ui.dropdown');
489489
}
490490

491491
// Wiki

0 commit comments

Comments
 (0)