Class: Fluxbit::ModalComponent

Inherits:
Component
  • Object
show all
Includes:
Config::ModalComponent
Defined in:
app/components/fluxbit/modal_component.rb

Overview

The ‘Fluxbit::ModalComponent` is a component for rendering customizable modals. It extends `Fluxbit::Component` and provides options for configuring the modal’s appearance, behavior, and content areas. You can control the modal’s title, size, placement, backdrop behavior, and other interactive elements. The modal is divided into different sections (header, content, and footer), each of which can be styled or customized through various properties.

Constant Summary

Constants inherited from Component

Component::ComponentObj

Instance Method Summary collapse

Methods inherited from Component

#add, #add_popover_or_tooltip, #anyicon, #element_name, #fx_id, #options, #random_id, #remove_class, #render_popover_or_tooltip, #target

Constructor Details

#initialize(**props) ⇒ ModalComponent

Initializes the modal component with the given properties.

Parameters:

  • props (Hash) —

    The properties to customize the modal.

Options Hash (**props):

  • :title (String) — default: nil —

    The title text displayed in the modal header.

  • :opened (Boolean) — default: false —

    Determines if the modal is initially open (visible).

  • :close_button (Boolean) — default: true —

    Determines if a close button should be displayed in the header.

  • :flat (Boolean) — default: false —

    Applies a “flat” style (implementation-defined).

  • :size (Symbol, Integer) — default: 1 —

    The size of the modal (e.g., 0 to 9).

  • :placement (Symbol, String) — default: nil —

    The placement of the modal (e.g., :center, :top, :bottom).

  • :only_css (Boolean) — default: false —

    Determines if the modal can be closed by clicking the backdrop, using a CSS-based approach.

  • :static (Boolean) — default: false —

    If true, the modal will not close when clicking the backdrop or pressing the ESC key.

  • :remove_class (String) — default: '' —

    Classes to be removed from the default modal class list.

  • :content_props (Hash) — default: {} —

    Additional HTML attributes and classes for the content wrapper inside the modal.

  • :header_props (Hash) — default: {} —

    Additional HTML attributes and classes for the header section.

  • :footer_props (Hash) — default: {} —

    Additional HTML attributes and classes for the footer section.

  • :close_button_props (Hash) — default: {} —

    Additional HTML attributes and classes for the close button element.

  • **props (Hash) —

    Remaining options declared as HTML attributes, applied to the modal container.



31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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/components/fluxbit/modal_component.rb', line 31

def initialize(**props)
  super

  # Main properties
  @props = props
  @title = @props.delete(:title)
  @opened = options(@props.delete(:opened), default: @@opened)
  @close_button = options(@props.delete(:close_button), default: @@close_button)
  @flat = options(@props.delete(:flat), default: @@flat)
  @size = options(@props.delete(:size), default: @@size)
  @placement = options(@props.delete(:placement), default: @@placement)
  @only_css = options(@props.delete(:only_css), default: @@only_css)
  @static = options(@props.delete(:static), default: @@static)

  add(class: modal_classes, to: @props, first_element: true)
  @props["data-modal-placement"] = @placement.to_s if @placement
  @props["aria-hidden"] = !@opened
  @props["data-modal-backdrop"] = "static" if @static
  @props["onclick"] = "if(event.target === this) this.classList.add('hidden')" if @only_css && !@static
  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])

  # Content properties
  @content_props = @props.delete(:content_props) || {}
  add(class: content_classes, to: @content_props, first_element: true)
  @content_props[:class] = remove_class(@content_props.delete(:remove_class) || "", @content_props[:class])

  # Header properties
  @header_props = @props.delete(:header_props) || {}
  add(class: header_classes, to: @header_props, first_element: true)
  @header_props[:class] = remove_class(@header_props.delete(:remove_class) || "", @header_props[:class])

  # Footer properties
  @footer_props = @props.delete(:footer_props) || {}
  add(class: footer_classes, to: @footer_props, first_element: true)
  @footer_props[:class] = remove_class(@footer_props.delete(:remove_class) || "", @footer_props[:class])

  # Close button properties
  @close_button_props = @props.delete(:close_button_props) || {}
  add(class: styles[:header][:close][:base], to: @close_button_props, first_element: true)
  @close_button_props[:class] = remove_class(@close_button_props.delete(:remove_class) || "", @close_button_props[:class])
  @close_button_props[:type] = "button"
  @close_button_props["data-modal-hide"] = @props[:id]
  @close_button_props["aria-label"] = "Close"
end

Instance Method Details

#call ⇒ Object 



76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
# File 'app/components/fluxbit/modal_component.rb', line 76

def call
  content_tag(
    :div,
    **@props
  ) do
    content_tag(:div, **@content_props) do
      content_tag(:div, class: styles[:content][:inner]) do
        concat(header) if title? || @title.present? || @close_button
        concat(content_tag(:div, content, class: body_classes))
        concat(content_tag(:div, footer, **@footer_props)) if footer?
      end
    end
  end
end