Add an autocomplete component

spec/autocomplete.js

@@ -58,7 +58,7 @@
             textarea.value = '@';
             view.onKeyUp(at_event);
 
-            expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(4);
+            await u.waitUntil(() => view.el.querySelectorAll('.suggestion-box__results li').length === 4);
             expect(view.el.querySelector('.suggestion-box__results li:first-child').textContent).toBe('dick');
             expect(view.el.querySelector('.suggestion-box__results li:nth-child(2)').textContent).toBe('harry');
             expect(view.el.querySelector('.suggestion-box__results li:nth-child(3)').textContent).toBe('jane');
@@ -100,7 +100,7 @@
             }
             view.onKeyDown(tab_event);
             view.onKeyUp(tab_event);
-            expect(view.el.querySelector('.suggestion-box__results').hidden).toBeFalsy();
+            await u.waitUntil(() => view.el.querySelector('.suggestion-box__results').hidden === false);
             expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(1);
             expect(view.el.querySelector('.suggestion-box__results li').textContent).toBe('some1');
 
@@ -115,7 +115,7 @@
                 textarea.value = textarea.value.slice(0, textarea.value.length-1)
                 view.onKeyUp(backspace_event);
             }
-            expect(view.el.querySelector('.suggestion-box__results').hidden).toBeTruthy();
+            await u.waitUntil(() => view.el.querySelector('.suggestion-box__results').hidden === true);
 
             presence = $pres({
                     'to': 'romeo@montague.lit/orchard',
@@ -132,7 +132,7 @@
             textarea.value = "hello s s";
             view.onKeyDown(tab_event);
             view.onKeyUp(tab_event);
-            expect(view.el.querySelector('.suggestion-box__results').hidden).toBeFalsy();
+            await u.waitUntil(() => view.el.querySelector('.suggestion-box__results').hidden === false);
             expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(2);
 
             const up_arrow_event = {
@@ -170,10 +170,11 @@
             textarea.value = "hello z";
             view.onKeyDown(tab_event);
             view.onKeyUp(tab_event);
+            await u.waitUntil(() => view.el.querySelector('.suggestion-box__results').hidden === false);
 
             view.onKeyDown(tab_event);
             view.onKeyUp(tab_event);
-            expect(textarea.value).toBe('hello @z3r0 ');
+            await u.waitUntil(() => textarea.value === 'hello @z3r0 ');
             done();
         }));
 
@@ -212,7 +213,7 @@
             view.onKeyDown(backspace_event);
             textarea.value = "hello @some1"; // Mimic backspace
             view.onKeyUp(backspace_event);
-            expect(view.el.querySelector('.suggestion-box__results').hidden).toBeFalsy();
+            await u.waitUntil(() => view.el.querySelector('.suggestion-box__results').hidden === false);
             expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(1);
             expect(view.el.querySelector('.suggestion-box__results li').textContent).toBe('some1');
             done();

src/components/autocomplete.js

@@ -0,0 +1,73 @@
+import { AutoComplete, FILTER_CONTAINS, FILTER_STARTSWITH } from "../converse-autocomplete.js";
+import { CustomElement } from './element.js';
+import { html } from 'lit-element';
+
+
+export class AutoCompleteComponent extends CustomElement {
+
+    static get properties () {
+        return {
+            'getAutoCompleteList': { type: Function },
+            'auto_evaluate': { type: Boolean },
+            'auto_first': { type: Boolean }, // Should the first element be automatically selected?
+            'filter': { type: String },
+            'include_triggers': { type: String },
+            'min_chars': { type: Number },
+            'name': { type: String },
+            'placeholder': { type: String },
+            'triggers': { type: String },
+        }
+    }
+
+    constructor () {
+        super();
+        this.auto_evaluate = true; // Should evaluation happen automatically without any particular key as trigger?
+        this.auto_first = false; // Should the first element be automatically selected?
+        this.filter = 'contains';
+        this.include_triggers = ''; // Space separated chars which should be included in the returned value
+        this.match_current_word = false; // Match only the current word, otherwise all input is matched
+        this.max_items = 10;
+        this.min_chars = 1;
+        this.triggers = ''; // String of space separated chars
+    }
+
+    render () {
+        return html`
+            <div class="suggestion-box suggestion-box__name">
+                <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
+                <input type="text" name="${this.name}"
+                       autocomplete="off"
+                       @keydown=${this.onKeyDown}
+                       @keyup=${this.onKeyUp}
+                       class="form-control suggestion-box__input"
+                       placeholder="${this.placeholder}"/>
+                <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
+            </div>
+        `;
+    }
+
+    firstUpdated () {
+        this.auto_complete = new AutoComplete(this.firstElementChild, {
+            'ac_triggers': this.triggers.split(' '),
+            'auto_evaluate': this.auto_evaluate,
+            'auto_first': this.auto_first,
+            'filter': this.filter == 'contains' ? FILTER_CONTAINS : FILTER_STARTSWITH,
+            'include_triggers': [],
+            'list': () => this.getAutoCompleteList(),
+            'match_current_word': true,
+            'max_items': this.max_items,
+            'min_chars': this.min_chars,
+        });
+        this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
+    }
+
+    onKeyDown (ev) {
+        this.auto_complete.onKeyDown(ev);
+    }
+
+    onKeyUp (ev) {
+        this.auto_complete.evaluate(ev);
+    }
+}
+
+window.customElements.define('converse-autocomplete', AutoCompleteComponent);

