Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Léo-Paul Géneau
gitlab-ce
Commits
40d869ee
Commit
40d869ee
authored
Jul 07, 2016
by
Luke "Jared" Bennett
Committed by
Luke Bennett
Aug 18, 2016
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Review changes and final formatting
parent
85cd73c7
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
115 additions
and
140 deletions
+115
-140
app/assets/javascripts/gl_dropdown.js.coffee
app/assets/javascripts/gl_dropdown.js.coffee
+115
-140
No files found.
app/assets/javascripts/gl_dropdown.js.coffee
View file @
40d869ee
class
GitLabDropdownFilter
class
GitLabDropdownFilter
BLUR_KEYCODES
=
[
27
,
40
]
BLUR_KEYCODES
=
[
27
,
40
]
ARROW_KEY_CODES
=
[
38
,
40
]
ARROW_KEY_CODES
=
[
38
,
40
]
HAS_VALUE_CLASS
=
"has-value"
HAS_VALUE_CLASS
=
'has-value'
constructor
:
(
@
input
,
@
options
)
->
constructor
:
(
@
input
,
@
options
)
->
{
{
...
@@ -9,7 +9,7 @@ class GitLabDropdownFilter
...
@@ -9,7 +9,7 @@ class GitLabDropdownFilter
}
=
@
options
}
=
@
options
$inputContainer
=
@
input
.
parent
()
$inputContainer
=
@
input
.
parent
()
$clearButton
=
$inputContainer
.
find
(
'.js-dropdown-input-clear'
)
$clearButton
=
$inputContainer
.
find
'.js-dropdown-input-clear'
@
indeterminateIds
=
[]
@
indeterminateIds
=
[]
...
@@ -18,24 +18,23 @@ class GitLabDropdownFilter
...
@@ -18,24 +18,23 @@ class GitLabDropdownFilter
e
.
preventDefault
()
e
.
preventDefault
()
e
.
stopPropagation
()
e
.
stopPropagation
()
@
input
@
input
.
val
(
''
)
.
val
''
.
trigger
(
'keyup'
)
.
trigger
'keyup'
.
focus
()
.
focus
()
# Key events
# Key events
timeout
=
""
timeout
=
''
@
input
.
on
"keyup"
,
(
e
)
=>
@
input
.
on
'keyup'
,
(
e
)
=>
keyCode
=
e
.
which
keyCode
=
e
.
which
return
if
ARROW_KEY_CODES
.
indexOf
(
keyCode
)
>=
0
return
if
ARROW_KEY_CODES
.
indexOf
(
keyCode
)
>=
0
if
@
input
.
val
()
isnt
""
and
!
$inputContainer
.
hasClass
HAS_VALUE_CLASS
if
@
input
.
val
()
isnt
''
and
not
$inputContainer
.
hasClass
HAS_VALUE_CLASS
$inputContainer
.
addClass
HAS_VALUE_CLASS
$inputContainer
.
addClass
HAS_VALUE_CLASS
else
if
@
input
.
val
()
is
""
and
$inputContainer
.
hasClass
HAS_VALUE_CLASS
else
if
@
input
.
val
()
is
''
and
$inputContainer
.
hasClass
HAS_VALUE_CLASS
$inputContainer
.
removeClass
HAS_VALUE_CLASS
$inputContainer
.
removeClass
HAS_VALUE_CLASS
if
keyCode
is
13
return
false
if
keyCode
is
13
return
false
# Only filter asynchronously only if option remote is set
# Only filter asynchronously only if option remote is set
if
@
options
.
remote
if
@
options
.
remote
...
@@ -47,13 +46,13 @@ class GitLabDropdownFilter
...
@@ -47,13 +46,13 @@ class GitLabDropdownFilter
@
input
.
blur
()
@
input
.
blur
()
@
options
.
query
@
input
.
val
(),
(
data
)
=>
@
options
.
query
@
input
.
val
(),
(
data
)
=>
@
options
.
callback
(
data
)
@
options
.
callback
data
,
250
,
250
else
else
@
filter
@
input
.
val
()
@
filter
@
input
.
val
()
shouldBlur
:
(
keyCode
)
->
shouldBlur
:
(
keyCode
)
->
return
BLUR_KEYCODES
.
indexOf
(
keyCode
)
>=
0
BLUR_KEYCODES
.
indexOf
(
keyCode
)
>=
0
filter
:
(
search_text
)
->
filter
:
(
search_text
)
->
@
options
.
onFilter
(
search_text
)
if
@
options
.
onFilter
@
options
.
onFilter
(
search_text
)
if
@
options
.
onFilter
...
@@ -69,9 +68,8 @@ class GitLabDropdownFilter
...
@@ -69,9 +68,8 @@ class GitLabDropdownFilter
# { prop: 'baz' }
# { prop: 'baz' }
# ]
# ]
if
_
.
isArray
(
data
)
if
_
.
isArray
(
data
)
results
=
fuzzaldrinPlus
.
filter
(
data
,
search_text
,
results
=
fuzzaldrinPlus
.
filter
data
,
search_text
,
key
:
@
options
.
keys
key
:
@
options
.
keys
)
else
else
# If data is grouped therefore an [object Object]. e.g.
# If data is grouped therefore an [object Object]. e.g.
# {
# {
...
@@ -87,9 +85,8 @@ class GitLabDropdownFilter
...
@@ -87,9 +85,8 @@ class GitLabDropdownFilter
if
gl
.
utils
.
isObject
data
if
gl
.
utils
.
isObject
data
results
=
{}
results
=
{}
for
key
,
group
of
data
for
key
,
group
of
data
tmp
=
fuzzaldrinPlus
.
filter
(
group
,
search_text
,
tmp
=
fuzzaldrinPlus
.
filter
group
,
search_text
,
key
:
@
options
.
keys
key
:
@
options
.
keys
)
if
tmp
.
length
if
tmp
.
length
results
[
key
]
=
tmp
.
map
(
item
)
->
item
results
[
key
]
=
tmp
.
map
(
item
)
->
item
...
@@ -100,10 +97,10 @@ class GitLabDropdownFilter
...
@@ -100,10 +97,10 @@ class GitLabDropdownFilter
if
search_text
if
search_text
elements
.
each
->
elements
.
each
->
$el
=
$
(
@
)
$el
=
$
(
this
)
matches
=
fuzzaldrinPlus
.
match
(
$el
.
text
().
trim
(),
search_text
)
matches
=
fuzzaldrinPlus
.
match
$el
.
text
().
trim
(),
search_text
unless
$el
.
is
(
'.dropdown-header'
)
unless
$el
.
is
'.dropdown-header'
if
matches
.
length
if
matches
.
length
$el
.
show
()
$el
.
show
()
else
else
...
@@ -115,38 +112,31 @@ class GitLabDropdownRemote
...
@@ -115,38 +112,31 @@ class GitLabDropdownRemote
constructor
:
(
@
dataEndpoint
,
@
options
)
->
constructor
:
(
@
dataEndpoint
,
@
options
)
->
execute
:
->
execute
:
->
if
typeof
@
dataEndpoint
is
"string"
if
typeof
@
dataEndpoint
is
'string'
@
fetchData
()
@
fetchData
()
else
if
typeof
@
dataEndpoint
is
"function"
else
if
typeof
@
dataEndpoint
is
'function'
if
@
options
.
beforeSend
@
options
.
beforeSend
()
if
@
options
.
beforeSend
@
options
.
beforeSend
()
# Fetch the data by calling the data funcfion
# Fetch the data by calling the data funcfion
@
dataEndpoint
""
,
(
data
)
=>
@
dataEndpoint
''
,
(
data
)
=>
if
@
options
.
success
@
options
.
success
(
data
)
if
@
options
.
success
@
options
.
success
(
data
)
@
options
.
beforeSend
()
if
@
options
.
beforeSend
if
@
options
.
beforeSend
@
options
.
beforeSend
()
# Fetch the data through ajax if the data is a string
# Fetch the data through ajax if the data is a string
fetchData
:
->
fetchData
:
->
$
.
ajax
(
$
.
ajax
url
:
@
dataEndpoint
,
url
:
@
dataEndpoint
,
dataType
:
@
options
.
dataType
,
dataType
:
@
options
.
dataType
,
beforeSend
:
=>
beforeSend
:
=>
if
@
options
.
beforeSend
@
options
.
beforeSend
()
if
@
options
.
beforeSend
@
options
.
beforeSend
()
success
:
(
data
)
=>
success
:
(
data
)
=>
if
@
options
.
success
@
options
.
success
(
data
)
if
@
options
.
success
@
options
.
success
(
data
)
)
class
GitLabDropdown
class
GitLabDropdown
LOADING_CLASS
=
"is-loading"
LOADING_CLASS
=
'is-loading'
PAGE_TWO_CLASS
=
"is-page-two"
PAGE_TWO_CLASS
=
'is-page-two'
ACTIVE_CLASS
=
"is-active"
ACTIVE_CLASS
=
'is-active'
INDETERMINATE_CLASS
=
"is-indeterminate"
INDETERMINATE_CLASS
=
'is-indeterminate'
NON_SELECTABLE_CLASSES
=
'.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'
NON_SELECTABLE_CLASSES
=
'.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'
SELECTABLE_CLASSES
=
".dropdown-content li:not(
#{
NON_SELECTABLE_CLASSES
}
)"
SELECTABLE_CLASSES
=
".dropdown-content li:not(
#{
NON_SELECTABLE_CLASSES
}
)"
FILTER_INPUT
=
'.dropdown-input .dropdown-input-field'
FILTER_INPUT
=
'.dropdown-input .dropdown-input-field'
...
@@ -154,37 +144,36 @@ class GitLabDropdown
...
@@ -154,37 +144,36 @@ class GitLabDropdown
CURSOR_SELECT_SCROLL_PADDING
=
5
CURSOR_SELECT_SCROLL_PADDING
=
5
constructor
:
(
@
el
,
@
options
)
->
constructor
:
(
@
el
,
@
options
)
->
self
=
@
self
=
this
selector
=
$
(
@
el
).
data
"target"
selector
=
$
(
@
el
).
data
'target'
@
dropdown
=
if
selector
?
then
$
(
selector
)
else
$
(
@
el
).
parent
()
@
dropdown
=
if
selector
?
then
$
(
selector
)
else
$
(
@
el
).
parent
()
# Set Defaults
# Set Defaults
{
{
# If no input is passed create a default one
# If no input is passed create a default one
@
filterInput
=
@
getElement
(
FILTER_INPUT
)
@
filterInput
=
@
getElement
FILTER_INPUT
@
highlight
=
false
@
highlight
=
false
@
filterInputBlur
=
true
@
filterInputBlur
=
true
}
=
@
options
}
=
@
options
self
=
@
self
=
this
# If selector was passed
# If selector was passed
if
_
.
isString
(
@
filterInput
)
@
filterInput
=
@
getElement
(
@
filterInput
)
if
_
.
isString
@
filterInput
@
filterInput
=
@
getElement
(
@
filterInput
)
searchFields
=
if
@
options
.
search
then
@
options
.
search
.
fields
else
[]
searchFields
=
if
@
options
.
search
then
@
options
.
search
.
fields
else
[]
if
@
options
.
data
if
@
options
.
data
# If we provided data
# If we provided data
# data could be an array of objects or a group of arrays
# data could be an array of objects or a group of arrays
if
_
.
isObject
(
@
options
.
data
)
and
not
_
.
isFunction
(
@
options
.
data
)
if
_
.
isObject
(
@
options
.
data
)
and
not
_
.
isFunction
@
options
.
data
@
fullData
=
@
options
.
data
@
fullData
=
@
options
.
data
@
parseData
@
options
.
data
@
parseData
@
options
.
data
else
else
# Remote data
# Remote data
@
remote
=
new
GitLabDropdownRemote
@
options
.
data
,
{
@
remote
=
new
GitLabDropdownRemote
@
options
.
data
,
dataType
:
@
options
.
dataType
,
dataType
:
@
options
.
dataType
,
beforeSend
:
@
toggleLoading
.
bind
(
@
)
beforeSend
:
@
toggleLoading
.
bind
this
success
:
(
data
)
=>
success
:
(
data
)
=>
@
fullData
=
data
@
fullData
=
data
...
@@ -192,8 +181,8 @@ class GitLabDropdown
...
@@ -192,8 +181,8 @@ class GitLabDropdown
currentIndex
=
-
1
currentIndex
=
-
1
@
parseData
@
fullData
@
parseData
@
fullData
@
filter
.
input
.
trigger
(
'keyup'
)
if
@
options
.
filterable
and
@
filter
and
@
filter
.
input
if
@
options
.
filterable
and
@
filter
and
@
filter
.
input
}
@
filter
.
input
.
trigger
'keyup'
# Init filterable
# Init filterable
if
@
options
.
filterable
if
@
options
.
filterable
...
@@ -210,9 +199,9 @@ class GitLabDropdown
...
@@ -210,9 +199,9 @@ class GitLabDropdown
if
@
dropdown
.
find
(
'.dropdown-toggle-page'
).
length
if
@
dropdown
.
find
(
'.dropdown-toggle-page'
).
length
selector
=
".dropdown-page-one
#{
selector
}
"
selector
=
".dropdown-page-one
#{
selector
}
"
return
$
(
selector
)
$
(
selector
)
data
:
=>
data
:
=>
return
@
fullData
@
fullData
callback
:
(
data
)
=>
callback
:
(
data
)
=>
@
parseData
data
@
parseData
data
...
@@ -232,36 +221,35 @@ class GitLabDropdown
...
@@ -232,36 +221,35 @@ class GitLabDropdown
# Event listeners
# Event listeners
@
dropdown
.
on
"shown.bs.dropdown"
,
@
opened
@
dropdown
.
on
'shown.bs.dropdown'
,
@
opened
@
dropdown
.
on
"hidden.bs.dropdown"
,
@
hidden
@
dropdown
.
on
'hidden.bs.dropdown'
,
@
hidden
$
(
@
el
).
on
"update.label"
,
@
updateLabel
$
(
@
el
).
on
'update.label'
,
@
updateLabel
@
dropdown
.
on
"click"
,
".dropdown-menu, .dropdown-menu-close"
,
@
shouldPropagate
@
dropdown
.
on
'click'
,
'.dropdown-menu, .dropdown-menu-close'
,
@
shouldPropagate
@
dropdown
.
on
'keyup'
,
(
e
)
=>
@
dropdown
.
on
'keyup'
,
(
e
)
=>
if
e
.
which
is
27
# Escape key
$
(
'.dropdown-menu-close'
,
@
dropdown
).
trigger
'click'
if
e
.
which
is
27
$
(
'.dropdown-menu-close'
,
@
dropdown
).
trigger
'click'
@
dropdown
.
on
'blur'
,
'a'
,
(
e
)
=>
@
dropdown
.
on
'blur'
,
'a'
,
(
e
)
=>
if
e
.
relatedTarget
?
if
e
.
relatedTarget
?
$relatedTarget
=
$
(
e
.
relatedTarget
)
$relatedTarget
=
$
(
e
.
relatedTarget
)
$dropdownMenu
=
$relatedTarget
.
closest
(
'.dropdown-menu'
)
$dropdownMenu
=
$relatedTarget
.
closest
(
'.dropdown-menu'
)
if
$dropdownMenu
.
length
is
0
@
dropdown
.
removeClass
(
'open'
)
if
$dropdownMenu
.
length
is
0
@
dropdown
.
removeClass
(
'open'
)
if
@
dropdown
.
find
(
".dropdown-toggle-page"
).
length
if
@
dropdown
.
find
(
'.dropdown-toggle-page'
).
length
@
dropdown
.
find
(
".dropdown-toggle-page, .dropdown-menu-back"
).
on
"click"
,
(
e
)
=>
@
dropdown
.
find
(
'.dropdown-toggle-page, .dropdown-menu-back'
).
on
'click'
,
(
e
)
=>
e
.
preventDefault
()
e
.
preventDefault
()
e
.
stopPropagation
()
e
.
stopPropagation
()
@
togglePage
()
@
togglePage
()
if
@
options
.
selectable
if
@
options
.
selectable
selector
=
".dropdown-content a"
selector
=
'.dropdown-content a'
if
@
dropdown
.
find
(
".dropdown-toggle-page"
).
length
if
@
dropdown
.
find
(
'.dropdown-toggle-page'
).
length
selector
=
".dropdown-page-one .dropdown-content a"
selector
=
'.dropdown-page-one .dropdown-content a'
@
dropdown
.
on
"click"
,
selector
,
(
e
)
->
@
dropdown
.
on
'click'
,
selector
,
(
e
)
->
$el
=
$
(
@
)
$el
=
$
(
this
)
selected
=
self
.
rowClicked
$el
selected
=
self
.
rowClicked
$el
if
self
.
options
.
clicked
if
self
.
options
.
clicked
...
@@ -280,8 +268,7 @@ class GitLabDropdown
...
@@ -280,8 +268,7 @@ class GitLabDropdown
menu
=
$
(
'.dropdown-menu'
,
@
dropdown
)
menu
=
$
(
'.dropdown-menu'
,
@
dropdown
)
if
menu
.
hasClass
(
PAGE_TWO_CLASS
)
if
menu
.
hasClass
(
PAGE_TWO_CLASS
)
if
@
remote
@
remote
.
execute
()
if
@
remote
@
remote
.
execute
()
menu
.
toggleClass
PAGE_TWO_CLASS
menu
.
toggleClass
PAGE_TWO_CLASS
...
@@ -316,38 +303,32 @@ class GitLabDropdown
...
@@ -316,38 +303,32 @@ class GitLabDropdown
renderData
:
(
data
,
group
=
false
)
->
renderData
:
(
data
,
group
=
false
)
->
data
.
map
(
obj
,
index
)
=>
data
.
map
(
obj
,
index
)
=>
return
@
renderItem
(
obj
,
group
,
index
)
@
renderItem
(
obj
,
group
,
index
)
shouldPropagate
:
(
e
)
=>
shouldPropagate
:
(
e
)
=>
if
@
options
.
multiSelect
$target
=
$
(
e
.
target
)
if
@
options
.
multiSelect
$target
=
$
(
e
.
target
)
unless
$target
.
hasClass
(
'dropdown-menu-close'
)
and
$target
.
hasClass
(
'dropdown-menu-close-icon'
)
and
$target
.
data
(
'is-link'
)
e
.
stopPropagation
()
if
not
$target
.
hasClass
(
'dropdown-menu-close'
)
and
not
$target
.
hasClass
(
'dropdown-menu-close-icon'
)
and
not
$target
.
data
(
'is-link'
)
false
e
.
stopPropagation
()
else
return
false
true
else
return
true
opened
:
=>
opened
:
=>
@
resetRows
()
@
resetRows
()
@
addArrowKeyEvent
()
@
addArrowKeyEvent
()
if
@
options
.
setIndeterminateIds
@
options
.
setIndeterminateIds
.
call
this
if
@
options
.
setIndeterminateIds
@
options
.
setIndeterminateIds
.
call
(
@
)
if
@
options
.
setActiveIds
@
options
.
setActiveIds
.
call
this
if
@
options
.
setActiveIds
@
options
.
setActiveIds
.
call
(
@
)
# Makes indeterminate items effective
# Makes indeterminate items effective
if
@
fullData
and
@
dropdown
.
find
(
'.dropdown-menu-toggle'
).
hasClass
(
'js-filter-bulk-update'
)
if
@
fullData
and
@
dropdown
.
find
(
'.dropdown-menu-toggle'
).
hasClass
(
'js-filter-bulk-update'
)
@
parseData
@
fullData
@
parseData
@
fullData
contentHtml
=
$
(
'.dropdown-content'
,
@
dropdown
).
html
()
contentHtml
=
$
(
'.dropdown-content'
,
@
dropdown
).
html
()
if
@
remote
&&
contentHtml
is
""
@
remote
.
execute
()
if
@
remote
and
contentHtml
is
''
@
remote
.
execute
()
if
@
options
.
filterable
@
filterInput
.
focus
()
if
@
options
.
filterable
@
filterInput
.
focus
()
@
dropdown
.
trigger
(
'shown.gl.dropdown'
)
@
dropdown
.
trigger
(
'shown.gl.dropdown'
)
...
@@ -355,71 +336,67 @@ class GitLabDropdown
...
@@ -355,71 +336,67 @@ class GitLabDropdown
@
resetRows
()
@
resetRows
()
@
removeArrayKeyEvent
()
@
removeArrayKeyEvent
()
$input
=
@
dropdown
.
find
(
".dropdown-input-field"
)
$input
=
@
dropdown
.
find
(
'.dropdown-input-field'
)
if
@
options
.
filterable
if
@
options
.
filterable
$input
$input
.
blur
()
.
blur
()
.
val
(
""
)
.
val
(
''
)
# Triggering 'keyup' will re-render the dropdown which is not always required
# Triggering 'keyup' will re-render the dropdown which is not always required
# specially if we want to keep the state of the dropdown needed for bulk-assignment
# specially if we want to keep the state of the dropdown needed for bulk-assignment
if
not
@
options
.
persistWhenHide
$input
.
trigger
(
'keyup'
)
unless
@
options
.
persistWhenHide
$input
.
trigger
(
"keyup"
)
if
@
dropdown
.
find
(
".dropdown-toggle-page"
).
length
if
@
dropdown
.
find
(
'.dropdown-toggle-page'
).
length
$
(
'.dropdown-menu'
,
@
dropdown
).
removeClass
PAGE_TWO_CLASS
$
(
'.dropdown-menu'
,
@
dropdown
).
removeClass
PAGE_TWO_CLASS
if
@
options
.
hidden
@
options
.
hidden
.
call
this
,
e
if
@
options
.
hidden
@
options
.
hidden
.
call
(
@
,
e
)
@
dropdown
.
trigger
(
'hidden.gl.dropdown'
)
@
dropdown
.
trigger
(
'hidden.gl.dropdown'
)
# Render the full menu
# Render the full menu
renderMenu
:
(
html
)
->
renderMenu
:
(
html
)
->
menu_html
=
""
menu_html
=
''
if
@
options
.
renderMenu
if
@
options
.
renderMenu
menu_html
=
@
options
.
renderMenu
(
html
)
menu_html
=
@
options
.
renderMenu
html
else
else
menu_html
=
$
(
'<ul />'
)
menu_html
=
$
(
'<ul/>'
).
append
html
.
append
(
html
)
return
menu_html
menu_html
# Append the menu into the dropdown
# Append the menu into the dropdown
appendMenu
:
(
html
)
->
appendMenu
:
(
html
)
->
selector
=
'.dropdown-content'
selector
=
'.dropdown-content'
if
@
dropdown
.
find
(
".dropdown-toggle-page"
).
length
if
@
dropdown
.
find
(
'.dropdown-toggle-page'
).
length
selector
=
".dropdown-page-one .dropdown-content"
selector
=
'.dropdown-page-one .dropdown-content'
$
(
selector
,
@
dropdown
)
$
(
selector
,
@
dropdown
)
.
empty
()
.
empty
()
.
append
(
html
)
.
append
html
# Render the row
# Render the row
renderItem
:
(
data
,
group
=
false
,
index
=
false
)
->
renderItem
:
(
data
,
group
=
false
,
index
=
false
)
->
html
=
""
html
=
''
# Divider
# Divider
return
"<li class='divider'></li>"
if
data
is
"divider"
return
'<li class='
divider
'></li>'
if
data
is
'divider'
# Separator is a full-width divider
# Separator is a full-width divider
return
"<li class='separator'></li>"
if
data
is
"separator"
return
'<li class='
separator
'></li>'
if
data
is
'separator'
# Header
# Header
return
_
.
template
(
"<li class='dropdown-header'><%- header %></li>"
)
header
:
data
.
header
if
data
.
header
?
return
_
.
template
(
'<li class="dropdown-header"><%- header %></li>'
)({
header
:
data
.
header
})
if
data
.
header
?
if
@
options
.
renderRow
if
@
options
.
renderRow
# Call the render function
# Call the render function
html
=
@
options
.
renderRow
.
call
(
@
options
,
data
,
@
)
html
=
@
options
.
renderRow
.
call
(
@
options
,
data
,
@
)
else
else
if
not
selected
unless
selected
value
=
if
@
options
.
id
then
@
options
.
id
(
data
)
else
data
.
id
value
=
if
@
options
.
id
then
@
options
.
id
(
data
)
else
data
.
id
fieldName
=
@
options
.
fieldName
fieldName
=
@
options
.
fieldName
field
=
@
dropdown
.
parent
().
find
(
"input[name='
#{
fieldName
}
'][value='
#{
value
}
']"
)
field
=
@
dropdown
.
parent
().
find
(
"input[name='
#{
fieldName
}
'][value='
#{
value
}
']"
)
if
field
.
length
selected
=
true
if
field
.
length
selected
=
true
# Set URL
# Set URL
if
@
options
.
url
?
if
@
options
.
url
?
...
@@ -433,10 +410,9 @@ class GitLabDropdown
...
@@ -433,10 +410,9 @@ class GitLabDropdown
else
else
text
=
if
data
.
text
?
then
data
.
text
else
''
text
=
if
data
.
text
?
then
data
.
text
else
''
cssClass
=
""
cssClass
=
''
if
selected
cssClass
=
'is-active'
if
selected
cssClass
=
"is-active"
if
@
highlight
if
@
highlight
text
=
@
highlightTextMatches
(
text
,
@
filterInput
.
val
())
text
=
@
highlightTextMatches
(
text
,
@
filterInput
.
val
())
...
@@ -445,18 +421,18 @@ class GitLabDropdown
...
@@ -445,18 +421,18 @@ class GitLabDropdown
groupAttrs
=
"data-group=
#{
group
}
data-index=
#{
index
}
"
groupAttrs
=
"data-group=
#{
group
}
data-index=
#{
index
}
"
else
else
groupAttrs
=
''
groupAttrs
=
''
html
=
_
.
template
(
"
<li>
html
=
_
.
template
(
'
<li>
<a href=
'<%- url %>' <%- groupAttrs %> class='<%- cssClass %>'
>
<a href=
"<%- url %>" <%- groupAttrs %> class="<%- cssClass %>"
>
<%= text %>
<%= text %>
</a>
</a>
</li>
"
)({
</li>
'
)({
url
:
url
url
:
url
groupAttrs
:
groupAttrs
groupAttrs
:
groupAttrs
cssClass
:
cssClass
cssClass
:
cssClass
text
:
text
text
:
text
})
})
return
html
html
highlightTextMatches
:
(
text
,
term
)
->
highlightTextMatches
:
(
text
,
term
)
->
occurrences
=
fuzzaldrinPlus
.
match
(
text
,
term
)
occurrences
=
fuzzaldrinPlus
.
match
(
text
,
term
)
...
@@ -465,20 +441,20 @@ class GitLabDropdown
...
@@ -465,20 +441,20 @@ class GitLabDropdown
).
join
(
''
)
).
join
(
''
)
noResults
:
->
noResults
:
->
html
=
"<li class='dropdown-menu-empty-link'
>
html
=
'<li class="dropdown-menu-empty-link"
>
<a href=
'#' class='is-focused'
>
<a href=
"#" class="is-focused"
>
No matching results.
No matching results.
</a>
</a>
</li>
"
</li>
'
rowClicked
:
(
el
)
->
rowClicked
:
(
el
)
->
fieldName
=
@
options
.
fieldName
fieldName
=
@
options
.
fieldName
isInput
=
$
(
@
el
).
is
(
'input'
)
isInput
=
$
(
@
el
).
is
(
'input'
)
if
@
renderedData
if
@
renderedData
groupName
=
el
.
data
(
'group'
)
groupName
=
el
.
data
'group'
if
groupName
if
groupName
selectedIndex
=
el
.
data
(
'index'
)
selectedIndex
=
el
.
data
'index'
selectedObject
=
@
renderedData
[
groupName
][
selectedIndex
]
selectedObject
=
@
renderedData
[
groupName
][
selectedIndex
]
else
else
selectedIndex
=
el
.
closest
(
'li'
).
index
()
selectedIndex
=
el
.
closest
(
'li'
).
index
()
...
@@ -501,20 +477,19 @@ class GitLabDropdown
...
@@ -501,20 +477,19 @@ class GitLabDropdown
# Toggle the dropdown label
# Toggle the dropdown label
if
@
options
.
toggleLabel
if
@
options
.
toggleLabel
@
updateLabel
(
selectedObject
,
el
,
@
)
@
updateLabel
(
selectedObject
,
el
,
this
)
else
else
selectedObject
selectedObject
else
if
el
.
hasClass
(
INDETERMINATE_CLASS
)
else
if
el
.
hasClass
(
INDETERMINATE_CLASS
)
el
.
addClass
ACTIVE_CLASS
el
.
addClass
ACTIVE_CLASS
el
.
removeClass
INDETERMINATE_CLASS
el
.
removeClass
INDETERMINATE_CLASS
if
not
value
?
field
.
remove
()
unless
value
?
field
.
remove
()
if
not
field
.
length
and
fieldName
if
not
field
.
length
and
fieldName
@
addInput
(
fieldName
,
value
)
@
addInput
(
fieldName
,
value
)
return
selectedObject
selectedObject
else
else
if
not
@
options
.
multiSelect
or
el
.
hasClass
(
'dropdown-clear-active'
)
if
not
@
options
.
multiSelect
or
el
.
hasClass
(
'dropdown-clear-active'
)
@
dropdown
.
find
(
".
#{
ACTIVE_CLASS
}
"
).
removeClass
ACTIVE_CLASS
@
dropdown
.
find
(
".
#{
ACTIVE_CLASS
}
"
).
removeClass
ACTIVE_CLASS
...
@@ -522,24 +497,23 @@ class GitLabDropdown
...
@@ -522,24 +497,23 @@ class GitLabDropdown
unless
isInput
unless
isInput
@
dropdown
.
parent
().
find
(
"input[name='
#{
fieldName
}
']"
).
remove
()
@
dropdown
.
parent
().
find
(
"input[name='
#{
fieldName
}
']"
).
remove
()
if
!
value
?
field
.
remove
()
unless
value
?
field
.
remove
()
# Toggle active class for the tick mark
# Toggle active class for the tick mark
el
.
addClass
ACTIVE_CLASS
el
.
addClass
ACTIVE_CLASS
# Toggle the dropdown label
# Toggle the dropdown label
if
@
options
.
toggleLabel
if
@
options
.
toggleLabel
@
updateLabel
(
selectedObject
,
el
,
@
)
@
updateLabel
(
selectedObject
,
el
,
this
)
if
value
?
if
value
?
if
!
field
.
length
and
fieldName
if
not
field
.
length
and
fieldName
@
addInput
(
fieldName
,
value
)
@
addInput
(
fieldName
,
value
)
else
else
field
field
.
val
value
.
val
value
.
trigger
'change'
.
trigger
'change'
return
selectedObject
selectedObject
addInput
:
(
fieldName
,
value
)
->
addInput
:
(
fieldName
,
value
)
->
# Create hidden input for form
# Create hidden input for form
...
@@ -556,7 +530,7 @@ class GitLabDropdown
...
@@ -556,7 +530,7 @@ class GitLabDropdown
# Dropdown list item link selector, excluding non-selectable list items
# Dropdown list item link selector, excluding non-selectable list items
selector
=
"
#{
SELECTABLE_CLASSES
}
:eq(
#{
index
}
) a"
selector
=
"
#{
SELECTABLE_CLASSES
}
:eq(
#{
index
}
) a"
if
@
dropdown
.
find
(
".dropdown-toggle-page"
).
length
if
@
dropdown
.
find
(
'.dropdown-toggle-page'
).
length
selector
=
".dropdown-page-one
#{
selector
}
"
selector
=
".dropdown-page-one
#{
selector
}
"
# simulate a click on the first link
# simulate a click on the first link
...
@@ -570,11 +544,11 @@ class GitLabDropdown
...
@@ -570,11 +544,11 @@ class GitLabDropdown
addArrowKeyEvent
:
->
addArrowKeyEvent
:
->
ARROW_KEY_CODES
=
[
38
,
40
]
ARROW_KEY_CODES
=
[
38
,
40
]
$input
=
@
dropdown
.
find
(
".dropdown-input-field"
)
$input
=
@
dropdown
.
find
'.dropdown-input-field'
# Dropdown list item selector, excluding non-selectable list items
# Dropdown list item selector, excluding non-selectable list items
selector
=
SELECTABLE_CLASSES
selector
=
SELECTABLE_CLASSES
if
@
dropdown
.
find
(
".dropdown-toggle-page"
).
length
if
@
dropdown
.
find
(
'.dropdown-toggle-page'
).
length
selector
=
".dropdown-page-one
#{
selector
}
"
selector
=
".dropdown-page-one
#{
selector
}
"
$
(
'body'
).
on
'keydown'
,
(
e
)
=>
$
(
'body'
).
on
'keydown'
,
(
e
)
=>
...
@@ -597,12 +571,13 @@ class GitLabDropdown
...
@@ -597,12 +571,13 @@ class GitLabDropdown
# Move up
# Move up
currentIndex
-=
1
if
currentIndex
>
0
currentIndex
-=
1
if
currentIndex
>
0
@
highlightRowAtIndex
(
$listItems
,
currentIndex
)
if
currentIndex
isnt
PREV_INDEX
if
currentIndex
isnt
PREV_INDEX
@
highlightRowAtIndex
(
$listItems
,
currentIndex
)
return
false
return
false
# If enter is pressed and a row is highlighted, select it
# If enter is pressed and a row is highlighted, select it
if
currentKeyCode
is
13
and
currentIndex
!=
-
1
if
currentKeyCode
is
13
and
currentIndex
isnt
-
1
e
.
preventDefault
()
e
.
preventDefault
()
e
.
stopImmediatePropagation
()
e
.
stopImmediatePropagation
()
@
selectRowAtIndex
e
,
currentIndex
@
selectRowAtIndex
e
,
currentIndex
...
@@ -621,7 +596,7 @@ class GitLabDropdown
...
@@ -621,7 +596,7 @@ class GitLabDropdown
# Update the class for the row at the specific index
# Update the class for the row at the specific index
$listItem
=
$listItems
.
eq
(
index
)
$listItem
=
$listItems
.
eq
(
index
)
$listItem
.
find
(
'a:first-child'
).
addClass
"is-focused"
$listItem
.
find
(
'a:first-child'
).
addClass
'is-focused'
# Dropdown content scroll area
# Dropdown content scroll area
$dropdownContent
=
$listItem
.
closest
(
'.dropdown-content'
)
$dropdownContent
=
$listItem
.
closest
(
'.dropdown-content'
)
...
@@ -640,7 +615,7 @@ class GitLabDropdown
...
@@ -640,7 +615,7 @@ class GitLabDropdown
$dropdownContent
.
scrollTop
(
0
)
$dropdownContent
.
scrollTop
(
0
)
else
if
index
is
$listItems
.
length
-
1
else
if
index
is
$listItems
.
length
-
1
# If this is the last item in the list, scroll to the bottom
# If this is the last item in the list, scroll to the bottom
$dropdownContent
.
scrollTop
(
$dropdownContent
[
0
].
scrollHeight
)
$dropdownContent
.
scrollTop
$dropdownContent
.
prop
'scrollHeight'
else
if
listItemBottom
>
dropdownContentBottom
+
dropdownScrollTop
else
if
listItemBottom
>
dropdownContentBottom
+
dropdownScrollTop
# Scroll the dropdown content down with a little padding
# Scroll the dropdown content down with a little padding
$dropdownContent
.
scrollTop
(
listItemBottom
-
dropdownContentBottom
+
CURSOR_SELECT_SCROLL_PADDING
)
$dropdownContent
.
scrollTop
(
listItemBottom
-
dropdownContentBottom
+
CURSOR_SELECT_SCROLL_PADDING
)
...
@@ -649,9 +624,9 @@ class GitLabDropdown
...
@@ -649,9 +624,9 @@ class GitLabDropdown
$dropdownContent
.
scrollTop
(
listItemTop
-
dropdownContentTop
-
CURSOR_SELECT_SCROLL_PADDING
)
$dropdownContent
.
scrollTop
(
listItemTop
-
dropdownContentTop
-
CURSOR_SELECT_SCROLL_PADDING
)
updateLabel
:
(
selected
=
null
,
el
=
null
,
instance
=
null
)
=>
updateLabel
:
(
selected
=
null
,
el
=
null
,
instance
=
null
)
=>
$
(
@
el
).
find
(
".dropdown-toggle-text"
).
text
@
options
.
toggleLabel
(
selected
,
el
,
instance
)
$
(
@
el
).
find
(
'.dropdown-toggle-text'
).
text
@
options
.
toggleLabel
(
selected
,
el
,
instance
)
$
.
fn
.
glDropdown
=
(
opts
)
->
$
.
fn
.
glDropdown
=
(
opts
)
->
return
@
.
each
->
@
each
->
if
(
!
$
.
data
@
,
'glDropdown'
)
unless
$
.
data
this
,
'glDropdown'
$
.
data
(
@
,
'glDropdown'
,
new
GitLabDropdown
@
,
opts
)
$
.
data
this
,
'glDropdown'
,
new
GitLabDropdown
this
,
opts
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment