Module: NdrUi::BootstrapHelper

Includes:
NdrUi::Bootstrap::BreadcrumbsHelper, NdrUi::Bootstrap::DropdownHelper, NdrUi::Bootstrap::ModalHelper, NdrUi::Bootstrap::PanelHelper
Defined in:
app/helpers/ndr_ui/bootstrap_helper.rb

Overview

Provides helper methods for the Twitter Bootstrap framework

Constant Summary

Constants included from NdrUi::Bootstrap::PanelHelper

NdrUi::Bootstrap::PanelHelper::PANEL_SUBCLASSES

Constants included from NdrUi::Bootstrap::ModalHelper

NdrUi::Bootstrap::ModalHelper::MODAL_SIZES

Instance Method Summary collapse

Methods included from NdrUi::Bootstrap::PanelHelper

#bootstrap_accordion_tag, #bootstrap_panel_body_tag, #bootstrap_panel_tag

Methods included from NdrUi::Bootstrap::ModalHelper

#bootstrap_modal_body_tag, #bootstrap_modal_box, #bootstrap_modal_button, #bootstrap_modal_dialog_tag, #bootstrap_modal_footer_tag, #bootstrap_modal_header_tag, #bootstrap_modal_save_buttons

Methods included from NdrUi::Bootstrap::DropdownHelper

#bootstrap_list_divider_tag, #bootstrap_list_header_tag, #bootstrap_list_link_to

Methods included from NdrUi::Bootstrap::BreadcrumbsHelper

#bootstrap_breadcrumb, #bootstrap_breadcrumbs

Instance Method Details

#bootstrap_abbreviation_tag(name, abbreviation) ⇒ Object

Creates a Boostrap abbreviation tag (note: the acronym tag is not valid HTML5). Also adds the “initialism” class if the abbreviation is all upper case.

Signatures

bootstrap_abbreviation_tag(name, abbreviation)

Examples

<%= bootstrap_abbreviation_tag('NPI', 'Nottingham Prognostic Index') %>
# => <abbr class="initialism" title="Nottingham Prognostic Index">NPI</abbr>



213
214
215
216
217
218
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 213

def bootstrap_abbreviation_tag(name, abbreviation)
  content_tag(:abbr,
              name,
              title: abbreviation,
              class: (name == name.upcase ? 'initialism' : nil))
end

#bootstrap_alert_tag(*args, &block) ⇒ Object

Creates an alert box of the given type. It supports the following alert box types :alert, :danger, :info and :success.

Signatures

bootstrap_alert_tag(type, message, options = {})
bootstrap_alert_tag(type, options = {}) do
  # message
end

Options

  • dismissible: true - This will set whether or not a close X button will appear, allowing the alert box to be dismissed by the user. This is only supported with the Bootstrap layout and defaults to true. link to open in a popup window. By passing true, a default browser window will be opened with the URL. You can also specify an array of options that are passed-thru to JavaScripts window.open method.

  • All remaining options are treated as html attributes for the containing div tag. The class attribute is overwritten by the helper and so will be ignored if specified.

Examples

<%= bootstrap_alert_tag(:info, 'Check it out!!') %>
# => <div class="alert alert-info"><a href="#" class="close"
data-dismiss="alert">&times;</a>Check it out!!</div>

You can use a block as well if your alert message is hard to fit into the message parameter. ERb example:

<%= bootstrap_alert_tag(:info) do %>
  Check it out!!
<% end %>
# => <div class="alert alert-info"><button type="button" class="close"
data-dismiss="alert">&times;</button>Check it out!!</div>

Ids for css and/or javascript are easy to produce:

<%= bootstrap_alert_tag(:info, 'Check it out!!', dismissible: false, id: "news") %>
# => <div class="alert alert-info" id="news">Check it out!!</div>



49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 49

def bootstrap_alert_tag(*args, &block)
  type = args[0]
  if block_given?
    message = capture(&block)
    options = args[1] || {}
    return bootstrap_alert_tag(type, message, options)
  else
    message = args[1] || ''
    options = args[2] || {}
    options.stringify_keys!

    classes = ['alert']
    classes << "alert-#{type}" if type && type != :alert
    unless options.include?('dismissible') && !options['dismissible']
      classes << 'alert-dismissible'
      options['dismissible'] = true
    end
    options['class'] = classes.join(' ')

    message = button_tag('&times;'.html_safe,
                         type: 'button',
                         class: 'close',
                         "data-dismiss": 'alert') + message if options.delete('dismissible')
    content_tag(:div, message, options)
  end
