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