Class: Bulmacomp::DropdownComponent

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/bulmacomp/dropdown_component.rb

Overview

Make an html structure for a bulma dropdown

Examples:

empty dropdown

render Bulmacomp::DropdownComponent.new()

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
    </button>
 </div>
 <div class="dropdown-menu" role="menu">
   <div class="dropdown-content"></div>
  </div>
</div>

dropdown with title and elements

render Bulmacomp::DropdownComponent.new(title: 'title', elements: [1,2])

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>title</span>
      <span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
    </button>
 </div>
 <div class="dropdown-menu" role="menu">
   <div class="dropdown-content">
     <div class="dropdown-item">1</div>
     <div class="dropdown-item">2</div>
   </div>
  </div>
</div>

dropdown with yield, elements and other option

= render Bulmacomp::DropdownComponent.new(title: 'title', elements: [1,2], id: 'menu',
                              button_options: {class: 'button is-success'}, icon: nil) do
  some content

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button is-success" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>title</span>
    </button>
 </div>
 <div class="dropdown-menu" role="menu">
   <div class="dropdown-content">
     <div class="dropdown-item">1</div>
     <div class="dropdown-item">2</div>
     some content
   </div>
  </div>
</div>

Instance Method Summary collapse

Constructor Details

#initialize(title: nil, elements: [], icon: default_icon, button_options: {}, **opts) {|optional| ... } ⇒ DropdownComponent

Returns a new instance of DropdownComponent.

Parameters:

  • opts (Hash) —

    options to generate content

Options Hash (**opts):

  • title (String) —

    Content of button, default empty string

  • elements (Array<String>) —

    collection of dropdown-item

  • icon (String) —

    icon span class content for button, default: <i class=“fas fa-angle-down” aria-hidden=“true”></i>

  • button_options (Hash) —

    options for button tag

  • :* (String) —

    each key going as content tag option, default is class: ‘dropdown’

Yields:

  • (optional) —

    dropdown content



72
73
74
75
76
77
78
79
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 72

def initialize(title: nil, elements: [], icon: default_icon, button_options: {}, **opts)
  super
  @title = tag.span title if title.present?
  @elements = elements
  @icon = tag.span icon, class: 'icon is-small' if icon.present?
  @button_options = default_button_options.merge(button_options)
  @opts = default_opts.merge(opts)
end

Instance Method Details

#call ⇒ String

Generated html string for bulma dropdown

Returns:

  • (String) 


98
99
100
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 98

def call
  tag.div safe_join([tag_trigger, tag_content]), **@opts
end

#default_button_options ⇒ Object

return [Hash] default option for button tag



92
93
94
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 92

def default_button_options
  { class: 'button', aria: { haspopup: 'true', controls: 'dropdown-menu' } }
end

#default_icon ⇒ String

Returns default content for button icon.

Returns:

  • (String) —

    default content for button icon



82
83
84
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 82

def default_icon
  '<i class="fas fa-angle-down" aria-hidden="true"></i>'.html_safe
end

#default_opts ⇒ Hash

Returns default option for content tag.

Returns:

  • (Hash) —

    default option for content tag



87
88
89
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 87

def default_opts
  { class: 'dropdown' }
end

#tag_content ⇒ String

generated html for ‘.dropdown-content’ div. Map each content of elements in a ‘.dropdown-item’ div and add yield content

Returns:

  • (String) 


111
112
113
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 111

def tag_content
  tag.div safe_join([@elements.map { |e| tag.div(e, class: 'dropdown-item') }, content]), class: 'dropdown-content'
end

#tag_trigger ⇒ String

generated html for ‘.dropdown-trigger’ div

Returns:

  • (String) 


104
105
106
 
# File 'app/components/bulmacomp/dropdown_component.rb', line 104

def tag_trigger
  tag.div tag.button(safe_join([@title, @icon]), **@button_options), class: 'dropdown-trigger'
end