Dropdown (extends Tooltip)

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
`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 floater on outside click/focus or escape key		false
`timeout`	Number	ms to wait until hiding after mouseout		300
`onHide`	Function	called after hidden
`mouseevent`	String	MouseEvent that toggles floater		click

SOURCE CODE

import { createElement, remove } from 'dolla';
import Tooltip from './tooltip.js';

class Dropdown extends Tooltip {
    
    static assignableAttributes = {
        mouseevent: 'click',
        placement: 'bottom',
        arrow: false,
        removeOnBlur: true,
        timeout: 0
    }
    
    static bindMethods = ['toggle']
    
    connected (...args) {
        this.addEventListener('mouseenter', this.clearHide.bind(this))
        if (this.mouseevent == "mouseenter") {
            this.addEventListener('mouseleave', this.hide.bind(this))
        }
        return super.connected(...args);
    }
    
    show () {
        super.show()
        this.anchor.classList.add('-active')
    }
    
    hide () {
        super.hide()
        this.anchor.classList.remove('-active')
    }
    
    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);