Class: Fluxbit::AvatarComponent

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

Overview

The Fluxbit::AvatarComponent is a component for rendering customizable avatars. It extends Fluxbit::Component and provides options for configuring the avatar’s appearance and behavior. You can control the avatar’s color, placeholder initials, status, size, and other attributes. The avatar can display an image or a placeholder icon if no image is provided.

Direct Known Subclasses

GravatarComponent

Instance Method Summary collapse

Methods inherited from Component

#add, #add_popover_or_tooltip, #anyicon, #element_name, #fx_id, #icon, #options, #popover?, #random_id, #remove_class, #remove_class_from_props, #render_popover_or_tooltip, #target, #tooltip?

Methods included from IconHelpers

#chevron_double_left, #chevron_double_right, #chevron_down, #chevron_left, #chevron_right, #chevron_up, #close_icon, #ellipsis_horizontal, #eye_icon, #eye_slash_icon, #plus_icon

Constructor Details

#initialize(**props) ⇒ AvatarComponent

Initializes the avatar component with the given properties.

Options Hash (**props):

  • :color (String) —

    The color of the avatar border.

  • :placeholder_initials (String) —

    The initials to display as a placeholder.

  • :status (Symbol) —

    The status of the avatar (:online, :busy, :offline, :away).

  • :status_position (String) —

    The position of the status indicator.

  • :rounded (Boolean) —

    Whether the avatar should have rounded corners.

  • :size (Symbol, String) —

    The size of the avatar.

  • :src (String) —

    The source URL of the avatar image.

  • :remove_class (String) —

    Classes to be removed from the default avatar class list.

  • **props (Hash) —

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



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

def initialize(**props)
  super
  @props = props
  @color = @props.delete(:color) || @@color
  @placeholder_initials = @props.delete(:placeholder_initials) || @@placeholder_initials
  @status = @props[:status].nil? ? @@status : @props.delete(:status) # online, busy, offline, away
  @status_position = (@props.delete(:status_position) || @@status_position).to_s.split("_").map(&:to_sym)
  @rounded = @props[:rounded].nil? ? @@rounded : @props.delete(:rounded)
  @size = @props.delete(:size) || @@size
  @src = @props[:src]
  declare_color
  declare_classes
  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
end

Instance Method Details

#avatar_itself ⇒ Object 



57
58
59
60
61
62
63
64
65
66
67
 
# File 'app/components/fluxbit/avatar_component.rb', line 57

def avatar_itself
  return tag.img(**@props) unless @src.nil? || @placeholder_initials

  tag.div(**@props) do
    if @placeholder_initials
      tag.span(@placeholder_initials, class: styles[:initials][:text])
    else
      placeholder_icon
    end
  end
end

#call ⇒ Object 



104
105
106
107
108
109
110
111
 
# File 'app/components/fluxbit/avatar_component.rb', line 104

def call
  return avatar_itself unless @status

  tag.div(class: "relative") do
    concat avatar_itself
    concat dot_indicator
  end
end

#declare_classes ⇒ Object 



46
47
48
49
50
51
52
53
54
55
 
# File 'app/components/fluxbit/avatar_component.rb', line 46

def declare_classes
  add to: @props,
      first_element: true,
      class: [
        (!@placeholder_initials && @src.nil? ? styles[:placeholder_icon][:base] : ""),
        @placeholder_initials ? styles[:initials][:base] : "",
        styles[@rounded ? :rounded : :not_rounded][:base],
        (@size.in?(styles[:size].keys) ? styles[:size][@size] : styles[:size][:md])
      ].join(" ")
end

#declare_color ⇒ Object 



39
40
41
42
43
44
 
# File 'app/components/fluxbit/avatar_component.rb', line 39

def declare_color
  return unless @color.present?
  add to: @props,
      first_element: true,
      class: "#{styles[:bordered]} #{@color.in?(styles[:color].keys) ? styles[:color][@color] : styles[:color][:info]}"
end

#dot_indicator ⇒ Object 



94
95
96
97
98
99
100
101
102
 
# File 'app/components/fluxbit/avatar_component.rb', line 94

def dot_indicator
  tag.span("", class: [
    styles[:status][:base],
    styles[:status][:options][@status],
    styles[@rounded ? :rounded : :not_rounded][:status_position][@status_position[0]],
                styles[@rounded ? :rounded : :not_rounded][:status_position][@status_position[1]][@size]
              ].join(" ")
  )
end

#placeholder_icon ⇒ Object 



69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
# File 'app/components/fluxbit/avatar_component.rb', line 69

def placeholder_icon
  svg_attributes = {
    class: [ "absolute", "text-gray-400", "-left-1", placeholder_size ].join(" "),
    fill: "currentColor",
    viewBox: "0 0 20 20",
    xmlns: "http://www.w3.org/2000/svg"
  }

  path_attributes = {
    "fill-rule": "evenodd",
    d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
    "clip-rule": "evenodd"
  }

  tag.svg(**svg_attributes) do
    tag.path(**path_attributes)
  end
end

#placeholder_size ⇒ Object 



88
89
90
91
92
 
# File 'app/components/fluxbit/avatar_component.rb', line 88

def placeholder_size
  return styles[:placeholder_icon][:size][@size] if @size.in?(styles[:placeholder_icon][:size].keys)

  styles[:size][:md]
end