Follow #23394
There were many bad smells in old code. This PR only moves the code into
Vue SFC, doesn't touch the unrelated logic.
update: after
5f23218c85
, there should be no usage of the vue-rumtime-compiler anymore
(hopefully), so I think this PR could close #19851
---------
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
tags/v1.20.0-rc0
@@ -1,6 +1,20 @@ | |||
{{$release := .release}} | |||
{{$defaultBranch := $.root.BranchName}}{{if and .root.IsViewTag (not .noTag)}}{{$defaultBranch = .root.TagName}}{{end}}{{if eq $defaultBranch ""}}{{$defaultBranch = $.root.Repository.DefaultBranch}}{{end}} | |||
{{$type := ""}}{{if and .root.IsViewTag (not .noTag)}}{{$type = "tag"}}{{else if .root.IsViewBranch}}{{$type = "branch"}}{{else}}{{$type = "tree"}}{{end}} | |||
{{$defaultBranch := $.root.BranchName}} | |||
{{if and .root.IsViewTag (not .noTag)}} | |||
{{$defaultBranch = .root.TagName}} | |||
{{end}} | |||
{{if eq $defaultBranch ""}} | |||
{{$defaultBranch = $.root.Repository.DefaultBranch}} | |||
{{end}} | |||
{{$type := ""}} | |||
{{if and .root.IsViewTag (not .noTag)}} | |||
{{$type = "tag"}} | |||
{{else if .root.IsViewBranch}} | |||
{{$type = "branch"}} | |||
{{else}} | |||
{{$type = "tree"}} | |||
{{end}} | |||
{{$showBranchesInDropdown := not .root.HideBranchesInDropdown}} | |||
<script type="module"> | |||
@@ -30,8 +44,8 @@ | |||
'defaultBranch': {{$defaultBranch}}, | |||
'branchURLPrefix': '{{if .branchURLPrefix}}{{.branchURLPrefix}}{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/branch/{{end}}', | |||
'branchURLSuffix': '{{if .branchURLSuffix}}{{.branchURLSuffix}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}', | |||
'tagURLPrefix': '{{if .tagURLPrefix}}{{.tagURLPrefix}}{{else if $release}}{{$.root.RepoLink}}/compare/{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/tag/{{end}}', | |||
'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}}', | |||
'tagURLPrefix': '{{if .tagURLPrefix}}{{.tagURLPrefix}}{{else if .release}}{{$.root.RepoLink}}/compare/{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/tag/{{end}}', | |||
'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}}', | |||
'repoLink': {{.root.RepoLink}}, | |||
'treePath': {{.root.TreePath}}, | |||
'branchNameSubURL': {{.root.BranchNameSubURL}}, | |||
@@ -46,71 +60,23 @@ | |||
window.config.pageData.branchDropdownDataList.push(data); | |||
</script> | |||
<div class="fitted item choose reference"> | |||
<div class="fitted item js-branch-tag-selector"> | |||
{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}} | |||
<div class="ui floating filter dropdown custom"> | |||
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> | |||
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df"> | |||
<span class="text gt-df gt-ac gt-mr-2"> | |||
{{/* v-cloak is used to hide unnecessary elements before Vue componment is mounted */}} | |||
<span v-cloak v-if="release">${ textReleaseCompare }</span> | |||
<span :class="{visible: isViewTag}" v-if="isViewTag" {{if not (eq $type "tag")}}v-cloak{{end}}>{{svg "octicon-tag"}}</span> | |||
<span :class="{visible: isViewBranch}" v-if="isViewBranch" {{if not (eq $type "branch")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span> | |||
<span :class="{visible: isViewTree}" v-if="isViewTree" {{if not (eq $type "tree")}}v-cloak{{end}}>{{svg "octicon-git-branch"}}</span> | |||
<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> | |||
{{if .release}} | |||
{{.root.locale.Tr "repo.release.compare"}} | |||
{{else}} | |||
{{if eq $type "tag"}} | |||
{{svg "octicon-tag"}} | |||
{{else}} | |||
{{svg "octicon-git-branch"}} | |||
{{end}} | |||
<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> | |||
{{end}} | |||
</span> | |||
{{svg "octicon-triangle-down" 14 "dropdown icon"}} | |||
</button> | |||
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak> | |||
<div class="ui icon search input"> | |||
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i> | |||
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder"> | |||
</div> | |||
<template v-if="showBranchesInDropdown"> | |||
<div class="header branch-tag-choice"> | |||
<div class="ui grid"> | |||
<div class="two column row"> | |||
<a class="reference column" href="#" @click="createTag = false; mode = 'branches'; focusSearchField()"> | |||
<span class="text" :class="{black: mode === 'branches'}"> | |||
{{svg "octicon-git-branch" 16 "gt-mr-2"}}${ textBranches } | |||
</span> | |||
</a> | |||
<template v-if="!noTag"> | |||
<a class="reference column" href="#" @click="createTag = true; mode = 'tags'; focusSearchField()"> | |||
<span class="text" :class="{black: mode === 'tags'}"> | |||
{{svg "octicon-tag" 16 "gt-mr-2"}}${ textTags } | |||
</span> | |||
</a> | |||
</template> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<div class="scrolling menu" ref="scrollContainer"> | |||
<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> | |||
<div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length"> | |||
<a href="#" @click="createNewBranch()"> | |||
<div v-show="createTag"> | |||
<i class="reference tags icon"></i> | |||
<span v-html="textCreateTag.replace('%s', searchTerm)"></span> | |||
</div> | |||
<div v-show="!createTag"> | |||
{{svg "octicon-git-branch"}} | |||
<span v-html="textCreateBranch.replace('%s', searchTerm)"></span> | |||
</div> | |||
<div class="text small"> | |||
<span v-if="isViewBranch || release">${ textCreateBranchFrom.replace('%s', branchName) }</span> | |||
<span v-else-if="isViewTag">${ textCreateBranchFrom.replace('%s', tagName) }</span> | |||
<span v-else>${ textCreateBranchFrom.replace('%s', commitIdShort) }</span> | |||
</div> | |||
</a> | |||
<form ref="newBranchForm" action="{{.root.RepoLink}}/branches/_new/{{.root.BranchNameSubURL}}" method="post"> | |||
<input type="hidden" name="_csrf" :value="csrfToken"> | |||
<input type="hidden" name="new_branch_name" v-model="searchTerm"> | |||
<input type="hidden" name="create_tag" v-model="createTag"> | |||
<input type="hidden" name="current_path" v-model="treePath" v-if="treePath"> | |||
</form> | |||
</div> | |||
</div> | |||
<div class="message" v-if="showNoResults">${ noResults }</div> | |||
</div> | |||
</div> | |||
</div> |
@@ -73,7 +73,7 @@ | |||
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}" :key="repo.id"> | |||
<a class="repo-list-link gt-df gt-ac gt-sb" :href="repo.link"> | |||
<div class="item-name gt-df gt-ac gt-f1 gt-mr-2"> | |||
<svg-icon :name="repoIcon(repo)" size="16" class-name="gt-mr-2"/> | |||
<svg-icon :name="repoIcon(repo)" :size="16" class-name="gt-mr-2"/> | |||
<div class="text gt-bold truncate gt-ml-1">{{ repo.full_name }}</div> | |||
<span v-if="repo.archived"> | |||
<svg-icon name="octicon-archive" :size="16" class-name="gt-ml-2"/> |
@@ -10,8 +10,8 @@ | |||
-d '{"context": "test/context", "description": "description", "state": "${state}", "target_url": "http://localhost"}' | |||
--> | |||
<div> | |||
<!-- eslint-disable --> | |||
<div v-if="mergeForm.hasPendingPullRequestMerge" v-html="mergeForm.hasPendingPullRequestMergeTip" class="ui info message"></div> | |||
<!-- eslint-disable-next-line vue/no-v-html --> | |||
<div v-if="mergeForm.hasPendingPullRequestMerge" v-html="mergeForm.hasPendingPullRequestMergeTip" class="ui info message"/> | |||
<div class="ui form" v-if="showActionForm"> | |||
<form :action="mergeForm.baseLink+'/merge'" method="post"> | |||
@@ -30,7 +30,8 @@ | |||
<button @click.prevent="clearMergeMessage" class="ui tertiary button"> | |||
{{ mergeForm.textClearMergeMessage }} | |||
</button> | |||
<div class="ui label"><!-- TODO: Convert to tooltip once we can use tooltips in Vue templates --> | |||
<div class="ui label"> | |||
<!-- TODO: Convert to tooltip once we can use tooltips in Vue templates --> | |||
{{ mergeForm.textClearMergeMessageHint }} | |||
</div> | |||
</template> |
@@ -1,208 +0,0 @@ | |||
import {createApp, nextTick} from 'vue'; | |||
import $ from 'jquery'; | |||
export function initRepoBranchTagDropdown(selector) { | |||
$(selector).each(function (dropdownIndex, elRoot) { | |||
const data = { | |||
csrfToken: window.config.csrfToken, | |||
items: [], | |||
searchTerm: '', | |||
menuVisible: false, | |||
createTag: false, | |||
release: null, | |||
isViewTag: false, | |||
isViewBranch: false, | |||
isViewTree: false, | |||
active: 0, | |||
...window.config.pageData.branchDropdownDataList[dropdownIndex], | |||
}; | |||
// the "data.defaultBranch" is ambiguous, it could be "branch name" or "tag name" | |||
if (data.showBranchesInDropdown && data.branches) { | |||
for (const branch of data.branches) { | |||
data.items.push({name: branch, url: branch, branch: true, tag: false, selected: branch === data.defaultBranch}); | |||
} | |||
} | |||
if (!data.noTag && data.tags) { | |||
for (const tag of data.tags) { | |||
if (data.release) { | |||
data.items.push({name: tag, url: tag, branch: false, tag: true, selected: tag === data.release.tagName}); | |||
} else { | |||
data.items.push({name: tag, url: tag, branch: false, tag: true, selected: tag === data.defaultBranch}); | |||
} | |||
} | |||
} | |||
const view = createApp({ | |||
delimiters: ['${', '}'], | |||
data() { | |||
return data; | |||
}, | |||
computed: { | |||
filteredItems() { | |||
const items = this.items.filter((item) => { | |||
return ((this.mode === 'branches' && item.branch) || (this.mode === 'tags' && item.tag)) && | |||
(!this.searchTerm || item.name.toLowerCase().includes(this.searchTerm.toLowerCase())); | |||
}); | |||
// no idea how to fix this so linting rule is disabled instead | |||
this.active = (items.length === 0 && this.showCreateNewBranch ? 0 : -1); // eslint-disable-line vue/no-side-effects-in-computed-properties | |||
return items; | |||
}, | |||
showNoResults() { | |||
return this.filteredItems.length === 0 && !this.showCreateNewBranch; | |||
}, | |||
showCreateNewBranch() { | |||
if (this.disableCreateBranch || !this.searchTerm) { | |||
return false; | |||
} | |||
return this.items.filter((item) => item.name.toLowerCase() === this.searchTerm.toLowerCase()).length === 0; | |||
} | |||
}, | |||
watch: { | |||
menuVisible(visible) { | |||
if (visible) { | |||
this.focusSearchField(); | |||
} | |||
} | |||
}, | |||
beforeMount() { | |||
switch (data.viewType) { | |||
case 'tree': | |||
this.isViewTree = true; | |||
break; | |||
case 'tag': | |||
this.isViewTag = true; | |||
break; | |||
default: | |||
this.isViewBranch = true; | |||
break; | |||
} | |||
document.body.addEventListener('click', (event) => { | |||
if (elRoot.contains(event.target)) return; | |||
if (this.menuVisible) { | |||
this.menuVisible = false; | |||
} | |||
}); | |||
}, | |||
methods: { | |||
selectItem(item) { | |||
const prev = this.getSelected(); | |||
if (prev !== null) { | |||
prev.selected = false; | |||
} | |||
item.selected = true; | |||
const url = (item.tag) ? this.tagURLPrefix + item.url + this.tagURLSuffix : this.branchURLPrefix + item.url + this.branchURLSuffix; | |||
if (!this.branchForm) { | |||
window.location.href = url; | |||
} else { | |||
this.isViewTree = false; | |||
this.isViewTag = false; | |||
this.isViewBranch = false; | |||
this.$refs.dropdownRefName.textContent = item.name; | |||
if (this.setAction) { | |||
$(`#${this.branchForm}`).attr('action', url); | |||
} else { | |||
$(`#${this.branchForm} input[name="refURL"]`).val(url); | |||
} | |||
$(`#${this.branchForm} input[name="ref"]`).val(item.name); | |||
if (item.tag) { | |||
this.isViewTag = true; | |||
$(`#${this.branchForm} input[name="refType"]`).val('tag'); | |||
} else { | |||
this.isViewBranch = true; | |||
$(`#${this.branchForm} input[name="refType"]`).val('branch'); | |||
} | |||
if (this.submitForm) { | |||
$(`#${this.branchForm}`).trigger('submit'); | |||
} | |||
this.menuVisible = false; | |||
} | |||
}, | |||
createNewBranch() { | |||
if (!this.showCreateNewBranch) return; | |||
$(this.$refs.newBranchForm).trigger('submit'); | |||
}, | |||
focusSearchField() { | |||
nextTick(() => { | |||
this.$refs.searchField.focus(); | |||
}); | |||
}, | |||
getSelected() { | |||
for (let i = 0, j = this.items.length; i < j; ++i) { | |||
if (this.items[i].selected) return this.items[i]; | |||
} | |||
return null; | |||
}, | |||
getSelectedIndexInFiltered() { | |||
for (let i = 0, j = this.filteredItems.length; i < j; ++i) { | |||
if (this.filteredItems[i].selected) return i; | |||
} | |||
return -1; | |||
}, | |||
scrollToActive() { | |||
let el = this.$refs[`listItem${this.active}`]; | |||
if (!el || !el.length) return; | |||
if (Array.isArray(el)) { | |||
el = el[0]; | |||
} | |||
const cont = this.$refs.scrollContainer; | |||
if (el.offsetTop < cont.scrollTop) { | |||
cont.scrollTop = el.offsetTop; | |||
} else if (el.offsetTop + el.clientHeight > cont.scrollTop + cont.clientHeight) { | |||
cont.scrollTop = el.offsetTop + el.clientHeight - cont.clientHeight; | |||
} | |||
}, | |||
keydown(event) { | |||
if (event.keyCode === 40) { // arrow down | |||
event.preventDefault(); | |||
if (this.active === -1) { | |||
this.active = this.getSelectedIndexInFiltered(); | |||
} | |||
if (this.active + (this.showCreateNewBranch ? 0 : 1) >= this.filteredItems.length) { | |||
return; | |||
} | |||
this.active++; | |||
this.scrollToActive(); | |||
} else if (event.keyCode === 38) { // arrow up | |||
event.preventDefault(); | |||
if (this.active === -1) { | |||
this.active = this.getSelectedIndexInFiltered(); | |||
} | |||
if (this.active <= 0) { | |||
return; | |||
} | |||
this.active--; | |||
this.scrollToActive(); | |||
} else if (event.keyCode === 13) { // enter | |||
event.preventDefault(); | |||
if (this.active >= this.filteredItems.length) { | |||
this.createNewBranch(); | |||
} else if (this.active >= 0) { | |||
this.selectItem(this.filteredItems[this.active]); | |||
} | |||
} else if (event.keyCode === 27) { // escape | |||
event.preventDefault(); | |||
this.menuVisible = false; | |||
} | |||
} | |||
} | |||
}); | |||
view.mount(this); | |||
}); | |||
} |
@@ -0,0 +1,293 @@ | |||
<template> | |||
<div class="ui floating filter dropdown custom"> | |||
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> | |||
<span class="text gt-df gt-ac gt-mr-2"> | |||
<template v-if="release">{{ textReleaseCompare }}</template> | |||
<template v-else> | |||
<svg-icon v-if="isViewTag" name="octicon-tag" /> | |||
<svg-icon v-else name="octicon-git-branch"/> | |||
<strong ref="dropdownRefName" class="gt-ml-3">{{ refNameText }}</strong> | |||
</template> | |||
</span> | |||
<svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/> | |||
</button> | |||
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak> | |||
<div class="ui icon search input"> | |||
<i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i> | |||
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder"> | |||
</div> | |||
<template v-if="showBranchesInDropdown"> | |||
<div class="header branch-tag-choice"> | |||
<div class="ui grid"> | |||
<div class="two column row"> | |||
<a class="reference column" href="#" @click="createTag = false; mode = 'branches'; focusSearchField()"> | |||
<span class="text" :class="{black: mode === 'branches'}"> | |||
<svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }} | |||
</span> | |||
</a> | |||
<template v-if="!noTag"> | |||
<a class="reference column" href="#" @click="createTag = true; mode = 'tags'; focusSearchField()"> | |||
<span class="text" :class="{black: mode === 'tags'}"> | |||
<svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }} | |||
</span> | |||
</a> | |||
</template> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<div class="scrolling menu" ref="scrollContainer"> | |||
<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> | |||
<div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length"> | |||
<a href="#" @click="createNewBranch()"> | |||
<div v-show="createTag"> | |||
<i class="reference tags icon"/> | |||
<!-- eslint-disable-next-line vue/no-v-html --> | |||
<span v-html="textCreateTag.replace('%s', searchTerm)"/> | |||
</div> | |||
<div v-show="!createTag"> | |||
<svg-icon name="octicon-git-branch"/> | |||
<!-- eslint-disable-next-line vue/no-v-html --> | |||
<span v-html="textCreateBranch.replace('%s', searchTerm)"/> | |||
</div> | |||
<div class="text small"> | |||
<span v-if="isViewBranch || release">{{ textCreateBranchFrom.replace('%s', branchName) }}</span> | |||
<span v-else-if="isViewTag">{{ textCreateBranchFrom.replace('%s', tagName) }}</span> | |||
<span v-else>{{ textCreateBranchFrom.replace('%s', commitIdShort) }}</span> | |||
</div> | |||
</a> | |||
<form ref="newBranchForm" :action="formActionUrl" method="post"> | |||
<input type="hidden" name="_csrf" :value="csrfToken"> | |||
<input type="hidden" name="new_branch_name" v-model="searchTerm"> | |||
<input type="hidden" name="create_tag" v-model="createTag"> | |||
<input type="hidden" name="current_path" v-model="treePath" v-if="treePath"> | |||
</form> | |||
</div> | |||
</div> | |||
<div class="message" v-if="showNoResults"> | |||
{{ noResults }} | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import {createApp, nextTick} from 'vue'; | |||
import $ from 'jquery'; | |||
import {SvgIcon} from '../svg.js'; | |||
import {pathEscapeSegments} from '../utils/url.js'; | |||
const sfc = { | |||
components: {SvgIcon}, | |||
// no `data()`, at the moment, the `data()` is provided by the init code, which is not ideal and should be fixed in the future | |||
computed: { | |||
filteredItems() { | |||
const items = this.items.filter((item) => { | |||
return ((this.mode === 'branches' && item.branch) || (this.mode === 'tags' && item.tag)) && | |||
(!this.searchTerm || item.name.toLowerCase().includes(this.searchTerm.toLowerCase())); | |||
}); | |||
// TODO: fix this anti-pattern: side-effects-in-computed-properties | |||
this.active = (items.length === 0 && this.showCreateNewBranch ? 0 : -1); | |||
return items; | |||
}, | |||
showNoResults() { | |||
return this.filteredItems.length === 0 && !this.showCreateNewBranch; | |||
}, | |||
showCreateNewBranch() { | |||
if (this.disableCreateBranch || !this.searchTerm) { | |||
return false; | |||
} | |||
return this.items.filter((item) => item.name.toLowerCase() === this.searchTerm.toLowerCase()).length === 0; | |||
}, | |||
formActionUrl() { | |||
return `${this.repoLink}/branches/_new/${pathEscapeSegments(this.branchNameSubURL)}`; | |||
}, | |||
}, | |||
watch: { | |||
menuVisible(visible) { | |||
if (visible) { | |||
this.focusSearchField(); | |||
} | |||
} | |||
}, | |||
beforeMount() { | |||
if (this.viewType === 'tree') { | |||
this.isViewTree = true; | |||
this.refNameText = this.commitIdShort; | |||
} else if (this.viewType === 'tag') { | |||
this.isViewTag = true; | |||
this.refNameText = this.tagName; | |||
} else { | |||
this.isViewBranch = true; | |||
this.refNameText = this.branchName; | |||
} | |||
document.body.addEventListener('click', (event) => { | |||
if (this.$el.contains(event.target)) return; | |||
if (this.menuVisible) { | |||
this.menuVisible = false; | |||
} | |||
}); | |||
}, | |||
methods: { | |||
selectItem(item) { | |||
const prev = this.getSelected(); | |||
if (prev !== null) { | |||
prev.selected = false; | |||
} | |||
item.selected = true; | |||
const url = (item.tag) ? this.tagURLPrefix + item.url + this.tagURLSuffix : this.branchURLPrefix + item.url + this.branchURLSuffix; | |||
if (!this.branchForm) { | |||
window.location.href = url; | |||
} else { | |||
this.isViewTree = false; | |||
this.isViewTag = false; | |||
this.isViewBranch = false; | |||
this.$refs.dropdownRefName.textContent = item.name; | |||
if (this.setAction) { | |||
$(`#${this.branchForm}`).attr('action', url); | |||
} else { | |||
$(`#${this.branchForm} input[name="refURL"]`).val(url); | |||
} | |||
$(`#${this.branchForm} input[name="ref"]`).val(item.name); | |||
if (item.tag) { | |||
this.isViewTag = true; | |||
$(`#${this.branchForm} input[name="refType"]`).val('tag'); | |||
} else { | |||
this.isViewBranch = true; | |||
$(`#${this.branchForm} input[name="refType"]`).val('branch'); | |||
} | |||
if (this.submitForm) { | |||
$(`#${this.branchForm}`).trigger('submit'); | |||
} | |||
this.menuVisible = false; | |||
} | |||
}, | |||
createNewBranch() { | |||
if (!this.showCreateNewBranch) return; | |||
$(this.$refs.newBranchForm).trigger('submit'); | |||
}, | |||
focusSearchField() { | |||
nextTick(() => { | |||
this.$refs.searchField.focus(); | |||
}); | |||
}, | |||
getSelected() { | |||
for (let i = 0, j = this.items.length; i < j; ++i) { | |||
if (this.items[i].selected) return this.items[i]; | |||
} | |||
return null; | |||
}, | |||
getSelectedIndexInFiltered() { | |||
for (let i = 0, j = this.filteredItems.length; i < j; ++i) { | |||
if (this.filteredItems[i].selected) return i; | |||
} | |||
return -1; | |||
}, | |||
scrollToActive() { | |||
let el = this.$refs[`listItem${this.active}`]; | |||
if (!el || !el.length) return; | |||
if (Array.isArray(el)) { | |||
el = el[0]; | |||
} | |||
const cont = this.$refs.scrollContainer; | |||
if (el.offsetTop < cont.scrollTop) { | |||
cont.scrollTop = el.offsetTop; | |||
} else if (el.offsetTop + el.clientHeight > cont.scrollTop + cont.clientHeight) { | |||
cont.scrollTop = el.offsetTop + el.clientHeight - cont.clientHeight; | |||
} | |||
}, | |||
keydown(event) { | |||
if (event.keyCode === 40) { // arrow down | |||
event.preventDefault(); | |||
if (this.active === -1) { | |||
this.active = this.getSelectedIndexInFiltered(); | |||
} | |||
if (this.active + (this.showCreateNewBranch ? 0 : 1) >= this.filteredItems.length) { | |||
return; | |||
} | |||
this.active++; | |||
this.scrollToActive(); | |||
} else if (event.keyCode === 38) { // arrow up | |||
event.preventDefault(); | |||
if (this.active === -1) { | |||
this.active = this.getSelectedIndexInFiltered(); | |||
} | |||
if (this.active <= 0) { | |||
return; | |||
} | |||
this.active--; | |||
this.scrollToActive(); | |||
} else if (event.keyCode === 13) { // enter | |||
event.preventDefault(); | |||
if (this.active >= this.filteredItems.length) { | |||
this.createNewBranch(); | |||
} else if (this.active >= 0) { | |||
this.selectItem(this.filteredItems[this.active]); | |||
} | |||
} else if (event.keyCode === 27) { // escape | |||
event.preventDefault(); | |||
this.menuVisible = false; | |||
} | |||
} | |||
} | |||
}; | |||
export function initRepoBranchTagSelector(selector) { | |||
for (const [elIndex, elRoot] of document.querySelectorAll(selector).entries()) { | |||
const data = { | |||
csrfToken: window.config.csrfToken, | |||
items: [], | |||
searchTerm: '', | |||
refNameText: '', | |||
menuVisible: false, | |||
createTag: false, | |||
release: null, | |||
isViewTag: false, | |||
isViewBranch: false, | |||
isViewTree: false, | |||
active: 0, | |||
...window.config.pageData.branchDropdownDataList[elIndex], | |||
}; | |||
// the "data.defaultBranch" is ambiguous, it could be "branch name" or "tag name" | |||
if (data.showBranchesInDropdown && data.branches) { | |||
for (const branch of data.branches) { | |||
data.items.push({name: branch, url: branch, branch: true, tag: false, selected: branch === data.defaultBranch}); | |||
} | |||
} | |||
if (!data.noTag && data.tags) { | |||
for (const tag of data.tags) { | |||
if (data.release) { | |||
data.items.push({name: tag, url: tag, branch: false, tag: true, selected: tag === data.release.tagName}); | |||
} else { | |||
data.items.push({name: tag, url: tag, branch: false, tag: true, selected: tag === data.defaultBranch}); | |||
} | |||
} | |||
} | |||
const comp = {...sfc, data() { return data }}; | |||
createApp(comp).mount(elRoot); | |||
} | |||
} | |||
export default sfc; // activate IDE's Vue plugin | |||
</script> |
@@ -1,6 +1,7 @@ | |||
import $ from 'jquery'; | |||
import {svg} from '../svg.js'; | |||
import {toggleElem} from '../utils/dom.js'; | |||
import {pathEscapeSegments} from '../utils/url.js'; | |||
const {csrf} = window.config; | |||
@@ -73,10 +74,6 @@ export function filterRepoFilesWeighted(files, filter) { | |||
return filterResult; | |||
} | |||
export function escapePath(s) { | |||
return s.split('/').map(encodeURIComponent).join('/'); | |||
} | |||
function filterRepoFiles(filter) { | |||
const treeLink = $repoFindFileInput.attr('data-url-tree-link'); | |||
$repoFindFileTableBody.empty(); | |||
@@ -88,7 +85,7 @@ function filterRepoFiles(filter) { | |||
for (const r of filterResult) { | |||
const $row = $(tmplRow); | |||
const $a = $row.find('a'); | |||
$a.attr('href', `${treeLink}/${escapePath(r.matchResult.join(''))}`); | |||
$a.attr('href', `${treeLink}/${pathEscapeSegments(r.matchResult.join(''))}`); | |||
const $octiconFile = $(svg('octicon-file')).addClass('gt-mr-3'); | |||
$a.append($octiconFile); | |||
// if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz'] |
@@ -1,5 +1,5 @@ | |||
import {describe, expect, test} from 'vitest'; | |||
import {strSubMatch, calcMatchedWeight, filterRepoFilesWeighted, escapePath} from './repo-findfile.js'; | |||
import {strSubMatch, calcMatchedWeight, filterRepoFilesWeighted} from './repo-findfile.js'; | |||
describe('Repo Find Files', () => { | |||
test('strSubMatch', () => { | |||
@@ -32,9 +32,4 @@ describe('Repo Find Files', () => { | |||
expect(res).toHaveLength(2); | |||
expect(res[0].matchResult).toEqual(['', 'word', '.txt']); | |||
}); | |||
test('escapePath', () => { | |||
expect(escapePath('a/b/c')).toEqual('a/b/c'); | |||
expect(escapePath('a/b/ c')).toEqual('a/b/%20c'); | |||
}); | |||
}); |
@@ -11,7 +11,7 @@ import { | |||
import {initUnicodeEscapeButton} from './repo-unicode-escape.js'; | |||
import {svg} from '../svg.js'; | |||
import {htmlEscape} from 'escape-goat'; | |||
import {initRepoBranchTagDropdown} from '../components/RepoBranchTagDropdown.js'; | |||
import {initRepoBranchTagSelector} from '../components/RepoBranchTagSelector.vue'; | |||
import { | |||
initRepoCloneLink, initRepoCommonBranchOrTagDropdown, initRepoCommonFilterSearchDropdown, | |||
initRepoCommonLanguageStats, | |||
@@ -486,7 +486,7 @@ export function initRepository() { | |||
// File list and commits | |||
if ($('.repository.file.list').length > 0 || $('.branch-dropdown').length > 0 || | |||
$('.repository.commits').length > 0 || $('.repository.release').length > 0) { | |||
initRepoBranchTagDropdown('.choose.reference .ui.dropdown'); | |||
initRepoBranchTagSelector('.js-branch-tag-selector'); | |||
} | |||
// Wiki |
@@ -1,3 +1,4 @@ | |||
import {h} from 'vue'; | |||
import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg'; | |||
import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg'; | |||
import octiconClock from '../../public/img/svg/octicon-clock.svg'; | |||
@@ -40,6 +41,8 @@ import giteaDoubleChevronLeft from '../../public/img/svg/gitea-double-chevron-le | |||
import giteaDoubleChevronRight from '../../public/img/svg/gitea-double-chevron-right.svg'; | |||
import octiconChevronLeft from '../../public/img/svg/octicon-chevron-left.svg'; | |||
import octiconOrganization from '../../public/img/svg/octicon-organization.svg'; | |||
import octiconTag from '../../public/img/svg/octicon-tag.svg'; | |||
import octiconGitBranch from '../../public/img/svg/octicon-git-branch.svg'; | |||
const svgs = { | |||
'octicon-blocked': octiconBlocked, | |||
@@ -84,9 +87,13 @@ const svgs = { | |||
'gitea-double-chevron-right': giteaDoubleChevronRight, | |||
'octicon-chevron-left': octiconChevronLeft, | |||
'octicon-organization': octiconOrganization, | |||
'octicon-tag': octiconTag, | |||
'octicon-git-branch': octiconGitBranch, | |||
}; | |||
// TODO: use a more general approach to access SVG icons. At the moment, developers must check, pick and fill the names manually, most of the SVG icons in assets couldn't be used directly. | |||
// TODO: use a more general approach to access SVG icons. | |||
// At the moment, developers must check, pick and fill the names manually, | |||
// most of the SVG icons in assets couldn't be used directly. | |||
const parser = new DOMParser(); | |||
const serializer = new XMLSerializer(); | |||
@@ -112,12 +119,7 @@ export const SvgIcon = { | |||
size: {type: Number, default: 16}, | |||
className: {type: String, default: ''}, | |||
}, | |||
computed: { | |||
svg() { | |||
return svg(this.name, this.size, this.className); | |||
}, | |||
render() { | |||
return h('span', {innerHTML: svg(this.name, this.size, this.className)}); | |||
}, | |||
template: `<span v-html="svg" />` | |||
}; |
@@ -0,0 +1,3 @@ | |||
export function pathEscapeSegments(s) { | |||
return s.split('/').map(encodeURIComponent).join('/'); | |||
} |
@@ -0,0 +1,7 @@ | |||
import {expect, test} from 'vitest'; | |||
import {pathEscapeSegments} from './url.js'; | |||
test('pathEscapeSegments', () => { | |||
expect(pathEscapeSegments('a/b/c')).toEqual('a/b/c'); | |||
expect(pathEscapeSegments('a/b/ c')).toEqual('a/b/%20c'); | |||
}); |
@@ -1924,10 +1924,6 @@ footer { | |||
display: block; | |||
} | |||
[v-cloak] { | |||
display: none !important; | |||
} | |||
.repos-search { | |||
padding-bottom: 0 !important; | |||
} |
@@ -222,12 +222,6 @@ | |||
font-size: 1.2em; | |||
} | |||
.choose.reference { | |||
.header .icon { | |||
font-size: 1.4em; | |||
} | |||
} | |||
.repo-path { | |||
.section, |
@@ -196,6 +196,10 @@ export default { | |||
], | |||
}, | |||
plugins: [ | |||
new webpack.DefinePlugin({ | |||
__VUE_OPTIONS_API__: true, // at the moment, many Vue components still use the Vue Options API | |||
__VUE_PROD_DEVTOOLS__: false, // do not enable devtools support in production | |||
}), | |||
new VueLoaderPlugin(), | |||
new MiniCssExtractPlugin({ | |||
filename: 'css/[name].css', |