diff options
author | Luke "Jared" Bennett <lbennett@gitlab.com> | 2016-07-07 22:18:40 +0100 |
---|---|---|
committer | Luke Bennett <lukeeeebennettplus@gmail.com> | 2016-08-18 18:17:56 +0100 |
commit | 40d869eefa2c491446b6aa75ec1337add6ce3e4a (patch) | |
tree | 667b08d8c684e6a2c83f324fc902f569ac82e882 | |
parent | 85cd73c768b57aa13b1cd6fc75b5c855b0b8fe89 (diff) | |
download | gitlab-ce-40d869eefa2c491446b6aa75ec1337add6ce3e4a.tar.gz |
Review changes and final formatting
-rw-r--r-- | app/assets/javascripts/gl_dropdown.js.coffee | 255 |
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 |