DismissibleBlocks — A new Ruby gem
DismissibleBlocks is a simple gem for Ruby on Rails projects to add blocks of content to a webpage that can be dismissed by the user. Dismissed blocks are remembered and persisted to the database using Ajax. DismissibleBlocks is ORM agnostic and works with MySQL, PostgreSQL, MongoDB, etc.
Installation
To install the gem, add the following line to your application’s Gemfile:
gem 'dismissible_blocks'
And then execute:
$ bundle install
Configuration
Three things need to be configured before you can begin using DismissibleBlocks:
JavaScript
Add the following to app/assets/javascripts/application.js
:
//= require jquery
//= require dismissible_blocks
//= require dismissible_blocks_loader
Helper
DismissibleBlocks uses the current_user
helper method to access the current user/account. Make sure the helper method is also available in your views:
def current_user
...
end
helper_method :current_user
If your helper method is named something other than current_user
, you will have to create an alias to current_user
. More →
Model
The state of each block is persisted to the database using a model that responds to current_user
. The model must have an attribute named dismissed_blocks
and be of type Array. More →
Usage
Adding dismissible blocks of content is very easy. DismissibleBlocks does not generate any extra HTML and therefore gives you complete control over your code.
To add a dismissible block to a view, use the render_dismissible_block
helper method. This will create a dismissible block named lorem
:
<%= render_dismissible_block 'lorem' do %>
...
<% end %>
This alone isn’t enough, you need to identify the container and button HTML. This is done using HTML5 data-
attributes. There are two attributes that you must add to the HTML to make everything work as expected:
data-dismissible
: attribute for the container of the content.data-dismissible-hide
: attribute for the button to hide the content.
For example:
<%= render_dismissible_block 'lorem' do %>
<div data-dismissible>
<p>...</p>
<span data-dismissible-hide>Hide</span>
</div>
<% end %>
For more information, visit the GitHub repository.