EpiJS

Some jQuery based scripts, including:

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

Installation

Add this line to your application's Gemfile:

gem 'epi_js'

And then execute:

$ bundle

Or install it yourself as:

$ gem install epi_js

Usage

AJAX Modal

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

//= require ajax_modal

Via class

Add ajax-modal class to your link

Via JavaScript

$.ajaxModal(url);

Flash Message

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

//= require flash_message

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

*= require flash_message

For Rails flash fessage

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

Via JavaScript

$.flashAlert(message, alert_class);

alert_class is alert-notice etc.

Visibility Map

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

//= require visibility_map

Via data attributes

Set data-visibility-map of a select box or radio button group 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.