Class: Fluxbit::Form::UploadImageInputComponent

Inherits:
Component
  • Object
show all
Defined in:
app/components/fluxbit/form/upload_image_input_component.rb

Instance Method Summary collapse

Constructor Details

#initialize(form: nil, field: nil, id: nil, height: :md, label: nil, helper_text: nil, helper_popover: nil, helper_popover_placement: "right", type: nil, image_path: nil, image_placeholder: nil, title: true, subtitle: true, **props) ⇒ UploadImageInputComponent

Returns a new instance of UploadImageInputComponent.



15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
# File 'app/components/fluxbit/form/upload_image_input_component.rb', line 15

def initialize(form: nil, field: nil, id: nil, height: :md, label: nil, helper_text: nil, helper_popover: nil,
               helper_popover_placement: "right", type: nil, image_path: nil, image_placeholder: nil,
               title: true, subtitle: true, **props)
  super
  @form = form
  @object = form&.object
  @field = field
  @id = id
  @title = title
  @subtitle = subtitle
  @props = props
  # @height = height.in?(styles[:height].keys) ? height : :md
  @label = label_value(label, @object, field, id)
  @helper_text = helper_text.present? ? define_helper_text(helper_text, @object, field) : ''
  @helper_popover = define_helper_popover(helper_popover, @object, field)
  @helper_popover_placement = helper_popover_placement
  @image_path = image_path || (if @object&.send(@field)&.send("attached?")
                                 @object&.send(@field)&.variant(resize_to_fit: [ 160, 160 ])
                               end) || image_placeholder || ""
  @props["class"] = "absolute inset-0 h-full w-full cursor-pointer rounded-md border-gray-300 opacity-0"
end

Instance Method Details

#image_element ⇒ Object 



44
45
46
47
48
 
# File 'app/components/fluxbit/form/upload_image_input_component.rb', line 44

def image_element
  image_tag @image_path,
            class: "img_photo absolute inset-0 w-full h-full object-cover rounded-full",
            alt:   @field&.to_s&.humanize
end

#input_element(input_id: nil) ⇒ Object 



37
38
39
40
41
42
 
# File 'app/components/fluxbit/form/upload_image_input_component.rb', line 37

def input_element(input_id: nil)
  @props["onchange"] = "loadFile(event, '#{id}')"
  return content_tag :input, nil, @props.merge(id: input_id || id) if @form.nil?

  @form.file_field(@field, **@props, id: input_id || id)
end

#subtitle ⇒ Object 



56
57
58
59
60
 
# File 'app/components/fluxbit/form/upload_image_input_component.rb', line 56

def subtitle
  return "SVG, PNG, JPG or GIF (MAX. 800x400px)" if @subtitle == true

  @subtitle
end

#title ⇒ Object 



50
51
52
53
54
 
# File 'app/components/fluxbit/form/upload_image_input_component.rb', line 50

def title
  return safe_join(content_tag(:span, "Click to upload", class: "font-semibold"), " or drag and drop") if @title == true

  @title
end