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

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) ⇒ AvatarComponent

Initializes the avatar component with the given properties.

Parameters:

  • props (Hash) —

    The properties to customize the avatar.

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 content_tag(:img, "", @props) unless @src.nil? || @placeholder_initials

  content_tag :div, @props do
    if @placeholder_initials
      content_tag :span, @placeholder_initials, class: styles[:initials][:text]
    else
      placeholder_icon
    end
  end
end

#call ⇒ Object 



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

def call
  return avatar_itself unless @status

  content_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
103
 
# File 'app/components/fluxbit/avatar_component.rb', line 94

def dot_indicator
  content_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"
  }

  content_tag(:svg, svg_attributes) do
    content_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