Class: Daisy::Navigation::MegamenuComponent::ItemComponent

Inherits:
LocoMotion::BasicComponent show all
Defined in:
app/components/daisy/navigation/megamenu_component.rb

Overview

One megamenu item: a <button popovertarget> immediately followed by its <div popover> content block. The pairing IDs are generated automatically (or pass id: to control them).

Instance Attribute Summary collapse

Instance Method Summary collapse

Methods inherited from LocoMotion::BasicComponent

name

Constructor Details

#initialize(**kws) ⇒ ItemComponent

Returns a new instance of ItemComponent.

Parameters:

  • kws (Hash) —

    a customizable set of options

Options Hash (**kws):

  • title (String) —

    The text for the item's always-visible button.

  • id (String) —

    A custom ID for the item's popover. Defaults to a generated unique ID.



90
91
92
93
94
95
 
# File 'app/components/daisy/navigation/megamenu_component.rb', line 90

def initialize(**kws)
  super

  @title = config_option(:title)
  @popover_id = config_option(:id, "megamenu-item-#{SecureRandom.uuid}")
end

Instance Attribute Details

#popover_id ⇒ String (readonly)

Returns The ID shared by the popover and the button's popovertarget.

Returns:

  • (String) —

    The ID shared by the popover and the button's popovertarget.



83
84
85
 
# File 'app/components/daisy/navigation/megamenu_component.rb', line 83

def popover_id
  @popover_id
end

Instance Method Details

#before_render ⇒ Object 



97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
# File 'app/components/daisy/navigation/megamenu_component.rb', line 97

def before_render
  set_tag_name(:button, :button)
  add_html(:button, { type: "button", popovertarget: @popover_id })

  set_tag_name(:popover, :div)
  add_html(:popover, { id: @popover_id, popover: "auto" })

  # See MegamenuComponent#popover_anchor: wide/full popovers must
  # anchor to their own megamenu, not DaisyUI's shared `--megamenu`.
  if (anchor = loco_parent&.popover_anchor)
    add_html(:popover, { style: "position-anchor:#{anchor}" })
  end

  super
end

#call ⇒ Object

Renders the button / popover pair with no extra wrapper: DaisyUI finds each item's popover with an adjacent-sibling selector and anchors it via the buttons' nth-of-type position, so both must be direct children of the megamenu container.



119
120
121
 
# File 'app/components/daisy/navigation/megamenu_component.rb', line 119

def call
  safe_join([render_button, render_popover])
end