Module: Protege::Components::DialogsHelper

Included in:
ComponentsHelper
Defined in:
app/helpers/protege/components/dialogs_helper.rb

Overview

Native modal <dialog> elements: dialog renders one (closing on backdrop click), and show_dialog builds the showModal() snippet a trigger fires to open it by id.

Instance Method Summary collapse

Instance Method Details

#dialog(element_id, **attrs) { ... } ⇒ ActiveSupport::SafeBuffer

Render a modal <dialog> that closes on backdrop click.

Parameters:

  • element_id (String) —

    the DOM id assigned to the dialog

  • attrs (Hash{Symbol => Object})

Yields:

  • the dialog body content

Returns:

  • (ActiveSupport::SafeBuffer) —

    the dialog markup



22
23
24
25
26
27
28
29
30
31
32
33
 
# File 'app/helpers/protege/components/dialogs_helper.rb', line 22

def dialog(element_id, **attrs, &)
  tag.dialog(
    id:      element_id,
    # focus:outline-none — showModal() focuses the dialog itself when it has no focusable child
    # (e.g. the hotkey-help overlay), which would otherwise draw the UA focus ring on the whole box.
    class:   'rounded-xl p-6 shadow-lg backdrop:bg-gray-900/50 max-w-md w-full m-auto focus:outline-none',
    style:   'background: var(--surface); border: 1px solid var(--border); color: var(--text)',
    onclick: 'event.target === this && this.close()',
    **attrs,
    &
  )
end

#show_dialog(element_id) ⇒ String

Build the JS snippet that opens a <dialog> by element id.

Parameters:

  • element_id (String) —

    the DOM id of the target dialog

Returns:

  • (String) —

    the showModal() invocation



12
13
14
 
# File 'app/helpers/protege/components/dialogs_helper.rb', line 12

def show_dialog(element_id)
  "document.getElementById('#{element_id}').showModal()"
end