@ -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