Contents

import {Controller} from "stimulus"

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

    // Attaches controller logic to the element itself
    // This allows calling controller methods from the element in other controllers
    connect () {
        this.element['controller'] = this
    }

    toggle(event) {
        event.preventDefault()
        const expanded = this.buttonTarget.getAttribute('aria-expanded') === 'true'
        if (expanded) {
            this.close(null)
        } else {
            this.open()
        }
    }

    open() {
        this.buttonTarget.setAttribute('aria-expanded', 'true')
        this.popupTarget.classList.remove('closed')
    }

    close(event) {
        if (this.isClickedInside(event)) {
            event.preventDefault()
            return
        }
        this.buttonTarget.setAttribute('aria-expanded', 'false')
        this.popupTarget.classList.add('closed')
    }

    isClickedInside(event) {
        if (!event) {
            return false
        }
        const inPopup = this.popupTarget.contains(event.target)
        const inButton = this.buttonTarget.contains(event.target)
        const inAddButton = event.target.dataset.action === "click->filters#add"
        return (inPopup || inButton || inAddButton)
    }
}

Version data entries

8 entries across 8 versions & 1 rubygems

Version	Path
headmin-0.2.5	src/js/headmin/controllers/filter_controller.js
headmin-0.2.4	src/js/headmin/controllers/filter_controller.js
headmin-0.2.3	src/js/headmin/controllers/filter_controller.js
headmin-0.2.2	src/js/headmin/controllers/filter_controller.js
headmin-0.2.1	src/js/headmin/controllers/filter_controller.js
headmin-0.2.0	src/js/headmin/controllers/filter_controller.js
headmin-0.1.2	src/js/headmin/controllers/filter_controller.js
headmin-0.1.1	src/js/headmin/controllers/filter_controller.js