as-dropdown

A dropdown component.

Usage

For a dropdown with select option use the following HTML:

<div class="dropdown">
    <span class="dropdown-text">Select something from me</span>
    <select class="dropdown-select">
        <option value="0">Value 0</option>
        <option value="1">Value 1</option>
    </select>
    <ul class="dropdown-entries">
        <li class="dropdown-entry" data-value="0">Value 0</li>
        <li class="dropdown-entry" data-value="1">Value 1</li>
    </ul>
</div>

For a dropdown with a dynamic content (that could be passed as a string with HTML content or as a Node object) use the following HTML:

<div class="dropdown">
    <span class="dropdown-text">Select something from me</span>
    <div class="dropdown-entries"></div>
</div>

Options

as-dropdown has the following options:

const defaultOptions = {
    textSelector: '.dropdown-text',
    containerSelector: '.dropdown-entries',
    selectSelector: '.dropdown-select',
    onDropdownSelect: null,
    onDropdownShow: null,
    onDropdownHide: null,
    noAutoHide: false,
    dynamicContent: false,
    showOnHover:true,
    content:null
};

• textSelector references dropdown header.
• containerSelector references the element that contains data displayed when dropdown is active.
• selectSelector references the <select> element in the HTML.
• onDropdownSelect references a callback function upon option select event.
• onDropdownShow references a callback function upon dropdown is expanded.
• onDropdownHide references a callback function upon dropdown is closed.
• noAutoHide: if true, dropdown will remain open upon selection of an option and will be closed if clicked outside the dropdown.
• dynamicContent: this should be set to true if content is inserted automatically and there is no dropdown content defined in the HTML.
• showOnHover: if true, dropdown will be expanded and closed upon hover event.
• content: this is where the content of the dropdown should be defined if dynamicContent is set to true.