Further review changes and removed large ammounts of reformatting
This commit is contained in:
parent
1ac5f764ce
commit
affdf201d2
|
@ -1,7 +1,7 @@
|
||||||
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
|
||||||
} = @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,23 +18,24 @@ 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 not $inputContainer.hasClass HAS_VALUE_CLASS
|
if @input.val() isnt "" and !$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
|
||||||
|
|
||||||
return false if keyCode is 13
|
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
|
||||||
|
@ -46,13 +47,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) ->
|
||||||
BLUR_KEYCODES.indexOf(keyCode) >= 0
|
return 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
|
||||||
|
@ -68,8 +69,9 @@ 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.
|
||||||
# {
|
# {
|
||||||
|
@ -85,8 +87,9 @@ 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
|
||||||
|
@ -97,10 +100,10 @@ class GitLabDropdownFilter
|
||||||
|
|
||||||
if search_text
|
if search_text
|
||||||
elements.each ->
|
elements.each ->
|
||||||
$el = $(this)
|
$el = $(@)
|
||||||
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
|
||||||
|
@ -112,68 +115,75 @@ 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"
|
||||||
@options.beforeSend() if @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) =>
|
||||||
@options.success(data) if @options.success
|
if @options.success
|
||||||
@options.beforeSend() if @options.beforeSend
|
@options.success(data)
|
||||||
|
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: =>
|
||||||
@options.beforeSend() if @options.beforeSend
|
if @options.beforeSend
|
||||||
|
@options.beforeSend()
|
||||||
success: (data) =>
|
success: (data) =>
|
||||||
@options.success(data) if @options.success
|
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"
|
||||||
|
currentIndex = -1
|
||||||
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'
|
||||||
currentIndex = -1
|
|
||||||
CURSOR_SELECT_SCROLL_PADDING = 5
|
CURSOR_SELECT_SCROLL_PADDING = 5
|
||||||
|
|
||||||
constructor: (@el, @options) ->
|
constructor: (@el, @options) ->
|
||||||
self = this
|
self = @
|
||||||
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 = this
|
self = @
|
||||||
|
|
||||||
# If selector was passed
|
# If selector was passed
|
||||||
@filterInput = @getElement(@filterInput) if _.isString @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 this
|
beforeSend: @toggleLoading.bind(@)
|
||||||
success: (data) =>
|
success: (data) =>
|
||||||
@fullData = data
|
@fullData = data
|
||||||
|
|
||||||
|
@ -181,8 +191,8 @@ class GitLabDropdown
|
||||||
currentIndex = -1
|
currentIndex = -1
|
||||||
@parseData @fullData
|
@parseData @fullData
|
||||||
|
|
||||||
if @options.filterable and @filter and @filter.input
|
@filter.input.trigger('keyup') if @options.filterable and @filter and @filter.input
|
||||||
@filter.input.trigger 'keyup'
|
}
|
||||||
|
|
||||||
# Init filterable
|
# Init filterable
|
||||||
if @options.filterable
|
if @options.filterable
|
||||||
|
@ -199,9 +209,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}"
|
||||||
|
|
||||||
$(selector)
|
return $(selector)
|
||||||
data: =>
|
data: =>
|
||||||
@fullData
|
return @fullData
|
||||||
callback: (data) =>
|
callback: (data) =>
|
||||||
@parseData data
|
@parseData data
|
||||||
|
|
||||||
|
@ -221,35 +231,37 @@ 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) =>
|
||||||
$('.dropdown-menu-close', @dropdown).trigger 'click' if e.which is 27
|
if e.which is 27 # Escape key
|
||||||
|
$('.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')
|
||||||
|
|
||||||
@dropdown.removeClass('open') if $dropdownMenu.length is 0
|
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 = $(this)
|
$el = $(@)
|
||||||
selected = self.rowClicked $el
|
selected = self.rowClicked $el
|
||||||
|
|
||||||
if self.options.clicked
|
if self.options.clicked
|
||||||
|
@ -268,7 +280,8 @@ class GitLabDropdown
|
||||||
menu = $('.dropdown-menu', @dropdown)
|
menu = $('.dropdown-menu', @dropdown)
|
||||||
|
|
||||||
if menu.hasClass(PAGE_TWO_CLASS)
|
if menu.hasClass(PAGE_TWO_CLASS)
|
||||||
@remote.execute() if @remote
|
if @remote
|
||||||
|
@remote.execute()
|
||||||
|
|
||||||
menu.toggleClass PAGE_TWO_CLASS
|
menu.toggleClass PAGE_TWO_CLASS
|
||||||
|
|
||||||
|
@ -303,32 +316,38 @@ class GitLabDropdown
|
||||||
|
|
||||||
renderData: (data, group = false) ->
|
renderData: (data, group = false) ->
|
||||||
data.map (obj, index) =>
|
data.map (obj, index) =>
|
||||||
@renderItem(obj, group, index)
|
return @renderItem(obj, group, index)
|
||||||
|
|
||||||
shouldPropagate: (e) =>
|
shouldPropagate: (e) =>
|
||||||
$target = $(e.target) if @options.multiSelect
|
if @options.multiSelect
|
||||||
|
$target = $(e.target)
|
||||||
|
|
||||||
if $target and not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon') and not $target.data('is-link')
|
if $target and not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon') and not $target.data('is-link')
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
false
|
return false
|
||||||
else
|
else
|
||||||
true
|
return true
|
||||||
|
|
||||||
opened: =>
|
opened: =>
|
||||||
@resetRows()
|
@resetRows()
|
||||||
@addArrowKeyEvent()
|
@addArrowKeyEvent()
|
||||||
|
|
||||||
@options.setIndeterminateIds.call this if @options.setIndeterminateIds
|
if @options.setIndeterminateIds
|
||||||
|
@options.setIndeterminateIds.call(@)
|
||||||
|
|
||||||
@options.setActiveIds.call this if @options.setActiveIds
|
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()
|
||||||
@remote.execute() if @remote and contentHtml is ''
|
if @remote && contentHtml is ""
|
||||||
|
@remote.execute()
|
||||||
|
|
||||||
@filterInput.focus() if @options.filterable
|
if @options.filterable
|
||||||
|
@filterInput.focus()
|
||||||
|
|
||||||
@dropdown.trigger('shown.gl.dropdown')
|
@dropdown.trigger('shown.gl.dropdown')
|
||||||
|
|
||||||
|
@ -336,48 +355,51 @@ 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
|
||||||
$input.trigger('keyup') unless @options.persistWhenHide
|
if not @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
|
||||||
|
|
||||||
@options.hidden.call this, e if @options.hidden
|
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/>').append html
|
menu_html = $('<ul />')
|
||||||
|
.append(html)
|
||||||
|
|
||||||
menu_html
|
return 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'
|
||||||
|
@ -392,11 +414,12 @@ class GitLabDropdown
|
||||||
# Call the render function
|
# Call the render function
|
||||||
html = @options.renderRow.call(@options, data, @)
|
html = @options.renderRow.call(@options, data, @)
|
||||||
else
|
else
|
||||||
unless selected
|
if not 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}']")
|
||||||
selected = true if field.length
|
if field.length
|
||||||
|
selected = true
|
||||||
|
|
||||||
# Set URL
|
# Set URL
|
||||||
if @options.url?
|
if @options.url?
|
||||||
|
@ -410,15 +433,16 @@ class GitLabDropdown
|
||||||
else
|
else
|
||||||
text = if data.text? then data.text else ''
|
text = if data.text? then data.text else ''
|
||||||
|
|
||||||
cssClass = ''
|
cssClass = ""
|
||||||
|
|
||||||
cssClass = 'is-active' if selected
|
if selected
|
||||||
|
cssClass = "is-active"
|
||||||
|
|
||||||
if @highlight
|
if @highlight
|
||||||
text = @highlightTextMatches(text, @filterInput.val())
|
text = @highlightTextMatches(text, @filterInput.val())
|
||||||
|
|
||||||
if group
|
if group
|
||||||
groupAttrs = "data-group=#{group} data-index=#{index}"
|
groupAttrs = "data-group='#{group}' data-index='#{index}'"
|
||||||
else
|
else
|
||||||
groupAttrs = ''
|
groupAttrs = ''
|
||||||
html = _.template('<li>
|
html = _.template('<li>
|
||||||
|
@ -432,7 +456,7 @@ class GitLabDropdown
|
||||||
text: text
|
text: text
|
||||||
})
|
})
|
||||||
|
|
||||||
html
|
return html
|
||||||
|
|
||||||
highlightTextMatches: (text, term) ->
|
highlightTextMatches: (text, term) ->
|
||||||
occurrences = fuzzaldrinPlus.match(text, term)
|
occurrences = fuzzaldrinPlus.match(text, term)
|
||||||
|
@ -452,9 +476,9 @@ class GitLabDropdown
|
||||||
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()
|
||||||
|
@ -477,19 +501,20 @@ class GitLabDropdown
|
||||||
|
|
||||||
# Toggle the dropdown label
|
# Toggle the dropdown label
|
||||||
if @options.toggleLabel
|
if @options.toggleLabel
|
||||||
@updateLabel(selectedObject, el, this)
|
@updateLabel(selectedObject, el, @)
|
||||||
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
|
||||||
|
|
||||||
field.remove() unless value?
|
if not value?
|
||||||
|
field.remove()
|
||||||
|
|
||||||
if not field.length and fieldName
|
if not field.length and fieldName
|
||||||
@addInput(fieldName, value)
|
@addInput(fieldName, value)
|
||||||
|
|
||||||
selectedObject
|
return 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
|
||||||
|
@ -497,29 +522,30 @@ class GitLabDropdown
|
||||||
unless isInput
|
unless isInput
|
||||||
@dropdown.parent().find("input[name='#{fieldName}']").remove()
|
@dropdown.parent().find("input[name='#{fieldName}']").remove()
|
||||||
|
|
||||||
field.remove() unless value?
|
if !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, this)
|
@updateLabel(selectedObject, el, @)
|
||||||
if value?
|
if value?
|
||||||
if not field.length and fieldName
|
if !field.length and fieldName
|
||||||
@addInput(fieldName, value)
|
@addInput(fieldName, value)
|
||||||
else
|
else
|
||||||
field
|
field
|
||||||
.val value
|
.val value
|
||||||
.trigger 'change'
|
.trigger 'change'
|
||||||
|
|
||||||
selectedObject
|
return selectedObject
|
||||||
|
|
||||||
addInput: (fieldName, value)->
|
addInput: (fieldName, value)->
|
||||||
# Create hidden input for form
|
# Create hidden input for form
|
||||||
$input = $('<input>').attr('type', 'hidden')
|
$input = $('<input>').attr('type', 'hidden')
|
||||||
.attr('name', fieldName)
|
.attr('name', fieldName)
|
||||||
.val(value)
|
.val(value)
|
||||||
|
|
||||||
if @options.inputId?
|
if @options.inputId?
|
||||||
$input.attr('id', @options.inputId)
|
$input.attr('id', @options.inputId)
|
||||||
|
@ -530,21 +556,22 @@ 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
|
||||||
$el = $(selector, @dropdown)
|
$el = $(selector, @dropdown)
|
||||||
|
|
||||||
if $el.length
|
if $el.length
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
e.stopImmediatePropagation()
|
e.stopImmediatePropagation()
|
||||||
$el.first().trigger 'click'
|
$el.first().trigger('click')
|
||||||
href = $el.attr 'href'
|
href = $el.attr 'href'
|
||||||
Turbolinks.visit(href) if href and href isnt '#'
|
Turbolinks.visit(href) if href and href isnt '#'
|
||||||
|
|
||||||
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
|
||||||
|
@ -571,8 +598,7 @@ class GitLabDropdown
|
||||||
# Move up
|
# Move up
|
||||||
currentIndex -= 1 if currentIndex > 0
|
currentIndex -= 1 if currentIndex > 0
|
||||||
|
|
||||||
if currentIndex isnt PREV_INDEX
|
@highlightRowAtIndex($listItems, currentIndex) if currentIndex isnt PREV_INDEX
|
||||||
@highlightRowAtIndex($listItems, currentIndex)
|
|
||||||
|
|
||||||
return false
|
return false
|
||||||
|
|
||||||
|
@ -596,7 +622,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')
|
||||||
|
@ -624,9 +650,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) ->
|
||||||
@each ->
|
return @.each ->
|
||||||
unless $.data this, 'glDropdown'
|
if (!$.data @, 'glDropdown')
|
||||||
$.data this, 'glDropdown', new GitLabDropdown this, opts
|
$.data(@, 'glDropdown', new GitLabDropdown @, opts)
|
||||||
|
|
|
@ -315,11 +315,10 @@ class @SearchAutocomplete
|
||||||
|
|
||||||
disableAutocomplete: ->
|
disableAutocomplete: ->
|
||||||
# If not disabled already, disable
|
# If not disabled already, disable
|
||||||
if not @searchInput.hasClass('disabled') && @dropdown.hasClass('open')
|
if not @searchInput.hasClass('disabled') and @dropdown.hasClass 'open'
|
||||||
@searchInput.addClass('disabled')
|
@searchInput.addClass('disabled')
|
||||||
# Close dropdown and invoke its hidden() method
|
# Close dropdown and invoke its hidden() method
|
||||||
@dropdown.removeClass('open')
|
@dropdown.removeClass('open').trigger 'hidden.bs.dropdown'
|
||||||
.trigger('hidden.bs.dropdown')
|
|
||||||
@restoreMenu()
|
@restoreMenu()
|
||||||
|
|
||||||
restoreMenu: ->
|
restoreMenu: ->
|
||||||
|
|
Loading…
Reference in New Issue