From dcf09a532b7eff230bf2a646fdb96e9aa43ff189 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Wed, 27 Jul 2016 01:17:07 +0100
Subject: [PATCH] Moved changes across to es5 and changed spec to es6
---
app/assets/javascripts/gl_dropdown.js | 65 +-
app/assets/javascripts/gl_dropdown.js.coffee | 658 ------------------
app/assets/javascripts/search_autocomplete.js | 18 +-
.../javascripts/search_autocomplete.js.coffee | 348 ---------
spec/javascripts/gl_dropdown_spec.js.coffee | 97 ---
spec/javascripts/gl_dropdown_spec.js.es6 | 120 ++++
6 files changed, 175 insertions(+), 1131 deletions(-)
delete mode 100644 app/assets/javascripts/gl_dropdown.js.coffee
delete mode 100644 app/assets/javascripts/search_autocomplete.js.coffee
delete mode 100644 spec/javascripts/gl_dropdown_spec.js.coffee
create mode 100644 spec/javascripts/gl_dropdown_spec.js.es6
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index d3394fae3f9..aacc49be1ac 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -191,6 +191,12 @@
currentIndex = -1;
+ NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
+
+ SELECTABLE_CLASSES = ".dropdown-content li:not(" + NON_SELECTABLE_CLASSES + ")";
+
+ CURSOR_SELECT_SCROLL_PADDING = 5
+
FILTER_INPUT = '.dropdown-input .dropdown-input-field';
function GitLabDropdown(el1, options) {
@@ -213,6 +219,7 @@
if (this.options.data) {
if (_.isObject(this.options.data) && !_.isFunction(this.options.data)) {
this.fullData = this.options.data;
+ currentIndex = -1
this.parseData(this.options.data);
} else {
this.remote = new GitLabDropdownRemote(this.options.data, {
@@ -240,7 +247,7 @@
keys: searchFields,
elements: (function(_this) {
return function() {
- selector = '.dropdown-content li:not(.divider)';
+ selector = SELECTABLE_CLASSES;
if (_this.dropdown.find('.dropdown-toggle-page').length) {
selector = ".dropdown-page-one " + selector;
}
@@ -376,7 +383,7 @@
var $target;
if (this.options.multiSelect) {
$target = $(e.target);
- if (!$target.hasClass('dropdown-menu-close') && !$target.hasClass('dropdown-menu-close-icon') && !$target.data('is-link')) {
+ if ($target && !$target.hasClass('dropdown-menu-close') && !$target.hasClass('dropdown-menu-close-icon') && !$target.data('is-link')) {
e.stopPropagation();
return false;
} else {
@@ -387,7 +394,7 @@
GitLabDropdown.prototype.opened = function() {
var contentHtml;
- currentIndex = -1;
+ this.resetRows();
this.addArrowKeyEvent();
if (this.options.setIndeterminateIds) {
this.options.setIndeterminateIds.call(this);
@@ -410,6 +417,7 @@
GitLabDropdown.prototype.hidden = function(e) {
var $input;
+ this.resetRows();
this.removeArrayKeyEvent();
$input = this.dropdown.find(".dropdown-input-field");
if (this.options.filterable) {
@@ -463,7 +471,7 @@
return "<li class='separator'></li>";
}
if (data.header != null) {
- return "<li class='dropdown-header'>" + data.header + "</li>";
+ return _.template('<li class="dropdown-header"><%- header %></li>')({ header: data.header });
}
if (this.options.renderRow) {
html = this.options.renderRow.call(this.options, data, this);
@@ -498,7 +506,12 @@
} else {
groupAttrs = '';
}
- html = "<li> <a href='" + url + "' " + groupAttrs + " class='" + cssClass + "'> " + text + " </a> </li>";
+ html = _.template('<li><a href="<%- url %>" <%- groupAttrs %> class="<%- cssClass %>"><%= text %></a></li>')({
+ url: url,
+ groupAttrs: groupAttrs,
+ cssClass: cssClass,
+ text: text
+ });
}
return html;
};
@@ -520,17 +533,6 @@
return html = "<li class='dropdown-menu-empty-link'> <a href='#' class='is-focused'> No matching results. </a> </li>";
};
- GitLabDropdown.prototype.highlightRow = function(index) {
- var selector;
- if (this.filterInput.val() !== "") {
- selector = '.dropdown-content li:first-child a';
- if (this.dropdown.find(".dropdown-toggle-page").length) {
- selector = ".dropdown-page-one .dropdown-content li:first-child a";
- }
- return this.getElement(selector).addClass('is-focused');
- }
- };
-
GitLabDropdown.prototype.rowClicked = function(el) {
var field, fieldName, groupName, isInput, selectedIndex, selectedObject, value;
fieldName = this.options.fieldName;
@@ -609,13 +611,17 @@
GitLabDropdown.prototype.selectRowAtIndex = function(index) {
var $el, selector;
- selector = ".dropdown-content li:not(.divider,.dropdown-header,.separator):eq(" + index + ") a";
+ selector = SELECTABLE_CLASSES + ":eq(" + index + ") a";
if (this.dropdown.find(".dropdown-toggle-page").length) {
selector = ".dropdown-page-one " + selector;
}
$el = $(selector, this.dropdown);
if ($el.length) {
- return $el.first().trigger('click');
+ e.preventDefault();
+ e.stopImmediatePropagation();
+ $el.first().trigger('click');
+ href = $el.attr('href');
+ if (href && href !== '#') Turbolinks.visit(href);
}
};
@@ -623,7 +629,7 @@
var $input, ARROW_KEY_CODES, selector;
ARROW_KEY_CODES = [38, 40];
$input = this.dropdown.find(".dropdown-input-field");
- selector = '.dropdown-content li:not(.divider,.dropdown-header,.separator):visible';
+ selector = SELECTABLE_CLASSES;
if (this.dropdown.find(".dropdown-toggle-page").length) {
selector = ".dropdown-page-one " + selector;
}
@@ -651,7 +657,9 @@
return false;
}
if (currentKeyCode === 13 && currentIndex !== -1) {
- return _this.selectRowAtIndex($('.is-focused', _this.dropdown).closest('li').index() - 1);
+ e.preventDefault()
+ e.stopImmediatePropagation()
+ return _this.selectRowAtIndex(currentIndex);
}
};
})(this));
@@ -661,6 +669,11 @@
return $('body').off('keydown');
};
+ GitLabDropdown.prototype.resetRows = function resetRows() {
+ currentIndex = -1;
+ $('.is-focused', this.dropdown).removeClass('is-focused');
+ };
+
GitLabDropdown.prototype.highlightRowAtIndex = function($listItems, index) {
var $dropdownContent, $listItem, dropdownContentBottom, dropdownContentHeight, dropdownContentTop, dropdownScrollTop, listItemBottom, listItemHeight, listItemTop;
$('.is-focused', this.dropdown).removeClass('is-focused');
@@ -674,10 +687,14 @@
listItemHeight = $listItem.outerHeight();
listItemTop = $listItem.prop('offsetTop');
listItemBottom = listItemTop + listItemHeight;
- if (listItemBottom > dropdownContentBottom + dropdownScrollTop) {
- return $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom);
- } else if (listItemTop < dropdownContentTop + dropdownScrollTop) {
- return $dropdownContent.scrollTop(listItemTop - dropdownContentTop);
+ if (!index) {
+ $dropdownContent.scrollTop(0)
+ } else if (index === ($listItems.length - 1)) {
+ $dropdownContent.scrollTop $dropdownContent.prop('scrollHeight');
+ } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop))
+ $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING);
+ } else if (listItemTop < (dropdownContentTop + dropdownScrollTop)) {
+ return $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING);
}
};
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
deleted file mode 100644
index e0dae228f7a..00000000000
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ /dev/null
@@ -1,658 +0,0 @@
-class GitLabDropdownFilter
- BLUR_KEYCODES = [27, 40]
- ARROW_KEY_CODES = [38, 40]
- HAS_VALUE_CLASS = "has-value"
-
- constructor: (@input, @options) ->
- {
- @filterInputBlur = true
- } = @options
-
- $inputContainer = @input.parent()
- $clearButton = $inputContainer.find('.js-dropdown-input-clear')
-
- @indeterminateIds = []
-
- # Clear click
- $clearButton.on 'click', (e) =>
- e.preventDefault()
- e.stopPropagation()
- @input
- .val('')
- .trigger('keyup')
- .focus()
-
- # Key events
- 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
- $inputContainer.addClass 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
-
- # Only filter asynchronously only if option remote is set
- if @options.remote
- clearTimeout timeout
- timeout = setTimeout =>
- blur_field = @shouldBlur keyCode
-
- if blur_field and @filterInputBlur
- @input.blur()
-
- @options.query @input.val(), (data) =>
- @options.callback(data)
- , 250
- else
- @filter @input.val()
-
- shouldBlur: (keyCode) ->
- return BLUR_KEYCODES.indexOf(keyCode) >= 0
-
- filter: (search_text) ->
- @options.onFilter(search_text) if @options.onFilter
- data = @options.data()
-
- if data? and not @options.filterByText
- results = data
-
- if search_text isnt ''
- # When data is an array of objects therefore [object Array] e.g.
- # [
- # { prop: 'foo' },
- # { prop: 'baz' }
- # ]
- if _.isArray(data)
- results = fuzzaldrinPlus.filter(data, search_text,
- key: @options.keys
- )
- else
- # If data is grouped therefore an [object Object]. e.g.
- # {
- # groupName1: [
- # { prop: 'foo' },
- # { prop: 'baz' }
- # ],
- # groupName2: [
- # { prop: 'abc' },
- # { prop: 'def' }
- # ]
- # }
- if gl.utils.isObject data
- results = {}
- for key, group of data
- tmp = fuzzaldrinPlus.filter(group, search_text,
- key: @options.keys
- )
-
- if tmp.length
- results[key] = tmp.map (item) -> item
-
- @options.callback results
- else
- elements = @options.elements()
-
- if search_text
- elements.each ->
- $el = $(@)
- matches = fuzzaldrinPlus.match($el.text().trim(), search_text)
-
- unless $el.is('.dropdown-header')
- if matches.length
- $el.show()
- else
- $el.hide()
- else
- elements.show()
-
-class GitLabDropdownRemote
- constructor: (@dataEndpoint, @options) ->
-
- execute: ->
- if typeof @dataEndpoint is "string"
- @fetchData()
- else if typeof @dataEndpoint is "function"
- if @options.beforeSend
- @options.beforeSend()
-
- # Fetch the data by calling the data funcfion
- @dataEndpoint "", (data) =>
- if @options.success
- @options.success(data)
- if @options.beforeSend
- @options.beforeSend()
-
- # Fetch the data through ajax if the data is a string
- fetchData: ->
- $.ajax(
- url: @dataEndpoint,
- dataType: @options.dataType,
- beforeSend: =>
- if @options.beforeSend
- @options.beforeSend()
- success: (data) =>
- if @options.success
- @options.success(data)
- )
-
-class GitLabDropdown
- LOADING_CLASS = "is-loading"
- PAGE_TWO_CLASS = "is-page-two"
- ACTIVE_CLASS = "is-active"
- INDETERMINATE_CLASS = "is-indeterminate"
- currentIndex = -1
- 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'
- CURSOR_SELECT_SCROLL_PADDING = 5
-
- constructor: (@el, @options) ->
- self = @
- 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)
- @highlight = false
- @filterInputBlur = true
- } = @options
-
- self = @
-
- # If selector was passed
- if _.isString(@filterInput)
- @filterInput = @getElement(@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)
- @fullData = @options.data
- @parseData @options.data
- else
- # Remote data
- @remote = new GitLabDropdownRemote @options.data, {
- dataType: @options.dataType,
- beforeSend: @toggleLoading.bind(@)
- success: (data) =>
- @fullData = data
-
- # Reset selected row index on new data
- currentIndex = -1
- @parseData @fullData
-
- @filter.input.trigger('keyup') if @options.filterable and @filter and @filter.input
- }
-
- # Init filterable
- if @options.filterable
- @filter = new GitLabDropdownFilter @filterInput,
- filterInputBlur: @filterInputBlur
- filterByText: @options.filterByText
- onFilter: @options.onFilter
- remote: @options.filterRemote
- query: @options.data
- keys: searchFields
- elements: =>
- selector = SELECTABLE_CLASSES
-
- if @dropdown.find('.dropdown-toggle-page').length
- selector = ".dropdown-page-one #{selector}"
-
- return $(selector)
- data: =>
- return @fullData
- callback: (data) =>
- @parseData data
-
- unless @filterInput.val() is ''
- selector = '.dropdown-content li:not(.divider):visible'
-
- if @dropdown.find('.dropdown-toggle-page').length
- selector = ".dropdown-page-one #{selector}"
-
- $(selector, @dropdown)
- .first()
- .find('a')
- .addClass('is-focused')
-
- currentIndex = 0
-
-
- # 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 'keyup', (e) =>
- if e.which is 27 # Escape key
- $('.dropdown-menu-close', @dropdown).trigger 'click'
-
- @dropdown.on 'blur', 'a', (e) =>
- if e.relatedTarget?
- $relatedTarget = $(e.relatedTarget)
- $dropdownMenu = $relatedTarget.closest('.dropdown-menu')
-
- if $dropdownMenu.length is 0
- @dropdown.removeClass('open')
-
- 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"
-
- if @dropdown.find(".dropdown-toggle-page").length
- selector = ".dropdown-page-one .dropdown-content a"
-
- @dropdown.on "click", selector, (e) ->
- $el = $(@)
- selected = self.rowClicked $el
-
- if self.options.clicked
- self.options.clicked(selected, $el, e)
-
- $el.trigger('blur')
-
- # Finds an element inside wrapper element
- getElement: (selector) ->
- @dropdown.find selector
-
- toggleLoading: ->
- $('.dropdown-menu', @dropdown).toggleClass LOADING_CLASS
-
- togglePage: ->
- menu = $('.dropdown-menu', @dropdown)
-
- if menu.hasClass(PAGE_TWO_CLASS)
- if @remote
- @remote.execute()
-
- menu.toggleClass PAGE_TWO_CLASS
-
- # Focus first visible input on active page
- @dropdown.find('[class^="dropdown-page-"]:visible :text:visible:first').focus()
-
- parseData: (data) ->
- @renderedData = data
-
- if @options.filterable and data.length is 0
- # render no matching results
- html = [@noResults()]
- else
- # Handle array groups
- if gl.utils.isObject data
- html = []
- for name, groupData of data
- # Add header for each group
- html.push(@renderItem(header: name, name))
-
- @renderData(groupData, name)
- .map (item) ->
- html.push item
- else
- # Render each row
- html = @renderData(data)
-
- # Render the full menu
- full_html = @renderMenu(html)
-
- @appendMenu(full_html)
-
- renderData: (data, group = false) ->
- data.map (obj, index) =>
- return @renderItem(obj, group, index)
-
- shouldPropagate: (e) =>
- 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')
- e.stopPropagation()
- return false
- else
- return true
-
- opened: =>
- @resetRows()
- @addArrowKeyEvent()
-
- if @options.setIndeterminateIds
- @options.setIndeterminateIds.call(@)
-
- if @options.setActiveIds
- @options.setActiveIds.call(@)
-
- # 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()
-
- if @options.filterable
- @filterInput.focus()
-
- @dropdown.trigger('shown.gl.dropdown')
-
- hidden: (e) =>
- @resetRows()
- @removeArrayKeyEvent()
-
- $input = @dropdown.find(".dropdown-input-field")
-
- if @options.filterable
- $input
- .blur()
- .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")
-
- if @dropdown.find(".dropdown-toggle-page").length
- $('.dropdown-menu', @dropdown).removeClass PAGE_TWO_CLASS
-
- if @options.hidden
- @options.hidden.call(@,e)
-
- @dropdown.trigger('hidden.gl.dropdown')
-
-
- # Render the full menu
- renderMenu: (html) ->
- menu_html = ""
-
- if @options.renderMenu
- menu_html = @options.renderMenu(html)
- else
- menu_html = $('<ul />')
- .append(html)
-
- return 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"
- $(selector, @dropdown)
- .empty()
- .append(html)
-
- # Render the row
- renderItem: (data, group = false, index = false) ->
- html = ""
-
- # 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'
-
- # 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
- 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
-
- # Set URL
- if @options.url?
- url = @options.url(data)
- else
- url = if data.url? then data.url else '#'
-
- # Set Text
- if @options.text?
- text = @options.text(data)
- else
- text = if data.text? then data.text else ''
-
- cssClass = ""
-
- if selected
- cssClass = "is-active"
-
- if @highlight
- text = @highlightTextMatches(text, @filterInput.val())
-
- if group
- groupAttrs = "data-group=#{group} data-index=#{index}"
- else
- groupAttrs = ''
- html = _.template('<li>
- <a href="<%- url %>" <%- groupAttrs %> class="<%- cssClass %>">
- <%= text %>
- </a>
- </li>')({
- url: url
- groupAttrs: groupAttrs
- cssClass: cssClass
- text: text
- })
-
- return html
-
- highlightTextMatches: (text, term) ->
- occurrences = fuzzaldrinPlus.match(text, term)
- text.split('').map((character, i) ->
- if i in occurrences then "<b>#{character}</b>" else character
- ).join('')
-
- noResults: ->
- html = '<li class="dropdown-menu-empty-link">
- <a href="#" class="is-focused">
- No matching results.
- </a>
- </li>'
-
- rowClicked: (el) ->
- fieldName = @options.fieldName
- isInput = $(@el).is('input')
-
- if @renderedData
- groupName = el.data('group')
- if groupName
- selectedIndex = el.data('index')
- selectedObject = @renderedData[groupName][selectedIndex]
- else
- selectedIndex = el.closest('li').index()
- selectedObject = @renderedData[selectedIndex]
-
- value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
-
- if isInput
- field = $(@el)
- else
- field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
-
- if el.hasClass(ACTIVE_CLASS)
- el.removeClass(ACTIVE_CLASS)
-
- if isInput
- field.val('')
- else
- field.remove()
-
- # Toggle the dropdown label
- if @options.toggleLabel
- @updateLabel(selectedObject, el, @)
- else
- selectedObject
- else if el.hasClass(INDETERMINATE_CLASS)
- el.addClass ACTIVE_CLASS
- el.removeClass INDETERMINATE_CLASS
-
- if not value?
- field.remove()
-
- if not field.length and fieldName
- @addInput(fieldName, value)
-
- return selectedObject
- else
- if not @options.multiSelect or el.hasClass('dropdown-clear-active')
- @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
-
- unless isInput
- @dropdown.parent().find("input[name='#{fieldName}']").remove()
-
- if !value?
- field.remove()
-
- # Toggle active class for the tick mark
- el.addClass ACTIVE_CLASS
-
- # Toggle the dropdown label
- if @options.toggleLabel
- @updateLabel(selectedObject, el, @)
- if value?
- if !field.length and fieldName
- @addInput(fieldName, value)
- else
- field
- .val value
- .trigger 'change'
-
- return selectedObject
-
- addInput: (fieldName, value)->
- # Create hidden input for form
- $input = $('<input>').attr('type', 'hidden')
- .attr('name', fieldName)
- .val(value)
-
- if @options.inputId?
- $input.attr('id', @options.inputId)
-
- @dropdown.before $input
-
- selectRowAtIndex: (e, index) ->
- # Dropdown list item link selector, excluding non-selectable list items
- selector = "#{SELECTABLE_CLASSES}:eq(#{index}) a"
-
- if @dropdown.find(".dropdown-toggle-page").length
- selector = ".dropdown-page-one #{selector}"
-
- # simulate a click on the first link
- $el = $(selector, @dropdown)
-
- if $el.length
- e.preventDefault()
- e.stopImmediatePropagation()
- $el.first().trigger('click')
- href = $el.attr 'href'
- Turbolinks.visit(href) if href and href isnt '#'
-
- addArrowKeyEvent: ->
- ARROW_KEY_CODES = [38, 40]
- $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
- selector = ".dropdown-page-one #{selector}"
-
- $('body').on 'keydown', (e) =>
- currentKeyCode = e.which
-
- if ARROW_KEY_CODES.indexOf(currentKeyCode) >= 0
- e.preventDefault()
- e.stopImmediatePropagation()
-
- PREV_INDEX = currentIndex
- $listItems = $(selector, @dropdown)
-
- # if @options.filterable
- # $input.blur()
-
- if currentKeyCode is 40
- # Move down
- currentIndex += 1 if currentIndex < ($listItems.length - 1)
- else if currentKeyCode is 38
- # Move up
- currentIndex -= 1 if currentIndex > 0
-
- @highlightRowAtIndex($listItems, currentIndex) if currentIndex isnt PREV_INDEX
-
- return false
-
- # If enter is pressed and a row is highlighted, select it
- if currentKeyCode is 13 and currentIndex isnt -1
- e.preventDefault()
- e.stopImmediatePropagation()
- @selectRowAtIndex e, currentIndex
-
- removeArrayKeyEvent: ->
- $('body').off 'keydown'
-
- # Resets the currently selected item row index and removes all highlights
- resetRows: ->
- currentIndex = -1
- $('.is-focused', @dropdown).removeClass 'is-focused'
-
- highlightRowAtIndex: ($listItems, index) ->
- # Remove the class for the previously focused row
- $('.is-focused', @dropdown).removeClass 'is-focused'
-
- # Update the class for the row at the specific index
- $listItem = $listItems.eq(index)
- $listItem.find('a:first-child').addClass "is-focused"
-
- # Dropdown content scroll area
- $dropdownContent = $listItem.closest('.dropdown-content')
- dropdownScrollTop = $dropdownContent.scrollTop()
- dropdownContentHeight = $dropdownContent.outerHeight()
- dropdownContentTop = $dropdownContent.prop('offsetTop')
- dropdownContentBottom = dropdownContentTop + dropdownContentHeight
-
- # Get the offset bottom of the list item
- listItemHeight = $listItem.outerHeight()
- listItemTop = $listItem.prop('offsetTop')
- listItemBottom = listItemTop + listItemHeight
-
- if index is 0
- # If this is the first item in the list, scroll to the top
- $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.prop 'scrollHeight'
- else if listItemBottom > dropdownContentBottom + dropdownScrollTop
- # Scroll the dropdown content down with a little padding
- $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING)
- else if listItemTop < dropdownContentTop + dropdownScrollTop
- # Scroll the dropdown content up with a little padding
- $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)
-
-$.fn.glDropdown = (opts) ->
- return @.each ->
- if (!$.data @, 'glDropdown')
- $.data(@, 'glDropdown', new GitLabDropdown @, opts)
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index 990f6536eb2..cd39f5f94e2 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -7,7 +7,9 @@
KEYCODE = {
ESCAPE: 27,
BACKSPACE: 8,
- ENTER: 13
+ ENTER: 13,
+ UP: 38,
+ DOWN: 40
};
function SearchAutocomplete(opts) {
@@ -223,6 +225,12 @@
case KEYCODE.ESCAPE:
this.restoreOriginalState();
break;
+ case KEYCODE.ENTER:
+ this.disableAutocomplete();
+ break;
+ case KEYCODE.UP,
+ case KEYCODE.DOWN:
+ return;
default:
if (this.searchInput.val() === '') {
this.disableAutocomplete();
@@ -319,9 +327,11 @@
};
SearchAutocomplete.prototype.disableAutocomplete = function() {
- this.searchInput.addClass('disabled');
- this.dropdown.removeClass('open');
- return this.restoreMenu();
+ if (!this.searchInput.hasClass('disabled') && this.dropdown.hasClass('open')) {
+ this.searchInput.addClass('disabled');
+ this.dropdown.removeClass('open').trigger('hidden.bs.dropdown');
+ this.restoreMenu();
+ }
};
SearchAutocomplete.prototype.restoreMenu = function() {
diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee
deleted file mode 100644
index fc74959b1e1..00000000000
--- a/app/assets/javascripts/search_autocomplete.js.coffee
+++ /dev/null
@@ -1,348 +0,0 @@
-class @SearchAutocomplete
-
- KEYCODE =
- ESCAPE: 27
- BACKSPACE: 8
- ENTER: 13
- UP: 38
- DOWN: 40
-
- constructor: (opts = {}) ->
- {
- @wrap = $('.search')
-
- @optsEl = @wrap.find('.search-autocomplete-opts')
- @autocompletePath = @optsEl.data('autocomplete-path')
- @projectId = @optsEl.data('autocomplete-project-id') || ''
- @projectRef = @optsEl.data('autocomplete-project-ref') ||Â ''
-
- } = opts
-
- # Dropdown Element
- @dropdown = @wrap.find('.dropdown')
- @dropdownContent = @dropdown.find('.dropdown-content')
-
- @locationBadgeEl = @getElement('.location-badge')
- @scopeInputEl = @getElement('#scope')
- @searchInput = @getElement('.search-input')
- @projectInputEl = @getElement('#search_project_id')
- @groupInputEl = @getElement('#group_id')
- @searchCodeInputEl = @getElement('#search_code')
- @repositoryInputEl = @getElement('#repository_ref')
- @clearInput = @getElement('.js-clear-input')
-
- @saveOriginalState()
-
- # Only when user is logged in
- @createAutocomplete() if gon.current_user_id
-
- @searchInput.addClass('disabled')
-
- @saveTextLength()
-
- @bindEvents()
-
- # Finds an element inside wrapper element
- getElement: (selector) ->
- @wrap.find(selector)
-
- saveOriginalState: ->
- @originalState = @serializeState()
-
- saveTextLength: ->
- @lastTextLength = @searchInput.val().length
-
- createAutocomplete: ->
- @searchInput.glDropdown
- filterInputBlur: false
- filterable: true
- filterRemote: true
- highlight: true
- enterCallback: false
- filterInput: 'input#search'
- search:
- fields: ['text']
- data: @getData.bind(@)
- selectable: true
- clicked: @onClick.bind(@)
-
- getData: (term, callback) ->
- _this = @
-
- unless term
- if contents = @getCategoryContents()
- @searchInput.data('glDropdown').filter.options.callback contents
- @enableAutocomplete()
-
- return
-
- # Prevent multiple ajax calls
- return if @loadingSuggestions
-
- @loadingSuggestions = true
-
- jqXHR = $.get(@autocompletePath, {
- project_id: @projectId
- project_ref: @projectRef
- term: term
- }, (response) ->
- # Hide dropdown menu if no suggestions returns
- if !response.length
- _this.disableAutocomplete()
- return
-
- data = []
-
- # List results
- firstCategory = true
- for suggestion in response
-
- # Add group header before list each group
- if lastCategory isnt suggestion.category
- data.push 'separator' if !firstCategory
-
- firstCategory = false if firstCategory
-
- data.push
- header: suggestion.category
-
- lastCategory = suggestion.category
-
- data.push
- id: "#{suggestion.category.toLowerCase()}-#{suggestion.id}"
- category: suggestion.category
- text: suggestion.label
- url: suggestion.url
-
- # Add option to proceed with the search
- if data.length
- data.push('separator')
- data.push
- text: "Result name contains \"#{term}\""
- url: "/search?\
- search=#{term}\
- &project_id=#{_this.projectInputEl.val()}\
- &group_id=#{_this.groupInputEl.val()}"
-
- callback(data)
- ).always ->
- _this.loadingSuggestions = false
-
-
- getCategoryContents: ->
-
- userId = gon.current_user_id
- { utils, projectOptions, groupOptions, dashboardOptions } = gl
-
- if utils.isInGroupsPage() and groupOptions
- options = groupOptions[utils.getGroupSlug()]
-
- else if utils.isInProjectPage() and projectOptions
- options = projectOptions[utils.getProjectSlug()]
-
- else if dashboardOptions
- options = dashboardOptions
-
- { issuesPath, mrPath, name } = options
-
- items = [
- { header: "#{name}" }
- { text: 'Issues assigned to me', url: "#{issuesPath}/?assignee_id=#{userId}" }
- { text: "Issues I've created", url: "#{issuesPath}/?author_id=#{userId}" }
- 'separator'
- { text: 'Merge requests assigned to me', url: "#{mrPath}/?assignee_id=#{userId}" }
- { text: "Merge requests I've created", url: "#{mrPath}/?author_id=#{userId}" }
- ]
-
- items.splice 0, 1 unless name
-
- return items
-
-
- serializeState: ->
- {
- # Search Criteria
- search_project_id: @projectInputEl.val()
- group_id: @groupInputEl.val()
- search_code: @searchCodeInputEl.val()
- repository_ref: @repositoryInputEl.val()
- scope: @scopeInputEl.val()
-
- # Location badge
- _location: @locationBadgeEl.text()
- }
-
- bindEvents: ->
- @searchInput.on 'keydown', @onSearchInputKeyDown
- @searchInput.on 'keyup', @onSearchInputKeyUp
- @searchInput.on 'click', @onSearchInputClick
- @searchInput.on 'focus', @onSearchInputFocus
- @searchInput.on 'blur', @onSearchInputBlur
- @clearInput.on 'click', @onClearInputClick
- @locationBadgeEl.on 'click', =>
- @searchInput.focus()
-
- enableAutocomplete: ->
- # No need to enable anything if user is not logged in
- return if !gon.current_user_id
-
- unless @dropdown.hasClass('open')
- _this = @
- @loadingSuggestions = false
-
- # If not enabled already, enable
- if not @dropdown.hasClass('open')
- # Open dropdown and invoke its opened() method
- @dropdown.addClass('open')
- .trigger('shown.bs.dropdown')
- @searchInput.removeClass('disabled')
-
- onSearchInputKeyDown: =>
- # Saves last length of the entered text
- @saveTextLength()
-
- onSearchInputKeyUp: (e) =>
- switch e.keyCode
- when KEYCODE.BACKSPACE
- # when trying to remove the location badge
- if @lastTextLength is 0 and @badgePresent()
- @removeLocationBadge()
-
- # When removing the last character and no badge is present
- if @lastTextLength is 1
- @disableAutocomplete()
-
- # When removing any character from existin value
- if @lastTextLength > 1
- @enableAutocomplete()
-
- when KEYCODE.ESCAPE
- @restoreOriginalState()
-
- # Close autocomplete on enter
- when KEYCODE.ENTER
- @disableAutocomplete()
-
- when KEYCODE.UP, KEYCODE.DOWN
- return
-
- else
- # Handle the case when deleting the input value other than backspace
- # e.g. Pressing ctrl + backspace or ctrl + x
- if @searchInput.val() is ''
- @disableAutocomplete()
- else
- # We should display the menu only when input is not empty
- @enableAutocomplete()
-
- @wrap.toggleClass 'has-value', !!e.target.value
-
- # Avoid falsy value to be returned
- return
-
- onSearchInputClick: (e) =>
- # Prevents closing the dropdown menu
- e.stopImmediatePropagation()
-
- onSearchInputFocus: =>
- @isFocused = true
- @wrap.addClass('search-active')
-
- @getData() if @getValue() is ''
-
-
- getValue: -> return @searchInput.val()
-
-
- onClearInputClick: (e) =>
- e.preventDefault()
- @searchInput.val('').focus()
-
- onSearchInputBlur: (e) =>
- @isFocused = false
- @wrap.removeClass('search-active')
-
- # If input is blank then restore state
- if @searchInput.val() is ''
- @restoreOriginalState()
-
- addLocationBadge: (item) ->
- category = if item.category? then "#{item.category}: " else ''
- value = if item.value? then item.value else ''
-
- badgeText = "#{category}#{value}"
- @locationBadgeEl.text(badgeText).show()
- @wrap.addClass('has-location-badge')
-
-
- hasLocationBadge: -> return @wrap.is '.has-location-badge'
-
-
- restoreOriginalState: ->
- inputs = Object.keys @originalState
-
- for input in inputs
- @getElement("##{input}").val(@originalState[input])
-
- if @originalState._location is ''
- @locationBadgeEl.hide()
- else
- @addLocationBadge(
- value: @originalState._location
- )
-
- badgePresent: ->
- @locationBadgeEl.length
-
- resetSearchState: ->
- inputs = Object.keys @originalState
-
- for input in inputs
-
- # _location isnt a input
- break if input is '_location'
-
- @getElement("##{input}").val('')
-
-
- removeLocationBadge: ->
-
- @locationBadgeEl.hide()
- @resetSearchState()
- @wrap.removeClass('has-location-badge')
- @disableAutocomplete()
-
-
- disableAutocomplete: ->
- # If not disabled already, disable
- if not @searchInput.hasClass('disabled') and @dropdown.hasClass 'open'
- @searchInput.addClass('disabled')
- # Close dropdown and invoke its hidden() method
- @dropdown.removeClass('open').trigger 'hidden.bs.dropdown'
- @restoreMenu()
-
- restoreMenu: ->
- html = "<ul>
- <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li>
- </ul>"
- @dropdownContent.html(html)
-
- onClick: (item, $el, e) ->
- if location.pathname.indexOf(item.url) isnt -1
- e.preventDefault()
- if not @badgePresent
- if item.category is 'Projects'
- @projectInputEl.val(item.id)
- @addLocationBadge(
- value: 'This project'
- )
-
- if item.category is 'Groups'
- @groupInputEl.val(item.id)
- @addLocationBadge(
- value: 'This group'
- )
-
- $el.removeClass('is-active')
- @disableAutocomplete()
- @searchInput.val('').focus()
diff --git a/spec/javascripts/gl_dropdown_spec.js.coffee b/spec/javascripts/gl_dropdown_spec.js.coffee
deleted file mode 100644
index a4b3f519745..00000000000
--- a/spec/javascripts/gl_dropdown_spec.js.coffee
+++ /dev/null
@@ -1,97 +0,0 @@
-#= require jquery
-#= require gl_dropdown
-#= require turbolinks
-#= require lib/utils/common_utils
-#= require lib/utils/type_utility
-
-NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'
-ITEM_SELECTOR = ".dropdown-content li:not(#{NON_SELECTABLE_CLASSES})"
-FOCUSED_ITEM_SELECTOR = ITEM_SELECTOR + ' a.is-focused'
-
-ARROW_KEYS =
- DOWN: 40
- UP: 38
- ENTER: 13
- ESC: 27
-
-navigateWithKeys = (direction, steps, cb, i) ->
- i = i || 0
- $('body').trigger
- type: 'keydown'
- which: ARROW_KEYS[direction.toUpperCase()]
- keyCode: ARROW_KEYS[direction.toUpperCase()]
- i++
- if i <= steps
- navigateWithKeys direction, steps, cb, i
- else
- cb()
-
-initDropdown = ->
- @dropdownContainerElement = $('.dropdown.inline')
- @dropdownMenuElement = $('.dropdown-menu', @dropdownContainerElement)
- @projectsData = fixture.load('projects.json')[0]
- @dropdownButtonElement = $('#js-project-dropdown', @dropdownContainerElement).glDropdown
- selectable: true
- data: @projectsData
- text: (project) ->
- (project.name_with_namespace or project.name)
- id: (project) ->
- project.id
-
-describe 'Dropdown', ->
- fixture.preload 'gl_dropdown.html'
- fixture.preload 'projects.json'
-
- beforeEach ->
- fixture.load 'gl_dropdown.html'
- initDropdown.call this
-
- afterEach ->
- $('body').unbind 'keydown'
- @dropdownContainerElement.unbind 'keyup'
-
- it 'should open on click', ->
- expect(@dropdownContainerElement).not.toHaveClass 'open'
- @dropdownButtonElement.click()
- expect(@dropdownContainerElement).toHaveClass 'open'
-
- describe 'that is open', ->
- beforeEach ->
- @dropdownButtonElement.click()
-
- it 'should select a following item on DOWN keypress', ->
- expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 0
- randomIndex = Math.floor(Math.random() * (@projectsData.length - 1)) + 0
- navigateWithKeys 'down', randomIndex, =>
- expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 1
- expect($("#{ITEM_SELECTOR}:eq(#{randomIndex}) a", @dropdownMenuElement)).toHaveClass 'is-focused'
-
- it 'should select a previous item on UP keypress', ->
- expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 0
- navigateWithKeys 'down', (@projectsData.length - 1), =>
- expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 1
- randomIndex = Math.floor(Math.random() * (@projectsData.length - 2)) + 0
- navigateWithKeys 'up', randomIndex, =>
- expect($(FOCUSED_ITEM_SELECTOR, @dropdownMenuElement).length).toBe 1
- expect($("#{ITEM_SELECTOR}:eq(#{((@projectsData.length - 2) - randomIndex)}) a", @dropdownMenuElement)).toHaveClass 'is-focused'
-
- it 'should click the selected item on ENTER keypress', ->
- expect(@dropdownContainerElement).toHaveClass 'open'
- randomIndex = Math.floor(Math.random() * (@projectsData.length - 1)) + 0
- navigateWithKeys 'down', randomIndex, =>
- spyOn(Turbolinks, 'visit').and.stub()
- navigateWithKeys 'enter', null, =>
- expect(@dropdownContainerElement).not.toHaveClass 'open'
- link = $("#{ITEM_SELECTOR}:eq(#{randomIndex}) a", @dropdownMenuElement)
- expect(link).toHaveClass 'is-active'
- linkedLocation = link.attr 'href'
- if linkedLocation and linkedLocation isnt '#'
- expect(Turbolinks.visit).toHaveBeenCalledWith linkedLocation
-
- it 'should close on ESC keypress', ->
- expect(@dropdownContainerElement).toHaveClass 'open'
- @dropdownContainerElement.trigger
- type: 'keyup'
- which: ARROW_KEYS.ESC
- keyCode: ARROW_KEYS.ESC
- expect(@dropdownContainerElement).not.toHaveClass 'open'
diff --git a/spec/javascripts/gl_dropdown_spec.js.es6 b/spec/javascripts/gl_dropdown_spec.js.es6
new file mode 100644
index 00000000000..733fccc51d9
--- /dev/null
+++ b/spec/javascripts/gl_dropdown_spec.js.es6
@@ -0,0 +1,120 @@
+/*= require jquery */
+/*= require gl_dropdown */
+/*= require turbolinks */
+/*= require lib/utils/common_utils */
+/*= require lib/utils/type_utility */
+
+const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
+const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
+const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`;
+
+const ARROW_KEYS = {
+ DOWN: 40,
+ UP: 38,
+ ENTER: 13,
+ ESC: 27
+};
+
+var navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
+ i = i || 0;
+ $('body').trigger({
+ type: 'keydown',
+ which: ARROW_KEYS[direction.toUpperCase()],
+ keyCode: ARROW_KEYS[direction.toUpperCase()]
+ });
+ i++;
+ if (i <= steps) {
+ navigateWithKeys(direction, steps, cb, i);
+ } else {
+ cb();
+ }
+};
+
+var initDropdown = function initDropdown() {
+ this.dropdownContainerElement = $('.dropdown.inline');
+ this.dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
+ this.projectsData = fixture.load('projects.json')[0];
+ this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
+ selectable: true,
+ data: this.projectsData,
+ text: (project) => {
+ (project.name_with_namespace || project.name)
+ },
+ id: (project) => {
+ project.id
+ }
+ });
+};
+
+describe('Dropdown', function describeDropdown() {
+ fixture.preload('gl_dropdown.html');
+ fixture.preload('projects.json');
+
+ function beforeEach() {
+ fixture.load('gl_dropdown.html');
+ initDropdown.call(this);
+ }
+
+ function afterEach() {
+ $('body').unbind('keydown');
+ this.dropdownContainerElement.unbind('keyup');
+ }
+
+ it('should open on click', () => {
+ expect(this.dropdownContainerElement).not.toHaveClass('open');
+ this.dropdownButtonElement.click();
+ expect(this.dropdownContainerElement).toHaveClass('open');
+ });
+
+ describe('that is open', function describeThatIsOpen() {
+ function beforeEach() {
+ this.dropdownButtonElement.click();
+ }
+
+ it('should select a following item on DOWN keypress', () => {
+ expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
+ let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0);
+ navigateWithKeys('down', randomIndex, () => {
+ expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
+ expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
+ });
+ });
+
+ it('should select a previous item on UP keypress', () => {
+ expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
+ navigateWithKeys('down', (this.projectsData.length - 1), () => {
+ expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
+ let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 2)) + 0);
+ navigateWithKeys('up', randomIndex, () => {
+ expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
+ expect($(`${ITEM_SELECTOR}:eq(${((this.projectsData.length - 2) - randomIndex)}) a`, this.dropdownMenuElement)).toHaveClass('is-focused');
+ });
+ });
+ });
+
+ it('should click the selected item on ENTER keypress', () => {
+ expect(this.dropdownContainerElement).toHaveClass('open')
+ let randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0
+ navigateWithKeys('down', randomIndex, () => {
+ spyOn(Turbolinks, 'visit').and.stub();
+ navigateWithKeys('enter', null, () => {
+ expect(this.dropdownContainerElement).not.toHaveClass('open');
+ let link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement);
+ expect(link).toHaveClass('is-active');
+ let linkedLocation = link.attr('href');
+ if (linkedLocation && linkedLocation !== '#') expect(Turbolinks.visit).toHaveBeenCalledWith(linkedLocation);
+ });
+ });
+ });
+
+ it('should close on ESC keypress', () => {
+ expect(this.dropdownContainerElement).toHaveClass('open');
+ this.dropdownContainerElement.trigger({
+ type: 'keyup',
+ which: ARROW_KEYS.ESC,
+ keyCode: ARROW_KEYS.ESC
+ });
+ expect(this.dropdownContainerElement).not.toHaveClass('open');
+ });
+ });
+});
--
GitLab