end

#bootstrap_badge_tag(_type, count) ⇒ Object

Creates an bootstrap badge of the given type. Bootstrap 3 does not support any types.

Signatures

bootstrap_badge_tag(type, count)

Examples

<%= bootstrap_badge_tag(:success, 'Check it out!!') %>
# => <span class="badge">Check it out!!</span> <%# Bootstrap 3 %>

TODO: In bootstrap 4, these will likely need to be implemented using “pill labels”,

which will once again allow the `type` argument to colour them.



108
109
110
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 108

def bootstrap_badge_tag(_type, count)
  content_tag(:span, count, class: 'badge')
end

#bootstrap_caret_tag ⇒ Object

Creates a simple bootstrap navigation caret.

Signatures

bootstrap_caret_tag

Examples

<%= bootstrap_caret_tag %>
# => <b class="caret"></b>



122
123
124
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 122

def bootstrap_caret_tag
  content_tag(:b, '', class: 'caret')
end

#bootstrap_dropdown_toggle_tag(body) ⇒ Object

Creates a simple bootstrap navigation dropdown.

Signatures

bootstrap_dropdown_toggle_tag(body)

Examples

<%= bootstrap_dropdown_toggle_tag('Check it out!!') %>
# => <a href="#" class="dropdown-toggle" data-toggle="dropdown">Check it
out!! <b class="caret"></b></a>



137
138
139
140
141
142
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 137

def bootstrap_dropdown_toggle_tag(body)
  link_to(ERB::Util.html_escape(body) + ' '.html_safe + bootstrap_caret_tag,
          '#',
          class: 'dropdown-toggle',
          'data-toggle': 'dropdown')
end

#bootstrap_form_for(record_or_name_or_array, *args, &proc) ⇒ Object

Identical signature to form_for, but uses NdrUi::BootstrapBuilder. See ActionView::Helpers::FormHelper for details



222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 222

def bootstrap_form_for(record_or_name_or_array, *args, &proc)
  options = args.extract_options!
  options[:html] ||= {}

  # :horizontal
  if horizontal = options.delete(:horizontal)
    # set the form html class for horizontal bootstrap forms
    options[:html][:class] ||= ''
    classes = (options[:html][:class].split(' ') << 'form-horizontal').uniq.join(' ')
    options[:html][:class] = classes
  end

  # stimuls controller, default `form_controller`
  options[:html][:'data-controller'] ||= ''
  controllers = (options[:html][:'data-controller'].split(' ') << 'form').uniq.join(' ')
  options[:html][:'data-controller'] = controllers

  # We switch autocomplete off by default
  raise 'autocomplete should be defined an html option' if options[:autocomplete]
  options[:html][:autocomplete] ||= 'off'

  form_for(record_or_name_or_array, *(args << options.merge(builder: NdrUi::BootstrapBuilder))) do |form|
    # Put the form builder into horizontal mode (if necessary)
    form.horizontal_mode = horizontal if horizontal

    # yield to the provided form block
    yield(form)
  end
end

#bootstrap_form_with(**options, &block) ⇒ Object

Identical signature to form_with, but uses NdrUi::BootstrapBuilder. See ActionView::Helpers::FormHelper for details



254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 254

def bootstrap_form_with(**options, &block)
  options[:html] ||= {}
  options[:builder] = NdrUi::BootstrapBuilder
  horizontal = options.delete(:horizontal)

  # :horizontal
  if horizontal
    # set the form html class for horizontal bootstrap forms
    options[:html][:class] ||= ''
    classes = (options[:html][:class].split(' ') << 'form-horizontal').uniq.join(' ')
    options[:html][:class] = classes
  end

  # stimuls controller, default `form_controller`
  options[:html][:'data-controller'] ||= ''
  controllers = (options[:html][:'data-controller'].split(' ') << 'form').uniq.join(' ')
  options[:html][:'data-controller'] = controllers

  # We switch autocomplete off by default
  raise 'autocomplete should be defined an html option' if options[:autocomplete]
  options[:html][:autocomplete] ||= 'off'

  form_with(**options) do |form|
    # Put the form builder into horizontal mode (if necessary)
    form.horizontal_mode = horizontal if horizontal

    # yield to the provided form block
    block.call(form)
  end
