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') # 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 and @input.val() isnt "" if @options.enterCallback @options.enterCallback() return clearTimeout timeout timeout = setTimeout => blur_field = @shouldBlur keyCode search_text = @input.val() if blur_field and @filterInputBlur @input.blur() if @options.remote @options.query search_text, (data) => @options.callback(data) else @filter search_text , 250 shouldBlur: (keyCode) -> return BLUR_KEYCODES.indexOf(keyCode) >= 0 filter: (search_text) -> data = @options.data() results = data if search_text isnt "" results = fuzzaldrinPlus.filter(data, search_text, key: @options.keys ) @options.callback results 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" currentIndex = -1 FILTER_INPUT = '.dropdown-input .dropdown-input-field' constructor: (@el, @options) -> @dropdown = $(@el).parent() # Set Defaults { # If no input is passed create a default one @filterInput = @getElement(FILTER_INPUT) @highlight = false @filterInputBlur = true @enterCallback = true } = @options self = @ # If selector was passed if _.isString(@filterInput) @filterInput = @getElement(@filterInput) search_fields = if @options.search then @options.search.fields else []; if @options.data # If data is an array if _.isArray @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 @parseData @fullData } # Init filterable if @options.filterable @filter = new GitLabDropdownFilter @filterInput, filterInputBlur: @filterInputBlur remote: @options.filterRemote query: @options.data keys: @options.search.fields data: => return @fullData callback: (data) => currentIndex = -1 @parseData data enterCallback: => if @enterCallback @selectRowAtIndex 0 # Event listeners @dropdown.on "shown.bs.dropdown", @opened @dropdown.on "hidden.bs.dropdown", @hidden @dropdown.on "click", ".dropdown-menu, .dropdown-menu-close", @shouldPropagate 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) -> selected = self.rowClicked $(@) if self.options.clicked self.options.clicked(selected) # 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 parseData: (data) -> @renderedData = data # Render each row html = $.map data, (obj) => return @renderItem(obj) if @options.filterable and data.length is 0 # render no matching results html = [@noResults()] # Render the full menu full_html = @renderMenu(html.join("")) @appendMenu(full_html) shouldPropagate: (e) => if @options.multiSelect $target = $(e.target) if not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon') e.stopPropagation() return false else return true opened: => @addArrowKeyEvent() contentHtml = $('.dropdown-content', @dropdown).html() if @remote && contentHtml is "" @remote.execute() if @options.filterable @filterInput.focus() @dropdown.trigger('shown.gl.dropdown') hidden: (e) => @removeArrayKeyEvent() if @options.filterable @dropdown .find(".dropdown-input-field") .blur() .val("") .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 = "