Dropdown (extends Floater)

Assign a floater panel to a MouseEvent

Example

Syntax

new Dropdown({
    content: createElement({
        class: 'bg-white pad',
        content: 'Hello World'
    }),
    anchor: '#hi-button'
})

HTML

<komp-dropdown anchor="#hi-button">
    Hello World
</komp-dropdown>

Options

	types	description	required	default	type
`content`	String, HTMLElement, Array, Object	content for the floater, uses Dolla's `content`
`anchor`	String, HTMLElement	element to append floater to. If `String`, then used as selector for `this.closest(selector)`	true	null/anchor.parentElement
`placement`	String	how the floater is anchored options like "top", "top-start", "top-end", "left", "left-start"...		bottom
`strategy`	String	how the floater is positioned in the document. "absolute" or "fixed"		absolute
`flip`	Boolean, Object	See https://floating-ui.com/docs/flip, defaults to false in favor of autoPlacement		false
`offset`	Boolean, Object	See https://floating-ui.com/docs/offset		false
`shift`	Boolean, Object	See https://floating-ui.com/docs/shift		true
`arrow`	Boolean, Number	True to show default size, or number in pixels		false
`size`	Boolean, Object	See https://floating-ui.com/docs/size		false
`autoPlacement`	Boolean, Object	See https://floating-ui.com/docs/autoPlacement		true
`inline`	Boolean, Object	See https://floating-ui.com/docs/inline		false
`autoUpdate`	Boolean, Object	See https://floating-ui.com/docs/autoUpdate#options		true
`removeOnBlur`	Boolean	Hide dropdown when user clicks outside or focuses elsewhere		true
`timeout`	Number	Milliseconds to wait before hiding dropdown after mouseleave		0
`onHide`	Function	called after hidden
`onShow`	Function	called before showing
`scope`		showing a floater will hide all other floaters of same scope			String
`mouseevent`	String	MouseEvent that toggles floater		click

Methods

	parameters	return	description
`show`	[]	this	Shows the dropdown and adds the -active class to the anchor element
`hide`	[]	this	Hides the dropdown and removes the -active class from the anchor element
`toggle`	["optional shouldHide:Boolean"]	this	Toggles the dropdown visibility. If shouldHide is provided, will explicitly show or hide

SOURCE CODE

import { createElement, remove } from 'dolla';
import Floater from './floater.js';

class Dropdown extends Floater {

    static watch = ['anchor']
    
    static assignableAttributes = {
        mouseevent: 'click',
        placement: 'bottom',
        autoPlacement: false,
        flip: true,
        shift: true,
        strategy: 'absolute',
        arrow: false,
        removeOnBlur: true,
        timeout: 0,
    }
    
    static bindMethods = ['toggle']
    
    constructor (options, ...args) {
        super(options, ...args)
        this.anchorChanged(this.anchor, this.anchor)
        if (options === undefined) {
            this.needsFirstRemoval = true
        }
    }
    
    connected (...args) {
        super.connected(...args)
        this.addEventListener('mouseenter', this.#clearHide.bind(this))
        if (this.mouseevent == "mouseenter") {
            this.addEventListener('mouseleave', this.hide.bind(this))
        }
    }
    
    show () {
        super.show()
        this.anchor.classList.add('-active')
        return this
    }
    
    hide () {
        super.hide()
        this.anchor.classList.remove('-active')
        return this
    }
    
    anchorChanged (was, now) {
        if (this.mouseevent == "mouseenter") {
            super.anchorChanged(was, now)
        } else {
            if (was && was instanceof HTMLElement) {
                was.removeEventListener(this.mouseevent, this.toggle.bind(this))
            }
            if (now && now instanceof HTMLElement) {
                now.addEventListener(this.mouseevent, this.toggle.bind(this))
            }
        }
    }
    
    #clearHide () {
        if (this._hideTimeout) {
            clearTimeout(this._hideTimeout)
            delete this._hideTimeout
        }
    }

}
window.customElements.define('komp-dropdown', Dropdown);