summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorLuke "Jared" Bennett <lbennett@gitlab.com>2016-07-07 22:18:40 +0100
committerLuke Bennett <lukeeeebennettplus@gmail.com>2016-08-18 18:17:56 +0100
commit40d869eefa2c491446b6aa75ec1337add6ce3e4a (patch)
tree667b08d8c684e6a2c83f324fc902f569ac82e882
parent85cd73c768b57aa13b1cd6fc75b5c855b0b8fe89 (diff)
downloadgitlab-ce-40d869eefa2c491446b6aa75ec1337add6ce3e4a.tar.gz
Review changes and final formatting
-rw-r--r--app/assets/javascripts/gl_dropdown.js.coffee255
1 files changed, 115 insertions, 140 deletions
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 7a4224d9032..4e439e0de84 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -1,7 +1,7 @@
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