2021-07-26 19:27:59 +02:00
|
|
|
import 'shared/components/icons.js';
|
2021-03-24 11:59:09 +01:00
|
|
|
import DOMNavigator from "shared/dom-navigator.js";
|
2022-03-09 12:24:26 +01:00
|
|
|
import DropdownBase from 'shared/components/dropdownbase.js';
|
|
|
|
import { KEYCODES } from '@converse/headless/shared/constants.js';
|
|
|
|
import { api } from "@converse/headless/core";
|
2021-04-14 22:56:59 +02:00
|
|
|
import { html } from 'lit';
|
|
|
|
import { until } from 'lit/directives/until.js';
|
2020-02-10 11:23:55 +01:00
|
|
|
|
2021-07-27 10:53:23 +02:00
|
|
|
import './styles/dropdown.scss';
|
|
|
|
|
2020-02-10 11:23:55 +01:00
|
|
|
|
2021-06-28 10:55:42 +02:00
|
|
|
export default class Dropdown extends DropdownBase {
|
2020-02-10 11:23:55 +01:00
|
|
|
|
|
|
|
static get properties () {
|
|
|
|
return {
|
2020-06-04 17:26:18 +02:00
|
|
|
'icon_classes': { type: String },
|
2021-07-26 19:27:59 +02:00
|
|
|
'color': { type: String },
|
2020-02-10 11:23:55 +01:00
|
|
|
'items': { type: Array }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-26 19:27:59 +02:00
|
|
|
constructor () {
|
|
|
|
super();
|
|
|
|
this.color = 'var(--text-color)';
|
|
|
|
this.icon_classes = 'fa fa-bars';
|
|
|
|
}
|
|
|
|
|
2020-02-10 11:23:55 +01:00
|
|
|
render () {
|
|
|
|
return html`
|
2021-07-01 15:02:00 +02:00
|
|
|
<button type="button" class="btn btn--transparent btn--standalone" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
2021-07-26 19:27:59 +02:00
|
|
|
<converse-icon color="${this.color}" size="1em" class="${ this.icon_classes }">
|
2021-07-01 15:02:00 +02:00
|
|
|
</button>
|
|
|
|
<div class="dropdown-menu">
|
|
|
|
${ this.items.map(b => until(b, '')) }
|
2020-02-10 11:23:55 +01:00
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
2021-06-28 10:55:42 +02:00
|
|
|
firstUpdated () {
|
|
|
|
super.firstUpdated();
|
|
|
|
this.initArrowNavigation();
|
|
|
|
}
|
|
|
|
|
2022-03-09 12:24:26 +01:00
|
|
|
connectedCallback () {
|
|
|
|
super.connectedCallback();
|
|
|
|
this.hideOnEscape = ev => (ev.keyCode === KEYCODES.ESCAPE && this.hideMenu());
|
|
|
|
document.addEventListener('keydown', this.hideOnEscape);
|
|
|
|
}
|
|
|
|
|
|
|
|
disconnectedCallback() {
|
|
|
|
document.removeEventListener('keydown', this.hideOnEscape);
|
|
|
|
super.disconnectedCallback();
|
|
|
|
}
|
|
|
|
|
2020-05-13 14:26:58 +02:00
|
|
|
hideMenu () {
|
|
|
|
super.hideMenu();
|
2021-06-28 10:55:42 +02:00
|
|
|
this.navigator?.disable();
|
2020-05-13 14:26:58 +02:00
|
|
|
}
|
|
|
|
|
2020-02-10 11:23:55 +01:00
|
|
|
initArrowNavigation () {
|
|
|
|
if (!this.navigator) {
|
|
|
|
const options = {
|
|
|
|
'selector': '.dropdown-item',
|
|
|
|
'onSelected': el => el.focus()
|
|
|
|
};
|
|
|
|
this.navigator = new DOMNavigator(this.menu, options);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
enableArrowNavigation (ev) {
|
|
|
|
if (ev) {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
}
|
|
|
|
this.navigator.enable();
|
|
|
|
this.navigator.select(this.menu.firstElementChild);
|
|
|
|
}
|
|
|
|
|
|
|
|
handleKeyUp (ev) {
|
2020-06-13 00:01:15 +02:00
|
|
|
super.handleKeyUp(ev);
|
2022-03-09 12:24:26 +01:00
|
|
|
if (ev.keyCode === KEYCODES.DOWN_ARROW && !this.navigator.enabled) {
|
2020-02-10 11:23:55 +01:00
|
|
|
this.enableArrowNavigation(ev);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-06-28 10:55:42 +02:00
|
|
|
api.elements.define('converse-dropdown', Dropdown);
|