mirror of
https://github.com/go-gitea/gitea
synced 2024-08-28 13:05:19 +02:00
Refactor branch/tag selector dropdown (first step) (#23394)
Follow: * #23345 The branch/tag selector dropdown mixes jQuery/Fomantic UI/Vue together, it's very diffcult to maintain and causes unfixable a11y problems. It also causes problems like #19851 #21314 #21952 This PR is the first step for the refactoring, move `data-` attributes to JS object and use Vue data as much as possible. The old selector `'.choose.reference .dropdown'` was also wrong, it hits `<div class="choose reference"><svg class="dropdown icon">` and would cause undefined behaviors. I have done some quick tests and it works. After this PR gets merged, I will move the code into a Vue SFC in next PR. ![image](https://user-images.githubusercontent.com/2114189/224099638-378a8a86-0865-47d1-bcba-f972506374c7.png) ![image](https://user-images.githubusercontent.com/2114189/224099690-70276cf5-b1e4-404a-b0c6-582448abf40e.png) --------- Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
parent
f20bf2fe3b
commit
75022f8b1a
4 changed files with 103 additions and 106 deletions
|
@ -2,101 +2,111 @@
|
||||||
{{$defaultBranch := $.root.BranchName}}{{if and .root.IsViewTag (not .noTag)}}{{$defaultBranch = .root.TagName}}{{end}}{{if eq $defaultBranch ""}}{{$defaultBranch = $.root.Repository.DefaultBranch}}{{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}}
|
{{$type := ""}}{{if and .root.IsViewTag (not .noTag)}}{{$type = "tag"}}{{else if .root.IsViewBranch}}{{$type = "branch"}}{{else}}{{$type = "tree"}}{{end}}
|
||||||
{{$showBranchesInDropdown := not .root.HideBranchesInDropdown}}
|
{{$showBranchesInDropdown := not .root.HideBranchesInDropdown}}
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
const data = {
|
||||||
|
'textReleaseCompare': {{.root.locale.Tr "repo.release.compare"}},
|
||||||
|
'textCreateTag': {{.root.locale.Tr "repo.tag.create_tag"}},
|
||||||
|
'textCreateBranch': {{.root.locale.Tr "repo.branch.create_branch"}},
|
||||||
|
'textCreateBranchFrom': {{.root.locale.Tr "repo.branch.create_from"}},
|
||||||
|
'textBranches': {{.root.locale.Tr "repo.branches"}},
|
||||||
|
'textTags': {{.root.locale.Tr "repo.tags"}},
|
||||||
|
|
||||||
|
'mode': '{{if or .root.IsViewTag .isTag}}tags{{else}}branches{{end}}',
|
||||||
|
'showBranchesInDropdown': {{$showBranchesInDropdown}},
|
||||||
|
'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}}...',
|
||||||
|
'branchForm': {{$.branchForm}},
|
||||||
|
'disableCreateBranch': {{if .disableCreateBranch}}{{.disableCreateBranch}}{{else}}{{not .root.CanCreateBranch}}{{end}},
|
||||||
|
'setAction': {{.setAction}},
|
||||||
|
'submitForm': {{.submitForm}},
|
||||||
|
'viewType': {{$type}},
|
||||||
|
'refName': {{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}},
|
||||||
|
'commitIdShort': {{ShortSha .root.CommitID}},
|
||||||
|
'tagName': {{.root.TagName}},
|
||||||
|
'branchName': {{.root.BranchName}},
|
||||||
|
'noTag': {{.noTag}},
|
||||||
|
'branches': {{.root.Branches}},
|
||||||
|
'tags': {{.root.Tags}},
|
||||||
|
'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}}',
|
||||||
|
'repoLink': {{.root.RepoLink}},
|
||||||
|
'treePath': {{.root.TreePath}},
|
||||||
|
'branchNameSubURL': {{.root.BranchNameSubURL}},
|
||||||
|
'noResults': {{.root.locale.Tr "repo.pulls.no_results"}},
|
||||||
|
};
|
||||||
|
{{if .release}}
|
||||||
|
data.release = {
|
||||||
|
'tagName': {{.release.TagName}},
|
||||||
|
};
|
||||||
|
{{end}}
|
||||||
|
window.config.pageData.branchDropdownDataList = window.config.pageData.branchDropdownDataList || [];
|
||||||
|
window.config.pageData.branchDropdownDataList.push(data);
|
||||||
|
</script>
|
||||||
|
|
||||||
<div class="fitted item choose reference">
|
<div class="fitted item choose reference">
|
||||||
<div class="ui floating filter dropdown custom"
|
<div class="ui floating filter dropdown custom">
|
||||||
data-branch-form="{{if $.branchForm}}{{$.branchForm}}{{end}}"
|
|
||||||
data-can-create-branch="{{if .canCreateBranch}}{{.canCreateBranch}}{{else}}{{.root.CanCreateBranch}}{{end}}"
|
|
||||||
data-no-results="{{.root.locale.Tr "repo.pulls.no_results"}}"
|
|
||||||
data-set-action="{{.setAction}}" data-submit-form="{{.submitForm}}"
|
|
||||||
data-view-type="{{$type}}"
|
|
||||||
data-ref-name="{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}"
|
|
||||||
data-branch-url-prefix="{{if .branchURLPrefix}}{{.branchURLPrefix}}{{else}}{{$.root.RepoLink}}/{{if $.root.PageIsCommits}}commits{{else}}src{{end}}/branch/{{end}}"
|
|
||||||
data-branch-url-suffix="{{if .branchURLSuffix}}{{.branchURLSuffix}}{{else}}{{if $.root.TreePath}}/{{PathEscapeSegments $.root.TreePath}}{{end}}{{end}}"
|
|
||||||
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}}"
|
|
||||||
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}}">
|
|
||||||
<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" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
|
||||||
<span class="text gt-df gt-ac gt-mr-2">
|
<span class="text gt-df gt-ac gt-mr-2">
|
||||||
{{if $release}}
|
{{/* v-cloak is used to hide unnecessary elements before Vue componment is mounted */}}
|
||||||
{{.root.locale.Tr "repo.release.compare"}}
|
<span v-cloak v-if="release">${ textReleaseCompare }</span>
|
||||||
{{else}}
|
|
||||||
<span :class="{visible: isViewTag}" v-if="isViewTag" {{if not (eq $type "tag")}}v-cloak{{end}}>{{svg "octicon-tag"}}</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: 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>
|
<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>
|
<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>
|
</span>
|
||||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||||
</button>
|
</button>
|
||||||
<div class="data gt-hidden" data-mode="{{if or .root.IsViewTag .isTag}}tags{{else}}branches{{end}}">
|
|
||||||
{{if $showBranchesInDropdown}}
|
|
||||||
{{range .root.Branches}}
|
|
||||||
<div class="item branch {{if eq $defaultBranch .}}selected{{end}}" data-url="{{PathEscapeSegments .}}">{{.}}</div>
|
|
||||||
{{end}}
|
|
||||||
{{end}}
|
|
||||||
{{if (not .noTag)}}
|
|
||||||
{{range .root.Tags}}
|
|
||||||
{{if $release}}
|
|
||||||
<div class="item tag {{if eq $release.TagName .}}selected{{end}}" data-url="{{PathEscapeSegments .}}">{{.}}</div>
|
|
||||||
{{else}}
|
|
||||||
<div class="item tag {{if eq $defaultBranch .}}selected{{end}}" data-url="{{PathEscapeSegments .}}">{{.}}</div>
|
|
||||||
{{end}}
|
|
||||||
{{end}}
|
|
||||||
{{end}}
|
|
||||||
</div>
|
|
||||||
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
|
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
|
||||||
<div class="ui icon search input">
|
<div class="ui icon search input">
|
||||||
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
|
<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="{{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}}...">
|
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
|
||||||
</div>
|
</div>
|
||||||
{{if $showBranchesInDropdown}}
|
<template v-if="showBranchesInDropdown">
|
||||||
<div class="header branch-tag-choice">
|
<div class="header branch-tag-choice">
|
||||||
<div class="ui grid">
|
<div class="ui grid">
|
||||||
<div class="two column row">
|
<div class="two column row">
|
||||||
<a class="reference column" href="#" @click="createTag = false; mode = 'branches'; focusSearchField()">
|
<a class="reference column" href="#" @click="createTag = false; mode = 'branches'; focusSearchField()">
|
||||||
<span class="text" :class="{black: mode == 'branches'}">
|
<span class="text" :class="{black: mode === 'branches'}">
|
||||||
{{svg "octicon-git-branch" 16 "gt-mr-2"}}{{.root.locale.Tr "repo.branches"}}
|
{{svg "octicon-git-branch" 16 "gt-mr-2"}}${ textBranches }
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
{{if not .noTag}}
|
<template v-if="!noTag">
|
||||||
<a class="reference column" href="#" @click="createTag = true; mode = 'tags'; focusSearchField()">
|
<a class="reference column" href="#" @click="createTag = true; mode = 'tags'; focusSearchField()">
|
||||||
<span class="text" :class="{black: mode == 'tags'}">
|
<span class="text" :class="{black: mode === 'tags'}">
|
||||||
{{svg "octicon-tag" 16 "gt-mr-2"}}{{.root.locale.Tr "repo.tags"}}
|
{{svg "octicon-tag" 16 "gt-mr-2"}}${ textTags }
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
{{end}}
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
</template>
|
||||||
<div class="scrolling menu" ref="scrollContainer">
|
<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 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">
|
<div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length">
|
||||||
<a href="#" @click="createNewBranch()">
|
<a href="#" @click="createNewBranch()">
|
||||||
<div v-show="createTag">
|
<div v-show="createTag">
|
||||||
<i class="reference tags icon"></i>
|
<i class="reference tags icon"></i>
|
||||||
{{.root.locale.Tr "repo.tag.create_tag" `${ searchTerm }` | Safe}}
|
<span v-html="textCreateTag.replace('%s', searchTerm)"></span>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="!createTag">
|
<div v-show="!createTag">
|
||||||
{{svg "octicon-git-branch"}}
|
{{svg "octicon-git-branch"}}
|
||||||
{{.root.locale.Tr "repo.branch.create_branch" `${ searchTerm }` | Safe}}
|
<span v-html="textCreateBranch.replace('%s', searchTerm)"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text small">
|
<div class="text small">
|
||||||
{{if or .root.IsViewBranch $release}}
|
<span v-if="isViewBranch || release">${ textCreateBranchFrom.replace('%s', branchName) }</span>
|
||||||
{{.root.locale.Tr "repo.branch.create_from" .root.BranchName}}
|
<span v-else-if="isViewTag">${ textCreateBranchFrom.replace('%s', tagName) }</span>
|
||||||
{{else if .root.IsViewTag}}
|
<span v-else>${ textCreateBranchFrom.replace('%s', commitIdShort) }</span>
|
||||||
{{.root.locale.Tr "repo.branch.create_from" .root.TagName}}
|
|
||||||
{{else}}
|
|
||||||
{{.root.locale.Tr "repo.branch.create_from" (ShortSha .root.CommitID)}}
|
|
||||||
{{end}}
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<form ref="newBranchForm" action="{{.root.RepoLink}}/branches/_new/{{.root.BranchNameSubURL}}" method="post">
|
<form ref="newBranchForm" action="{{.root.RepoLink}}/branches/_new/{{.root.BranchNameSubURL}}" method="post">
|
||||||
{{.root.CsrfTokenHtml}}
|
<input type="hidden" name="_csrf" :value="csrfToken">
|
||||||
<input type="hidden" name="new_branch_name" v-model="searchTerm">
|
<input type="hidden" name="new_branch_name" v-model="searchTerm">
|
||||||
<input type="hidden" name="create_tag" v-model="createTag">
|
<input type="hidden" name="create_tag" v-model="createTag">
|
||||||
{{if $.root.TreePath}}
|
<input type="hidden" name="current_path" v-model="treePath" v-if="treePath">
|
||||||
<input type="hidden" name="current_path" value="{{.root.TreePath}}">
|
|
||||||
{{end}}
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -52,13 +52,13 @@
|
||||||
data-modal-cherry-pick-type="revert"
|
data-modal-cherry-pick-type="revert"
|
||||||
data-modal-cherry-pick-header="{{$.locale.Tr "repo.commit.revert-header" (ShortSha .CommitID)}}"
|
data-modal-cherry-pick-header="{{$.locale.Tr "repo.commit.revert-header" (ShortSha .CommitID)}}"
|
||||||
data-modal-cherry-pick-content="{{$.locale.Tr "repo.commit.revert-content"}}"
|
data-modal-cherry-pick-content="{{$.locale.Tr "repo.commit.revert-content"}}"
|
||||||
data-modal-cherry-pick-submit="{{.locale.Tr "repo.commit.revert"}}">{{.locale.Tr "repo.commit.revert"}}</a></div>
|
data-modal-cherry-pick-submit="{{.locale.Tr "repo.commit.revert"}}">{{.locale.Tr "repo.commit.revert"}}</div>
|
||||||
<div class="item cherry-pick-button show-modal"
|
<div class="item cherry-pick-button show-modal"
|
||||||
data-modal="#cherry-pick-modal"
|
data-modal="#cherry-pick-modal"
|
||||||
data-modal-cherry-pick-type="cherry-pick"
|
data-modal-cherry-pick-type="cherry-pick"
|
||||||
data-modal-cherry-pick-header="{{$.locale.Tr "repo.commit.cherry-pick-header" (ShortSha .CommitID)}}"
|
data-modal-cherry-pick-header="{{$.locale.Tr "repo.commit.cherry-pick-header" (ShortSha .CommitID)}}"
|
||||||
data-modal-cherry-pick-content="{{$.locale.Tr "repo.commit.cherry-pick-content"}}"
|
data-modal-cherry-pick-content="{{$.locale.Tr "repo.commit.cherry-pick-content"}}"
|
||||||
data-modal-cherry-pick-submit="{{.locale.Tr "repo.commit.cherry-pick"}}">{{.locale.Tr "repo.commit.cherry-pick"}}</a></div>
|
data-modal-cherry-pick-submit="{{.locale.Tr "repo.commit.cherry-pick"}}">{{.locale.Tr "repo.commit.cherry-pick"}}</div>
|
||||||
<div class="ui basic modal" id="cherry-pick-modal">
|
<div class="ui basic modal" id="cherry-pick-modal">
|
||||||
<div class="ui icon header">
|
<div class="ui icon header">
|
||||||
<span id="cherry-pick-header"></span>
|
<span id="cherry-pick-header"></span>
|
||||||
|
@ -66,10 +66,10 @@
|
||||||
<div class="content center">
|
<div class="content center">
|
||||||
<p id="cherry-pick-content" class="branch-dropdown"></p>
|
<p id="cherry-pick-content" class="branch-dropdown"></p>
|
||||||
{{template "repo/branch_dropdown" dict "root" .
|
{{template "repo/branch_dropdown" dict "root" .
|
||||||
"noTag" "true" "canCreateBranch" "false"
|
"noTag" true "disableCreateBranch" true
|
||||||
"branchForm" "branch-dropdown-form"
|
"branchForm" "branch-dropdown-form"
|
||||||
"branchURLPrefix" (printf "%s/_cherrypick/%s/" $.RepoLink .CommitID) "branchURLSuffix" ""
|
"branchURLPrefix" (printf "%s/_cherrypick/%s/" $.RepoLink .CommitID) "branchURLSuffix" ""
|
||||||
"setAction" "true" "submitForm" "true"}}
|
"setAction" true "submitForm" true}}
|
||||||
<form method="GET" action="{{$.RepoLink}}/_cherrypick/{{.CommitID}}/{{if $.BranchName}}{{PathEscapeSegments $.BranchName}}{{else}}{{PathEscapeSegments $.Repository.DefaultBranch}}{{end}}" id="branch-dropdown-form">
|
<form method="GET" action="{{$.RepoLink}}/_cherrypick/{{.CommitID}}/{{if $.BranchName}}{{PathEscapeSegments $.BranchName}}{{else}}{{PathEscapeSegments $.Repository.DefaultBranch}}{{end}}" id="branch-dropdown-form">
|
||||||
<input type="hidden" name="ref" value="{{if $.BranchName}}{{$.BranchName}}{{else}}{{$.Repository.DefaultBranch}}{{end}}">
|
<input type="hidden" name="ref" value="{{if $.BranchName}}{{$.BranchName}}{{else}}{{$.Repository.DefaultBranch}}{{end}}">
|
||||||
<input type="hidden" name="refType" value="branch">
|
<input type="hidden" name="refType" value="branch">
|
||||||
|
|
|
@ -3,43 +3,41 @@ import $ from 'jquery';
|
||||||
import {vueDelimiters} from './VueComponentLoader.js';
|
import {vueDelimiters} from './VueComponentLoader.js';
|
||||||
|
|
||||||
export function initRepoBranchTagDropdown(selector) {
|
export function initRepoBranchTagDropdown(selector) {
|
||||||
$(selector).each(function () {
|
$(selector).each(function (dropdownIndex, elRoot) {
|
||||||
const $dropdown = $(this);
|
|
||||||
const $data = $dropdown.find('.data');
|
|
||||||
const data = {
|
const data = {
|
||||||
|
csrfToken: window.config.csrfToken,
|
||||||
items: [],
|
items: [],
|
||||||
mode: $data.data('mode'),
|
|
||||||
searchTerm: '',
|
searchTerm: '',
|
||||||
refName: '',
|
|
||||||
noResults: '',
|
|
||||||
canCreateBranch: false,
|
|
||||||
menuVisible: false,
|
menuVisible: false,
|
||||||
createTag: false,
|
createTag: false,
|
||||||
|
release: null,
|
||||||
|
|
||||||
isViewTag: false,
|
isViewTag: false,
|
||||||
isViewBranch: false,
|
isViewBranch: false,
|
||||||
isViewTree: false,
|
isViewTree: false,
|
||||||
active: 0,
|
|
||||||
branchForm: '',
|
|
||||||
branchURLPrefix: '',
|
|
||||||
branchURLSuffix: '',
|
|
||||||
tagURLPrefix: '',
|
|
||||||
tagURLSuffix: '',
|
|
||||||
setAction: false,
|
|
||||||
submitForm: false,
|
|
||||||
};
|
|
||||||
$data.find('.item').each(function () {
|
|
||||||
data.items.push({
|
|
||||||
name: $(this).text(),
|
|
||||||
url: $(this).data('url'),
|
|
||||||
branch: $(this).hasClass('branch'),
|
|
||||||
tag: $(this).hasClass('tag'),
|
|
||||||
selected: $(this).hasClass('selected')
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$data.remove();
|
|
||||||
|
|
||||||
// eslint-disable-next-line unicorn/no-this-assignment
|
active: 0,
|
||||||
const elRoot = this;
|
|
||||||
|
...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({
|
const view = createApp({
|
||||||
delimiters: vueDelimiters,
|
delimiters: vueDelimiters,
|
||||||
data() {
|
data() {
|
||||||
|
@ -60,7 +58,7 @@ export function initRepoBranchTagDropdown(selector) {
|
||||||
return this.filteredItems.length === 0 && !this.showCreateNewBranch;
|
return this.filteredItems.length === 0 && !this.showCreateNewBranch;
|
||||||
},
|
},
|
||||||
showCreateNewBranch() {
|
showCreateNewBranch() {
|
||||||
if (!this.canCreateBranch || !this.searchTerm) {
|
if (this.disableCreateBranch || !this.searchTerm) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -77,10 +75,7 @@ export function initRepoBranchTagDropdown(selector) {
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
this.noResults = elRoot.getAttribute('data-no-results');
|
switch (data.viewType) {
|
||||||
this.canCreateBranch = elRoot.getAttribute('data-can-create-branch') === 'true';
|
|
||||||
this.branchForm = elRoot.getAttribute('data-branch-form');
|
|
||||||
switch (elRoot.getAttribute('data-view-type')) {
|
|
||||||
case 'tree':
|
case 'tree':
|
||||||
this.isViewTree = true;
|
this.isViewTree = true;
|
||||||
break;
|
break;
|
||||||
|
@ -91,14 +86,6 @@ export function initRepoBranchTagDropdown(selector) {
|
||||||
this.isViewBranch = true;
|
this.isViewBranch = true;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
this.refName = elRoot.getAttribute('data-ref-name');
|
|
||||||
this.branchURLPrefix = elRoot.getAttribute('data-branch-url-prefix');
|
|
||||||
this.branchURLSuffix = elRoot.getAttribute('data-branch-url-suffix');
|
|
||||||
this.tagURLPrefix = elRoot.getAttribute('data-tag-url-prefix');
|
|
||||||
this.tagURLSuffix = elRoot.getAttribute('data-tag-url-suffix');
|
|
||||||
this.setAction = elRoot.getAttribute('data-set-action') === 'true';
|
|
||||||
this.submitForm = elRoot.getAttribute('data-submit-form') === 'true';
|
|
||||||
|
|
||||||
|
|
||||||
document.body.addEventListener('click', (event) => {
|
document.body.addEventListener('click', (event) => {
|
||||||
if (elRoot.contains(event.target)) return;
|
if (elRoot.contains(event.target)) return;
|
||||||
|
@ -116,7 +103,7 @@ export function initRepoBranchTagDropdown(selector) {
|
||||||
}
|
}
|
||||||
item.selected = true;
|
item.selected = true;
|
||||||
const url = (item.tag) ? this.tagURLPrefix + item.url + this.tagURLSuffix : this.branchURLPrefix + item.url + this.branchURLSuffix;
|
const url = (item.tag) ? this.tagURLPrefix + item.url + this.tagURLSuffix : this.branchURLPrefix + item.url + this.branchURLSuffix;
|
||||||
if (this.branchForm === '') {
|
if (!this.branchForm) {
|
||||||
window.location.href = url;
|
window.location.href = url;
|
||||||
} else {
|
} else {
|
||||||
this.isViewTree = false;
|
this.isViewTree = false;
|
||||||
|
|
|
@ -485,7 +485,7 @@ export function initRepository() {
|
||||||
// File list and commits
|
// File list and commits
|
||||||
if ($('.repository.file.list').length > 0 || $('.branch-dropdown').length > 0 ||
|
if ($('.repository.file.list').length > 0 || $('.branch-dropdown').length > 0 ||
|
||||||
$('.repository.commits').length > 0 || $('.repository.release').length > 0) {
|
$('.repository.commits').length > 0 || $('.repository.release').length > 0) {
|
||||||
initRepoBranchTagDropdown('.choose.reference .dropdown');
|
initRepoBranchTagDropdown('.choose.reference .ui.dropdown');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Wiki
|
// Wiki
|
||||||
|
|
Loading…
Reference in a new issue