Split out dropdown base class

src/components/dropdown.js

@@ -4,11 +4,56 @@ 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 {
+            '': { type: Array }
+        }
+    }
+
+    firstUpdated () {
+        this.menu = this.querySelector('.dropdown-menu');
+        this.dropdown = this.firstElementChild;
+        this.button = this.dropdown.querySelector('button');
+        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));
+    }
+
+    hideMenu () {
+        u.removeClass('show', this.menu);
+        this.button.setAttribute('aria-expanded', false);
+        this.button.blur();
+    }
+
+    showMenu () {
+        u.addClass('show', this.menu);
+        this.button.setAttribute('aria-expanded', true);
+    }
+
+    toggleMenu () {
+        if (u.hasClass('show', this.menu)) {
+            this.hideMenu();
+        } else {
+            this.showMenu();
+        }
+    }
+
+    handleKeyUp (ev) {
+        if (ev.keyCode === converse.keycodes.ESCAPE) {
+            this.hideMenu();
+        } else if (ev.keyCode === converse.keycodes.DOWN_ARROW && !this.navigator.enabled) {
+            this.enableArrowNavigation(ev);
+        }
+    }
+}
+
+
+export class DropdownList extends BaseDropdown {
 
     static get properties () {
         return {
@@ -29,13 +74,14 @@ export class Dropdown extends CustomElement {
         `;
     }
 
+    hideMenu () {
+        super.hideMenu();
+        this.navigator.disable();
+    }
+
+
     firstUpdated () {
-        this.menu = this.querySelector('.dropdown-menu');
-        this.dropdown = this.firstElementChild;
-        this.button = this.dropdown.querySelector('button');
-        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));
+        super.firstUpdated();
         this.initArrowNavigation();
     }
 
@@ -58,33 +104,12 @@ export class Dropdown extends CustomElement {
         this.navigator.select(this.menu.firstElementChild);
     }
 
-    hideMenu () {
-        u.removeClass('show', this.menu);
-        this.navigator.disable();
-        this.button.setAttribute('aria-expanded', false);
-        this.button.blur();
-    }
-
-    showMenu () {
-        u.addClass('show', this.menu);
-        this.button.setAttribute('aria-expanded', true);
-    }
-
-    toggleMenu () {
-        if (u.hasClass('show', this.menu)) {
-            this.hideMenu();
-        } else {
-            this.showMenu();
-        }
-    }
-
     handleKeyUp (ev) {
-        if (ev.keyCode === converse.keycodes.ESCAPE) {
-            this.hideMenu();
-        } else if (ev.keyCode === converse.keycodes.DOWN_ARROW && !this.navigator.enabled) {
+        super.handleKeyUp();
+        if (ev.keyCode === converse.keycodes.DOWN_ARROW && !this.navigator.enabled) {
             this.enableArrowNavigation(ev);
         }
     }
 }
 
-window.customElements.define('converse-dropdown', Dropdown);
+window.customElements.define('converse-dropdown', DropdownList);