Skip to content

Commit

Permalink
Merge branch 'add-modal'
Browse files Browse the repository at this point in the history
  • Loading branch information
claudiofullscreen committed Aug 17, 2014
2 parents 9a89074 + 3353969 commit 2e70a4a
Show file tree
Hide file tree
Showing 9 changed files with 336 additions and 11 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Expand Up @@ -6,8 +6,9 @@ For more information about changelogs, check
[Keep a Changelog](http://keepachangelog.com) and
[Vandamme](http://tech-angels.github.io/vandamme).

## 0.0.4 - unreleased
## 0.0.4 - 2014-08-17

* [FEATURE] Add `modal`
* [FEATURE] Add `panel_row`
* [FEATURE] Add `panel`
* [FEATURE] Add `glyphicon`
Expand Down
76 changes: 75 additions & 1 deletion README.md
Expand Up @@ -46,7 +46,7 @@ How to install

Bh is meant to be included in Rails apps by adding this line to the Gemfile:

gem 'bh', '~> 0.0.3'
gem 'bh', '~> 0.0.4'

Since the gem follows [Semantic Versioning](http://semver.org),
indicating the full version in your Gemfile (~> *major*.*minor*.*patch*)
Expand Down Expand Up @@ -417,6 +417,80 @@ will generate the HTML to render a row of three panels with title and HTML body:

![panel-row-complex](https://cloud.githubusercontent.com/assets/7408595/3942061/489d1bc4-2552-11e4-9b00-d724b7c2c908.png)

ModalHelper
===========

To include [Boostrap modals](http://getbootstrap.com/javascript/#modals)
in your Rails views, you can use the
[modal](http://rubydoc.info/github/Fullscreen/bh/master/Bh/ModalHelper) helper.
Here are some examples.

Basic modal
-----------

```erb
<%= modal title: 'Terms of service', body: 'Do what you want!' %>
```

will generate the HTML to render a button that toggles a model when clicked:

```html
<button class="btn btn-default" data-toggle="modal" data-target="#modal-8684506463">
Terms of service
</button>
<div class="modal fade" id="modal-8684506463" tabindex="-1" role="dialog" aria-labelledby="label-modal-8684506463" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="label-modal-8684506463">Terms of service</h4>
</div>
<div class="modal-body">Do what you want!</div>
</div>
</div>
</div>
```

![modal-basic](https://cloud.githubusercontent.com/assets/7408595/3943921/b471d3c2-25d8-11e4-9b40-d8bab38ba572.png)

Complex modal
-------------

```erb
<%= modal title: 'Terms of service', size: :small, button: {caption: 'Continue', size: :large, context: :info} do %>
Please accept the Terms of service.
<div class="modal-footer"><button type="button" class="btn btn-primary">Accept</button></div>
<% end %>
```

will generate the HTML to render a large, "info" button (blue background) with
the caption "Continue" that toggles a small modal with a title and HTML content:

```html
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal-8022670096">
Continue
</button>
<div class="modal fade in" id="modal-8022670096" tabindex="-1" role="dialog" aria-labelledby="label-modal-8022670096" aria-hidden="false" style="display: block;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="label-modal-8022670096">Terms of service</h4>
</div>
Please accept the Terms of service.
<div class="modal-footer"><button type="button" class="btn btn-primary">Accept</button></div>
</div>
</div>
</div>
```

![modal-complex](https://cloud.githubusercontent.com/assets/7408595/3943922/b47620a8-25d8-11e4-9e0c-803d8a104bff.png)


How to release new versions
===========================

Expand Down
10 changes: 5 additions & 5 deletions lib/bh/helpers/alert_helper.rb
Expand Up @@ -26,11 +26,11 @@ module AlertHelper
# @param [String] message_or_options_with_block the message to display in
# the alert.
# @param [Hash] options the options for the alert box.
# @option options [Boolean] :dismissible whether to display an '×' to the
# right of the alert than can be clicked to dismiss the alert.
# @option options [#to_s] :context the contextual alternative to apply to
# the alert depending on its importance. Can be :success, :info,
# :warning or :danger. Defaults to :info.
# @option options [Boolean] :dismissible (false) whether to display an '×'
# to the right of the alert than can be clicked to dismiss the alert.
# @option options [#to_s] :context (:info) the contextual alternative to
# apply to the alert depending on its importance. Can be :success, :info,
# :warning or :danger.
# @option options [#to_s] :priority if the alert box is used to show a
# Rails flash message, the priority of the message. Can be :alert
# or :notice.
Expand Down
93 changes: 93 additions & 0 deletions lib/bh/helpers/modal_helper.rb
@@ -0,0 +1,93 @@
require 'action_view'

module Bh
# Provides methods to include modals.
# @see http://getbootstrap.com/javascript/#modals
module ModalHelper
include ActionView::Helpers, ActionView::Context


# Returns an HTML block tag that follows the Bootstrap documentation
# on how to display *modals*.
#
# The content of the modal can either be passed as the first parameter (in
# which case, the options are the second parameter), or as a block (in
# which case, the options are the first paramter).
# @example An modal with plain-text content passed as the first parameter.
# modal 'Your profile was updated!', context: :info, title: 'Profile'
# @example A panel with HTML content passed as a block.
# modal context: :info, title: 'Profile' do
# content_tag :div, "Your profile was updated!", class: 'modal-footer'
# end
#
# @return [String] an HTML block tag for a panel.
# @param [String] content_or_options_with_block the content to display in
# the panel.
# @param [Hash] options the display options for the panel.
# @option options [#to_s] :title ('Modal') the title to display inside the modal.
# @option options [#to_s] :body if present, the panel will include the
# provided text wrapped in a 'modal-body' block, for proper padding
# @option options [#to_s] :size the size of the modal.
# @option options [Hash] :button the options for the "toggle" button.
# * :caption (#to_s) ('Modal') the caption for the "toggle" button.
# * :context (#to_s) (:default) the context for the "toggle" button,
# which determines the button color
# * :size (#to_s) the size of the "toggle" button.
# @see http://getbootstrap.com/javascript/#modals
def modal(content_or_options_with_block = nil, options = nil, &block)
if block_given?
modal_string content_or_options_with_block, &block
elsif content_or_options_with_block.is_a?(Hash) && options.nil?
modal_string content_or_options_with_block, &Proc.new { nil }
else
modal_string options, &Proc.new { content_or_options_with_block }
end
end

private

def modal_string(options = nil, &block)
options ||= {}
options[:id] ||= "modal-#{rand 10**10}"
options[:title] ||= 'Modal'
options[:body] = modal_body options[:body]
options[:dialog_class] ||= dialog_class options[:size]
options[:button] ||= {}
options[:button][:caption] ||= options[:title]
options[:button][:class] ||= button_class options[:button]
render layout: 'bh/modal', locals: options, &block
end

def button_class(options = {})
context = case options[:context].to_s
when 'primary' then :primary
when 'success' then :success
when 'info' then :info
when 'warning' then :warning
when 'danger' then :danger
when 'link' then :link
else 'default'
end

size = case options[:size].to_s
when 'lg', 'large' then 'btn-lg'
when 'sm', 'small' then 'btn-sm'
when 'xs', 'extra_small' then 'btn-xs'
end

['btn', "btn-#{context}", size].compact.join ' '
end

def dialog_class(size = nil)
size_class = case size.to_s
when 'lg', 'large' then 'modal-lg'
when 'sm', 'small' then 'modal-sm'
end
['modal-dialog', size_class].compact.join ' '
end

def modal_body(body = nil)
content_tag :div, body, class: 'modal-body' if body
end
end
end
6 changes: 3 additions & 3 deletions lib/bh/helpers/panel_helper.rb
Expand Up @@ -25,9 +25,9 @@ module PanelHelper
# @param [String] content_or_options_with_block the content to display in
# the panel.
# @param [Hash] options the display options for the panel.
# @option options [#to_s] :context the contextual alternative to apply to
# the panel depending on its importance. Can be :default, :primary,
# :success, :info, :warning or :danger. Defaults to :default.
# @option options [#to_s] :context (:default) the contextual alternative to
# apply to the panel depending on its importance. Can be :default,
# :primary, :success, :info, :warning or :danger.
# @option options [#to_s] :body if present, the panel will include the
# provided text wrapped in a 'panel-body' block, for proper padding
# @see http://getbootstrap.com/components/#panels-basic
Expand Down
7 changes: 7 additions & 0 deletions lib/bh/railtie.rb
@@ -1,6 +1,7 @@
require 'bh/helpers/alert_helper'
require 'bh/helpers/cdn_helper'
require 'bh/helpers/glyphicon_helper'
require 'bh/helpers/modal_helper'
require 'bh/helpers/panel_helper'
require 'bh/helpers/panel_row_helper'
require 'bh/helpers/url_helper'
Expand All @@ -11,9 +12,15 @@ class Railtie < Rails::Railtie
ActionView::Base.send :include, AlertHelper
ActionView::Base.send :include, CdnHelper
ActionView::Base.send :include, GlyphiconHelper
ActionView::Base.send :include, ModalHelper
ActionView::Base.send :include, PanelHelper
ActionView::Base.send :include, PanelRowHelper
ActionView::Base.send :include, UrlHelper
end

initializer 'bh.add_views' do |app|
views_path = File.dirname(__FILE__) + "/views"
ActionController::Base.prepend_view_path views_path
end
end
end
2 changes: 1 addition & 1 deletion lib/bh/version.rb
@@ -1,3 +1,3 @@
module Bh
VERSION = '0.0.3'
VERSION = '0.0.4'
end
17 changes: 17 additions & 0 deletions lib/bh/views/bh/_modal.html.erb
@@ -0,0 +1,17 @@
<button class="<%= button[:class] %>" data-toggle="modal" data-target="#<%= id %>">
<%= button[:caption] %>
</button>
<div class="modal fade" id="<%= id %>" tabindex="-1" role="dialog" aria-labelledby="label-<%= id %>" aria-hidden="true">
<div class="<%= dialog_class %>">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="label-<%= id %>"><%= title %></h4>
</div>
<%= body %>
<%= yield %>
</div>
</div>
</div>

0 comments on commit 2e70a4a

Please sign in to comment.