Class: Fluxbit::PopoverComponent

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

Overview

The ‘Fluxbit::PopoverComponent` is a component for rendering customizable popovers. It extends `Fluxbit::Component` and provides options for configuring the popover’s appearance, behavior, and content areas. You can control the popover’s trigger, placement, and other interactive elements. The popover is divided into different sections (trigger and content), 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) ⇒ PopoverComponent

Initializes the popover component with the given properties.

Parameters:

  • props (Hash) —

    The properties to customize the popover.

Options Hash (**props):

  • :title (String) — default: nil —

    The title text displayed in the popover.

  • :has_arrow (Boolean) — default: true —

    Determines if an arrow should be displayed on the popover.

  • :image (String) — default: nil —

    The URL of an image to be displayed in the popover.

  • :image_position (Symbol) — default: :right —

    The position of the image relative to the content (:left or :right).

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

    Additional HTML attributes for the image element.

  • :size (Symbol, String) — default: 2 —

    The size of the popover (0 to 4).

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

    Classes to be removed from the default popover class list.

  • **props (Hash) —

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



23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
# File 'app/components/fluxbit/popover_component.rb', line 23

def initialize(**props)
  super
  @props = props
  @title = @props.delete(:title)
  @has_arrow = options @props.delete(:has_arrow), default: @@has_arrow
  @image = @props.delete(:image)
  @image_position = options @props.delete(:image_position), default: @@image_position
  @image_props = options @props.delete(:image_props), default: @@image_props
  @props["data-popover"] = "data-popover"
  @props["role"] = "tooltip"

  add(class: [ styles[:base], styles[:size][@props.delete(:size) || @@size] ], to: @props)
  add(class: styles[:image_content][:image], to: @image_props)
  @image_props[:src] = @image

  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
  @image_props[:class] = remove_class(@props.delete(:remove_class) || "", @image_props[:class])
end

Instance Method Details

#call ⇒ Object 



42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
# File 'app/components/fluxbit/popover_component.rb', line 42

def call
  content_tag :div, @props do
    concat div_title unless @title.blank?
    concat (content_tag(:div, class: styles[@image.blank? ? :content : :image_base]) do
      if @image.blank?
        content
      else
        if @image_position == :left
          concat content_tag(:img, nil, @image_props)
          concat content_tag(:div, content, class: styles[:image_content][:text])
        else
          concat content_tag(:div, content, class: styles[:image_content][:text])
          concat content_tag(:img, nil, @image_props)
        end
      end
    end)
    concat popper_arrow if @has_arrow
  end
end

#div_title ⇒ Object 



66
67
68
69
70
 
# File 'app/components/fluxbit/popover_component.rb', line 66

def div_title
  content_tag :div, class: styles[:title][:div] do
    content_tag :h3, @title, class: styles[:title][:h3]
  end
end

#popper_arrow ⇒ Object 



62
63
64
 
# File 'app/components/fluxbit/popover_component.rb', line 62

def popper_arrow
  content_tag :div, "", "data-popper-arrow" => true
end