Module: NfgUi::Bootstrap::Utilities::Modalable

Included in:
Components::Button, Components::Elements::DropdownItem, Components::Elements::NavLink
Defined in:
lib/nfg_ui/bootstrap/utilities/modalable.rb

Overview

Allows a component to utilize the :modal option Which then formats the component’s HTML data attributes to connect to the desired modal. Note the :modal option requires the ‘#’ preceding the CSS ID per bootstrap docs

Correct: { modal: ‘#the_modal_id’ } <– note the ‘#’ Incorrect: { modal: ‘the_modal_id’ }

USAGE: When to use the :modal option on a component: The :modal option should only be used when activating a modal that has been embedded on the HTML page and is not being injected from a remote ajax request via remote: true.

INVALID USAGE: Do not set a modal option on a remote link in Rails Setting a component to remote: true in addition to suppling a modal will result in an ArgumentError. This is due to poor / buggy behavior resulting from remotely re-rendering a modal that is already on the page

(basically: there’s a high likelihood that the targeted modal will be shown / animated twice)

Like when remote: true, components that contain tooltips Will also raise an ArgumentError due to the competing data-toggles and the subsequent silent failure of the tooltip.

EXCEPTIONS: Exception for a modalable component with a tooltip: Disabled components may use a modal and a tooltip in its options (thanks to how disabled components are wrapped with an html element & the tooltip is applied to the wrapping element, not the component itself)

Valid example:

ui.bootstrap :button, disabled: true, tooltip: ‘The tooltip’, modal: ‘#the_modal’, …

Extra care is taken with the modal and competing options given its typical wide-ranging use in rails applications.

Instance Method Summary collapse

Instance Method Details

#data ⇒ Object 



45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
# File 'lib/nfg_ui/bootstrap/utilities/modalable.rb', line 45

def data
  # Raise an error when a component utilizes 'illegal' options (which are options that
  # result in silent failures and/or directly compete with a
  # modalable component's necessary HTML)
  if component_includes_problematic_options_for_modal?
    raise ArgumentError.new(I18n.t("nfg_ui.errors.argument_error.modalable.#{error_message_i18n_path}",
                             modal: modal,
                             class_name: self.class.name,
                             options: options,
                             file: __FILE__,
                             method: __method__))
  end

  # Overwrites data-toggle and data-target
  # forcing the modal to take precedence.
  # If a tooltip is present in the options, an ArgumentError is raised
  modal ? super.merge!(toggle: 'modal', target: options[:modal]) : super
end

#modal ⇒ Object 



64
65
66
 
# File 'lib/nfg_ui/bootstrap/utilities/modalable.rb', line 64

def modal
  options.fetch(:modal, nil)
end