@ -2687,7 +2687,15 @@ function initVueComponents() {
. replace ( /height="[0-9]+"/ , 'v-bind:height="size"' )
. replace ( /height="[0-9]+"/ , 'v-bind:height="size"' )
. replace ( /width="[0-9]+"/ , 'v-bind:width="size"' ) ;
. replace ( /width="[0-9]+"/ , 'v-bind:width="size"' ) ;
Vue . component ( name , { props : [ 'size' ] , template } ) ;
Vue . component ( name , {
props : {
size : {
type : String ,
default : '16' ,
} ,
} ,
template ,
} ) ;
}
}
const vueDelimeters = [ '${' , '}' ] ;
const vueDelimeters = [ '${' , '}' ] ;
@ -2710,7 +2718,7 @@ function initVueComponents() {
} ,
} ,
organizations : {
organizations : {
type : Array ,
type : Array ,
default : ]
default : () => [] ,
} ,
} ,
isOrganization : {
isOrganization : {
type : Boolean ,
type : Boolean ,
@ -3050,16 +3058,18 @@ function initVueApp() {
initVueComponents ( ) ;
initVueComponents ( ) ;
new Vue ( {
new Vue ( {
delimiters : [ '${' , '}' ] ,
el ,
el ,
data : {
delimiters : [ '${' , '}' ] ,
components : {
ActivityTopAuthors ,
} ,
data : ( ) => {
return {
searchLimit : Number ( ( document . querySelector ( 'meta[name=_search_limit]' ) || { } ) . content ) ,
searchLimit : Number ( ( document . querySelector ( 'meta[name=_search_limit]' ) || { } ) . content ) ,
suburl : AppSubUrl ,
suburl : AppSubUrl ,
uid : Number ( ( document . querySelector ( 'meta[name=_context_uid]' ) || { } ) . content ) ,
uid : Number ( ( document . querySelector ( 'meta[name=_context_uid]' ) || { } ) . content ) ,
activityTopAuthors : window . ActivityTopAuthors || [ ] ,
activityTopAuthors : window . ActivityTopAuthors || [ ] ,
} ,
} ;
components : {
ActivityTopAuthors ,
} ,
} ,
} ) ;
} ) ;
} }
@ -3105,24 +3115,30 @@ function initFilterBranchTagDropdown(selector) {
} ) ;
} ) ;
$data . remove ( ) ;
$data . remove ( ) ;
new Vue ( {
new Vue ( {
delimiters : [ '${' , '}' ] ,
el : this ,
el : this ,
delimiters : [ '${' , '}' ] ,
data ,
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 ( ) ) ) ;
} ) ;
beforeMount ( ) {
// no idea how to fix this so linting rule is disabled instead
const vm = this ;
this . active = ( items . length === 0 && this . showCreateNewBranch ? 0 : - 1 ) ; // eslint-disable-line vue/no-side-effects-in-computed-properties
return items ;
this . noResults = vm . $el . getAttribute ( 'data-no-results' ) ;
} ,
this . canCreateBranch = vm . $el . getAttribute ( 'data-can-create-branch' ) === 'true' ;
showNoResults ( ) {
return this . filteredItems . length === 0 && ! this . showCreateNewBranch ;
document . body . addEventListener ( 'click' , ( event ) => {
} ,
if ( vm . $el . contains ( event . target ) ) {
showCreateNewBranch ( ) {
return ;
if ( ! this . canCreateBranch || ! this . searchTerm || this . mode === 'tags' ) {
return false ;
}
}
if ( vm . menuVisible ) {
Vue . set ( vm , 'menuVisible' , false ) ;
return this . items . filter ( ( item ) => item . name . toLowerCase ( ) === this . searchTerm . toLowerCase ( ) ) . length === 0 ;
}
}
} ) ;
} ,
} ,
watch : {
watch : {
@ -3133,30 +3149,16 @@ function initFilterBranchTagDropdown(selector) {
}
}
} ,
} ,
computed : {
beforeMount ( ) {
filteredItems ( ) {
this . noResults = this . $el . getAttribute ( 'data-no-results' ) ;
const vm = this ;
this . canCreateBranch = this . $el . getAttribute ( 'data-can-create-branch' ) === 'true' ;
const items = vm . items . filter ( ( item ) => {
return ( ( vm . mode === 'branches' && item . branch ) || ( vm . mode === 'tags' && item . tag ) ) &&
( ! vm . searchTerm || item . name . toLowerCase ( ) . includes ( vm . searchTerm . toLowerCase ( ) ) ) ;
} ) ;
vm . active = ( items . length === 0 && vm . showCreateNewBranch ? 0 : - 1 ) ;
return items ;
} ,
showNoResults ( ) {
return this . filteredItems . length === 0 && ! this . showCreateNewBranch ;
} ,
showCreateNewBranch ( ) {
const vm = this ;
if ( ! this . canCreateBranch || ! vm . searchTerm || vm . mode === 'tags' ) {
return false ;
}
return vm . items . filter ( ( item ) => item . name . toLowerCase ( ) === vm . searchTerm . toLowerCase ( ) ) . length === 0 ;
document . body . addEventListener ( 'click' , ( event ) => {
if ( this . $el . contains ( event . target ) ) return ;
if ( this . menuVisible ) {
Vue . set ( this , 'menuVisible' , false ) ;
}
}
} ) ;
} ,
} ,
methods : {
methods : {
@ -3169,15 +3171,12 @@ function initFilterBranchTagDropdown(selector) {
window . location . href = item . url ;
window . location . href = item . url ;
} ,
} ,
createNewBranch ( ) {
createNewBranch ( ) {
if ( ! this . showCreateNewBranch ) {
if ( ! this . showCreateNewBranch ) return ;
return ;
}
$ ( this . $refs . newBranchForm ) . trigger ( 'submit' ) ;
$ ( this . $refs . newBranchForm ) . trigger ( 'submit' ) ;
} ,
} ,
focusSearchField ( ) {
focusSearchField ( ) {
const vm = this ;
Vue . nextTick ( ( ) => {
Vue . nextTick ( ( ) => {
vm . $refs . searchField . focus ( ) ;
this . $refs . searchField . focus ( ) ;
} ) ;
} ) ;
} ,
} ,
getSelected ( ) {
getSelected ( ) {
@ -3194,15 +3193,12 @@ function initFilterBranchTagDropdown(selector) {
} ,
} ,
scrollToActive ( ) {
scrollToActive ( ) {
let el = this . $refs [ ` listItem ${ this . active } ` ] ;
let el = this . $refs [ ` listItem ${ this . active } ` ] ;
if ( ! el || el . length === 0 ) {
if ( ! el || ! el . length ) return ;
return ;
}
if ( Array . isArray ( el ) ) {
if ( Array . isArray ( el ) ) {
el = el [ 0 ] ;
el = el [ 0 ] ;
}
}
const cont = this . $refs . scrollContainer ;
const cont = this . $refs . scrollContainer ;
if ( el . offsetTop < cont . scrollTop ) {
if ( el . offsetTop < cont . scrollTop ) {
cont . scrollTop = el . offsetTop ;
cont . scrollTop = el . offsetTop ;
} else if ( el . offsetTop + el . clientHeight > cont . scrollTop + cont . clientHeight ) {
} else if ( el . offsetTop + el . clientHeight > cont . scrollTop + cont . clientHeight ) {
@ -3210,49 +3206,41 @@ function initFilterBranchTagDropdown(selector) {
}
}
} ,
} ,
keydown ( event ) {
keydown ( event ) {
const vm = this ;
if ( event . keyCode === 40 ) { // arrow down
if ( event . keyCode === 40 ) {
// arrow down
event . preventDefault ( ) ;
event . preventDefault ( ) ;
if ( vm . active === - 1 ) {
if ( this . active === - 1 ) {
vm . active = vm . getSelectedIndexInFiltered ( ) ;
this . active = this . getSelectedIndexInFiltered ( ) ;
}
}
if ( vm . active + ( vm . showCreateNewBranch ? 0 : 1 ) >= vm . filteredItems . length ) {
if ( this . active + ( this . showCreateNewBranch ? 0 : 1 ) >= this . filteredItems . length ) {
return ;
return ;
}
}
vm . active ++ ;
this . active ++ ;
vm . scrollToActive ( ) ;
this . scrollToActive ( ) ;
}
} else if ( event . keyCode === 38 ) { // arrow up
if ( event . keyCode === 38 ) {
// arrow up
event . preventDefault ( ) ;
event . preventDefault ( ) ;
if ( vm . active === - 1 ) {
if ( this . active === - 1 ) {
vm . active = vm . getSelectedIndexInFiltered ( ) ;
this . active = this . getSelectedIndexInFiltered ( ) ;
}
}
if ( vm . active <= 0 ) {
if ( this . active <= 0 ) {
return ;
return ;
}
}
vm . active -- ;
this . active -- ;
vm . scrollToActive ( ) ;
this . scrollToActive ( ) ;
}
} else if ( event . keyCode === 13 ) { // enter
if ( event . keyCode === 13 ) {
// enter
event . preventDefault ( ) ;
event . preventDefault ( ) ;
if ( vm . active >= vm . filteredItems . length ) {
if ( this . active >= this . filteredItems . length ) {
vm . createNewBranch ( ) ;
this . createNewBranch ( ) ;
} else if ( vm . active >= 0 ) {
} else if ( this . active >= 0 ) {
vm . selectItem ( vm . filteredItems [ vm . active ] ) ;
this . selectItem ( this . filteredItems [ this . active ] ) ;
}
}
}
if ( event . keyCode === 27 ) {
} else if ( event . keyCode === 27 ) { // escape
// escape
event . preventDefault ( ) ;
event . preventDefault ( ) ;
vm . menuVisible = false ;
this . menuVisible = false ;
}
}
}
}
}
}
silverwind
4 years ago
committed by
GitHub