@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
88 lines (87 loc) • 3.38 kB
JavaScript
import e from "./dom.js";
import { returnFirstEl as t } from "../utils/index.js";
//#region common/mixins/keyboard_list_navigation.js
var n = "listElementKey is required or the referenced element doesn't exist. Received listElement: ", r = ({ listItemRole: r = "option", indexKey: i = "highlightIndex", idKey: a = "highlightId", listElementKey: o = "listRef", activeItemKey: s = "", openMethod: c = null, afterHighlightMethod: l = null, beginningOfListMethod: u = null, endOfListMethod: d = null, scrollToOnHighlight: f = !0, focusOnKeyboardNavigation: p = !1 } = {}) => ({
mixins: [e],
data() {
return {
[i]: -1,
[a]: "",
scrollToOnHighlight: f,
focusOnKeyboardNavigation: p
};
},
provide() {
return { highlightId: () => this[a] };
},
methods: {
_getListElement() {
return t(this[o]()?.$el) || this[o]();
},
_itemsLength() {
let e = this._getListItemNodes();
return e === null ? 0 : e.length;
},
_getListItemNodes() {
let e = this._getListElement();
return e ? Array.from(e.querySelectorAll(`[role="${r}"], #sr-only-close-button`)) : (console.error(n, e), null);
},
onUpKey() {
c && this[c](!0), this[i] > 0 ? this.setHighlightIndex(this[i] - 1) : u && this[u](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
},
onDownKey() {
c && this[c](!0), this[i] < this._itemsLength() - 1 ? this.setHighlightIndex(this[i] + 1) : d && this[d](), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
},
onHomeKey() {
this.jumpToBeginning(), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
},
onEndKey() {
this.jumpToEnd(), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
},
onNavigationKey(e) {
let t = this._getListItemNodes(), n = t.filter((t) => t.textContent.trim().toLowerCase().startsWith(e.toLowerCase()));
if (n.length <= 0) return;
let r = n.findIndex((e) => this[i] === t.indexOf(e)), a = t.indexOf(r < n.length - 1 ? n[r + 1] : n[0]);
this.setHighlightIndex(a), this.scrollActiveItemIntoViewIfNeeded(), this.focusActiveItemIfNeeded();
},
isValidLetter(e) {
return e.length > 1 ? !1 : e >= "a" && e <= "z" || e >= "A" && e <= "Z";
},
jumpToBeginning() {
this.setHighlightIndex(0);
},
jumpToEnd() {
this.setHighlightIndex(this._itemsLength() - 1);
},
setHighlightIndex(e) {
this[i] = e, this[a] = this._getItemId(e), this._itemsLength() && l && this[l](e);
},
setHighlightId(e) {
e && (this[a] = e, this[i] = this._getItemIndex(e), this._itemsLength() && l && this[l](this._getItemIndex(e)));
},
_getItemIndex(e) {
let t = this._getListElement();
if (t) return Array.from(t.querySelectorAll(`[role="${r}"], #sr-only-close-button`)).indexOf(t.querySelector(`#${e}`));
},
_getItemId(e) {
let t = this._getListElement();
if (t) return t.querySelectorAll(`[role="${r}"], #sr-only-close-button`)[e]?.id;
},
scrollActiveItemIntoViewIfNeeded() {
if (!this.scrollToOnHighlight) return;
let e = this[s];
if (e) {
let t = this._getListElement();
this.scrollElementIntoViewIfNeeded(e, null, null, t);
}
},
focusActiveItemIfNeeded() {
if (!this.focusOnKeyboardNavigation) return;
let e = this[s];
e && e.focus();
}
}
});
//#endregion
export { r as default };
//# sourceMappingURL=keyboard-list-navigation.js.map