175 lines
5.1 KiB
JavaScript
175 lines
5.1 KiB
JavaScript
|
export class CommandLine extends HTMLElement {
|
||
|
static commands = new Map();
|
||
|
|
||
|
constructor() {
|
||
|
super();
|
||
|
}
|
||
|
|
||
|
connectedCallback() {
|
||
|
this.suggestions = this.appendChild(document.createElement("ul"));
|
||
|
this.suggestions.classList.add("suggestions");
|
||
|
|
||
|
let inputWrapper = this.appendChild(document.createElement("div"));
|
||
|
inputWrapper.classList.add("input-wrapper");
|
||
|
this.input = inputWrapper.appendChild(document.createElement("input"));
|
||
|
this.input.type = "text";
|
||
|
|
||
|
window.addEventListener("keydown", (event) => {
|
||
|
if (event.key == ":" && !this.visible) {
|
||
|
event.stopPropagation();
|
||
|
event.preventDefault();
|
||
|
this.show();
|
||
|
}
|
||
|
|
||
|
if (event.key == "Escape") {
|
||
|
this.hide();
|
||
|
}
|
||
|
});
|
||
|
|
||
|
window.addEventListener("click", () => {
|
||
|
this.hide();
|
||
|
});
|
||
|
|
||
|
this.addEventListener("click", (event) => {
|
||
|
event.stopPropagation();
|
||
|
});
|
||
|
|
||
|
this.input.addEventListener("keydown", (event) => {
|
||
|
if (event.key == "Enter") {
|
||
|
event.preventDefault();
|
||
|
this.hide();
|
||
|
this.runCommand(this.input.value);
|
||
|
}
|
||
|
|
||
|
if (event.key == "Tab") {
|
||
|
event.preventDefault();
|
||
|
if (event.shiftKey) this.tabToPreviousSuggestion();
|
||
|
else this.tabToNextSuggestion();
|
||
|
}
|
||
|
});
|
||
|
|
||
|
this.input.addEventListener("input", () => {
|
||
|
this.updateSuggestions();
|
||
|
});
|
||
|
}
|
||
|
|
||
|
get visible() {
|
||
|
return this.classList.contains("visible");
|
||
|
}
|
||
|
|
||
|
show() {
|
||
|
this.classList.add("visible");
|
||
|
this.input.focus();
|
||
|
this.input.value = "";
|
||
|
this.updateSuggestions();
|
||
|
}
|
||
|
|
||
|
hide() {
|
||
|
this.classList.remove("visible");
|
||
|
}
|
||
|
|
||
|
tab(current, next) {
|
||
|
current?.classList?.remove("tabbed");
|
||
|
next.classList.add("tabbed");
|
||
|
|
||
|
this.input.value = next.name;
|
||
|
// NOTE: Do NOT update suggestions here.
|
||
|
// This would cause the tabbing to break.
|
||
|
}
|
||
|
|
||
|
tabToNextSuggestion() {
|
||
|
let current = this.suggestions.querySelector(".tabbed");
|
||
|
let next = current?.nextSibling ?? this.suggestions.childNodes[0];
|
||
|
this.tab(current, next);
|
||
|
}
|
||
|
|
||
|
tabToPreviousSuggestion() {
|
||
|
let current = this.suggestions.querySelector(".tabbed");
|
||
|
let previous =
|
||
|
current?.previousSibling ??
|
||
|
this.suggestions.childNodes[this.suggestions.childNodes.length - 1];
|
||
|
this.tab(current, previous);
|
||
|
}
|
||
|
|
||
|
updateSuggestions() {
|
||
|
let search = parseCommand(this.input.value)?.command ?? "";
|
||
|
let suggestions = Array.from(CommandLine.commands.entries()).filter(
|
||
|
([name, def]) => !def.isAlias && fuzzyMatch(search, name),
|
||
|
);
|
||
|
suggestions.sort();
|
||
|
|
||
|
this.suggestions.replaceChildren();
|
||
|
for (let [name, def] of suggestions) {
|
||
|
let suggestion = this.suggestions.appendChild(document.createElement("li"));
|
||
|
let commandName = suggestion.appendChild(document.createElement("dfn"));
|
||
|
commandName.textContent = name;
|
||
|
let commandDescription = suggestion.appendChild(document.createElement("span"));
|
||
|
commandDescription.classList.add("description");
|
||
|
commandDescription.textContent = def.description;
|
||
|
|
||
|
suggestion.name = name;
|
||
|
suggestion.def = def;
|
||
|
|
||
|
suggestion.addEventListener("click", () => {
|
||
|
this.input.value = name;
|
||
|
this.updateSuggestions();
|
||
|
this.input.focus();
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
runCommand(commandLine) {
|
||
|
let { command, args } = parseCommand(commandLine);
|
||
|
let commandDef = CommandLine.commands.get(command);
|
||
|
if (CommandLine.commands.has(command)) {
|
||
|
commandDef.run(args);
|
||
|
} else {
|
||
|
console.log(`unknown command`);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
static registerCommand({ aliases, description, run }) {
|
||
|
for (let i = 0; i < aliases.length; ++i) {
|
||
|
CommandLine.commands.set(aliases[i], {
|
||
|
isAlias: i != 0,
|
||
|
description,
|
||
|
run,
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
customElements.define("th-command-line", CommandLine);
|
||
|
|
||
|
function parseCommand(commandLine) {
|
||
|
let result = /^([^ ]+) *(.*)$/.exec(commandLine);
|
||
|
if (result == null) return null;
|
||
|
|
||
|
let [_, command, args] = result;
|
||
|
return { command, args };
|
||
|
}
|
||
|
|
||
|
// https://www.forrestthewoods.com/blog/reverse_engineering_sublime_texts_fuzzy_match/
|
||
|
function fuzzyMatch(pattern, string) {
|
||
|
let iPattern = 0;
|
||
|
let iString = 0;
|
||
|
|
||
|
while (iPattern < pattern.length && iString < string.length) {
|
||
|
if (pattern.charAt(iPattern).toLowerCase() == string.charAt(iString).toLowerCase()) {
|
||
|
iPattern += 1;
|
||
|
}
|
||
|
|
||
|
iString += 1;
|
||
|
}
|
||
|
|
||
|
return iPattern == pattern.length;
|
||
|
}
|
||
|
|
||
|
CommandLine.registerCommand({
|
||
|
aliases: ["help", "h"],
|
||
|
description: '"OwO, what is this?"',
|
||
|
run() {
|
||
|
window.location = `${TREEHOUSE_SITE}/treehouse/cmd`;
|
||
|
},
|
||
|
});
|