end

#bootstrap_horizontal_form_group(label = nil, ratio = [2, 10], &block) ⇒ Object

Supply optional label. Use options for grid split/offset. The default is [2, 10], where 2 is label columns / offset, and 10 is content width. If the label is omitted, the content is offset by the same number of columns instead.

Examples

bootstrap_horizontal_form_group("The Label", [3, 9]) { 'This is the content' }
# =>
  <div class="form-group">
    <label class="col-sm-3 control-label">The Label</label>
    <div class="col-sm-9">This is the content</div>
  </div>



379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 379

def bootstrap_horizontal_form_group(label = nil, ratio = [2, 10], &block)
  label, ratio = nil, label if label.is_a?(Array)

  l, r   = ratio[0..1].map(&:to_i)
  offset = label.nil? ? " col-sm-offset-#{l}" : ''

  # Main content:
  content = content_tag(:div, class: "col-sm-#{r}" + offset, &block)
  # Prepend optional label:
  unless label.nil?
    content = content_tag(:label, label, class: "col-sm-#{l} control-label") + content
  end

  content_tag(:div, content, class: 'form-group')
end

#bootstrap_icon_spinner(type = :default) ⇒ Object

Creates a simple bootstrap icon spinner.

Signatures

(type)

Examples

<%= bootstrap_icon_spinner(:danger) %>

> <img style=“width:12px;padding-bottom:2px;” src=“/assets/indicator-danger.gif”>



167
168
169
170
171
172
173
174
175
176
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 167

def (type = :default)
   = case type
            when :danger
              'indicator-danger.gif'
            else
              'indicator-white.gif'
            end

  image_tag(, style: 'width:12px;padding-bottom:2px;', alt: )
end

#bootstrap_icon_tag(type) ⇒ Object

Creates a simple bootstrap icon.

Signatures

bootstrap_icon_tag(type)

Examples

<%= bootstrap_icon_tag(:search) %>
# => <span class="glyphicon glyphicon-search"></span>



154
155
156
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 154

def bootstrap_icon_tag(type)
  content_tag(:span, '', class: "glyphicon glyphicon-#{type}")
end

#bootstrap_label_tag(type, message) ⇒ Object

Creates an bootstrap label of the given type. It supports the following types :default, :success, :warning, :danger, :info and :primary.

Signatures

bootstrap_label_tag(type, message)

Examples

<%= bootstrap_label_tag(:info, 'Check it out!!') %>
# => <span class="label label-info">Check it out!!</span>



89
90
91
92
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 89

def bootstrap_label_tag(type, message)
  classes = ['label', "label-#{type}"]
  content_tag(:span, message, class: classes.join(' '))
end

#bootstrap_list_badge_and_link_to(type, count, name, path) ⇒ Object

Convenience wrapper for a bootstrap_list_link_to with badge



195
196
197
198
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 195

def bootstrap_list_badge_and_link_to(type, count, name, path)
  html = content_tag(:div, bootstrap_badge_tag(type, count), class: 'pull-right') + name
  bootstrap_list_link_to(html, path)
end

#bootstrap_progressbar_tag(*args) ⇒ Object

Creates a Boostrap progress bar.

Signatures

bootstrap_progressbar_tag(options)

Examples

<%= bootstrap_progressbar_tag(40) %>
# => <div class="progress progress-striped active" title="40%"><div class="progress-bar"
style="width:40%"></div></div>

<%= bootstrap_progressbar_tag(40), type: :danger %>
# => <div class="progress progress-striped active" title="40%"><div
class="progress-bar progress-bar-danger" style="width:40%"></div></div>

Browser compatibility

Bootstrap Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox. Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.



341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 341

