effective_form_inputs 1.0.9 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 13b591cf464ffa57c1fd4ccca0c5db7d12fab6eb
-  data.tar.gz: 1d2dbad66015c45d3cb8d23cc8dda8a028cd11c3
+  metadata.gz: a75831223cd401c30495c973058cfc192ba3fced
+  data.tar.gz: b8fd17c7f18fbb59b3392d96277c50177948c432
 SHA512:
-  metadata.gz: 5f01b4d46479410ff658d3c4ef0edb8443a57d1a725db90fad8e30d6bda89ab68789666d955646deaed809c80852fe652712b4a6ce6c5bba55f60ca131732cf4
-  data.tar.gz: f27ae101cd5e9233224f78c450b4dad04de18a4624eb35d86cb3a7be3328a88a62c66c8c50b6173330d4910077b7f8e1931f4e4007e0542e8202316b4e57f4f0
+  metadata.gz: 712f1cd5a0063b6be125c10fef55cc494bc27b379a6e9169c0e2d49bead07a44e86fb1ecbd488b0c4a54c5564ee81711688670be814738142f3a9892a910c267
+  data.tar.gz: 56a35b5d732b3401a44f5a61d85a2bcb6b2ee34b62c633637b12e4e47f2a768786c16448c579a03b91836dba34730196bdf3de480fb6bb633c586616cfd90048

data/README.md

@@ -71,6 +71,99 @@ $('input.effective_date_time_picker').datetimepicker
 Any options passed in this way will be used to initialize the underlying javascript libraries.
 
 
