From 49ff6369c956a0be91058d920fd8aca170a35eaa Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Wed, 13 May 2020 14:26:58 +0200
Subject: [PATCH] Split out dropdown base class

---
 src/components/dropdown.js | 101 +++++++++++++++++++++++--------------
 1 file changed, 63 insertions(+), 38 deletions(-)

diff --git a/src/components/dropdown.js b/src/components/dropdown.js
index 1fbdf691c..c0128ee26 100644
--- a/src/components/dropdown.js
+++ b/src/components/dropdown.js
@@ -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);