def bootstrap_progressbar_tag(*args)
  percentage = args[0].to_i
  options = args[1] || {}
  options.stringify_keys!
  options['title'] ||= "#{percentage}%"

  classes = ['progress']
  classes << options.delete('class')
  classes << 'progress-striped'

  type = options.delete('type').to_s
  type = " progress-bar-#{type}" unless type.blank?

  # Animate the progress bar unless something has broken:
  classes << 'active' unless type == 'danger'

  inner = content_tag(:div, '', class: "progress-bar#{type}", style: "width:#{percentage}%")

  options['class'] = classes.compact.join(' ')
  content_tag(:div, inner, options)
end

#bootstrap_tab_nav_tag(title, linkto, active = false) ⇒ Object

Creates a simple bootstrap tab navigation.

Signatures

bootstrap_tab_nav_tag(title, linkto, active = false)

Examples

<%= bootstrap_tab_nav_tag("Fruits", "#fruits", true) %>
# => <li class="active"><a href="#fruits" data-toggle="tab">Fruits</a></li>



188
189
190
191
192
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 188

def bootstrap_tab_nav_tag(title, linkto, active = false)
  content_tag('li',
              link_to(title, linkto, "data-toggle": 'tab'),
              active ? { class: 'active' } : {})
end

#button_control_group(*args, &block) ⇒ Object

Creates a Boostrap control group for button.

Signatures

button_control_group(controls, options = {})
button_control_group(options = {}) do
  # controls
end

Examples

<%= button_control_group("Apples", class: "some_class") %>
# =>
<div class="form-group">
  <div class="col-sm-9 col-sm-offset-3">
    <div class="some_class">Apples</div>
  </div>
</div>



305
306
307
308
309
310
311
312
313
314
315
316
317
318
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 305

def button_control_group(*args, &block)
  return button_control_group(capture(&block), *args) if block_given?
  options = args.extract_options!
  options.stringify_keys!

  if options.delete('horizontal') == false
    options['class'] = ('form-group' + ' ' + options['class'].to_s).strip
    content_tag(:div, args.first, options)
  else
    bootstrap_horizontal_form_group nil, [3, 9] do
      options.blank? ? args.first : content_tag(:div, args.first, options)
    end
  end
end

#button_group(&block) ⇒ Object

Creates a Boostrap button group.

Signatures

button_group(&block)

Examples

<%= button_group { link_to('Hello World', '#') } %>
# => <div class="btn-group"><a href="#">Hello World</a></div>



444
445
446
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 444

def button_group(&block)
  content_tag(:div, capture(&block), class: 'btn-group')
end

#button_toolbar(&block) ⇒ Object

Creates a Boostrap button toolbar.

Signatures

button_toolbar(&block)

Examples

<%= button_toolbar { link_to('Hello World', '#') } %>
# => <div class="btn-toolbar"><a href="#">Hello World</a></div>



429
430
431
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 429

def button_toolbar(&block)
  content_tag(:div, capture(&block), class: 'btn-toolbar')
end

#delete_link(path, options = {}) ⇒ Object

Creates a Boostrap ‘Delete’ link.

Signatures

delete_link(path, options = {})

Examples

<%= delete_link('#') %>
# => <a title="Delete" class="btn btn-xs btn-danger" rel="nofollow" href="#"
        data-method="delete" data-confirm="Are you sure?">
       <span class="glyphicon glyphicon-trash icon-white"></span>
     </a>'



531
532
533
534
535
536
537
538
539
540
541
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 531

def delete_link(path, options = {})
  return unless options.delete(:skip_authorization) || ndr_can?(:delete, path)

  defaults = {
    icon: 'trash icon-white', title: 'Delete', path: path,
    class: 'btn btn-xs btn-danger', method: :delete,
    'data-confirm': I18n.translate(:'ndr_ui.confirm_delete', locale: options[:locale])
  }

  link_to_with_icon(defaults.merge(options))
end

#description_list_name_value_pair(name, value, blank_value_placeholder = nil) ⇒ Object

This helper produces a pair of HTML dt, dd tags to display name and value pairs. If a blank_value_placeholder is not defined then the pair are not shown if the value is blank. Otherwise the placeholder is shown in the text-muted style.

Signature

description_list_name_value_pair(name, value, blank_value_placeholder = nil)

Examples

<%= description_list_name_value_pair("Pear", "Value") %>
# => <dt>Pear</dt><dd>Value</dd>

<%= description_list_name_value_pair("Pear", nil, "[none]") %>
# => <dt>Pear</dt><dd><span class="text-muted">[none]</span></dd>



