From 056ee9906e49522cbac07723e573d640fe98a6fe Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 4 Aug 2015 12:43:13 +0200 Subject: [PATCH] searchable select: add ajax class - refactor searchable select - add partial rerendering --- .../lib/app_post/searchable_select.js.coffee | 43 +++++++++++-------- .../z_searchable_ajax_select.js.coffee | 14 ++++++ .../views/generic/searchable_select.jst.eco | 6 +-- .../generic/searchable_select_options.jst.eco | 3 ++ 4 files changed, 43 insertions(+), 23 deletions(-) create mode 100644 app/assets/javascripts/app/lib/app_post/z_searchable_ajax_select.js.coffee create mode 100644 app/assets/javascripts/app/views/generic/searchable_select_options.jst.eco diff --git a/app/assets/javascripts/app/lib/app_post/searchable_select.js.coffee b/app/assets/javascripts/app/lib/app_post/searchable_select.js.coffee index 7cc58e9d6..99bfe4738 100644 --- a/app/assets/javascripts/app/lib/app_post/searchable_select.js.coffee +++ b/app/assets/javascripts/app/lib/app_post/searchable_select.js.coffee @@ -1,16 +1,17 @@ class App.SearchableSelect extends Spine.Controller events: - 'input .js-input': 'filterList' - 'click .js-value': 'selectItem' - 'mouseenter .js-value': 'highlightItem' + 'input .js-input': 'onInput' + 'click .js-option': 'selectItem' + 'mouseenter .js-option': 'highlightItem' 'shown.bs.dropdown': 'onDropdownShown' 'hidden.bs.dropdown': 'onDropdownHidden' elements: - '.js-value': 'values' + '.js-option': 'option_items' '.js-input': 'input' '.js-shadow': 'shadowInput' + '.js-optionsList': 'optionsList' className: 'searchableSelect dropdown dropdown--actions' @@ -22,12 +23,16 @@ class App.SearchableSelect extends Spine.Controller @render() render: -> + console.log "options", @options firstSelected = _.find @options.attribute.options, (option) -> option.selected if firstSelected @options.attribute.valueName = firstSelected.name @options.attribute.value = firstSelected.value + @options.attribute.renderedOptions = App.view('generic/searchable_select_options') + options: @options.attribute.options + @html App.view('generic/searchable_select')( @options.attribute ) @input.on 'keydown', @navigate @@ -39,7 +44,7 @@ class App.SearchableSelect extends Spine.Controller onDropdownHidden: => @input.off 'click', @stopPropagation - @values.removeClass '.is-active' + @option_items.removeClass '.is-active' @isOpen = false toggle: => @@ -63,17 +68,17 @@ class App.SearchableSelect extends Spine.Controller return @toggle() if not @isOpen event.preventDefault() - visibleValues = @values.not('.is-hidden') - highlightedItem = @values.filter('.is-active') - currentPosition = visibleValues.index(highlightedItem) + visibleOptions = @option_items.not('.is-hidden') + highlightedItem = @option_items.filter('.is-active') + currentPosition = visibleOptions.index(highlightedItem) currentPosition += direction return if currentPosition < 0 - return if currentPosition > visibleValues.size() - 1 + return if currentPosition > visibleOptions.size() - 1 - @values.removeClass('is-active') - visibleValues.eq(currentPosition).addClass('is-active') + @option_items.removeClass('is-active') + visibleOptions.eq(currentPosition).addClass('is-active') selectItem: (event) -> @input.val event.currentTarget.textContent.trim() @@ -94,22 +99,22 @@ class App.SearchableSelect extends Spine.Controller event.preventDefault() - @input.val @values.filter('.is-active').text().trim() + @input.val @option_items.filter('.is-active').text().trim() @input.trigger('change') - @shadowInput.val @values.filter('.is-active').attr('data-value') + @shadowInput.val @option_items.filter('.is-active').attr('data-value') @shadowInput.trigger('change') @toggle() - filterList: (event) => + onInput: (event) => @toggle() if not @isOpen - query = @input.val() - @filterByQuery query + @query = @input.val() + @filterByQuery @query filterByQuery: (query) -> regex = new RegExp(query.split(' ').join('.*'), 'i') - @values + @option_items .addClass 'is-hidden' .filter -> this.textContent.match(regex) @@ -118,8 +123,8 @@ class App.SearchableSelect extends Spine.Controller @highlightFirst() highlightFirst: -> - @values.removeClass('is-active').not('.is-hidden').first().addClass 'is-active' + @option_items.removeClass('is-active').not('.is-hidden').first().addClass 'is-active' highlightItem: (event) => - @values.removeClass('is-active') + @option_items.removeClass('is-active') $(event.currentTarget).addClass('is-active') \ No newline at end of file diff --git a/app/assets/javascripts/app/lib/app_post/z_searchable_ajax_select.js.coffee b/app/assets/javascripts/app/lib/app_post/z_searchable_ajax_select.js.coffee new file mode 100644 index 000000000..1ef08cd5e --- /dev/null +++ b/app/assets/javascripts/app/lib/app_post/z_searchable_ajax_select.js.coffee @@ -0,0 +1,14 @@ +class App.SearchableAjaxSelect extends App.SearchableSelect + + onInput: (event) => + super + + # send ajax request @query + + onAjaxResponse: (data) => + @optionsList.html App.view('generic/searchable_select_options') + options: data + + @refreshElements() + + @filterByQuery @query \ No newline at end of file diff --git a/app/assets/javascripts/app/views/generic/searchable_select.jst.eco b/app/assets/javascripts/app/views/generic/searchable_select.jst.eco index 6dbba4779..75abd55b7 100644 --- a/app/assets/javascripts/app/views/generic/searchable_select.jst.eco +++ b/app/assets/javascripts/app/views/generic/searchable_select.jst.eco @@ -14,8 +14,6 @@ > -