effective_form_inputs 1.1.7 → 1.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ff9c8bf395aa0cb1fe2cbe3671d04ad6a5bcf001
-  data.tar.gz: 95ab0eb31ed7a6628139dbbd80ffffe8e35e6169
+  metadata.gz: ab1e879c3269d732932f02ddaf6001ef659e3872
+  data.tar.gz: 1baa2b3f41124384e55489e57b478a1b651e660a
 SHA512:
-  metadata.gz: 75a3591de16c5d8bfc1e6eb3ed9b70584fbc757e7588c9318ef0c9a573ede8e9f81aefeb1882a3b4115ca88c03bd455f232b42104bd461fd4567fa0c1aadde6e
-  data.tar.gz: 75cbfe5f8fa8f020d3d985ecc409ad5160e77a7a23cec5689987f40efc47f557602f23d37bfbd0e15ea9475f00048c53ff33931389997bea0a3843a03ef259fc
+  metadata.gz: 815fdf0e52cdaf868ea11a6d14802e4bfd4337c90a9b2ad240bb6edf18d95d2883355874cd483d8a65d74925b1209ac7129d6085453cc6f6b8193b93532cb888
+  data.tar.gz: 1f142dbf0c2801b05e50db14b2bb582991e847e823b5cb62b3c5e397cda2512da7b7776121468c7cf159e048c759b7694d23b1780e07a7615a036e6348a7fe45

data/app/assets/javascripts/effective_panel_select/effective_panel_select.js.coffee

@@ -7,7 +7,8 @@
       invade: '.row'
       collapseOnSelect: true
       resetOnCollapse: true
-      keepFetched: false    # Keep any fetched ajax pages in the dom. Otherwise they're freed on reset()
+      keepFetched: false    # Keep any fetched ajax pages in the dom. Otherwise they're removed on reset()
+      showSearch: true
       ajax:
         url: ''       # /exercises/:id   The string ':id' will be replaced with the viewed item value
         target: ''    # #container       The string to pass to load
@@ -23,6 +24,8 @@
       @input = @panel.find("input[type='hidden']")
       @label = @panel.find('.selection-title')
       @selector = @panel.children('.selector')
+      @searchVal = @panel.children('.search').find('.search-value')
+      @searchResults = @panel.children('.search').find('.search-results')
       @tabList = @selector.find('ul.nav').first()
       @tabContent = @selector.find('.tab-content').first()
 
@@ -32,6 +35,7 @@
       @initEvents()
       @initInvade()
       @initAjax()
+      @reset()
       true
 
     # So we need to assign unique IDs to all the group tabs so we can have multiple selectors per page
@@ -51,12 +55,14 @@
         tab.attr('id', href.substring(1))
 
     initEvents: ->
-      @panel.on 'click', '.selection', (event) => @toggle()
+      @panel.on 'click', '.selection', (event) => @toggle() and true
       @panel.on 'click', '.selection-clear', (event) => @clear() and false
       @panel.on 'click', '[data-item-value]', (event) => @val($(event.currentTarget).data('item-value')) and false
       @panel.on 'click', '[data-fetch-item]', (event) => @fetch($(event.currentTarget).closest('[data-item-value]').data('item-value')) and false
       @panel.on 'click', '.fetched-clear', (event) => @reset() and false
       @panel.on 'click', '.fetched-select', (event) => @setVal($(event.currentTarget).data('item-value')) and false
+      @panel.on 'keyup', '.search-value', (event) => @search($(event.currentTarget).val()) and true
+      @panel.on 'keydown', (event) => @searchVal.focus() and true
 
     initInvade: ->
       return if @options.invade == false || @options.invade == 'false'
@@ -76,12 +82,15 @@
 
     expand: ->
       @invade() if @options.invade
-      @selector.slideDown 'fast', => @panel.addClass('expanded')
+      @selector.slideDown 'fast', =>
+        @panel.addClass('expanded')
+        @searchVal.focus()
 
     collapse: ->
       @selector.slideUp 'fast', =>
         @panel.removeClass('expanded')
         @reset() if @options.resetOnCollapse
