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:

  1. data-dismissible: attribute for the container of the content.
  2. 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.