411
412
413
414
415
416
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 411

def description_list_name_value_pair(name, value, blank_value_placeholder = nil)
  # SECURE: TPG 2013-08-07: The output is sanitised by content_tag
  return unless value.present? || blank_value_placeholder.present?
  content_tag(:dt, name) +
    content_tag(:dd, value || content_tag(:span, blank_value_placeholder, class: 'text-muted'))
end

#details_link(path, options = {}) ⇒ Object

Creates a Boostrap ‘Details’ link.

Signatures

details_link(path, options = {})

Examples

<%= details_link('#') %>
# => <a title="Details" class="btn btn-default btn-xs" href="#">
       <span class="glyphicon glyphicon-share-alt"></span>
     </a>



491
492
493
494
495
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 491

def details_link(path, options = {})
  return unless options.delete(:skip_authorization) || ndr_can?(:read, path)

  link_to_with_icon({ icon: 'share-alt', title: 'Details', path: path }.merge(options))
end

#edit_link(path, options = {}) ⇒ Object

Creates a Boostrap ‘Edit’ link.

Signatures

edit_link(path, options = {})

Examples

<%= edit_link(#) %>
# => <a title="Edit" class="btn btn-default btn-xs" href="#">
       <span class="glyphicon glyphicon-pencil"></span>
     </a>



510
511
512
513
514
515
516
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 510

def edit_link(path, options = {})
  return unless options.delete(:skip_authorization) || ndr_can?(:edit, path)

  path = edit_polymorphic_path(path) if path.is_a?(ActiveRecord::Base)

  link_to_with_icon({ icon: 'pencil', title: 'Edit', path: path }.merge(options))
end

#inline_controls_for(object, options = {}) ⇒ Object

Creates a Boostrap inline menu, with show/edit/delete links. If possibly, conditionally checks permissions

Signatures

inline_controls_for(object, options = {})

Examples

# creates: [ [delete] ] [ [edit] [details] ]
<%= inline_controls_for(@post) %>



555
556
557
558
559
560
561
562
563
564
565
566
567
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 555

def inline_controls_for(object, options = {})
  groups = []

  groups << delete_link(object)

  main_group = [edit_link(object, options), details_link(object, options)]
  groups << safe_join(main_group) if main_group.any?

  groups.compact!
  groups.map! { |group| button_group { group } }

  button_toolbar { safe_join(groups) } if groups.any?
end

#link_to_with_icon(options = {}) ⇒ Object

Creates a Boostrap link with icon.

Signatures

link_to_with_icon(options)

Examples

<%= link_to_with_icon( { icon: 'trash icon-white', title: 'Delete', path: '#' } ) %>
# => <a title="Delete" class="btn btn-default btn-xs" href="#">
       <span class="glyphicon glyphicon-trash icon-white"></span>
     </a>'



581
582
583
584
585
586
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 581

def link_to_with_icon(options = {})
  options[:class] ||= 'btn btn-default btn-xs'
  icon = bootstrap_icon_tag(options.delete(:icon))
  content = options.delete(:text) ? icon + ' ' + options[:title] : icon
  link_to content, options.delete(:path), options
end

#new_link(path, options = {}) ⇒ Object

Creates a Boostrap ‘New’ link.

Signatures

new_link(path, options = {})

Examples

<%= new_link('#') %>
# => <a title="New" class="btn btn-primary btn-xs" href="#">
       <span class="glyphicon glyphicon-plus-sign"></span>
     </a>

<%= new_link(Post.new) %>
# => <a title="New" class="btn btn-primary btn-xs" href="/posts/new">
       <span class="glyphicon glyphicon-plus-sign"></span>
     </a>



466
467
468
469
470
471
472
473
474
475
476
 
# File 'app/helpers/ndr_ui/bootstrap_helper.rb', line 466

def new_link(path, options = {})
  return unless options.delete(:skip_authorization) || ndr_can?(:new, path)

  path = new_polymorphic_path(path) if can_generate_polymorphic_path?(path)

  defaults = {
    icon: 'plus-sign', title: 'New', path: path, class: 'btn btn-primary btn-xs'
  }

  link_to_with_icon(defaults.merge(options))
end