+        @search('') if @options.resetOnCollapse
         @retreat() if @options.invade
 
     # Invade the nearest '.row'
@@ -111,22 +120,22 @@
 
       @invading = false
 
+    title: (item) ->
+      (item || @label).find('a').clone().children().remove().end().text()
+
     # Get / Set / Clear selection
     val: (args...) ->
       if args.length == 0 then @input.val() else @setVal(args[0])
 
-    title: (item) ->
-      (item || @label).find('a').clone().children().remove().end().text()
-
     # Sets the input value, and the selected value text
     setVal: (value) ->
       @input.val(value)
 
       if value == null || value == undefined || value == ''
-        @label.html("<span class='selection-placeholder'>#{@options.placeholder}</span>")
+        @label.html("<span class='selection-clear'>x</span> <span class='selection-placeholder'>#{@options.placeholder}</span>")
         @reset()
       else
-        $item = @selector.find("li[data-item-value='#{value}']").first()
+        $item = @tabContent.find("li[data-item-value='#{value}']").first()
         label = @title($item)
 
         @label.html("<span class='selection-clear'>x</span> <span class='selection-label'>#{label}</span>")
@@ -135,27 +144,83 @@
       @panel.trigger 'change'
       true
 
+    search: (value) ->
+      # Set html input value, incase this is called from api
+      @searchVal.val(value) unless @searchVal.val() == value
+
+      # Reset existing search
+      @selector.find('.excluded').removeClass('excluded')
+
+      value = "#{value}".toLowerCase()
+      results = []
+
+      if value == ''
+        @searchResults.html('')
+        return results
+
+      @tabContent.children(':not(.fetched)').each (_, tabPane) =>
+        $tabPane = $(tabPane)
+        tabPaneExcluded = true
+
+        $tabPane.find('li').each (_, item) =>
+          $item = $(item)
+
+          if $item.text().toLowerCase().indexOf(value) > -1
+            results.push($item.data('item-value'))
+            tabPaneExcluded = false
+          else
+            $item.addClass('excluded')
+
+          true
+
+        if tabPaneExcluded
+          @tabList.find("a[href='##{$tabPane.attr('id')}']").parent('li').addClass('excluded')
+
+      if results.length > 0 && @options.showSearch
+        @searchResults.html("#{results.length} result#{if results.length > 1 then 's' else ''} for '#{value}'")
+        @activateTab(results[0]) if @tabList.find('li.active:not(.excluded)').length == 0 # activate first tab if no tab is displayed
+      else
+        @searchResults.html('')
+
+      results
+
+    activateTab: (value) ->
+      $item = @tabContent.find("li[data-item-value='#{value}']").first()
+      return false unless $item.length > 0
+
+      @selector.find('.active').removeClass('active')
+
+      $tab_pane = $item.closest('.tab-pane')
+      $tab = @tabList.find("a[href='##{$tab_pane.attr('id')}']").parent('li')
+
+      $tab_pane.addClass('active')
+      $tab.addClass('active')
+
     # Syncs the tabs to the current value
     reset: ->
       value = @val()
 
       @fetched.children(':not(.effective-panel-select-actions)').remove() if @fetched && @fetched.length && !@options.keepFetched
 
-      @selector.find("li.selected").removeClass('selected')
+      @selector.find('li.selected').removeClass('selected')
       @selector.find('.active').removeClass('active')
 
       if (value == null || value == undefined || value == '') == false
-        $item = @selector.find("li[data-item-value='#{value}']")
+        $item = @tabContent.find("li[data-item-value='#{value}']").first()
         $item.addClass('selected').addClass('active')
 
         $tab_pane = $item.closest('.tab-pane')
 
         if $tab_pane.length
-          $tab = @selector.find("a[href='##{$tab_pane.attr('id')}']").parent('li')
+          $tab = @tabList.find("a[href='##{$tab_pane.attr('id')}']").parent('li')
           $tab.addClass('selected').addClass('active')
           $tab_pane.addClass('active')
 
-    clear: -> @val(null)
+    clear: ->
+        @val(null)
+        @search('')
+        @searchVal.focus()
+        false
 
     # Ajax fetch and view page
     fetch: (value) ->
@@ -208,4 +273,4 @@
 
 $(document).on 'click', (event) ->
   if !$(event.target).closest('.effective-panel-select').length
-    $('.effective-panel-select.initialized').effectivePanelSelect('collapse')
+    $('.effective-panel-select.initialized.expanded').effectivePanelSelect('collapse')

data/app/assets/stylesheets/effective_panel_select/input.scss

@@ -15,6 +15,29 @@
     .tab-content { padding-top: 0px; }
   }
 
+  .excluded {
+    display: none;
+  }
+
+  .search {
+    display: none;
+
+    padding: 0px 4px 4px 4px;
+
+    input {
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      padding: 4px;
+      width: 100%;
+    }
+
+    .search-results {
+      display: block;
+      padding-top: 4px;
+    }
+  }
+
   .tab-pane.fetched { padding: 15px 15px 15px 0; }
 
   .selection {
@@ -69,6 +92,7 @@
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
 
   .selector { display: block; }
+  .search { display: block; }
 
   .selection-arrow {
     margin-top: -38px;

data/app/models/inputs/effective_panel_select/input.rb

@@ -14,7 +14,7 @@ module Inputs
       end
 
       def default_input_js
-        { placeholder: 'Please choose', invade: '.row', collapseOnSelect: true, resetOnCollapse: true, showCount: false }
+        { placeholder: 'Please choose', invade: '.row', collapseOnSelect: true, resetOnCollapse: true, showCount: false, showSearch: true }
       end
 
       def default_input_html
@@ -37,6 +37,10 @@ module Inputs
         return true if js_options[:showCount]
       end
 
+      def show_search?
+        return true if js_options[:showSearch]
+      end
+
       # option_value           1
       # option_label           Post A
       # group_label            Active

data/app/views/effective/effective_panel_select/_input.html.haml

@@ -12,15 +12,21 @@
     %span.selection-arrow
       %b
 
+  - if input.show_search?
+    .search
+      .row
+        .col-sm-4
+          %input.search-value{type: 'search', autocomplete: :off, autocorrect: :off, autocapitalization: :off, spellcheck: false, role: 'textbox'}
+        .col-sm-8
+          %span.search-results
+
   .selector
     .row
       .col-sm-4
         %ul.nav.nav-pills{role: 'tablist', class: input.options[:sidebar_class]}
           - input.collection.each do |group, items|
-            - group_value = group.send(input.options[:group_method])
-
-            %li{class: ('active selected' if group_value == input.group_value) }
-              %a{'data-toggle': 'tab', role: 'tab', href: "##{group_value.parameterize}"}
+            %li
+              %a{'data-toggle': 'tab', role: 'tab', href: "##{group.send(input.options[:group_method]).parameterize}"}
                 = group.send(input.options[:group_label_method]).html_safe
                 - if input.show_count?
                   %span.badge= items.length
@@ -28,14 +34,10 @@
       .col-sm-8
         .tab-content
           - input.collection.each do |group, items|
-            - group_value = group.send(input.options[:group_method])
-
-            .tab-pane{id: group_value.parameterize, class: ('active' if group_value == input.group_value) }
+            .tab-pane{id: group.send(input.options[:group_method]).parameterize}
               %ul.nav.nav-pills.nav-stacked
                 - Array(items).each do |item|
-                  - item_value = item.send(input.options[:option_key_method])
-
-                  %li{class: ('active selected' if item_value == input.value), 'data-item-value' => item_value}
+                  %li{'data-item-value' => item.send(input.options[:option_key_method])}
                     %a{href: '#'}
                       = item.send(input.options[:option_value_method]).html_safe
                       - if input.ajax?

data/lib/effective_form_inputs/version.rb

@@ -1,3 +1,3 @@
 module EffectiveFormInputs
-  VERSION = '1.1.7'.freeze
+  VERSION = '1.1.8'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_form_inputs
 version: !ruby/object:Gem::Version
-  version: 1.1.7
+  version: 1.1.8
 platform: ruby
 authors:
 - Code and Effect
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-07-05 00:00:00.000000000 Z
+date: 2017-07-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails