hswidget
Version:
Helpful Scripts UI widgets
119 lines • 11.5 kB
JavaScript
import { Log } from 'hsutil';
const log = new Log('TypeAhead');
import m from "mithril";
function emphasize(item, match) {
const re = new RegExp(match, 'gi');
const decorations = item
.replace(re, (m) => `<b>${m}</b>`)
.split('<')
.map((s) => {
if (s.startsWith('/b>')) {
return m('span', { name: item }, s.slice(3));
}
else if (s.startsWith('b>')) {
return m('b', { name: item }, s.slice(2));
}
else {
return m('span', { name: item }, s);
}
});
return m('span', decorations);
}
class GetList {
constructor(map) {
this.map = map;
this.list = [];
}
search(list) {
if (typeof list === 'string') {
if (this.url !== list) {
this.url = list;
m.request({ method: "GET", url: list })
.then((data) => this.captureList(data, this.map))
.catch((e) => log.warn(`requesting ${list}: ${e.toString()}`));
}
}
else {
this.captureList(list, this.map);
}
}
captureList(list, map) {
this.list = map ? map(list) : list;
}
}
export class TypeAhead {
constructor() {
this.gl = new GetList();
}
oninit(node) {
node.state.inputNode = '';
node.state.hidePopdown = true;
node.state.value = '';
node.state.typeAheadList = [];
node.state.onsubmit = node.attrs.onsubmit;
node.state.autocomplete = node.attrs.autocomplete === undefined ? true : node.attrs.autocomplete;
}
view(node) {
this.gl.search(node.attrs.list);
const nosubmit = () => log.warn('no submit function defined');
const getList = (typed) => node.state.typeAheadList = this.gl.list.filter(l => l.match(new RegExp(typed, 'gi')));
const submit = (v) => {
node.state.inputNode.setSelectionRange(0, node.state.inputNode.value.length);
node.state.hidePopdown = true;
return (node.state.onsubmit || nosubmit)(v, node.state.typeAheadList);
};
const select = (e) => {
if (e) {
const selected = e.target.attributes.name.value;
node.state.inputNode.value = selected;
node.state.typeAheadList = getList(selected);
submit(selected);
}
};
const oninput = (e) => {
const n = node.state.inputNode = e.target;
const typed = node.state.value = n.value;
if (typed.length > 0) {
node.state.typeAheadList = getList(typed);
if (node.state.autocomplete) {
autoComplete(typed, node);
}
}
};
const keyPressed = (e) => {
const n = node.state.inputNode = e.target;
node.state.hidePopdown = false;
if (e.code === 'Enter') {
submit(n.value);
}
else if (e.code === 'Escape') {
node.state.hidePopdown = true;
}
else if (e.code === 'Backspace' && n.textLength > 0) {
const input = n.textContent;
if (input.length > 0) {
n.value = input.slice(0);
}
}
};
const selector = node.state.value ? '.hs_typeahead_value' : '.hs_typeahead_placeholder';
return m('.hs_form', [
m(`input.hs_typeahead_input${selector}`, {
contenteditable: true,
placeholder: node.attrs.placeholder,
autofocus: node.attrs.autofocus || true,
onkeydown: keyPressed,
oninput: oninput
}, m.trust(node.state.value ? node.state.value : node.attrs.placeholder)),
node.state.hidePopdown ? undefined :
m('.hs_typeahead_list', node.state.typeAheadList.map((l) => m('', { onclick: select }, emphasize(l, node.state.value))))
]);
}
}
function autoComplete(typed, node) {
const n = node.state.inputNode;
const startOfLineInput = new RegExp(`^${typed}`, 'gi');
n.value = node.state.typeAheadList.filter((l) => l.match(startOfLineInput))[0] || typed;
n.setSelectionRange(typed.length, n.value.length);
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVHlwZUFoZWFkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL1R5cGVBaGVhZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2Q0EsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLFFBQVEsQ0FBQztBQUFFLE1BQU0sR0FBRyxHQUFHLElBQUksR0FBRyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0FBQ2hFLE9BQU8sQ0FBQyxNQUFNLFNBQVMsQ0FBQztBQUl4QixTQUFTLFNBQVMsQ0FBQyxJQUFXLEVBQUUsS0FBWTtJQUN4QyxNQUFNLEVBQUUsR0FBRyxJQUFJLE1BQU0sQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDbkMsTUFBTSxXQUFXLEdBQUcsSUFBSTtTQUNuQixPQUFPLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBUSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDO1NBQ3hDLEtBQUssQ0FBQyxHQUFHLENBQUM7U0FDVixHQUFHLENBQUMsQ0FBQyxDQUFRLEVBQUUsRUFBRTtRQUNkLElBQUksQ0FBQyxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUNyQixPQUFPLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBQyxJQUFJLEVBQUMsSUFBSSxFQUFDLEVBQUUsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1NBQzdDO2FBQU0sSUFBSSxDQUFDLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxFQUFFO1lBQzNCLE9BQU8sQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFDLElBQUksRUFBQyxJQUFJLEVBQUMsRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDMUM7YUFBTTtZQUNILE9BQU8sQ0FBQyxDQUFDLE1BQU0sRUFBRSxFQUFDLElBQUksRUFBQyxJQUFJLEVBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztTQUNwQztJQUNMLENBQUMsQ0FBQyxDQUFDO0lB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