Further review changes and removed large ammounts of reformatting

This commit is contained in:
Luke "Jared" Bennett 2016-07-19 13:15:14 +01:00 committed by Luke Bennett
parent 1ac5f764ce
commit affdf201d2
No known key found for this signature in database
GPG Key ID: A738E9C68D3BF31A
2 changed files with 132 additions and 107 deletions

View File

@ -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,23 +522,24 @@ 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
@ -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)

View File

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