Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Split out dropdown base class

Browse Source
This commit is contained in:
JC Brand 2020-05-13 14:26:58 +02:00
parent cae5e9c875
commit 49ff6369c9
1 changed files with 63 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/dropdown.js
View File

@ -4,31 +4,17 @@ import { until } from 'lit-html/directives/until.js';
import DOMNavigator from "../dom-navigator";
import { converse } from "@converse/headless/converse-core";
const u = converse.env.utils;
export class Dropdown extends CustomElement {
export class BaseDropdown extends CustomElement {
static get properties () {
return {
'items': { type: Array }
'': { type: Array }
}
}
render () {
return html`
<div class="dropleft">
<button type="button" class="btn btn--transparent btn--standalone" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bars only-icon"></i>
</button>
<div class="dropdown-menu">
${ this.items.map(b => until(b, '')) }
</div>
</div>
`;
}
firstUpdated () {
this.menu = this.querySelector('.dropdown-menu');
this.dropdown = this.firstElementChild;
@ -36,31 +22,10 @@ export class Dropdown extends CustomElement {
this.dropdown.addEventListener('click', ev => this.toggleMenu(ev));
this.dropdown.addEventListener('keyup', ev => this.handleKeyUp(ev));
document.addEventListener('click', ev => !this.contains(ev.target) && this.hideMenu(ev));
this.initArrowNavigation();
}
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);
}
hideMenu () {
u.removeClass('show', this.menu);
this.navigator.disable();
this.button.setAttribute('aria-expanded', false);
this.button.blur();
}
@ -87,4 +52,64 @@ export class Dropdown extends CustomElement {
}
}
window.customElements.define('converse-dropdown', Dropdown);
export class DropdownList extends BaseDropdown {
static get properties () {
return {
'items': { type: Array }
}
}
render () {
return html`
<div class="dropleft">
<button type="button" class="btn btn--transparent btn--standalone" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bars only-icon"></i>
</button>
<div class="dropdown-menu">
${ this.items.map(b => until(b, '')) }
</div>
</div>
`;
}
hideMenu () {
super.hideMenu();
this.navigator.disable();
}
firstUpdated () {
super.firstUpdated();
this.initArrowNavigation();
}
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) {
super.handleKeyUp();
if (ev.keyCode === converse.keycodes.DOWN_ARROW && !this.navigator.enabled) {
this.enableArrowNavigation(ev);
}
}
}
window.customElements.define('converse-dropdown', DropdownList);