+## Effective CKEditor Text Area
+
+This custom form input replaces a standard textarea with a CKEditor html rich text area.
+
+It is based on the widely used:
+
+CKEditor (http://ckeditor.com/)
+
+and built ontop of
+
+effective_ckeditor (https://github.com/code-and-effect/effective_ckeditor/)
+
+### Installation
+
+You must first install [effective_ckeditor](https://github.com/code-and-effect/effective_ckeditor/)
+
+```ruby
+gem 'effective_ckeditor'
+```
+
+Depending on how often you're going to display this form input, you now have two options:
+
+- You can do nothing, and when this form input is displayed it will use javascript to load the ckeditor .js and .css file on $(ready).  It will make 2 additional requests, slowing down your page load by a moment.
+
+- Or, when you intend to use the input quite a bit, it's faster to add the effective_ckeditor resources to the asset pipeline.  However, it will increase the asset payload by around 200kb.
+
+To add it to the asset pipeline, put the following to your application.js:
+
+```ruby
+//= require effective_ckeditor
+```
+
+and in your application.css, add:
+
+```ruby
+*= require effective_ckeditor
+```
+
+There are no additional effective_ckeditor installation steps.
+
+
+If you've already installed the 'All Form Inputs' assets (see above), there are no additional installation steps.
+
+To install this form input individually, add the following to your application.js:
+
+```ruby
+//= require effective_ckeditor_text_area/input
+```
+
+### Usage
+
+As a Rails Form Helper input:
+
+```ruby
+= form_for @post do |f|
+  = f.effective_ckeditor_text_area :body
+```
+
+As a SimpleForm input:
+
+```ruby
+= simple_form_for @post do |f|
+  = f.input :body, :as => :effective_ckeditor_text_area
+```
+
+### Options
+
+You can specify the `toolbar` as `'full'` or `'simple'`:
+
+The full toolbar includes Image, oEmbed and Assets, wheras simple does not.
+
+```ruby
+= f.input :body, :as => :effective_ckeditor_text_area, :toolbar => 'full'
+= f.input :body, :as => :effective_ckeditor_text_area, :toolbar => 'simple'
+```
+
+You can specify the `height` and `width`:
+
+```ruby
+= f.input :body, :as => :effective_ckeditor_text_area, :height => '400px;', :width => '200px;'
+```
+
+And you can specify a `contentsCss` stylesheet:
+
+By default, this loads the `asset_path('application.css')` file, you can also specify `:bootstrap`, `false`, a string url, or an array of urls.
+
+When `:bootstrap`, this loads a CDN hosted bootstrap 3.3.7 stylesheet.
+
+```ruby
+= f.input :body, :as => :effective_ckeditor_text_area, :contentsCss => :bootstrap
+```
+
+
 ## Effective Date Time Picker
 
 This custom form input is based on the following awesome project:
@@ -244,15 +337,28 @@ validates :email, effective_email: true   # Enforces same format as above
 
 There are no javascript options for this input.
 
-## Effective Static Control
 
-A bootstrap3 Static control input
+## Effective Panel Select
 
-Renders `<p class='form-control-static'>value</p>` with the appropriate SimpleForm wrappings.
+A totally new way to do grouped collection selects.
+
+Looks like a select field, but when expanded, the usual popup is replaced with a slidedown tabbed panel.
 
 ### Installation
 
-There are no installation steps required for this form input
+If you've already installed the 'All Form Inputs' assets (see above), there are no additional installation steps.
+
+To install this form input individually, add the following to your application.js:
+
+```ruby
+//= require effective_panel_select/input
+```
+
+and add the following to your application.css:
+
+```ruby
+*= require effective_panel_select/input
+```
 
 ### Usage
 
@@ -260,19 +366,237 @@ As a Rails Form Helper input:
 
 ```ruby
 = form_for @user do |f|
-  = f.effective_static_control :member_id
+  = f.effective_panel_select :category, categories_collection
 ```
 
-As a SimpleForm input:
+and as a SimpleForm input:
 
 ```ruby
 = simple_form_for @user do |f|
-  = f.input :member_id, :as => :effective_static_control
+  = f.input :category, as: :effective_panel_select, collection: categories_collection
+```
+
+### Collection
+
+The collection is the same as a grouped select collection:
+
+```ruby
+collection: {'Active' => Post.active, 'Past' => Post.past}
+collection: {'Active' => [['Post A', 1], ['Post B', 2]], 'Past' => [['Post C', 3], ['Post D', 4]]}
+```
+
+Each group, 'Active' and 'Past', will have its own tab.  And its options selectable inside it.
+
+### Options
+
+The default `input_js: options` used to initialize this form input are as follows:
+
+```ruby
+{
+  placeholder: 'Please choose',
+  invade: '.row',
+  collapseOnSelect: true,  # Close the panel when an item is selected
+  resetOnCollapse: true,   # Reset the panel to its selected value when collapsed
+  keepFetched: false       # Keep fetched pages instead of clearing them from the DOM on reset
+  showCount: false         # Show number of categories in each group on the tab pane
+}
+```
+
+and there are also options that control the collection behaviour:
+
+```ruby
+{
+  label_method: :to_s,
+  value_method: :to_s,
+  group_label_method: :first,
+  group_method: :second,
+  option_value_method: :first,
+  option_key_method: :second
+}
+```
+
+### AJAX
+
+Initialize the input with ajax options to display inline each resource's show page.
+
+HTML is fetched from the server using `$.load`.
+
+Initialize your input as follows:
+
+```ruby
+= f.input :category_id, as: :effective_panel_select, collection: categories_collection,
+  input_js: { ajax: { url: category_path(':id') } }
+```
+
+Here the url should be `/categories/:id`. The string `:id` (including the :) will be replaced by the selected value.
+
+A controller action to handle this ajax request looks like:
+
+```ruby
+def show
+  @category = Category.find(params[:id])
+
+  # An effective panel select GET request will have effective_panel_select: true
+  if params[:effective_panel_select]
+    render layout: false
+  end
+end
+```
+
+Or, you can render the normal show page, with layout, and use `$.load` target.
+
+```ruby
+= f.input :category_id, as: :effective_panel_select, collection: categories_collection,
+  input_js: { ajax: { url: category_path(':id'), target: '#category' } }
+```
+
+By default, any fetched pages are `remove()` from the DOM when the panel is reset (on collapse).
+
+You can change this behaviour with `resetOnCollapse` and `keepFetched`.
+
+### Invade
+
+By default, when expanded, the panel will invade -- that is `detach()` and `attach()` itself -- to its closest `$('.row')`.
+
+The invaded parent DOM node has its children hidden, and just the panel is displayed.
+
+Disable this behaviour by passing `invade: false` or tweak it with a different selector `invade: '.container'`.
+
+### Programatic access
+
+An event is fired when the panel's value changes:
+
+```coffeescript
+$(document).on 'change', '.effective-panel-select', (event) ->
+  console.log $(event.currentTarget).effectivePanelSelect('val')
+```
+
+and you can manually do the following:
+
+```javascript
+$('.effective-panel-select').effectivePanelSelect('toggle')
+$('.effective-panel-select').effectivePanelSelect('expand')
+$('.effective-panel-select').effectivePanelSelect('collapse')
+```
+
+```javascript
+$('.effective-panel-select').effectivePanelSelect('val')
+$('.effective-panel-select').effectivePanelSelect('val', 123)  # setVal
+$('.effective-panel-select').effectivePanelSelect('title')
+$('.effective-panel-select').effectivePanelSelect('clear')
+```
+
+
+## Effective Price
+
+This custom form input uses no 3rd party jQuery plugins.
+
+It displays a currency formatted value `100.00` but posts the "price as integer" value of `10000` to the server.
+
+Think about this value as "the number of cents".
+
+
+### Installation
+
+If you've already installed the 'All Form Inputs' assets (see above), there are no additional installation steps.
+
+To install this form input individually, add the following to your application.js:
+
+```ruby
+//= require effective_price/input
+```
+
+### Usage
+
+As a Rails Form Helper input:
+
+```ruby
+= form_for @product do |f|
+  = f.effective_price :price
+```
+
+As a SimpleForm input:
+
+```ruby
+= simple_form_for @product do |f|
+  = f.input :price, :as => :effective_price
+```
+
+As a SimpleForm input without the input group (glyphicon-usd glyphicon)
+
+```ruby
+= simple_form_for @product do |f|
+  = f.input :price, :as => :effective_price, :input_group => false
 ```
 
 ### Options
 
-There are no default options for this form input
+You can pass `include_blank: true` to allow `nil`.  By default `nil`s are convereted, displayed and submitted as `$0.00`.
+
+```ruby
+= f.input :price, :as => :effective_price, :include_blank => true
+```
+
+### Rails Helper
+
+This input also installs a rails view helper `price_to_currency` that takes a value like `10000` and displays it as `$100.00`
+
+
+## Effective Radio Buttons
+
+This custom form input adds image support to the SimpleForm radio buttons. It doesn't really work as a regular rails form helper.
+
+### Installation
+
+If you've already installed the 'All Form Inputs' assets (see above), there are no additional installation steps.
+
+To install this form input individually, add the following to your application.css:
+
+```ruby
+*= require effective_radio_buttons/input
+```
+
+There is no javascript.
+
+### Bootstrap button group
+
+Pass `buttons: true` to the input options to render as a bootstrap button group.
+
+As a SimpleForm input:
+
+```ruby
+= simple_form_for @user do |f|
+  = f.input :breakfast,
+    :as => :effective_radio_buttons,
+    :collection => ['eggs', 'toast', 'bacon'],
+    :buttons => true
+```
+
+### Inline
+
+Pass `inline: true` to the input options to render the radio buttons inline.
+
+As a SimpleForm input:
+
+```ruby
+= simple_form_for @user do |f|
+  = f.input :breakfast,
+    :as => :effective_radio_buttons,
+    :collection => ['eggs', 'toast', 'bacon'],
+    :inline => true
+```
+
+### Images
+
+Pass `images: []` as an array of strings with the same length as the collection to render image buttons.
+
+```ruby
+= simple_form_for @user do |f|
+  = f.input :breakfast,
+    :as => :effective_radio_buttons,
+    :collection => ['eggs', 'toast', 'bacon'],
+    :images => [asset_path('eggs.png'), asset_path('toast.png'), asset_path('bacon.png')]
+```
 
 
 ## Effective Select
@@ -434,22 +758,15 @@ $(document).on 'change', '.something', (event) ->
 There is currently no support for using AJAX to load remote data.  This feature is supported by the underlying select2 library and will be implemented here at a future point.
 
 
-## Effective Tel(ephone)
-
-This custom form input uses a jQuery maskedInput plugin from the following awesome project:
+## Effective Static Control
 
-jQuery Masked Input Plugin (https://github.com/digitalBush/jquery.maskedinput)
+A bootstrap3 Static control input.
 
+Renders `<p class='form-control-static'>value</p>` with the appropriate SimpleForm wrappings.
 
 ### Installation
 
-If you've already installed the 'All Form Inputs' assets (see above), there are no additional installation steps.
-
-To install this form input individually, add the following to your application.js:
-
-```ruby
-//= require effective_tel/input
-```
+There are no installation steps required for this form input
 
 ### Usage
 
@@ -457,37 +774,26 @@ As a Rails Form Helper input:
 
 ```ruby
 = form_for @user do |f|
-  = f.effective_tel :phone
+  = f.effective_static_control :category
 ```
 
 As a SimpleForm input:
 
 ```ruby
 = simple_form_for @user do |f|
-  = f.input :phone, :as => :effective_tel
+  = f.input :category, as: :effective_static_control
+  = f.input :category, as: :effective_static_control
 ```
 
-As a SimpleForm input without the input group (phone glyphicon)
-
-```ruby
-= simple_form_for @user do |f|
-  = f.input :phone, :as => :effective_tel, :input_group => false
-```
-
-You should add a server side validation to enforce the default "(123) 555-1234" with optional "x123" extension format:
-
-```ruby
-validates :phone, format: { with: /\A\(\d{3}\) \d{3}-\d{4}( x\d+)?\Z/ }
-validates :phone, effective_tel: true   # Enforces same format as above
-```
+### Options
 
-## Effective Price
+There are no default options for this form input.
 
-This custom form input uses no 3rd party jQuery plugins.
+## Effective Tel(ephone)
 
-It displays a currency formatted value `100.00` but posts the "price as integer" value of `10000` to the server.
+This custom form input uses a jQuery maskedInput plugin from the following awesome project:
 
-Think about this value as "the number of cents".
+jQuery Masked Input Plugin (https://github.com/digitalBush/jquery.maskedinput)
 
 
 ### Installation
@@ -497,7 +803,7 @@ If you've already installed the 'All Form Inputs' assets (see above), there are
 To install this form input individually, add the following to your application.js:
 
 ```ruby
-//= require effective_price/input
+//= require effective_tel/input
 ```
 
 ### Usage
@@ -505,38 +811,31 @@ To install this form input individually, add the following to your application.j
 As a Rails Form Helper input:
 
 ```ruby
-= form_for @product do |f|
-  = f.effective_price :price
+= form_for @user do |f|
+  = f.effective_tel :phone
 ```
 
 As a SimpleForm input:
 
 ```ruby
-= simple_form_for @product do |f|
-  = f.input :price, :as => :effective_price
+= simple_form_for @user do |f|
+  = f.input :phone, :as => :effective_tel
 ```
 
-As a SimpleForm input without the input group (glyphicon-usd glyphicon)
+As a SimpleForm input without the input group (phone glyphicon)
 
 ```ruby
-= simple_form_for @product do |f|
-  = f.input :price, :as => :effective_price, :input_group => false
+= simple_form_for @user do |f|
+  = f.input :phone, :as => :effective_tel, :input_group => false
 ```
 
-### Options
-
-You can pass `include_blank: true` to allow `nil`.  By default `nil`s are convereted, displayed and submitted as `$0.00`.
+You should add a server side validation to enforce the default "(123) 555-1234" with optional "x123" extension format:
 
 ```ruby
-= f.input :price, :as => :effective_price, :include_blank => true
+validates :phone, format: { with: /\A\(\d{3}\) \d{3}-\d{4}( x\d+)?\Z/ }
+validates :phone, effective_tel: true   # Enforces same format as above
 ```
 
-
-### Rails Helper
-
-This input also installs a rails view helper `price_to_currency` that takes a value like `10000` and displays it as `$100.00`
-
-
 ## Effective URL
 
 This custom form input enforces the url starts with http:// or https://
@@ -587,156 +886,6 @@ validates :website, effective_url: true   # Enforced same format as above
 
 You can pass `fontawesome: false` and `glyphicon: false` to tweak the automatic social icon display behaviour.
 
-
-## Effective CKEditor Text Area
-
-This custom form input replaces a standard textarea with a CKEditor html rich text area.
-
-It is based on the widely used:
-
-CKEditor (http://ckeditor.com/)
-
-and built ontop of
-
-effective_ckeditor (https://github.com/code-and-effect/effective_ckeditor/)
-
-### Installation
-
-You must first install [effective_ckeditor](https://github.com/code-and-effect/effective_ckeditor/)
-
-```ruby
-gem 'effective_ckeditor'
-```
-
-Depending on how often you're going to display this form input, you now have two options:
-
-- You can do nothing, and when this form input is displayed it will use javascript to load the ckeditor .js and .css file on $(ready).  It will make 2 additional requests, slowing down your page load by a moment.
-
-- Or, when you intend to use the input quite a bit, it's faster to add the effective_ckeditor resources to the asset pipeline.  However, it will increase the asset payload by around 200kb.
-
-To add it to the asset pipeline, put the following to your application.js:
-
-```ruby
-//= require effective_ckeditor
-```
-
-and in your application.css, add:
-
-```ruby
-*= require effective_ckeditor
-```
-
-There are no additional effective_ckeditor installation steps.
-
-
-If you've already installed the 'All Form Inputs' assets (see above), there are no additional installation steps.
-
-To install this form input individually, add the following to your application.js:
-
-```ruby
-//= require effective_ckeditor_text_area/input
-```
-
-### Usage
-
-As a Rails Form Helper input:
-
-```ruby
-= form_for @post do |f|
-  = f.effective_ckeditor_text_area :body
-```
-
-As a SimpleForm input:
-
-```ruby
-= simple_form_for @post do |f|
-  = f.input :body, :as => :effective_ckeditor_text_area
-```
-
-### Options
-
-You can specify the `toolbar` as `'full'` or `'simple'`:
-
-The full toolbar includes Image, oEmbed and Assets, wheras simple does not.
-
-```ruby
-= f.input :body, :as => :effective_ckeditor_text_area, :toolbar => 'full'
-= f.input :body, :as => :effective_ckeditor_text_area, :toolbar => 'simple'
-```
-
-You can specify the `height` and `width`:
-
-```ruby
-= f.input :body, :as => :effective_ckeditor_text_area, :height => '400px;', :width => '200px;'
-```
-
-And you can specify a `contentsCss` stylesheet:
-
-By default, this loads the `asset_path('application.css')` file, you can also specify `:bootstrap`, `false`, a string url, or an array of urls.
-
-When `:bootstrap`, this loads a CDN hosted bootstrap 3.3.7 stylesheet.
-
-```ruby
-= f.input :body, :as => :effective_ckeditor_text_area, :contentsCss => :bootstrap
-```
-
-
-## Effective Radio Buttons
-
-This custom form input adds image support to the SimpleForm radio buttons. It doesn't really work as a regular rails form helper.
-
-### Installation
-
-If you've already installed the 'All Form Inputs' assets (see above), there are no additional installation steps.
-
-To install this form input individually, add the following to your application.css:
-
-```ruby
-*= require effective_radio_buttons/input
-```
-
-There is no javascript.
-
-### Bootstrap button group
-
-Pass `buttons: true` to the input options to render as a bootstrap button group.
-
-As a SimpleForm input:
-
-```ruby
-= simple_form_for @user do |f|
-  = f.input :breakfast,
-    :as => :effective_radio_buttons,
-    :collection => ['eggs', 'toast', 'bacon'],
-    :buttons => true
-```
-
-### Inline
-
-Pass `inline: true` to the input options to render the radio buttons inline.
-
-As a SimpleForm input:
-
-```ruby
-= simple_form_for @user do |f|
-  = f.input :breakfast,
-    :as => :effective_radio_buttons,
-    :collection => ['eggs', 'toast', 'bacon'],
-    :inline => true
-```
-
-### Images
-
-Pass `images: []` as an array of strings with the same length as the collection to render image buttons.
-
-```ruby
-= simple_form_for @user do |f|
-  = f.input :breakfast,
-    :as => :effective_radio_buttons,
-    :collection => ['eggs', 'toast', 'bacon'],
-    :images => [asset_path('eggs.png'), asset_path('toast.png'), asset_path('bacon.png')]
-```
-
 ## License
 
 MIT License.  Copyright [Code and Effect Inc.](http://www.codeandeffect.com/)
@@ -747,7 +896,6 @@ The authors of this gem are not associated with any of the awesome projects used
 
 We are just extending these existing community projects for ease of use with Rails Form Helper and SimpleForm.
 
-
 ## Contributing
 
 1. Fork it

data/app/assets/javascripts/effective_form_inputs.js

@@ -1,6 +1,7 @@
 //= require ./effective_ckeditor_text_area/input
 //= require ./effective_date_time_picker/input
 //= require ./effective_date_picker/input
+//= require ./effective_panel_select/input
 //= require ./effective_price/input
 //= require ./effective_select/input
 //= require ./effective_tel/input

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

@@ -0,0 +1,211 @@
+# We initialize this on the .panel
+
+(($, window) ->
+  class EffectivePanelSelect
+    defaults:
+      placeholder: 'Please choose'
+      invade: '.row'
+      collapseOnSelect: true
+      resetOnCollapse: true
+      keepFetched: false    # Keep any fetched ajax pages in the dom. Otherwise they're freed on reset()
+      ajax:
+        url: ''       # /exercises/:id   The string ':id' will be replaced with the viewed item value
+        target: ''    # #container       The string to pass to load
+
+    panel: null       # Our root node. the .panel element
+    input: null       # The input[type=hidden] field where we keep the selected value
+    label: null       # Contains either a %span.selection-placeholder, or a %span.selection-clear and %span.selection-label
+    selector: null    # Root node of the container
+    invading: false   # If we're currently invading the closest @options.invade selector
+
+    constructor: (el, options) ->
+      @panel = $(el)
+      @input = @panel.find("input[type='hidden']")
+      @label = @panel.find('.selection-title')
+      @selector = @panel.children('.selector')
+      @tabList = @selector.find('ul.nav').first()
+      @tabContent = @selector.find('.tab-content').first()
+
+      @options = $.extend({}, @defaults, options)
+
+      @initTabs()
+      @initEvents()
+      @initInvade()
+      @initAjax()
+      true
+
+    # So we need to assign unique IDs to all the group tabs so we can have multiple selectors per page
+    # This should also handle cocoon gem
+
+    initTabs: ->
+      unique = new Date().getTime()
+
+      @tabList.find("a[data-toggle='tab']").each (index, item) =>
+        item = $(item)
+        href = item.attr('href')
+        tab = @tabContent.children(href)
+
+        href = href + '-' + unique + index
+
+        item.attr('href', href)
+        tab.attr('id', href.substring(1))
+
+    initEvents: ->
+      @panel.on 'click', '.selection', (event) => @toggle()
+      @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
+
+    initInvade: ->
+      return if @options.invade == false || @options.invade == 'false'
+      @home = @panel.parent()
+      @away = $("<div class='col-xs-12 effective_panel_select'></div>")
+
+    initAjax: ->
+      return unless @options.ajax && @options.ajax.url.length
+      @fetched = @selector.find('.fetched')
+
+    # Rest of these are commands
+
+    # Expand / Collapse
+    # $('.effective-panel-select').effectivePanelSelect('toggle')
+    toggle: ->
+      if @panel.hasClass('expanded') then @collapse() else @expand()
+
+    expand: ->
+      @invade() if @options.invade
+      @selector.slideDown 'fast', => @panel.addClass('expanded')
+
+    collapse: ->
+      @selector.slideUp 'fast', =>
+        @panel.removeClass('expanded')
+        @reset() if @options.resetOnCollapse
+        @retreat() if @options.invade
+
+    # Invade the nearest '.row'
+    invade: ->
+      target = @home.closest(@options.invade)
+      return unless target.length && !@invading
+
+      @panel.detach()
+      target.children().hide()
+      @away.append(@panel).show()
+
+      target.append(@away)
+
+      @invading = true
+
+    # Reset to default position
+    retreat: ->
+      target = @away.closest(@options.invade)
+      return unless target.length && @invading
+
+      @panel.detach()
+      target.children().show()
+      @away.hide()
+
+      hint = @home.children(':not(label)')
+      if hint.length then @panel.insertBefore(hint) else @home.append(@panel)
+
+      @invading = false
+
+    # 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>")
+        @reset()
+      else
+        $item = @selector.find("li[data-item-value='#{value}']").first()
+        label = @title($item)
+
+        @label.html("<span class='selection-clear'>x</span> <span class='selection-label'>#{label}</span>")
+        if @options.collapseOnSelect then @collapse() else @reset()
+
+      @panel.trigger 'change'
+      true
+
+    # Syncs the tabs to the current value
+    reset: ->
+      value = @val()
+
+      @fetched.children(':not(.top)').remove() if @fetched && @fetched.length && !@options.keepFetched
+
+      @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.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.addClass('selected').addClass('active')
+          $tab_pane.addClass('active')
+
+    clear: -> @val(null)
+
+    # Ajax fetch and view page
+    fetch: (value) ->
+      return unless @options.ajax && @options.ajax.url.length
+
+      fetched = @fetched.children("div[data-fetch='#{value}']")
+
+      if fetched.length == 0
+        fetched = $("<div data-fetch='#{value}'></div>")
+
+        fetched = fetched.load(@url(value), (response, status, xhr) =>
+          fetched.append('<p>This item is unavailable (ajax error)</p>') if status == 'error'
+        )
+
+        @fetched.append(fetched)
+
+      @fetched.parent().find('.active').removeClass('active')
+      @fetched.addClass('active').children(':not(.top)').hide()
+      fetched.show()
+      @fetched.children('.top').find('.fetched-select').data('item-value', value)
+
+    url: (value) ->
+      return unless @options.ajax && @options.ajax.url.length
+
+      url = @options.ajax.url.replace(':id', value)
+
+      # Add a data param
+      url = url + (if url.indexOf('?') == -1 then '?' else '&') + $.param(effective_panel_select: true)
+
+      # Add target
+      url = url + " #{@options.ajax.target}" if @options.ajax.target  # jQuery .load('/things/13 #thing')
+
+      url
+
+  $.fn.extend effectivePanelSelect: (option, args...) ->
+    retval = @each
+
+    @each ->
+      $this = $(this)
+      data = $this.data('effectivePanelSelect')
+
+      $this.data('effectivePanelSelect', (data = new EffectivePanelSelect(this, option))) if !data
+
+      retval = data[option].apply(data, args) if typeof option == 'string'
+      $this
+
+    retval
+
+) window.jQuery, window
+
+$(document).on 'click', (event) ->
+  if !$(event.target).closest('.effective-panel-select').length
+    $('.effective-panel-select.initialized').effectivePanelSelect('collapse')

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

@@ -0,0 +1,12 @@
+initialize = ->
+  $('div.effective-panel-select:not(.initialized)').each (i, element) ->
+    element = $(element)
+    options = element.data('input-js-options') || {}
+
+    $select = element.addClass('initialized').effectivePanelSelect(options)
+
+$ -> initialize()
+$(document).on 'page:change', -> initialize()
+$(document).on 'turbolinks:load', -> initialize()
+$(document).on 'turbolinks:render', -> initialize()
+$(document).on 'cocoon:after-insert', -> initialize()

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

@@ -0,0 +1,2 @@
+//= require ./effective_panel_select
+//= require ./initialize

data/app/assets/stylesheets/effective_form_inputs.scss

@@ -1,3 +1,4 @@
 @import 'effective_date_time_picker/input';
 @import 'effective_radio_buttons/input';
+@import 'effective_panel_select/input';
 @import 'effective_select/input';

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

@@ -0,0 +1,86 @@
+// The .effective-panel-select top level container is a div
+// That is also a .panel and .panel-default
+// Oftentimes, this will be inside a simple_form wrapper, so a div of .effective_panel_select will be above this.
+
+.effective-panel-select { // This will also have the classes panel and .panel-default
+  margin-bottom: 0px;
+
+  li.selected {
+    font-weight: bold;
+  }
+
+  .selector {
+    display: none;
+
+    .tab-content { padding-top: 0px; }
+  }
+
+  .tab-pane.fetched { padding-right: 15px; }
+
+  .selection {
+    width: 100%;
+    font-family: "Open Sans", sans-serif;
+    font-size: 14px;
+    cursor: pointer;
+  }
+
+  .selection-title {
+    display: block;
+    height: 32px;
+    padding: 6px 24px 6px 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .selection-clear {
+    width: 10px;
+    color: #999;
+    font-weight: bold;
+    &:hover { color: #333; }
+  }
+
+  .selection-placeholder {
+    color: #999;
+    white-space: nowrap;
+  }
+
+  .selection-arrow {
+    float: right;
+
+    width: 4px;
+    height: 4px;
+    margin-top: -14px;
+    margin-right: 18px;
+
+    b {
+      border-color: #999 transparent transparent transparent;
+      border-style: solid;
+      border-width: 4px 4px 0 4px;
+      margin-left: 4px;
+      margin-top: -2px;
+    }
+  }
+}
+
+.effective-panel-select.expanded {
+  margin-bottom: 15px;
+
+  border-color: #55afe9;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+
+  .selector { display: block; }
+
+  .selection-arrow {
+    margin-top: -38px;
+
+    b {
+      border-color: transparent transparent #999 transparent;
+      border-width: 0 4px 4px 4px;
+    }
+  }
+}
+
+.has-error {
+  .effective-panel-select { border-color: #a94442; }
+}

data/app/models/effective/form_builder_inputs.rb

@@ -12,6 +12,11 @@ module Effective
       Inputs::EffectiveDatePicker::Input.new(@object, @object_name, @template, method, options, options).to_html
     end
 
+    def effective_panel_select(method, options_tag = nil, options = {}, html_options = {})
+      options[:collection] = options_tag
+      Inputs::EffectivePanelSelect::Input.new(@object, @object_name, @template, method, options, html_options).to_html
+    end
+
     def effective_price(method, options = {})
       Inputs::EffectivePrice::Input.new(@object, @object_name, @template, method, options, options).to_html
     end

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

@@ -0,0 +1,107 @@
+# This is a unique form input
+# Takes in the same collection as a grouped select
+# Displays the groups on the left, and each of the items on the right panel
+# Only supports one category, and one kind of objects
+# No polymorphic stuff
+
+module Inputs
+  module EffectivePanelSelect
+    class Input < Effective::FormInput
+      delegate :grouped_collection_select, :hidden_field_tag, :text_field_tag, :render, to: :@template
+
+      def default_options
+        { label_method: :to_s, value_method: :to_s, group_label_method: :first, group_method: :second, option_value_method: :first, option_key_method: :second }
+      end
+
+      def default_input_js
+        { placeholder: 'Please choose', invade: '.row', collapseOnSelect: true, resetOnCollapse: true, showCount: false }
+      end
+
+      def default_input_html
+        { class: 'effective_panel_select' }
+      end
+
+      def to_html
+        render('effective/effective_panel_select/input', input: self)
+      end
+
+      def method_name
+        @method_name ||= @method.to_s.titleize.downcase
+      end
+
+      def ajax?
+        return true if js_options[:ajax]
+      end
+
+      def show_count?
+        return true if js_options[:showCount]
+      end
+
+      # option_value           1
+      # option_label           Post A
+      # group_label            Active
+
+      # 163
+      def option_value
+        value
+      end
+
+      # Post A
+      def option_label
+        return nil unless value.present?
+        @option_label || (_initialize_group_and_option; @option_label)
+      end
+
+      # Active
+      def group_label
+        return nil unless value.present?
+        @group_label || (_initialize_group_and_option; @group_label)
+      end
+
+      # Active
+      def group_value
+        return nil unless value.present?
+        @group_value || (_initialize_group_and_option; @group_value)
+      end
+
+      def _initialize_group_and_option
+        collection.each do |group, items|
+          items.each do |item|
+            if item.send(options[:option_key_method]) == value
+              @group_label = group.send(options[:group_label_method])
+              @group_value = group.send(options[:group_method])
+              @option_label = item.send(options[:option_value_method])
+              return
+            end
+          end
+        end
+
+      end
+
+      # This is a grouped polymorphic collection
+      # [['Active', [['Post A', 1], ['Post B', 2]]], ['Past', [['Post C', 3], ['Post D', 4]]]
+      def collection
+        @collection ||= begin
+          collection = options.delete(:collection) || []
+          grouped = collection[0].kind_of?(Array) && collection[0][1].respond_to?(:to_a) && (collection[0][1] != nil) # Array or ActiveRecord_Relation
+
+          if !grouped && collection.present?
+            raise "Grouped collection expecting a Hash {'Posts' => Post.all, 'Events' => Event.all} or a Hash {'Posts' => [['Post A', 1], ['Post B', 2]], 'Events' => [['Event A', 1], ['Event B', 2]]}"
+          end
+
+          collection.each_with_index do |(name, group), index|
+            collection[index][1] = group.respond_to?(:call) ? group.call : group.to_a
+          end
+
+          if collection[0][0].kind_of?(String)
+            options[:group_label_method] = :to_s
+            options[:group_method] = :to_s
+          end
+
+          collection.respond_to?(:call) ? collection.call : collection.to_a
+        end
+      end
+
+    end
+  end
+end

data/app/models/inputs/effective_panel_select_input.rb

@@ -0,0 +1,18 @@
+# = simple_form_for @thing do |f|
+#   = f.input :category, :as => :effective_panel_select
+
+if defined?(SimpleForm)
+
+  class EffectivePanelSelectInput < SimpleForm::Inputs::CollectionSelectInput
+    def input(wrapper_options = nil)
+      label_method, value_method = (detect_collection_methods rescue [:to_s, :to_s])
+
+      options[:collection] = collection
+      options[:label_method] = label_method unless options[:polymorphic]
+      options[:value_method] = value_method unless options[:polymorphic]
+
+      Inputs::EffectivePanelSelect::Input.new(object, object_name, template, attribute_name, input_options, (merge_wrapper_options(input_html_options, wrapper_options) || {})).to_html
+    end
+  end
+
+end

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

@@ -0,0 +1,52 @@
+.panel.panel-default.effective-panel-select{'data-input-js-options' => input.js_options.to_json }
+  = hidden_field_tag(input.field_name, input.value)
+
+  .selection
+    %span.selection-title
+      - if input.option_label.present?
+        %span.selection-clear x
+        %span.selection-label= input.option_label
+      - else
+        %span.selection-placeholder Please Choose
+    %span.selection-arrow
+      %b
+
+  .selector
+    .row
+      .col-sm-4
+        %ul.nav.nav-pills.nav-stacked{role: 'tablist'}
+          - input.collection.each do |group, items|
+            - group_label = group.send(input.options[:group_label_method])
+            - 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}"}
+                = group_label
+                - if input.show_count?
+                  %span.badge= items.length
+      .col-sm-8
+        .tab-content
+          - input.collection.each do |group, items|
+            - group_label = group.send(input.options[:group_label_method])
+            - group_value = group.send(input.options[:group_method])
+
+            .tab-pane{id: group_value.parameterize, class: ('active' if group_value == input.group_value) }
+              %p #{group_label}:
+
+              %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}
+                    %a{href: '#'}
+                      = item.send(input.options[:option_value_method])
+                      - if input.ajax?
+                        %span.badge.pull-right{'data-fetch-item' => true} View
+
+          - if input.ajax?
+            .tab-pane.fetched
+              .top.row
+                .col-xs-6
+                  .btn.btn-default.fetched-clear Back
+                .col-xs-6.text-right
+                  .btn.btn-primary.fetched-select Select

data/lib/effective_form_inputs/version.rb

@@ -1,3 +1,3 @@
 module EffectiveFormInputs
-  VERSION = '1.0.9'.freeze
+  VERSION = '1.1.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_form_inputs
 version: !ruby/object:Gem::Version
-  version: 1.0.9
+  version: 1.1.0
 platform: ruby
 authors:
 - Code and Effect
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-05-08 00:00:00.000000000 Z
+date: 2017-05-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -60,6 +60,9 @@ files:
 - app/assets/javascripts/effective_email/initialize.js.coffee
 - app/assets/javascripts/effective_email/input.js
 - app/assets/javascripts/effective_form_inputs.js
+- app/assets/javascripts/effective_panel_select/effective_panel_select.js.coffee
+- app/assets/javascripts/effective_panel_select/initialize.js.coffee
+- app/assets/javascripts/effective_panel_select/input.js
 - app/assets/javascripts/effective_price/initialize.js.coffee
 - app/assets/javascripts/effective_price/input.js
 - app/assets/javascripts/effective_select/initialize.js.coffee
@@ -76,6 +79,7 @@ files:
 - app/assets/stylesheets/effective_date_time_picker/input.scss
 - app/assets/stylesheets/effective_date_time_picker/overrides.scss
 - app/assets/stylesheets/effective_form_inputs.scss
+- app/assets/stylesheets/effective_panel_select/input.scss
 - app/assets/stylesheets/effective_radio_buttons/input.scss
 - app/assets/stylesheets/effective_select/bootstrap-theme.css
 - app/assets/stylesheets/effective_select/input.scss
@@ -92,6 +96,8 @@ files:
 - app/models/inputs/effective_date_time_picker_input.rb
 - app/models/inputs/effective_email/input.rb
 - app/models/inputs/effective_email_input.rb
+- app/models/inputs/effective_panel_select/input.rb
+- app/models/inputs/effective_panel_select_input.rb
 - app/models/inputs/effective_price/input.rb
 - app/models/inputs/effective_price_input.rb
 - app/models/inputs/effective_radio_buttons/input.rb
@@ -107,6 +113,7 @@ files:
 - app/validators/effective_email_validator.rb
 - app/validators/effective_tel_validator.rb
 - app/validators/effective_url_validator.rb
+- app/views/effective/effective_panel_select/_input.html.haml
 - app/views/effective/style_guide/_effective_form_inputs.html.haml
 - lib/effective_form_inputs.rb
 - lib/effective_form_inputs/engine.rb