Contents

import {Controller} from "@hotwired/stimulus"
import {createPopper} from '@popperjs/core';

export default class extends Controller {
    static get targets() {
        return ["popup", "button"]
    }

    static get values() {
        return {id: String}
    }

    connect() {
        // Clicked outside popup
        document.addEventListener('click', (event) => {
            this.handleOutsideClick(event)
        })
    }

    handleOutsideClick(event) {
        const inPopup = event.target.closest('[data-popup-target="popup"]') !== null
        const inButton = event.target.closest('[data-popup-target="button"]') !== null
        const openPopup = document.querySelector('[data-popup-target="popup"]:not(.closed)')

        if(!inButton && !inPopup && openPopup) {
            this.closePopup(openPopup)
        }
    }

    open(event) {
        const button = event.target.closest('[data-popup-target="button"]')
        const popup = this.popupById(button.dataset['popupId'])
        const passThru = button.dataset['popupPassThru']

        if (passThru) {
            // Pass click event to an element inside the popup
            const passThruElement = popup.querySelector(passThru)
            passThruElement.click()

        } else {
            // Open the popup
            createPopper(button, popup)
            this.openPopup(popup)
        }
    }

    close(event) {
        const button = event.target.closest('[data-popup-target="button"]')
        const popup = this.popupById(button.dataset['popupId'])

        this.closePopup(popup)
    }

    popupById(id) {
        return this.popupTargets.find((popup) => {
            return popup.dataset['popupId'] === id
        })
    }

    openPopup(popup) {
        popup.classList.remove('closed')
    }

    closePopup(popup) {
        popup.classList.add('closed')
    }
}

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
headmin-0.3.4	app/assets/javascripts/headmin/controllers/popup_controller.js
headmin-0.3.3	app/assets/javascripts/headmin/controllers/popup_controller.js
headmin-0.3.2	app/assets/javascripts/headmin/controllers/popup_controller.js
headmin-0.3.1	app/assets/javascripts/headmin/controllers/popup_controller.js