@csedl/stimulus-dropdown/src/dropdown-controller.js

Dropdown and Tooltip with stimulus and floating-ui

import {Controller} from "@hotwired/stimulus"
import {initializeDropdown, onPanelOpen} from "./utils.js";
import {debugLog} from "./utils.js";

export default class extends Controller {

    connect() {

        initializeDropdown(this.element)

        this.element.addEventListener('click', (e) => this.toggle(e))

    }


    toggle(e) {
        if (this.element.getAttribute('data-prevent-default')) {
            e.preventDefault()
        }
        e.stopPropagation()
        debugLog('toggle panel', e)
        const target_id = this.element.getAttribute('data-panel-id')
        const panel = document.getElementById(target_id)
        if (!panel) {
            console.error(`Panel-element with ID ${target_id} not found`)
        } else if (panel.style.display === 'block') {
            this.close(panel)
        } else {
            this.open(e, panel)
        }
    }

    open(e, panel) {

        // open the panel

        panel.style.display = 'block';
        debugLog('opened panel:', panel)

        onPanelOpen(e, this.element)

        panel.addEventListener('close', () => this.close(panel))

    }

    close(panel) {

        // Close actions

        panel.style.display = 'none';
        debugLog('panel closed:', panel)

    }


}