src/converse-autocomplete.js

@@ -12,19 +12,16 @@ import converse from "@converse/headless/converse-core";
 const u = converse.env.utils;
 
 
-converse.plugins.add("converse-autocomplete", {
+export const FILTER_CONTAINS = function (text, input) {
-
-    initialize () {
-        const { _converse } = this;
-
-        _converse.FILTER_CONTAINS = function (text, input) {
     return RegExp(helpers.regExpEscape(input.trim()), "i").test(text);
 };
 
-        _converse.FILTER_STARTSWITH = function (text, input) {
+
+export const FILTER_STARTSWITH = function (text, input) {
     return RegExp("^" + helpers.regExpEscape(input.trim()), "i").test(text);
 };
 
+
 const SORT_BYLENGTH = function (a, b) {
     if (a.length !== b.length) {
         return a.length - b.length;
@@ -32,6 +29,7 @@ converse.plugins.add("converse-autocomplete", {
     return a < b? -1 : 1;
 };
 
+
 const ITEM = (text, input) => {
     input = input.trim();
     const element = document.createElement("li");
@@ -52,6 +50,42 @@ converse.plugins.add("converse-autocomplete", {
 };
 
 
+const helpers = {
+
+    getElement (expr, el) {
+        return typeof expr === "string"? (el || document).querySelector(expr) : expr || null;
+    },
+
+    bind (element, o) {
+        if (element) {
+            for (var event in o) {
+                if (!Object.prototype.hasOwnProperty.call(o, event)) {
+                    continue;
+                }
+                const callback = o[event];
+                event.split(/\s+/).forEach(event => element.addEventListener(event, callback));
+            }
+        }
+    },
+
+    unbind (element, o) {
+        if (element) {
+            for (var event in o) {
+                if (!Object.prototype.hasOwnProperty.call(o, event)) {
+                    continue;
+                }
+                const callback = o[event];
+                event.split(/\s+/).forEach(event => element.removeEventListener(event, callback));
+            }
+        }
+    },
+
+    regExpEscape (s) {
+        return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
+    }
+}
+
+
 class Suggestion extends String {
 
     constructor (data) {
@@ -78,12 +112,12 @@ converse.plugins.add("converse-autocomplete", {
 }
 
 
-        class AutoComplete {
+export class AutoComplete {
 
     constructor (el, config={}) {
         this.is_opened = false;
 
-                if (u.hasClass('.suggestion-box', el)) {
+        if (u.hasClass('suggestion-box', el)) {
             this.container = el;
         } else {
             this.container = el.querySelector('.suggestion-box');
@@ -103,7 +137,7 @@ converse.plugins.add("converse-autocomplete", {
             'auto_evaluate': true, // Should evaluation happen automatically without any particular key as trigger?
             'auto_first': false, // Should the first element be automatically selected?
             'data': a => a,
-                    'filter': _converse.FILTER_CONTAINS,
+            'filter': FILTER_CONTAINS,
             'sort': config.sort === false ? false : SORT_BYLENGTH,
             'item': ITEM
         }, config);
@@ -318,7 +352,7 @@ converse.plugins.add("converse-autocomplete", {
         }
     }
 
-            evaluate (ev) {
+    async evaluate (ev) {
         const selecting = this.selected && ev && (
             ev.keyCode === converse.keycodes.UP_ARROW ||
             ev.keyCode === converse.keycodes.DOWN_ARROW
@@ -328,7 +362,7 @@ converse.plugins.add("converse-autocomplete", {
             return;
         }
 
-                const list = typeof this._list === "function" ? this._list() : this._list;
+        const list = typeof this._list === "function" ? await this._list() : this._list;
         if (list.length === 0) {
             return;
         }
@@ -375,41 +409,14 @@ converse.plugins.add("converse-autocomplete", {
 Object.assign(AutoComplete.prototype, Events);
 
 
-        const helpers = {
+converse.plugins.add("converse-autocomplete", {
-
-            getElement (expr, el) {
-                return typeof expr === "string"? (el || document).querySelector(expr) : expr || null;
-            },
-
-            bind (element, o) {
-                if (element) {
-                    for (var event in o) {
-                        if (!Object.prototype.hasOwnProperty.call(o, event)) {
-                            continue;
-                        }
-                        const callback = o[event];
-                        event.split(/\s+/).forEach(event => element.addEventListener(event, callback));
-                    }
-                }
-            },
-
-            unbind (element, o) {
-                if (element) {
-                    for (var event in o) {
-                        if (!Object.prototype.hasOwnProperty.call(o, event)) {
-                            continue;
-                        }
-                        const callback = o[event];
-                        event.split(/\s+/).forEach(event => element.removeEventListener(event, callback));
-                    }
-                }
-            },
-
-            regExpEscape (s) {
-                return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
-            }
-        }
 
+    initialize () {
+        const _converse = this._converse;
+        _converse.FILTER_CONTAINS = FILTER_CONTAINS;
+        _converse.FILTER_STARTSWITH = FILTER_STARTSWITH;
         _converse.AutoComplete = AutoComplete;
     }
 });
+
+