Commit 40d869ee authored by Luke "Jared" Bennett's avatar Luke "Jared" Bennett Committed by Luke Bennett

Review changes and final formatting

parent 85cd73c7
class GitLabDropdownFilter
BLUR_KEYCODES = [27, 40]
ARROW_KEY_CODES = [38, 40]
HAS_VALUE_CLASS = "has-value"
HAS_VALUE_CLASS = 'has-value'
constructor: (@input, @options) ->
{
......@@ -9,7 +9,7 @@ class GitLabDropdownFilter
} = @options
$inputContainer = @input.parent()
$clearButton = $inputContainer.find('.js-dropdown-input-clear')
$clearButton = $inputContainer.find '.js-dropdown-input-clear'
@indeterminateIds = []
......@@ -18,24 +18,23 @@ class GitLabDropdownFilter
e.preventDefault()
e.stopPropagation()
@input
.val('')
.trigger('keyup')
.val ''
.trigger 'keyup'
.focus()
# Key events
timeout = ""
@input.on "keyup", (e) =>
timeout = ''
@input.on 'keyup', (e) =>
keyCode = e.which
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
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
if keyCode is 13
return false
return false if keyCode is 13
# Only filter asynchronously only if option remote is set
if @options.remote
......@@ -47,13 +46,13 @@ class GitLabDropdownFilter
@input.blur()
@options.query @input.val(), (data) =>
@options.callback(data)
@options.callback data
, 250
else
@filter @input.val()
shouldBlur: (keyCode) ->
return BLUR_KEYCODES.indexOf(keyCode) >= 0
BLUR_KEYCODES.indexOf(keyCode) >= 0
filter: (search_text) ->
@options.onFilter(search_text) if @options.onFilter
......@@ -69,9 +68,8 @@ class GitLabDropdownFilter
# { prop: 'baz' }
# ]
if _.isArray(data)
results = fuzzaldrinPlus.filter(data, search_text,
results = fuzzaldrinPlus.filter data, search_text,
key: @options.keys
)
else
# If data is grouped therefore an [object Object]. e.g.
# {
......@@ -87,9 +85,8 @@ class GitLabDropdownFilter
if gl.utils.isObject data
results = {}
for key, group of data
tmp = fuzzaldrinPlus.filter(group, search_text,
tmp = fuzzaldrinPlus.filter group, search_text,
key: @options.keys
)
if tmp.length
results[key] = tmp.map (item) -> item
......@@ -100,10 +97,10 @@ class GitLabDropdownFilter
if search_text
elements.each ->
$el = $(@)
matches = fuzzaldrinPlus.match($el.text().trim(), search_text)
$el = $(this)
matches = fuzzaldrinPlus.match $el.text().trim(), search_text
unless $el.is('.dropdown-header')
unless $el.is '.dropdown-header'
if matches.length
$el.show()
else
......@@ -115,38 +112,31 @@ class GitLabDropdownRemote
constructor: (@dataEndpoint, @options) ->
execute: ->
if typeof @dataEndpoint is "string"
if typeof @dataEndpoint is 'string'
@fetchData()
else if typeof @dataEndpoint is "function"
if @options.beforeSend
@options.beforeSend()
else if typeof @dataEndpoint is 'function'
@options.beforeSend() if @options.beforeSend
# Fetch the data by calling the data funcfion
@dataEndpoint "", (data) =>
if @options.success
@options.success(data)
if @options.beforeSend
@options.beforeSend()
@dataEndpoint '', (data) =>
@options.success(data) if @options.success
@options.beforeSend() if @options.beforeSend
# Fetch the data through ajax if the data is a string
fetchData: ->
$.ajax(
$.ajax
url: @dataEndpoint,
dataType: @options.dataType,
beforeSend: =>
if @options.beforeSend
@options.beforeSend()
@options.beforeSend() if @options.beforeSend
success: (data) =>
if @options.success
@options.success(data)
)
@options.success(data) if @options.success
class GitLabDropdown
LOADING_CLASS = "is-loading"
PAGE_TWO_CLASS = "is-page-two"
ACTIVE_CLASS = "is-active"
INDETERMINATE_CLASS = "is-indeterminate"
LOADING_CLASS = 'is-loading'
PAGE_TWO_CLASS = 'is-page-two'
ACTIVE_CLASS = 'is-active'
INDETERMINATE_CLASS = 'is-indeterminate'
NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'
SELECTABLE_CLASSES = ".dropdown-content li:not(#{NON_SELECTABLE_CLASSES})"
FILTER_INPUT = '.dropdown-input .dropdown-input-field'
......@@ -154,37 +144,36 @@ class GitLabDropdown
CURSOR_SELECT_SCROLL_PADDING = 5
constructor: (@el, @options) ->
self = @
selector = $(@el).data "target"
self = this
selector = $(@el).data 'target'
@dropdown = if selector? then $(selector) else $(@el).parent()
# Set Defaults
{
# If no input is passed create a default one
@filterInput = @getElement(FILTER_INPUT)
@filterInput = @getElement FILTER_INPUT
@highlight = false
@filterInputBlur = true
} = @options
self = @
self = this
# If selector was passed
if _.isString(@filterInput)
@filterInput = @getElement(@filterInput)
@filterInput = @getElement(@filterInput) if _.isString @filterInput
searchFields = if @options.search then @options.search.fields else []
if @options.data
# If we provided data
# 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
@parseData @options.data
else
# Remote data
@remote = new GitLabDropdownRemote @options.data, {
@remote = new GitLabDropdownRemote @options.data,
dataType: @options.dataType,
beforeSend: @toggleLoading.bind(@)
beforeSend: @toggleLoading.bind this
success: (data) =>
@fullData = data
......@@ -192,8 +181,8 @@ class GitLabDropdown
currentIndex = -1
@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
if @options.filterable
......@@ -210,9 +199,9 @@ class GitLabDropdown
if @dropdown.find('.dropdown-toggle-page').length
selector = ".dropdown-page-one #{selector}"
return $(selector)
$(selector)
data: =>
return @fullData
@fullData
callback: (data) =>
@parseData data
......@@ -232,36 +221,35 @@ class GitLabDropdown
# Event listeners
@dropdown.on "shown.bs.dropdown", @opened
@dropdown.on "hidden.bs.dropdown", @hidden
$(@el).on "update.label", @updateLabel
@dropdown.on "click", ".dropdown-menu, .dropdown-menu-close", @shouldPropagate
@dropdown.on 'shown.bs.dropdown', @opened
@dropdown.on 'hidden.bs.dropdown', @hidden
$(@el).on 'update.label', @updateLabel
@dropdown.on 'click', '.dropdown-menu, .dropdown-menu-close', @shouldPropagate
@dropdown.on 'keyup', (e) =>
if e.which is 27 # Escape key
$('.dropdown-menu-close', @dropdown).trigger 'click'
$('.dropdown-menu-close', @dropdown).trigger 'click' if e.which is 27
@dropdown.on 'blur', 'a', (e) =>
if e.relatedTarget?
$relatedTarget = $(e.relatedTarget)
$dropdownMenu = $relatedTarget.closest('.dropdown-menu')
if $dropdownMenu.length is 0
@dropdown.removeClass('open')
@dropdown.removeClass('open') if $dropdownMenu.length is 0
if @dropdown.find(".dropdown-toggle-page").length
@dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on "click", (e) =>
if @dropdown.find('.dropdown-toggle-page').length
@dropdown.find('.dropdown-toggle-page, .dropdown-menu-back').on 'click', (e) =>
e.preventDefault()
e.stopPropagation()
@togglePage()
if @options.selectable
selector = ".dropdown-content a"
selector = '.dropdown-content a'
if @dropdown.find(".dropdown-toggle-page").length
selector = ".dropdown-page-one .dropdown-content a"
if @dropdown.find('.dropdown-toggle-page').length
selector = '.dropdown-page-one .dropdown-content a'
@dropdown.on "click", selector, (e) ->
$el = $(@)
@dropdown.on 'click', selector, (e) ->
$el = $(this)
selected = self.rowClicked $el
if self.options.clicked
......@@ -280,8 +268,7 @@ class GitLabDropdown
menu = $('.dropdown-menu', @dropdown)
if menu.hasClass(PAGE_TWO_CLASS)
if @remote
@remote.execute()
@remote.execute() if @remote
menu.toggleClass PAGE_TWO_CLASS
......@@ -316,38 +303,32 @@ class GitLabDropdown
renderData: (data, group = false) ->
data.map (obj, index) =>
return @renderItem(obj, group, index)
@renderItem(obj, group, index)
shouldPropagate: (e) =>
if @options.multiSelect
$target = $(e.target)
if not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon') and not $target.data('is-link')
e.stopPropagation()
return false
else
return true
$target = $(e.target) if @options.multiSelect
unless $target.hasClass('dropdown-menu-close') and $target.hasClass('dropdown-menu-close-icon') and $target.data('is-link')
e.stopPropagation()
false
else
true
opened: =>
@resetRows()
@addArrowKeyEvent()
if @options.setIndeterminateIds
@options.setIndeterminateIds.call(@)
@options.setIndeterminateIds.call this if @options.setIndeterminateIds
if @options.setActiveIds
@options.setActiveIds.call(@)
@options.setActiveIds.call this if @options.setActiveIds
# Makes indeterminate items effective
if @fullData and @dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')
@parseData @fullData
contentHtml = $('.dropdown-content', @dropdown).html()
if @remote && contentHtml is ""
@remote.execute()
@remote.execute() if @remote and contentHtml is ''
if @options.filterable
@filterInput.focus()
@filterInput.focus() if @options.filterable
@dropdown.trigger('shown.gl.dropdown')
......@@ -355,71 +336,67 @@ class GitLabDropdown
@resetRows()
@removeArrayKeyEvent()
$input = @dropdown.find(".dropdown-input-field")
$input = @dropdown.find('.dropdown-input-field')
if @options.filterable
$input
.blur()
.val("")
.val('')
# 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
if not @options.persistWhenHide
$input.trigger("keyup")
$input.trigger('keyup') unless @options.persistWhenHide
if @dropdown.find(".dropdown-toggle-page").length
if @dropdown.find('.dropdown-toggle-page').length
$('.dropdown-menu', @dropdown).removeClass PAGE_TWO_CLASS
if @options.hidden
@options.hidden.call(@,e)
@options.hidden.call this, e if @options.hidden
@dropdown.trigger('hidden.gl.dropdown')
# Render the full menu
renderMenu: (html) ->
menu_html = ""
menu_html = ''
if @options.renderMenu
menu_html = @options.renderMenu(html)
menu_html = @options.renderMenu html
else
menu_html = $('<ul />')
.append(html)
menu_html = $('<ul/>').append html
return menu_html
menu_html
# Append the menu into the dropdown
appendMenu: (html) ->
selector = '.dropdown-content'
if @dropdown.find(".dropdown-toggle-page").length
selector = ".dropdown-page-one .dropdown-content"
if @dropdown.find('.dropdown-toggle-page').length
selector = '.dropdown-page-one .dropdown-content'
$(selector, @dropdown)
.empty()
.append(html)
.append html
# Render the row
renderItem: (data, group = false, index = false) ->
html = ""
html = ''
# 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
return "<li class='separator'></li>" if data is "separator"
return '<li class='separator'></li>' if data is 'separator'
# 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
# Call the render function
html = @options.renderRow.call(@options, data, @)
else
if not selected
unless selected
value = if @options.id then @options.id(data) else data.id
fieldName = @options.fieldName
field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
if field.length
selected = true
selected = true if field.length
# Set URL
if @options.url?
......@@ -433,10 +410,9 @@ class GitLabDropdown
else
text = if data.text? then data.text else ''
cssClass = ""
cssClass = ''
if selected
cssClass = "is-active"
cssClass = 'is-active' if selected
if @highlight
text = @highlightTextMatches(text, @filterInput.val())
......@@ -445,18 +421,18 @@ class GitLabDropdown
groupAttrs = "data-group=#{group} data-index=#{index}"
else
groupAttrs = ''
html = _.template("<li>
<a href='<%- url %>' <%- groupAttrs %> class='<%- cssClass %>'>
html = _.template('<li>
<a href="<%- url %>" <%- groupAttrs %> class="<%- cssClass %>">
<%= text %>
</a>
</li>")({
</li>')({
url: url
groupAttrs: groupAttrs
cssClass: cssClass
text: text
})
return html
html
highlightTextMatches: (text, term) ->
occurrences = fuzzaldrinPlus.match(text, term)
......@@ -465,20 +441,20 @@ class GitLabDropdown
).join('')
noResults: ->
html = "<li class='dropdown-menu-empty-link'>
<a href='#' class='is-focused'>
html = '<li class="dropdown-menu-empty-link">
<a href="#" class="is-focused">
No matching results.
</a>
</li>"
</li>'
rowClicked: (el) ->
fieldName = @options.fieldName
isInput = $(@el).is('input')
if @renderedData
groupName = el.data('group')
groupName = el.data 'group'
if groupName
selectedIndex = el.data('index')
selectedIndex = el.data 'index'
selectedObject = @renderedData[groupName][selectedIndex]
else
selectedIndex = el.closest('li').index()
......@@ -501,20 +477,19 @@ class GitLabDropdown
# Toggle the dropdown label
if @options.toggleLabel
@updateLabel(selectedObject, el, @)
@updateLabel(selectedObject, el, this)
else
selectedObject
else if el.hasClass(INDETERMINATE_CLASS)
el.addClass ACTIVE_CLASS
el.removeClass INDETERMINATE_CLASS
if not value?
field.remove()
field.remove() unless value?
if not field.length and fieldName
@addInput(fieldName, value)
return selectedObject
selectedObject
else
if not @options.multiSelect or el.hasClass('dropdown-clear-active')
@dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
......@@ -522,24 +497,23 @@ class GitLabDropdown
unless isInput
@dropdown.parent().find("input[name='#{fieldName}']").remove()
if !value?
field.remove()
field.remove() unless value?
# Toggle active class for the tick mark
el.addClass ACTIVE_CLASS
# Toggle the dropdown label
if @options.toggleLabel
@updateLabel(selectedObject, el, @)
@updateLabel(selectedObject, el, this)
if value?
if !field.length and fieldName
if not field.length and fieldName
@addInput(fieldName, value)
else
field
.val value
.trigger 'change'
return selectedObject
selectedObject
addInput: (fieldName, value)->
# Create hidden input for form
......@@ -556,7 +530,7 @@ class GitLabDropdown
# Dropdown list item link selector, excluding non-selectable list items
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}"
# simulate a click on the first link
......@@ -570,11 +544,11 @@ class GitLabDropdown
addArrowKeyEvent: ->
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
selector = SELECTABLE_CLASSES
if @dropdown.find(".dropdown-toggle-page").length
if @dropdown.find('.dropdown-toggle-page').length
selector = ".dropdown-page-one #{selector}"
$('body').on 'keydown', (e) =>
......@@ -597,12 +571,13 @@ class GitLabDropdown
# Move up
currentIndex -= 1 if currentIndex > 0
@highlightRowAtIndex($listItems, currentIndex) if currentIndex isnt PREV_INDEX
if currentIndex isnt PREV_INDEX
@highlightRowAtIndex($listItems, currentIndex)
return false
# 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.stopImmediatePropagation()
@selectRowAtIndex e, currentIndex
......@@ -621,7 +596,7 @@ class GitLabDropdown
# Update the class for the row at the specific 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
$dropdownContent = $listItem.closest('.dropdown-content')
......@@ -640,7 +615,7 @@ class GitLabDropdown
$dropdownContent.scrollTop(0)
else if index is $listItems.length - 1
# 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
# Scroll the dropdown content down with a little padding
$dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING)
......@@ -649,9 +624,9 @@ class GitLabDropdown
$dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING)
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) ->
return @.each ->
if (!$.data @, 'glDropdown')
$.data(@, 'glDropdown', new GitLabDropdown @, opts)
@each ->
unless $.data this, 'glDropdown'
$.data this, 'glDropdown', new GitLabDropdown this, opts
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment