effective_form_inputs 0.7.5 → 0.7.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: dfe1f299c36eb92e01218a5cfa7fd64cbef52398
-  data.tar.gz: 0ace3f60cc9f9790719fb07c3be576f4d0f82cf7
+  metadata.gz: 956155606d7d1da40fcca46e7424a36477b3829b
+  data.tar.gz: 6b6ecf49a907ba2803120cd4624b560f17706e3f
 SHA512:
-  metadata.gz: a94bfe9d38b9bf0ba806c2bd6088fbac47df703bbbc0c3702da11485c81fdef311fa32dea86cf5b86b0bb454533218d4dd95769ce3e357e5e320c54fd2b6b36e
-  data.tar.gz: 27b5de98a8a592ad3efafa7c6f68704b5926e5c0b523baf197dfd5c8585ed83fa9fc3ae0cc8ac4fc09510eae2ac3738aa5a7cb27091545764ab7e94945dec483
+  metadata.gz: fec09f2fffabc7b3d827ab26d72ad5f3b81b772f5e815ac0671b5fe094a6ba3e1e45f86774f96cf221fedd8fad0c7431e9f49066a6610ffa73e0509aa884b3d2
+  data.tar.gz: dc8e1de8a5b8391d89f07b66b16db57e7f645eed9d59a2f5eafda11a44e2beea2418b8fbb2f1e5e51a2ce3c2790f20b5f3a96ffc690a0028832fb72683dc2061

data/README.md

@@ -329,10 +329,44 @@ To hide the search box entirely:
 :minimumResultsForSearch => 'Infinity'
 ```
 
-For a full list of options, please refer to:
+For a full list of options, please refer to: https://select2.github.io/options.html
+
+
+The following `:input_js => options` are not part of the standard select2 API, and are custom `effective_select` functionality only:
+
+To add a css class to the select2 container or dropdown:
+
+```ruby
+:containerClass => 'custom-container-class'
+:dropdownClass => 'custom-dropdown-class'
+```
+
+### Working with dynamic options
 
-https://select2.github.io/options.html
+The following information applies to `effective_select` only, and is not part of the standard select2 API.
 
+To totally hide (instead of just grey out) any disabled options from the select2 dropdown, initialize the input with:
+
+```ruby
+= f.input :category, :as => :effective_select, :collection => ..., :hide_disabled => true
+```
+
+If you want to dynamically add/remove options from the select field after page load, you must use the `select2:reinitialize` event:
+
+```coffeescript
+# When something on my page changes
+$(document).on 'change', '.something', (event) ->
+  $select = $(event.target).closest('form').find('select.i-want-to-change')  # Find the select2 input to be updated
+
+  # Go through its options, and modify some of them.
+  # Using the above 'hide_disabled true' functionality, the following code hides the options from being displayed,
+  # but you could actually remove the options, add new ones, or update the values/texts. whatever.
+  $select.find('option').each (index, option) ->
+    $(option).prop('disabled', true) if index > 10
+
+  # Whenever the underlying options change, you need to manually trigger the following event:
+  $select.select2().trigger('select2:reinitialize')
+```
 
 ### AJAX Support
 

data/app/assets/javascripts/effective_select/initialize.js.coffee

@@ -5,7 +5,13 @@ initialize = ->
     element = $(element)
     options = element.data('input-js-options') || {}
 
-    element.addClass('initialized').select2(options)
+    $select = element.addClass('initialized').select2(options)
+
+    # effective_select custom class functionality
+    # select2 doesn't provide an initializer to add css classes to its input, so we manually support this feature
+    # js_options[:containerClass] and js_options[:dropdownClass]
+    $select.data('select2').$container.addClass(options['containerClass']) if options['containerClass']
+    $select.data('select2').$dropdown.addClass(options['dropdownClass']) if options['dropdownClass']
 
 $ -> initialize()
 $(document).on 'page:change', -> initialize()

data/app/assets/javascripts/effective_select/overrides.js.coffee

@@ -4,8 +4,41 @@
 $(document).on 'select2:unselecting', (event) -> $(event.target).data('state', 'unselected')
 
 $(document).on 'select2:open', (event) ->
-  obj = $(event.target)
+  $select = $(event.target)
+
+  if $select.data('state') == 'unselected'
+    $select.removeData('state')
+    setTimeout ( => $select.select2('close') ), 0
+
+
+# effective_select custom reinitialization functionality
+# This is a custom event intended to be manually triggered when the underlying options change
+# You can use this to dynamically disable options (with or without the effective_select hide_disabled: true)
+# https://github.com/select2/select2/issues/2830
+
+# To trigger this event,
+# $(document).on 'change', "select[name$='[something_id]']", (event) ->
+#   ...add/remove/disable this select field's options...
+#   $(event.target).select2().trigger('select2:reinitialize')
+
+$(document).on 'select2:reinitialize', (event) ->
+  $select = $(event.target)
+
+  # Get the existing options and value
+  options = $select.data('select2').options.options['inputJsOptions'] || {}
+  value = $select.find('option:selected').val()
+
+  # Clear/Restore the value appropriately
+  if value && $select.find("option:enabled[value='#{value}']").length > 0
+    $select.val(value)
+  else
+    $select.val('')
+
+  # Reinitialize select2
+  $select.select2('destroy').select2(options)
+
+  # Restore effective_select custom class functionality
+  $select.data('select2').$container.addClass(options['containerClass']) if options['containerClass']
+  $select.data('select2').$dropdown.addClass(options['dropdownClass']) if options['dropdownClass']
+
 
-  if obj.data('state') == 'unselected'
-    obj.removeData('state')
-    setTimeout ( => obj.select2('close') ), 0

data/app/assets/stylesheets/effective_select/overrides.scss

@@ -20,3 +20,8 @@
 .select2-container--focus > .selection > .select2-selection {
   border: 1px solid #9cd5fe !important;
 }
+
+// effective_select option "hide_disabled: true"
+.select2-container.hide-disabled .select2-results__option[aria-disabled=true] {
+  display: none;
+}

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

@@ -8,7 +8,7 @@ module Inputs
       end
 
       def default_input_js
-        {theme: 'bootstrap', minimumResultsForSearch: 6, tokenSeparators: [',', ' '], width: 'style', placeholder: 'Please choose'}
+        { theme: 'bootstrap', minimumResultsForSearch: 6, tokenSeparators: [',', ' '], width: 'style', placeholder: 'Please choose' }
       end
 
       def default_input_html
@@ -131,14 +131,27 @@ module Inputs
           html_options[:multiple] = options[:multiple]
           html_options[:class] << 'polymorphic' if options[:polymorphic]
           html_options[:class] << 'grouped' if options[:grouped]
+          html_options[:class] << 'hide-disabled' if options[:hide_disabled]
         end
       end
 
       def js_options
-        super().tap do |js_options|
+        @effective_select_js_options ||= super().tap do |js_options|
           js_options[:allowClear] = (options[:multiple] != true)
           js_options[:tags] = (options[:tags] == true)
           js_options[:tokenSeparators] = nil if options[:tags] != true
+
+          # select2 doesn't support adding css classes to its input, so we support it through the
+          # js_options[:containerClass] and js_options[:dropdownClass] methods
+          # When we use options[:hide_disabled], we add the 'hide-disabled' class to both the container and the dropdown
+          if options[:hide_disabled]
+            js_options[:containerClass] = (arrayize_html_class_key(js_options[:containerClass]) + ['hide-disabled']).join(' ')
+          end
+
+          if options[:hide_disabled]
+            js_options[:dropdownClass] = (arrayize_html_class_key(js_options[:dropdownClass]) + ['hide-disabled']).join(' ')
+          end
+
         end
       end
     end

data/lib/effective_form_inputs/version.rb

@@ -1,3 +1,3 @@
 module EffectiveFormInputs
-  VERSION = '0.7.5'.freeze
+  VERSION = '0.7.6'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_form_inputs
 version: !ruby/object:Gem::Version
-  version: 0.7.5
+  version: 0.7.6
 platform: ruby
 authors:
 - Code and Effect
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-09-17 00:00:00.000000000 Z
+date: 2015-09-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails