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
Run the following line in your projects root folder yarn add epi-js
Add to your app/javascript/packs/application.js
import { AjaxModal } from 'epigenesys-js'
Add data-toggle=ajax-modal
to your link
Add ajax-modal
class to your link
$.ajaxModal(url);
Add to your app/javascript/packs/application.js
import { FlashMessage } from 'epigenesys-js'
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/javascript/packs/application.js
import { OptionFilter } from 'epigenesys-js'
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/javascript/packs/application.js
import { ResponsiveTable } from 'epigenesys-js'
And to your app/javascript/packs/styles.css
import '~epi-js/styles/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/javascript/packs/application.js
import { VisibilityMap } from 'epigenesys-js'
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.
-
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 -
By setting the
data-visibility-map-action
attribute tohide
, 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/javascript/packs/application.js
import { TableFilter } from 'epigenesys-js'
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