Run prettier on files

src/shared/chat/emoji-picker.js

@@ -3,118 +3,116 @@
  * @typedef {module:dom-navigator.DOMNavigatorOptions} DOMNavigatorOptions
  * @typedef {module:dom-navigator.DOMNavigatorDirection} DOMNavigatorDirection
  */
-import debounce from 'lodash-es/debounce';
+import debounce from "lodash-es/debounce";
 import { api, converse, u, constants } from "@converse/headless";
 import DOMNavigator from "shared/dom-navigator";
-import { CustomElement } from 'shared/components/element.js';
+import { CustomElement } from "shared/components/element.js";
 import { FILTER_CONTAINS } from "shared/autocomplete/utils.js";
-import { getTonedEmojis } from './utils.js';
+import { getTonedEmojis } from "./utils.js";
 import { tplEmojiPicker } from "./templates/emoji-picker.js";
 import "./emoji-picker-content.js";
-import './emoji-dropdown.js';
+import "./emoji-dropdown.js";
 
-import './styles/emoji.scss';
+import "./styles/emoji.scss";
 
 const { KEYCODES } = constants;
 
-
 export default class EmojiPicker extends CustomElement {
-
-    static get properties () {
+    static get properties() {
         return {
-            current_category: { type: String, 'reflect': true },
-            current_skintone: { type: String, 'reflect': true },
+            current_category: { type: String, "reflect": true },
+            current_skintone: { type: String, "reflect": true },
             model: { type: Object },
-            query: { type: String, 'reflect': true },
+            query: { type: String, "reflect": true },
             state: { type: Object },
-            // This is an optimization, we lazily render the emoji picker, otherwise tests slow to a crawl.
+            // This is an optimization to lazily render the emoji picker
             render_emojis: { type: Boolean },
-        }
+        };
     }
 
-    constructor () {
+    constructor() {
         super();
         this.state = null;
         this.model = null;
-        this.query = '';
+        this.query = "";
         this.render_emojis = null;
         this._search_results = [];
 
         this.debouncedFilter = debounce(
-            /** @param {HTMLInputElement} input */(input) => this.state.set({'query': input.value}),
+            /** @param {HTMLInputElement} input */ (input) => this.state.set({ "query": input.value }),
             250
         );
     }
 
     initialize() {
         super.initialize();
-        this.dropdown = this.closest('converse-emoji-dropdown');
+        this.dropdown = this.closest("converse-emoji-dropdown");
     }
 
-    firstUpdated (changed) {
+    firstUpdated(changed) {
         super.firstUpdated(changed);
-        this.listenTo(this.state, 'change', o => this.onModelChanged(o.changed));
+        this.listenTo(this.state, "change", (o) => this.onModelChanged(o.changed));
         this.initArrowNavigation();
     }
 
-    get search_results () {
+    get search_results() {
         return this._search_results;
     }
 
-    set search_results (value) {
+    set search_results(value) {
         this._search_results = value;
         this.requestUpdate();
     }
 
-    render () {
+    render() {
         return tplEmojiPicker(this, {
             current_category: this.current_category,
             current_skintone: this.current_skintone,
-            onCategoryPicked: ev => this.chooseCategory(ev),
+            onCategoryPicked: (ev) => this.chooseCategory(ev),
             onSearchInputFocus: () => this.disableArrowNavigation(),
-            onSearchInputKeyDown: ev => this.onSearchInputKeyDown(ev),
-            onSkintonePicked: ev => this.chooseSkinTone(ev),
+            onSearchInputKeyDown: (ev) => this.onSearchInputKeyDown(ev),
+            onSkintonePicked: (ev) => this.chooseSkinTone(ev),
             query: this.query,
             search_results: this.search_results,
             render_emojis: this.render_emojis,
-            sn2Emoji: /** @param {string} sn */(sn) => u.shortnamesToEmojis(this.getTonedShortname(sn))
+            sn2Emoji: /** @param {string} sn */ (sn) => u.shortnamesToEmojis(this.getTonedShortname(sn)),
         });
     }
 
-    updated (changed) {
-        changed.has('query') && this.updateSearchResults(changed);
-        changed.has('current_category') && this.setScrollPosition();
+    updated(changed) {
+        changed.has("query") && this.updateSearchResults(changed);
+        changed.has("current_category") && this.setScrollPosition();
     }
 
-    onModelChanged (changed) {
-        if ('current_category' in changed) this.current_category = changed.current_category;
-        if ('current_skintone' in changed) this.current_skintone = changed.current_skintone;
-        if ('query' in changed) this.query = changed.query;
+    onModelChanged(changed) {
+        if ("current_category" in changed) this.current_category = changed.current_category;
+        if ("current_skintone" in changed) this.current_skintone = changed.current_skintone;
+        if ("query" in changed) this.query = changed.query;
     }
 
-    setScrollPosition () {
+    setScrollPosition() {
         if (this.preserve_scroll) {
             this.preserve_scroll = false;
             return;
         }
-        const el = this.querySelector('.emoji-lists__container--browse');
+        const el = this.querySelector(".emoji-lists__container--browse");
         const heading = this.querySelector(`#emoji-picker-${this.current_category}`);
         if (heading instanceof HTMLElement) {
             // +4 due to 2px padding on list elements
-            el.scrollTop = heading.offsetTop - heading.offsetHeight*3 + 4;
+            el.scrollTop = heading.offsetTop - heading.offsetHeight * 3 + 4;
         }
     }
 
-    updateSearchResults (changed) {
-        const old_query = changed.get('query');
+    updateSearchResults(changed) {
+        const old_query = changed.get("query");
         const contains = FILTER_CONTAINS;
         if (this.query) {
             if (this.query === old_query) {
                 return this.search_results;
             } else if (old_query && this.query.includes(old_query)) {
-                this.search_results = this.search_results.filter(e => contains(e.sn, this.query));
+                this.search_results = this.search_results.filter((e) => contains(e.sn, this.query));
             } else {
-                this.search_results = converse.emojis.list.filter(e => contains(e.sn, this.query));
+                this.search_results = converse.emojis.list.filter((e) => contains(e.sn, this.query));
             }
         } else if (this.search_results.length) {
             // Avoid re-rendering by only setting to new empty array if it wasn't empty before
@@ -122,21 +120,21 @@ export default class EmojiPicker extends CustomElement {
         }
     }
 
-    registerEvents () {
-        this.onGlobalKeyDown = ev => this.#onGlobalKeyDown(ev);
-        this.dropdown.addEventListener('hide.bs.dropdown', () => this.onDropdownHide());
-        const body = document.querySelector('body');
-        body.addEventListener('keydown', this.onGlobalKeyDown);
+    registerEvents() {
+        this.onGlobalKeyDown = (ev) => this.#onGlobalKeyDown(ev);
+        this.dropdown.addEventListener("hide.bs.dropdown", () => this.onDropdownHide());
+        const body = document.querySelector("body");
+        body.addEventListener("keydown", this.onGlobalKeyDown);
     }
 
-    connectedCallback () {
+    connectedCallback() {
         super.connectedCallback();
         this.registerEvents();
     }
 
     disconnectedCallback() {
-        const body = document.querySelector('body');
-        body.removeEventListener('keydown', this.onGlobalKeyDown);
+        const body = document.querySelector("body");
+        body.removeEventListener("keydown", this.onGlobalKeyDown);
         this.disableArrowNavigation();
         super.disconnectedCallback();
     }
@@ -144,7 +142,7 @@ export default class EmojiPicker extends CustomElement {
     /**
      * @param {KeyboardEvent} ev
      */
-    #onGlobalKeyDown (ev) {
+    #onGlobalKeyDown(ev) {
         if (!this.navigator) return;
 
         if (ev.key === KEYCODES.ENTER && u.isVisible(this)) {
@@ -156,32 +154,32 @@ export default class EmojiPicker extends CustomElement {
 
     onDropdownHide() {
         this.disableArrowNavigation();
-        this.dispatchEvent(new CustomEvent('emojipickerblur', {bubbles: true}));
+        this.dispatchEvent(new CustomEvent("emojipickerblur", { bubbles: true }));
     }
 
     /**
      * @param {HTMLElement} el
      */
-    setCategoryForElement (el) {
+    setCategoryForElement(el) {
         const old_category = this.current_category;
-        const category = el?.getAttribute('data-category') || old_category;
+        const category = el?.getAttribute("data-category") || old_category;
         if (old_category !== category) {
-            this.state.save({'current_category': category});
+            this.state.save({ "current_category": category });
         }
     }
 
     /**
      * @param {string} value
      */
-    selectEmoji (value) {
-        const autocompleting = this.state.get('autocompleting');
-        const ac_position = this.state.get('ac_position');
-        this.state.set({'autocompleting': null, 'query': '', 'ac_position': null});
+    selectEmoji(value) {
+        const autocompleting = this.state.get("autocompleting");
+        const ac_position = this.state.get("ac_position");
+        this.state.set({ "autocompleting": null, "query": "", "ac_position": null });
         this.disableArrowNavigation();
-        const jid = this.model.get('jid');
+        const jid = this.model.get("jid");
         const options = {
-            'bubbles': true,
-            'detail': { value, autocompleting, ac_position, jid }
+            "bubbles": true,
+            "detail": { value, autocompleting, ac_position, jid },
         };
         this.dispatchEvent(new CustomEvent("emojiSelected", options));
     }
@@ -189,27 +187,27 @@ export default class EmojiPicker extends CustomElement {
     /**
      * @param {MouseEvent} ev
      */
-    chooseSkinTone (ev) {
+    chooseSkinTone(ev) {
         ev.preventDefault();
         ev.stopPropagation();
-        const target = /** @type {Element} */(ev.target);
-        const el = target.nodeName === 'IMG' ? target.parentElement : target;
+        const target = /** @type {Element} */ (ev.target);
+        const el = target.nodeName === "IMG" ? target.parentElement : target;
         const skintone = el.getAttribute("data-skintone").trim();
         if (this.current_skintone === skintone) {
-            this.state.save({'current_skintone': ''});
+            this.state.save({ "current_skintone": "" });
         } else {
-            this.state.save({'current_skintone': skintone});
+            this.state.save({ "current_skintone": skintone });
         }
     }
 
     /**
      * @param {MouseEvent} ev
      */
-    chooseCategory (ev) {
+    chooseCategory(ev) {
         ev.preventDefault && ev.preventDefault();
         ev.stopPropagation && ev.stopPropagation();
-        const target = /** @type {Element} */(ev.target ?? ev.relatedTarget);
-        const el = target.matches('li') ? target : u.ancestor(target, 'li');
+        const target = /** @type {Element} */ (ev.target ?? ev.relatedTarget);
+        const el = target.matches("li") ? target : u.ancestor(target, "li");
         this.setCategoryForElement(el);
         this.navigator.select(el);
         !this.navigator.enabled && this.navigator.enable();
@@ -223,8 +221,8 @@ export default class EmojiPicker extends CustomElement {
         if (ev.key === KEYCODES.TAB) {
             if (target.value) {
                 ev.preventDefault();
-                const match = converse.emojis.shortnames.find(sn => FILTER_CONTAINS(sn, target.value));
-                match && this.state.set({'query': match});
+                const match = converse.emojis.shortnames.find((sn) => FILTER_CONTAINS(sn, target.value));
+                match && this.state.set({ "query": match });
             } else if (!this.navigator.enabled) {
                 this.enableArrowNavigation(ev);
             }
@@ -238,68 +236,70 @@ export default class EmojiPicker extends CustomElement {
     /**
      * @param {KeyboardEvent} ev
      */
-    onEnterPressed (ev) {
+    onEnterPressed(ev) {
         ev.preventDefault();
         ev.stopPropagation();
-        const target = /** @type {HTMLInputElement} */(ev.target);
+        const target = /** @type {HTMLInputElement} */ (ev.target);
         if (converse.emojis.shortnames.includes(target.value)) {
             this.selectEmoji(target.value);
         } else if (this.search_results.length === 1) {
             this.selectEmoji(this.search_results[0].sn);
-        } else if (this.navigator.selected && this.navigator.selected.matches('.insert-emoji')) {
-            this.selectEmoji(this.navigator.selected.getAttribute('data-emoji'));
-        } else if (this.navigator.selected && this.navigator.selected.matches('.emoji-category')) {
-            this.chooseCategory(new MouseEvent('click', {relatedTarget: this.navigator.selected}));
+        } else if (this.navigator.selected && this.navigator.selected.matches(".insert-emoji")) {
+            this.selectEmoji(this.navigator.selected.getAttribute("data-emoji"));
+        } else if (this.navigator.selected && this.navigator.selected.matches(".emoji-category")) {
+            this.chooseCategory(new MouseEvent("click", { relatedTarget: this.navigator.selected }));
         }
     }
 
     /**
      * @param {string} shortname
      */
-    getTonedShortname (shortname) {
+    getTonedShortname(shortname) {
         if (getTonedEmojis().includes(shortname) && this.current_skintone) {
-            return `${shortname.slice(0, shortname.length-1)}_${this.current_skintone}:`
+            return `${shortname.slice(0, shortname.length - 1)}_${this.current_skintone}:`;
         }
         return shortname;
     }
 
-    initArrowNavigation () {
+    initArrowNavigation() {
         if (!this.navigator) {
-            const default_selector = 'li:not(.hidden):not(.emoji-skintone), .emoji-search';
-            const options = /** @type DOMNavigatorOptions */({
-                jump_to_picked: '.emoji-category',
-                jump_to_picked_selector: '.emoji-category.picked',
+            const default_selector = "li:not(.hidden):not(.emoji-skintone), .emoji-search";
+            const options = /** @type DOMNavigatorOptions */ ({
+                jump_to_picked: ".emoji-category",
+                jump_to_picked_selector: ".emoji-category.picked",
                 jump_to_picked_direction: DOMNavigator.DIRECTION.down,
-                picked_selector: '.picked',
-                scroll_container: this.querySelector('.emoji-picker__lists'),
-                getSelector: /** @param {keyof(DOMNavigatorDirection)} dir */(dir) => {
+                picked_selector: ".picked",
+                scroll_container: this.querySelector(".emoji-picker__lists"),
+                getSelector: /** @param {keyof(DOMNavigatorDirection)} dir */ (dir) => {
                     if (dir === DOMNavigator.DIRECTION.down) {
-                        const c = this.navigator.selected && this.navigator.selected.getAttribute('data-category');
-                        return c ? `ul[data-category="${c}"] li:not(.hidden):not(.emoji-skintone), .emoji-search` : default_selector;
+                        const c = this.navigator.selected && this.navigator.selected.getAttribute("data-category");
+                        return c
+                            ? `ul[data-category="${c}"] li:not(.hidden):not(.emoji-skintone), .emoji-search`
+                            : default_selector;
                     } else {
                         return default_selector;
                     }
                 },
-                onSelected: /** @param {HTMLElement} el */(el) => {
-                    if (el.matches('.insert-emoji')) this.setCategoryForElement(el.parentElement);
-                    if (el.matches('.insert-emoji, .emoji-category')) {
-                        /** @type {HTMLInputElement} */(el.firstElementChild).focus();
+                onSelected: /** @param {HTMLElement} el */ (el) => {
+                    if (el.matches(".insert-emoji")) this.setCategoryForElement(el.parentElement);
+                    if (el.matches(".insert-emoji, .emoji-category")) {
+                        /** @type {HTMLInputElement} */ (el.firstElementChild).focus();
                     }
-                    if (el.matches('.emoji-search')) el.focus();
-                }
+                    if (el.matches(".emoji-search")) el.focus();
+                },
             });
             this.navigator = new DOMNavigator(this, options);
         }
     }
 
-    disableArrowNavigation () {
+    disableArrowNavigation() {
         this.navigator?.disable();
     }
 
     /**
      * @param {KeyboardEvent} ev
      */
-    enableArrowNavigation (ev) {
+    enableArrowNavigation(ev) {
         ev?.preventDefault?.();
         ev?.stopPropagation?.();
         this.disableArrowNavigation();
@@ -308,4 +308,4 @@ export default class EmojiPicker extends CustomElement {
     }
 }
 
-api.elements.define('converse-emoji-picker', EmojiPicker);
+api.elements.define("converse-emoji-picker", EmojiPicker);

src/shared/components/dropdown.js

@@ -1,38 +1,36 @@
 /**
  * @typedef {module:dom-navigator.DOMNavigatorOptions} DOMNavigatorOptions
  */
-import { html } from 'lit';
-import { until } from 'lit/directives/until.js';
+import { html } from "lit";
+import { until } from "lit/directives/until.js";
 import { api, constants, u } from "@converse/headless";
 import DOMNavigator from "shared/dom-navigator.js";
-import DropdownBase from 'shared/components/dropdownbase.js';
-import 'shared/components/icons.js';
-import { __ } from 'i18n';
+import DropdownBase from "shared/components/dropdownbase.js";
+import "shared/components/icons.js";
+import { __ } from "i18n";
 
-import './styles/dropdown.scss';
+import "./styles/dropdown.scss";
 
 const { KEYCODES } = constants;
 
-
 export default class Dropdown extends DropdownBase {
-
-    static get properties () {
+    static get properties() {
         return {
             icon_classes: { type: String },
-            items: { type: Array }
-        }
+            items: { type: Array },
+        };
     }
 
-    constructor () {
+    constructor() {
         super();
-        this.icon_classes = 'fa fa-bars';
+        this.icon_classes = "fa fa-bars";
         this.items = [];
         this.id = u.getUniqueId();
-        this.addEventListener('hidden.bs.dropdown', () => this.onHidden());
-        this.addEventListener('keyup', (ev) => this.handleKeyUp(ev));
+        this.addEventListener("hidden.bs.dropdown", () => this.onHidden());
+        this.addEventListener("keyup", (ev) => this.handleKeyUp(ev));
     }
 
-    render () {
+    render() {
         return html`
             <button class="btn btn--transparent btn--standalone dropdown-toggle dropdown-toggle--no-caret"
                     id="${this.id}"
@@ -40,51 +38,51 @@ export default class Dropdown extends DropdownBase {
                     data-bs-toggle="dropdown"
                     aria-haspopup="true"
                     aria-expanded="false"
-                    aria-label=${ __('Menu') }>
-                <converse-icon aria-hidden="true" size="1em" class="${ this.icon_classes }">
+                    aria-label=${__("Menu")}>
+                <converse-icon aria-hidden="true" size="1em" class="${this.icon_classes}">
             </button>
             <ul class="dropdown-menu" aria-labelledby="${this.id}">
-                ${ this.items.map(b => html`<li>${until(b, '')}</li>`) }
+                ${this.items.map((b) => html`<li>${until(b, "")}</li>`)}
             </ul>
         `;
     }
 
-    firstUpdated () {
+    firstUpdated() {
         super.firstUpdated();
         this.initArrowNavigation();
     }
 
-    onHidden () {
+    onHidden() {
         this.navigator?.disable();
     }
 
-    initArrowNavigation () {
+    initArrowNavigation() {
         if (!this.navigator) {
-            const options = /** @type DOMNavigatorOptions */({
-                'selector': '.dropdown-item',
-                'onSelected': (el) => el.focus()
+            const options = /** @type DOMNavigatorOptions */ ({
+                "selector": ".dropdown-item",
+                "onSelected": (el) => el.focus(),
             });
-            this.navigator = new DOMNavigator(/** @type HTMLElement */(this.menu), options);
+            this.navigator = new DOMNavigator(/** @type HTMLElement */ (this.menu), options);
         }
     }
 
-    enableArrowNavigation (ev) {
+    enableArrowNavigation(ev) {
         if (ev) {
             ev.preventDefault();
             ev.stopPropagation();
         }
         this.navigator.enable();
-        this.navigator.select(/** @type HTMLElement */(this.menu.firstElementChild));
+        this.navigator.select(/** @type HTMLElement */ (this.menu.firstElementChild));
     }
 
     /**
      * @param {KeyboardEvent} ev
      */
-    handleKeyUp (ev) {
+    handleKeyUp(ev) {
         if (ev.key === KEYCODES.DOWN_ARROW && !this.navigator.enabled) {
             this.enableArrowNavigation(ev);
         }
     }
 }
 
-api.elements.define('converse-dropdown', Dropdown);
+api.elements.define("converse-dropdown", Dropdown);

src/shared/dom-navigator.js

@@ -4,12 +4,11 @@
  * This module started as a fork of Rubens Mariuzzo's dom-navigator.
  * @copyright Rubens Mariuzzo, JC Brand
  */
-import u from '../utils/html';
-import { converse } from  "@converse/headless";
+import u from "../utils/html";
+import { converse } from "@converse/headless";
 
 const { keycodes } = converse;
 
-
 /**
  * Indicates if a given element is fully visible in the viewport.
  * @param { Element } el The element to check.
@@ -17,12 +16,7 @@ const { keycodes } = converse;
  */
 function inViewport(el) {
     const rect = el.getBoundingClientRect();
-    return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= window.innerHeight &&
-        rect.right <= window.innerWidth
-    );
+    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;
 }
 
 /**
@@ -36,7 +30,7 @@ function absoluteOffsetTop(el) {
         if (!isNaN(el.offsetTop)) {
             offsetTop += el.offsetTop;
         }
-    } while ((el = /** @type {HTMLElement} */(el.offsetParent)));
+    } while ((el = /** @type {HTMLElement} */ (el.offsetParent)));
     return offsetTop;
 }
 
@@ -51,7 +45,7 @@ function absoluteOffsetLeft(el) {
         if (!isNaN(el.offsetLeft)) {
             offsetLeft += el.offsetLeft;
         }
-    } while ((el = /** @type {HTMLElement} */(el.offsetParent)));
+    } while ((el = /** @type {HTMLElement} */ (el.offsetParent)));
     return offsetLeft;
 }
 
@@ -64,15 +58,15 @@ class DOMNavigator {
      * Directions.
      * @returns {import('./types').DOMNavigatorDirection}
      */
-    static get DIRECTION () {
-        return ({
-            down: 'down',
-            end: 'end',
-            home: 'home',
-            left: 'left',
-            right: 'right',
-            up: 'up'
-        });
+    static get DIRECTION() {
+        return {
+            down: "down",
+            end: "end",
+            home: "home",
+            left: "left",
+            right: "right",
+            up: "up",
+        };
     }
 
     /**
@@ -93,7 +87,7 @@ class DOMNavigator {
      *     up: number[]
      * }}
      */
-    static get DEFAULTS () {
+    static get DEFAULTS() {
         return {
             home: [`${keycodes.SHIFT}${keycodes.UP_ARROW}`],
             end: [`${keycodes.SHIFT}${keycodes.DOWN_ARROW}`],
@@ -104,26 +98,29 @@ class DOMNavigator {
             getSelector: null,
             jump_to_picked: null,
             jump_to_picked_direction: null,
-            jump_to_picked_selector: 'picked',
+            jump_to_picked_selector: "picked",
             onSelected: null,
-            selected: 'selected',
-            selector: 'li',
+            selected: "selected",
+            selector: "li",
         };
     }
 
-    static getClosestElement (els, getDistance) {
-        const next = els.reduce((prev, curr) => {
-            const current_distance = getDistance(curr);
-            if (current_distance < prev.distance) {
-                return {
-                    distance: current_distance,
-                    element: curr
-                };
+    static getClosestElement(els, getDistance) {
+        const next = els.reduce(
+            (prev, curr) => {
+                const current_distance = getDistance(curr);
+                if (current_distance < prev.distance) {
+                    return {
+                        distance: current_distance,
+                        element: curr,
+                    };
+                }
+                return prev;
+            },
+            {
+                distance: Infinity,
             }
-            return prev;
-        }, {
-            distance: Infinity
-        });
+        );
         return next.element;
     }
 
@@ -132,7 +129,7 @@ class DOMNavigator {
      * @param {HTMLElement} container The container of the element to navigate.
      * @param {import('./types').DOMNavigatorOptions} options The options to configure the DOM navigator.
      */
-    constructor (container, options) {
+    constructor(container, options) {
         this.doc = window.document;
         this.container = container;
         this.scroll_container = options.scroll_container || container;
@@ -146,36 +143,36 @@ class DOMNavigator {
     /**
      * Initialize the navigator.
      */
-    init () {
+    init() {
         this.selected = null;
         this.keydownHandler = null;
         this.elements = {};
         // Create hotkeys map.
         this.keys = {};
-        this.options.down.forEach(key => (this.keys[key] = DOMNavigator.DIRECTION.down));
-        this.options.end.forEach(key => (this.keys[key] = DOMNavigator.DIRECTION.end));
-        this.options.home.forEach(key => (this.keys[key] = DOMNavigator.DIRECTION.home));
-        this.options.left.forEach(key => (this.keys[key] = DOMNavigator.DIRECTION.left));
-        this.options.right.forEach(key => (this.keys[key] = DOMNavigator.DIRECTION.right));
-        this.options.up.forEach(key => (this.keys[key] = DOMNavigator.DIRECTION.up));
+        this.options.down.forEach((key) => (this.keys[key] = DOMNavigator.DIRECTION.down));
+        this.options.end.forEach((key) => (this.keys[key] = DOMNavigator.DIRECTION.end));
+        this.options.home.forEach((key) => (this.keys[key] = DOMNavigator.DIRECTION.home));
+        this.options.left.forEach((key) => (this.keys[key] = DOMNavigator.DIRECTION.left));
+        this.options.right.forEach((key) => (this.keys[key] = DOMNavigator.DIRECTION.right));
+        this.options.up.forEach((key) => (this.keys[key] = DOMNavigator.DIRECTION.up));
     }
 
     /**
      * Enable this navigator.
      */
-    enable () {
+    enable() {
         this.getElements();
-        this.keydownHandler = event => this.handleKeydown(event);
-        this.doc.addEventListener('keydown', this.keydownHandler);
+        this.keydownHandler = (event) => this.handleKeydown(event);
+        this.doc.addEventListener("keydown", this.keydownHandler);
         this.enabled = true;
     }
 
     /**
      * Disable this navigator.
      */
-    disable () {
+    disable() {
         if (this.keydownHandler) {
-            this.doc.removeEventListener('keydown', this.keydownHandler);
+            this.doc.removeEventListener("keydown", this.keydownHandler);
         }
         this.unselect();
         this.elements = {};
@@ -185,7 +182,7 @@ class DOMNavigator {
     /**
      * Destroy this navigator removing any event registered and any other data.
      */
-    destroy () {
+    destroy() {
         this.disable();
     }
 
@@ -193,11 +190,11 @@ class DOMNavigator {
      * @param {'down'|'right'|'left'|'up'} direction
      * @returns {HTMLElement}
      */
-    getNextElement (direction) {
+    getNextElement(direction) {
         let el;
         if (direction === DOMNavigator.DIRECTION.home) {
             el = this.getElements(direction)[0];
-        } else if (direction  === DOMNavigator.DIRECTION.end) {
+        } else if (direction === DOMNavigator.DIRECTION.end) {
             el = Array.from(this.getElements(direction)).pop();
         } else if (this.selected) {
             if (direction === DOMNavigator.DIRECTION.right) {
@@ -210,13 +207,13 @@ class DOMNavigator {
                 const left = this.selected.offsetLeft;
                 const top = this.selected.offsetTop + this.selected.offsetHeight;
                 const els = this.elementsAfter(0, top);
-                const getDistance = el => Math.abs(el.offsetLeft - left) + Math.abs(el.offsetTop - top);
+                const getDistance = (el) => Math.abs(el.offsetLeft - left) + Math.abs(el.offsetTop - top);
                 el = DOMNavigator.getClosestElement(els, getDistance);
             } else if (direction == DOMNavigator.DIRECTION.up) {
                 const left = this.selected.offsetLeft;
                 const top = this.selected.offsetTop - 1;
                 const els = this.elementsBefore(Infinity, top);
-                const getDistance = el => Math.abs(left - el.offsetLeft) + Math.abs(top - el.offsetTop);
+                const getDistance = (el) => Math.abs(left - el.offsetLeft) + Math.abs(top - el.offsetTop);
                 el = DOMNavigator.getClosestElement(els, getDistance);
             } else {
                 throw new Error("getNextElement: invalid direction value");
@@ -227,11 +224,14 @@ class DOMNavigator {
                 // selected, so we return the next.
                 el = this.getElements(direction)[1];
             } else {
-                el = this.getElements(direction)[0]
+                el = this.getElements(direction)[0];
             }
         }
 
-        if (this.options.jump_to_picked && el && el.matches(this.options.jump_to_picked) &&
+        if (
+            this.options.jump_to_picked &&
+            el &&
+            el.matches(this.options.jump_to_picked) &&
             direction === this.options.jump_to_picked_direction
         ) {
             el = this.container.querySelector(this.options.jump_to_picked_selector) || el;
@@ -244,13 +244,13 @@ class DOMNavigator {
      * @param {HTMLElement} el The DOM element to select.
      * @param {string} [direction] The direction.
      */
-    select (el, direction) {
+    select(el, direction) {
         if (!el || el === this.selected) {
             return;
         }
         this.unselect();
         direction && this.scrollTo(el, direction);
-        if (el.matches('input')) {
+        if (el.matches("input")) {
             el.focus();
         } else {
             u.addClass(this.options.selected, el);
@@ -262,7 +262,7 @@ class DOMNavigator {
     /**
      * Remove the current selection
      */
-    unselect () {
+    unselect() {
         if (this.selected) {
             u.removeClass(this.options.selected, this.selected);
             delete this.selected;
@@ -275,7 +275,7 @@ class DOMNavigator {
      * @param {String} direction The direction of the current navigation.
      * @return void.
      */
-    scrollTo (el, direction) {
+    scrollTo(el, direction) {
         if (!this.inScrollContainerViewport(el)) {
             const container = this.scroll_container;
             if (!container.contains(el)) {
@@ -340,11 +340,11 @@ class DOMNavigator {
             return false;
         }
         // Check on right side.
-        if ((el.offsetLeft + el.offsetWidth - container.scrollLeft) > (container.offsetLeft + container.offsetWidth)) {
+        if (el.offsetLeft + el.offsetWidth - container.scrollLeft > container.offsetLeft + container.offsetWidth) {
             return false;
         }
         // Check on down side.
-        if ((el.offsetTop + el.offsetHeight - container.scrollTop) > (container.offsetTop + container.offsetHeight)) {
+        if (el.offsetTop + el.offsetHeight - container.scrollTop > container.offsetTop + container.offsetHeight) {
             return false;
         }
         return true;
@@ -353,7 +353,7 @@ class DOMNavigator {
     /**
      * Find and store the navigable elements
      */
-    getElements (direction) {
+    getElements(direction) {
         const selector = this.options.getSelector ? this.options.getSelector(direction) : this.options.selector;
         if (!this.elements[selector]) {
             this.elements[selector] = Array.from(this.container.querySelectorAll(selector));
@@ -367,8 +367,10 @@ class DOMNavigator {
      * @param {number} top The top offset.
      * @return {Array} An array of elements.
      */
-    elementsAfter (left, top) {
-        return this.getElements(DOMNavigator.DIRECTION.down).filter(el => el.offsetLeft >= left && el.offsetTop >= top);
+    elementsAfter(left, top) {
+        return this.getElements(DOMNavigator.DIRECTION.down).filter(
+            (el) => el.offsetLeft >= left && el.offsetTop >= top
+        );
     }
 
     /**
@@ -377,15 +379,15 @@ class DOMNavigator {
      * @param {number} top The top offset.
      * @return {Array} An array of elements.
      */
-    elementsBefore (left, top) {
-        return this.getElements(DOMNavigator.DIRECTION.up).filter(el => el.offsetLeft <= left && el.offsetTop <= top);
+    elementsBefore(left, top) {
+        return this.getElements(DOMNavigator.DIRECTION.up).filter((el) => el.offsetLeft <= left && el.offsetTop <= top);
     }
 
     /**
      * Handle the key down event.
      * @param {KeyboardEvent} ev - The event object.
      */
-    handleKeydown (ev) {
+    handleKeydown(ev) {
         const keys = keycodes;
         const direction = ev.shiftKey ? this.keys[`${keys.SHIFT}+${ev.which}`] : this.keys[ev.which];
         if (direction) {