DomHelpers API

Common DOM manipulation methods for Stimulus controllers.

Usage

require 'opal_vite/concerns/v1/dom_helpers'

class MyController < StimulusController
  include OpalVite::Concerns::V1::DomHelpers
end

---

Custom Events

dispatch_custom_event(event_name, detail = {}, target = nil)

Create and dispatch a custom event

dispatch_custom_event('item-updated', { id: 123 })
dispatch_custom_event('click', {}, some_element)

create_event(event_type, options = { bubbles: true })

Create a standard event

event = create_event('click', { bubbles: true })

---

Query Methods

query(selector)

Query selector within controller element

child = query('.child-element')

query_all(selector)

Query all matching elements

items = query_all('.item')

---

Class Operations

add_class(el, class_name)

Add CSS class

add_class(element, 'active')

remove_class(el, class_name)

Remove CSS class

remove_class(element, 'hidden')

toggle_class(el, class_name)

Toggle CSS class

toggle_class(element, 'selected')

has_class?(el, class_name)

Check if element has class

if has_class?(element, 'disabled')
  return
end

---

Timing

set_timeout(delay_ms, &block)

Delayed execution

set_timeout(1000) do
  puts 'After 1 second'
end

---

Utility

element_exists?(el)

Check if element exists (not null)

if element_exists?(target)
  process(target)
end

---

Style Operations

set_style(el, property, value)

Set style property

set_style(element, 'display', 'none')

get_style(el, property)

Get style property

display = get_style(element, 'display')

show_element(el)

Show element (display: block)

show_element(modal)

hide_element(el)

Hide element (display: none)

hide_element(modal)

---

Example

class ModalController < StimulusController
  include OpalVite::Concerns::V1::DomHelpers

  def open
    modal = query('.modal')
    show_element(modal)
    add_class(modal, 'animate-in')

    set_timeout(300) do
      dispatch_custom_event('modal:opened', { modal_id: 'main' })
    end
  end

  def close
    modal = query('.modal')
    remove_class(modal, 'animate-in')

    set_timeout(300) do
      hide_element(modal)
      dispatch_custom_event('modal:closed')
    end
  end
end