mirror of https://github.com/go-gitea/gitea
Frontend refactor: move Vue related code from `index.js` to `components` dir, and remove unused codes. (#17301)
* frontend refactor
* Apply suggestions from code review
Co-authored-by: delvh <dev.lh@web.de>
* Update templates/base/head.tmpl
Co-authored-by: delvh <dev.lh@web.de>
* Update docs/content/doc/developers/guidelines-frontend.md
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* fix typo
* fix typo
* refactor PageData to pageData
* Apply suggestions from code review
Co-authored-by: delvh <dev.lh@web.de>
* Simply for the visual difference.
Co-authored-by: delvh <dev.lh@web.de>
* Revert "Apply suggestions from code review"
This reverts commit 4d78ad9b0e.
Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>
pull/16829/head
wxiaoguang
3 years ago
committed by
GitHub
parent
96ff3e310f
commit
56362043d3
@ -0,0 +1,51 @@ |
|||||||
|
--- |
||||||
|
date: "2021-10-13T16:00:00+02:00" |
||||||
|
title: "Guidelines for Frontend Development" |
||||||
|
slug: "guidelines-frontend" |
||||||
|
weight: 20 |
||||||
|
toc: false |
||||||
|
draft: false |
||||||
|
menu: |
||||||
|
sidebar: |
||||||
|
parent: "developers" |
||||||
|
name: "Guidelines for Frontend" |
||||||
|
weight: 20 |
||||||
|
identifier: "guidelines-frontend" |
||||||
|
--- |
||||||
|
|
||||||
|
# Guidelines for Frontend Development |
||||||
|
|
||||||
|
**Table of Contents** |
||||||
|
|
||||||
|
{{< toc >}} |
||||||
|
|
||||||
|
## Background |
||||||
|
|
||||||
|
Gitea uses [Less CSS](https://lesscss.org), [Fomantic-UI](https://fomantic-ui.com/introduction/getting-started.html) (based on [jQuery](https://api.jquery.com)) and [Vue2](https://vuejs.org/v2/guide/) for its frontend. |
||||||
|
|
||||||
|
The HTML pages are rendered by [Go HTML Template](https://pkg.go.dev/html/template) |
||||||
|
|
||||||
|
## General Guidelines |
||||||
|
|
||||||
|
We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) and [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html) |
||||||
|
|
||||||
|
### Gitea specific guidelines: |
||||||
|
|
||||||
|
1. Every feature (Fomantic-UI/jQuery module) should be put in separate files/directories. |
||||||
|
2. HTML ids and classes should use kebab-case. |
||||||
|
3. HTML ids and classes used in JavaScript should be unique for the whole project, and should contain 2-3 feature related keywords. We recommend to use the `js-` prefix for classes that are only used in JavaScript. |
||||||
|
4. jQuery events across different features should use their own namespaces. |
||||||
|
5. CSS styling for classes provided by frameworks should not be overwritten. Always use new class-names to overwrite framework styles. We recommend to use the `us-` prefix for user defined styles. |
||||||
|
6. The backend can pass complex data to the frontend by using `ctx.PageData["myModuleData"] = map[]{}` |
||||||
|
7. Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue2 (or Vue3 in future). |
||||||
|
|
||||||
|
## Legacy Problems and Solutions |
||||||
|
|
||||||
|
### Too much code in `web_src/index.js` |
||||||
|
|
||||||
|
Previously, most JavaScript code was written into `web_src/index.js` directly, making the file unmaintainable. |
||||||
|
Try to keep this file small by creating new modules instead. These modules can be put in the `web_src/js/features` directory for now. |
||||||
|
|
||||||
|
### Vue2/Vue3 and JSX |
||||||
|
|
||||||
|
Gitea is using Vue2 now, we plan to upgrade to Vue3. We decided not to introduce JSX to keep the HTML and the JavaScript code separated. |
||||||
@ -0,0 +1,370 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
import {initVueSvg, vueDelimiters} from './VueComponentLoader.js'; |
||||||
|
|
||||||
|
const {AppSubUrl, AssetUrlPrefix, pageData} = window.config; |
||||||
|
|
||||||
|
function initVueComponents() { |
||||||
|
Vue.component('repo-search', { |
||||||
|
delimiters: vueDelimiters, |
||||||
|
props: { |
||||||
|
searchLimit: { |
||||||
|
type: Number, |
||||||
|
default: 10 |
||||||
|
}, |
||||||
|
subUrl: { |
||||||
|
type: String, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
uid: { |
||||||
|
type: Number, |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
teamId: { |
||||||
|
type: Number, |
||||||
|
required: false, |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
organizations: { |
||||||
|
type: Array, |
||||||
|
default: () => [], |
||||||
|
}, |
||||||
|
isOrganization: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
canCreateOrganization: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
organizationsTotalCount: { |
||||||
|
type: Number, |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
moreReposLink: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
data() { |
||||||
|
const params = new URLSearchParams(window.location.search); |
||||||
|
|
||||||
|
let tab = params.get('repo-search-tab'); |
||||||
|
if (!tab) { |
||||||
|
tab = 'repos'; |
||||||
|
} |
||||||
|
|
||||||
|
let reposFilter = params.get('repo-search-filter'); |
||||||
|
if (!reposFilter) { |
||||||
|
reposFilter = 'all'; |
||||||
|
} |
||||||
|
|
||||||
|
let privateFilter = params.get('repo-search-private'); |
||||||
|
if (!privateFilter) { |
||||||
|
privateFilter = 'both'; |
||||||
|
} |
||||||
|
|
||||||
|
let archivedFilter = params.get('repo-search-archived'); |
||||||
|
if (!archivedFilter) { |
||||||
|
archivedFilter = 'unarchived'; |
||||||
|
} |
||||||
|
|
||||||
|
let searchQuery = params.get('repo-search-query'); |
||||||
|
if (!searchQuery) { |
||||||
|
searchQuery = ''; |
||||||
|
} |
||||||
|
|
||||||
|
let page = 1; |
||||||
|
try { |
||||||
|
page = parseInt(params.get('repo-search-page')); |
||||||
|
} catch { |
||||||
|
// noop
|
||||||
|
} |
||||||
|
if (!page) { |
||||||
|
page = 1; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
tab, |
||||||
|
repos: [], |
||||||
|
reposTotalCount: 0, |
||||||
|
reposFilter, |
||||||
|
archivedFilter, |
||||||
|
privateFilter, |
||||||
|
page, |
||||||
|
finalPage: 1, |
||||||
|
searchQuery, |
||||||
|
isLoading: false, |
||||||
|
staticPrefix: AssetUrlPrefix, |
||||||
|
counts: {}, |
||||||
|
repoTypes: { |
||||||
|
all: { |
||||||
|
searchMode: '', |
||||||
|
}, |
||||||
|
forks: { |
||||||
|
searchMode: 'fork', |
||||||
|
}, |
||||||
|
mirrors: { |
||||||
|
searchMode: 'mirror', |
||||||
|
}, |
||||||
|
sources: { |
||||||
|
searchMode: 'source', |
||||||
|
}, |
||||||
|
collaborative: { |
||||||
|
searchMode: 'collaborative', |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
|
||||||
|
computed: { |
||||||
|
// used in `repolist.tmpl`
|
||||||
|
showMoreReposLink() { |
||||||
|
return this.repos.length > 0 && this.repos.length < this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`]; |
||||||
|
}, |
||||||
|
searchURL() { |
||||||
|
return `${this.subUrl}/api/v1/repos/search?sort=updated&order=desc&uid=${this.uid}&team_id=${this.teamId}&q=${this.searchQuery |
||||||
|
}&page=${this.page}&limit=${this.searchLimit}&mode=${this.repoTypes[this.reposFilter].searchMode |
||||||
|
}${this.reposFilter !== 'all' ? '&exclusive=1' : '' |
||||||
|
}${this.archivedFilter === 'archived' ? '&archived=true' : ''}${this.archivedFilter === 'unarchived' ? '&archived=false' : '' |
||||||
|
}${this.privateFilter === 'private' ? '&is_private=true' : ''}${this.privateFilter === 'public' ? '&is_private=false' : '' |
||||||
|
}`;
|
||||||
|
}, |
||||||
|
repoTypeCount() { |
||||||
|
return this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`]; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
mounted() { |
||||||
|
this.changeReposFilter(this.reposFilter); |
||||||
|
$(this.$el).find('.poping.up').popup(); |
||||||
|
$(this.$el).find('.dropdown').dropdown(); |
||||||
|
this.setCheckboxes(); |
||||||
|
Vue.nextTick(() => { |
||||||
|
this.$refs.search.focus(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
changeTab(t) { |
||||||
|
this.tab = t; |
||||||
|
this.updateHistory(); |
||||||
|
}, |
||||||
|
|
||||||
|
setCheckboxes() { |
||||||
|
switch (this.archivedFilter) { |
||||||
|
case 'unarchived': |
||||||
|
$('#archivedFilterCheckbox').checkbox('set unchecked'); |
||||||
|
break; |
||||||
|
case 'archived': |
||||||
|
$('#archivedFilterCheckbox').checkbox('set checked'); |
||||||
|
break; |
||||||
|
case 'both': |
||||||
|
$('#archivedFilterCheckbox').checkbox('set indeterminate'); |
||||||
|
break; |
||||||
|
default: |
||||||
|
this.archivedFilter = 'unarchived'; |
||||||
|
$('#archivedFilterCheckbox').checkbox('set unchecked'); |
||||||
|
break; |
||||||
|
} |
||||||
|
switch (this.privateFilter) { |
||||||
|
case 'public': |
||||||
|
$('#privateFilterCheckbox').checkbox('set unchecked'); |
||||||
|
break; |
||||||
|
case 'private': |
||||||
|
$('#privateFilterCheckbox').checkbox('set checked'); |
||||||
|
break; |
||||||
|
case 'both': |
||||||
|
$('#privateFilterCheckbox').checkbox('set indeterminate'); |
||||||
|
break; |
||||||
|
default: |
||||||
|
this.privateFilter = 'both'; |
||||||
|
$('#privateFilterCheckbox').checkbox('set indeterminate'); |
||||||
|
break; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
changeReposFilter(filter) { |
||||||
|
this.reposFilter = filter; |
||||||
|
this.repos = []; |
||||||
|
this.page = 1; |
||||||
|
Vue.set(this.counts, `${filter}:${this.archivedFilter}:${this.privateFilter}`, 0); |
||||||
|
this.searchRepos(); |
||||||
|
}, |
||||||
|
|
||||||
|
updateHistory() { |
||||||
|
const params = new URLSearchParams(window.location.search); |
||||||
|
|
||||||
|
if (this.tab === 'repos') { |
||||||
|
params.delete('repo-search-tab'); |
||||||
|
} else { |
||||||
|
params.set('repo-search-tab', this.tab); |
||||||
|
} |
||||||
|
|
||||||
|
if (this.reposFilter === 'all') { |
||||||
|
params.delete('repo-search-filter'); |
||||||
|
} else { |
||||||
|
params.set('repo-search-filter', this.reposFilter); |
||||||
|
} |
||||||
|
|
||||||
|
if (this.privateFilter === 'both') { |
||||||
|
params.delete('repo-search-private'); |
||||||
|
} else { |
||||||
|
params.set('repo-search-private', this.privateFilter); |
||||||
|
} |
||||||
|
|
||||||
|
if (this.archivedFilter === 'unarchived') { |
||||||
|
params.delete('repo-search-archived'); |
||||||
|
} else { |
||||||
|
params.set('repo-search-archived', this.archivedFilter); |
||||||
|
} |
||||||
|
|
||||||
|
if (this.searchQuery === '') { |
||||||
|
params.delete('repo-search-query'); |
||||||
|
} else { |
||||||
|
params.set('repo-search-query', this.searchQuery); |
||||||
|
} |
||||||
|
|
||||||
|
if (this.page === 1) { |
||||||
|
params.delete('repo-search-page'); |
||||||
|
} else { |
||||||
|
params.set('repo-search-page', `${this.page}`); |
||||||
|
} |
||||||
|
|
||||||
|
const queryString = params.toString(); |
||||||
|
if (queryString) { |
||||||
|
window.history.replaceState({}, '', `?${queryString}`); |
||||||
|
} else { |
||||||
|
window.history.replaceState({}, '', window.location.pathname); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
toggleArchivedFilter() { |
||||||
|
switch (this.archivedFilter) { |
||||||
|
case 'both': |
||||||
|
this.archivedFilter = 'unarchived'; |
||||||
|
break; |
||||||
|
case 'unarchived': |
||||||
|
this.archivedFilter = 'archived'; |
||||||
|
break; |
||||||
|
case 'archived': |
||||||
|
this.archivedFilter = 'both'; |
||||||
|
break; |
||||||
|
default: |
||||||
|
this.archivedFilter = 'unarchived'; |
||||||
|
break; |
||||||
|
} |
||||||
|
this.page = 1; |
||||||
|
this.repos = []; |
||||||
|
this.setCheckboxes(); |
||||||
|
Vue.set(this.counts, `${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`, 0); |
||||||
|
this.searchRepos(); |
||||||
|
}, |
||||||
|
|
||||||
|
togglePrivateFilter() { |
||||||
|
switch (this.privateFilter) { |
||||||
|
case 'both': |
||||||
|
this.privateFilter = 'public'; |
||||||
|
break; |
||||||
|
case 'public': |
||||||
|
this.privateFilter = 'private'; |
||||||
|
break; |
||||||
|
case 'private': |
||||||
|
this.privateFilter = 'both'; |
||||||
|
break; |
||||||
|
default: |
||||||
|
this.privateFilter = 'both'; |
||||||
|
break; |
||||||
|
} |
||||||
|
this.page = 1; |
||||||
|
this.repos = []; |
||||||
|
this.setCheckboxes(); |
||||||
|
Vue.set(this.counts, `${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`, 0); |
||||||
|
this.searchRepos(); |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
changePage(page) { |
||||||
|
this.page = page; |
||||||
|
if (this.page > this.finalPage) { |
||||||
|
this.page = this.finalPage; |
||||||
|
} |
||||||
|
if (this.page < 1) { |
||||||
|
this.page = 1; |
||||||
|
} |
||||||
|
this.repos = []; |
||||||
|
Vue.set(this.counts, `${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`, 0); |
||||||
|
this.searchRepos(); |
||||||
|
}, |
||||||
|
|
||||||
|
searchRepos() { |
||||||
|
this.isLoading = true; |
||||||
|
|
||||||
|
if (!this.reposTotalCount) { |
||||||
|
const totalCountSearchURL = `${this.subUrl}/api/v1/repos/search?sort=updated&order=desc&uid=${this.uid}&team_id=${this.teamId}&q=&page=1&mode=`; |
||||||
|
$.getJSON(totalCountSearchURL, (_result, _textStatus, request) => { |
||||||
|
this.reposTotalCount = request.getResponseHeader('X-Total-Count'); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
const searchedMode = this.repoTypes[this.reposFilter].searchMode; |
||||||
|
const searchedURL = this.searchURL; |
||||||
|
const searchedQuery = this.searchQuery; |
||||||
|
|
||||||
|
$.getJSON(searchedURL, (result, _textStatus, request) => { |
||||||
|
if (searchedURL === this.searchURL) { |
||||||
|
this.repos = result.data; |
||||||
|
const count = request.getResponseHeader('X-Total-Count'); |
||||||
|
if (searchedQuery === '' && searchedMode === '' && this.archivedFilter === 'both') { |
||||||
|
this.reposTotalCount = count; |
||||||
|
} |
||||||
|
Vue.set(this.counts, `${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`, count); |
||||||
|
this.finalPage = Math.ceil(count / this.searchLimit); |
||||||
|
this.updateHistory(); |
||||||
|
} |
||||||
|
}).always(() => { |
||||||
|
if (searchedURL === this.searchURL) { |
||||||
|
this.isLoading = false; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
repoIcon(repo) { |
||||||
|
if (repo.fork) { |
||||||
|
return 'octicon-repo-forked'; |
||||||
|
} else if (repo.mirror) { |
||||||
|
return 'octicon-mirror'; |
||||||
|
} else if (repo.template) { |
||||||
|
return `octicon-repo-template`; |
||||||
|
} else if (repo.private) { |
||||||
|
return 'octicon-lock'; |
||||||
|
} else if (repo.internal) { |
||||||
|
return 'octicon-repo'; |
||||||
|
} |
||||||
|
return 'octicon-repo'; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function initDashboardRepoList() { |
||||||
|
const el = document.getElementById('dashboard-repo-list'); |
||||||
|
const dashboardRepoListData = pageData.dashboardRepoList || null; |
||||||
|
if (!el || !dashboardRepoListData) return; |
||||||
|
|
||||||
|
initVueSvg(); |
||||||
|
initVueComponents(); |
||||||
|
new Vue({ |
||||||
|
el, |
||||||
|
delimiters: vueDelimiters, |
||||||
|
data: () => { |
||||||
|
return { |
||||||
|
searchLimit: dashboardRepoListData.searchLimit || 0, |
||||||
|
subUrl: AppSubUrl, |
||||||
|
}; |
||||||
|
}, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export {initDashboardRepoList}; |
||||||
@ -0,0 +1,161 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
|
||||||
|
function initRepoBranchTagDropdown(selector) { |
||||||
|
$(selector).each(function () { |
||||||
|
const $dropdown = $(this); |
||||||
|
const $data = $dropdown.find('.data'); |
||||||
|
const data = { |
||||||
|
items: [], |
||||||
|
mode: $data.data('mode'), |
||||||
|
searchTerm: '', |
||||||
|
noResults: '', |
||||||
|
canCreateBranch: false, |
||||||
|
menuVisible: false, |
||||||
|
createTag: false, |
||||||
|
active: 0 |
||||||
|
}; |
||||||
|
$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(); |
||||||
|
new Vue({ |
||||||
|
el: this, |
||||||
|
delimiters: ['${', '}'], |
||||||
|
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.canCreateBranch || !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() { |
||||||
|
this.noResults = this.$el.getAttribute('data-no-results'); |
||||||
|
this.canCreateBranch = this.$el.getAttribute('data-can-create-branch') === 'true'; |
||||||
|
|
||||||
|
document.body.addEventListener('click', (event) => { |
||||||
|
if (this.$el.contains(event.target)) return; |
||||||
|
if (this.menuVisible) { |
||||||
|
Vue.set(this, 'menuVisible', false); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
methods: { |
||||||
|
selectItem(item) { |
||||||
|
const prev = this.getSelected(); |
||||||
|
if (prev !== null) { |
||||||
|
prev.selected = false; |
||||||
|
} |
||||||
|
item.selected = true; |
||||||
|
window.location.href = item.url; |
||||||
|
}, |
||||||
|
createNewBranch() { |
||||||
|
if (!this.showCreateNewBranch) return; |
||||||
|
$(this.$refs.newBranchForm).trigger('submit'); |
||||||
|
}, |
||||||
|
focusSearchField() { |
||||||
|
Vue.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 {initRepoBranchTagDropdown}; |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
import {svgs} from '../svg.js'; |
||||||
|
|
||||||
|
const vueDelimiters = ['${', '}']; |
||||||
|
|
||||||
|
let vueEnvInited = false; |
||||||
|
function initVueEnv() { |
||||||
|
if (vueEnvInited) return; |
||||||
|
vueEnvInited = true; |
||||||
|
|
||||||
|
const isProd = window.config.IsProd; |
||||||
|
Vue.config.productionTip = false; |
||||||
|
Vue.config.devtools = !isProd; |
||||||
|
} |
||||||
|
|
||||||
|
let vueSvgInited = false; |
||||||
|
function initVueSvg() { |
||||||
|
if (vueSvgInited) return; |
||||||
|
vueSvgInited = true; |
||||||
|
|
||||||
|
// register svg icon vue components, e.g. <octicon-repo size="16"/>
|
||||||
|
for (const [name, htmlString] of Object.entries(svgs)) { |
||||||
|
const template = htmlString |
||||||
|
.replace(/height="[0-9]+"/, 'v-bind:height="size"') |
||||||
|
.replace(/width="[0-9]+"/, 'v-bind:width="size"'); |
||||||
|
|
||||||
|
Vue.component(name, { |
||||||
|
props: { |
||||||
|
size: { |
||||||
|
type: String, |
||||||
|
default: '16', |
||||||
|
}, |
||||||
|
}, |
||||||
|
template, |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function initVueApp(el, opts = {}) { |
||||||
|
if (typeof el === 'string') { |
||||||
|
el = document.querySelector(el); |
||||||
|
} |
||||||
|
if (!el) return null; |
||||||
|
|
||||||
|
return new Vue(Object.assign({ |
||||||
|
el, |
||||||
|
delimiters: vueDelimiters, |
||||||
|
}, opts)); |
||||||
|
} |
||||||
|
|
||||||
|
export {vueDelimiters, initVueEnv, initVueSvg, initVueApp}; |
||||||
Loading…
Reference in new issue