- <script>
- import {createApp, nextTick} from 'vue';
- import $ from 'jquery';
- import {SvgIcon} from '../svg.js';
- import {pathEscapeSegments} from '../utils/url.js';
- import {showErrorToast} from '../modules/toast.js';
- import {GET} from '../modules/fetch.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/${this.branchNameSubURL}`;
- },
- shouldCreateTag() {
- return this.mode === 'tags';
- },
- },
-
- watch: {
- menuVisible(visible) {
- if (visible) {
- this.focusSearchField();
- this.fetchBranchesOrTags();
- }
- },
- },
-
- 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}`]; // eslint-disable-line no-jquery/variable-pattern
- 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;
- }
- },
- handleTabSwitch(mode) {
- if (this.isLoading) return;
- this.mode = mode;
- this.focusSearchField();
- this.fetchBranchesOrTags();
- },
- async fetchBranchesOrTags() {
- if (!['branches', 'tags'].includes(this.mode) || this.isLoading) return;
- // only fetch when branch/tag list has not been initialized
- if (this.hasListInitialized[this.mode] ||
- (this.mode === 'branches' && !this.showBranchesInDropdown) ||
- (this.mode === 'tags' && this.noTag)
- ) {
- return;
- }
- this.isLoading = true;
- try {
- const resp = await GET(`${this.repoLink}/${this.mode}/list`);
- const {results} = await resp.json();
- for (const result of results) {
- let selected = false;
- if (this.mode === 'branches') {
- selected = result === this.defaultSelectedRefName;
- } else {
- selected = result === (this.release ? this.release.tagName : this.defaultSelectedRefName);
- }
- this.items.push({name: result, url: pathEscapeSegments(result), branch: this.mode === 'branches', tag: this.mode === 'tags', selected});
- }
- this.hasListInitialized[this.mode] = true;
- } catch (e) {
- showErrorToast(`Network error when fetching ${this.mode}, error: ${e}`);
- } finally {
- this.isLoading = 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,
- release: null,
-
- isViewTag: false,
- isViewBranch: false,
- isViewTree: false,
-
- active: 0,
- isLoading: false,
- // This means whether branch list/tag list has initialized
- hasListInitialized: {
- 'branches': false,
- 'tags': false,
- },
- ...window.config.pageData.branchDropdownDataList[elIndex],
- };
-
- const comp = {...sfc, data() { return data }};
- createApp(comp).mount(elRoot);
- }
- }
-
- export default sfc; // activate IDE's Vue plugin
- </script>
- <template>
- <div class="ui dropdown custom">
- <button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex gt-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
- <span class="text tw-flex tw-content-center 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-show="menuVisible" v-cloak>
- <div class="ui icon search input">
- <i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
- <input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
- </div>
- <div v-if="showBranchesInDropdown" class="branch-tag-tab">
- <a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
- <svg-icon name="octicon-git-branch" :size="16" class-name="gt-mr-2"/>{{ textBranches }}
- </a>
- <a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
- <svg-icon name="octicon-tag" :size="16" class-name="gt-mr-2"/>{{ textTags }}
- </a>
- </div>
- <div class="branch-tag-divider"/>
- <div class="scrolling menu" ref="scrollContainer">
- <svg-icon name="octicon-rss" symbol-id="svg-symbol-octicon-rss"/>
- <div class="loading-indicator is-loading" v-if="isLoading"/>
- <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 class="ui label" v-if="item.name===repoDefaultBranch && mode === 'branches'">
- {{ textDefaultBranchLabel }}
- </div>
- <a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon tw-float-right" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
- <!-- creating a lot of Vue component is pretty slow, so we use a static SVG here -->
- <svg width="14" height="14" class="svg octicon-rss"><use href="#svg-symbol-octicon-rss"/></svg>
- </a>
- </div>
- <div class="item" v-if="showCreateNewBranch" :class="{active: active === filteredItems.length}" :ref="'listItem' + filteredItems.length">
- <a href="#" @click="createNewBranch()">
- <div v-show="shouldCreateTag">
- <i class="reference tags icon"/>
- <!-- eslint-disable-next-line vue/no-v-html -->
- <span v-html="textCreateTag.replace('%s', searchTerm)"/>
- </div>
- <div v-show="!shouldCreateTag">
- <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="shouldCreateTag">
- <input type="hidden" name="current_path" v-model="treePath" v-if="treePath">
- </form>
- </div>
- </div>
- <div class="message" v-if="showNoResults && !isLoading">
- {{ noResults }}
- </div>
- </div>
- </div>
- </template>
- <style scoped>
- .branch-tag-tab {
- padding: 0 10px;
- }
-
- .branch-tag-item {
- display: inline-block;
- padding: 10px;
- border: 1px solid transparent;
- border-bottom: none;
- }
-
- .branch-tag-item.active {
- border-color: var(--color-secondary);
- background: var(--color-menu);
- border-top-left-radius: var(--border-radius);
- border-top-right-radius: var(--border-radius);
- }
-
- .branch-tag-divider {
- margin-top: -1px !important;
- border-top: 1px solid var(--color-secondary);
- }
-
- .scrolling.menu {
- border-top: none !important;
- }
-
- .menu .item .rss-icon {
- display: none; /* only show RSS icon on hover */
- }
-
- .menu .item:hover .rss-icon {
- display: inline-block;
- }
-
- .scrolling.menu .loading-indicator {
- height: 4em;
- }
- </style>
|