epiJS

Some jQuery based scripts, including:

• A simple AJAX lightbox using Twitter Bootstrap modal
• A simple Growl-like using Twitter Bootstrap alert
• A simple table filter
• A script to hide / show HTML elements based on user input

Add this line to your application's Gemfile:

gem 'epi_js'

And then execute:

$ bundle

Or install it yourself as:

$ gem install epi_js

A usage guide is available here

Add to your app/assets/javascripts/application.js

//= require ajax_modal

Add data-toggle=ajax-modal to your link

Add ajax-modal class to your link

$.ajaxModal(url);

Add to your app/assets/javascripts/application.js

//= require flash_message

Wrap your flash message in a div with .flash_messages class, e.g.

.flash-messages
  - unless flash.blank?
    - flash.each do |name, msg|
      .alert.fade{ class: "alert-#{ name == :notice ? 'success' : 'error' }" }
        %a.close{ data: { dismiss: :alert } } ×
        = msg

$.flashAlert(message, alert_class);

alert_class is alert-notice etc.

You can change the markup of the dismiss link by setting the following variable:

$.flashAlert.defaults.dismissLink

Add to your app/assets/javascripts/application.js

//= require option_filter

Add the jQuery selector of the target input as data-option-filter-target to the source input, e.g.

data-option-filter-target="#input-box-1"

To show an option in the target input when an option is selected in the source input, add the value of the source input as data-option-filter-value, e.g.

data-option-filter-value="1"

When the option with value 1 is selected in source input, only options with data-option-filter-value="1" will be displayed.

You can also add data-option-filter-disable-empty to the source input, so that when there is no options available for the current value, the target input will be disabled.

Add to your app/assets/javascripts/application.js

//= require responsive_table

And to your app/assets/stylesheets/application.css

*= require responsive_table

Then add .table-responsive-xs or .table-responsive-sm to tables. You can override the label for each table cell by adding data-label to the td element.

Add to your app/assets/javascripts/application.js

//= require visibility_map

Set data-visibility-map of a select box, radio button group or check boxes to a JSON string, e.g.

data-visibility-map='{"foo":"#foo","bar":"#bar"}'

Or for SimpleForm, use:

f.input :some_select, input_html: {data: {visibility_map: {foo: '#foo', bar: '#bar'}}}

When the value of the input element is foo, the element #foo will be visible and #bar will be hidden, and vice versa. The value of the JSON key value pair can be any jQuery selectors.

1. You can limit the scope of elements to hide / show by providing a JQuery selector as the data-visibility-map-scope attribute. Then only elements within the closest element of input matching the given selector will be affected, e.g.

    .nested-fields
      = f.input :some_select, input_html: {data: {visibility_map_scope: '.nested-fields', visibility_map: {foo: '.foo', bar: '.bar'}}}
      .foo
      .bar
   
    .nested-fields
      = f.input :some_select, input_html: {data: {visibility_map_scope: '.nested-fields', visibility_map: {foo: '.foo', bar: '.bar'}}}
      .foo
      .bar
   

   When the value of the first select is set to foo, only the .foo in the first .nested-fields will be displayed

2. By setting the data-visibility-map-action attribute to hide, elements will be shown by default and only hidden when the given value is selected.

This allows you to filter out rows in a table based on an input field.

Add to your app/assets/javascripts/application.js

//= require table_filter

Set data-table-filter-target on the input field you wish to filter by. This should be a selecter for the table tag you want to filter. This needs to have a thead and tbody.

You can overwrite the default 'No record found' message by setting data-no-record on the table. The span of this will default to the number of tr elements in thead, but is customisable with data-no-record-span on the table.

.margin-top-10 puts a 10px margin at the top etc.

Also can be for specific screen sizes: .margin-top-10-sm

.mini, .nowrap, .display-none