2024-12-08 12:45:29 +01:00
|
|
|
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();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2024-12-10 20:40:44 +01:00
|
|
|
window.addEventListener("click", (event) => {
|
|
|
|
if (!this.contains(event.target)) {
|
|
|
|
this.hide();
|
|
|
|
}
|
2024-12-08 12:45:29 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
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");
|
2024-12-10 20:40:44 +01:00
|
|
|
next.scrollIntoView();
|
2024-12-08 12:45:29 +01:00
|
|
|
|
|
|
|
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(
|
2024-12-10 20:40:44 +01:00
|
|
|
([name, def]) =>
|
|
|
|
!def.isAlias &&
|
|
|
|
(def.showInSuggestions?.(this.input.value) ?? true) &&
|
|
|
|
fuzzyMatch(search, name),
|
2024-12-08 12:45:29 +01:00
|
|
|
);
|
|
|
|
suggestions.sort();
|
|
|
|
|
|
|
|
this.suggestions.replaceChildren();
|
|
|
|
for (let [name, def] of suggestions) {
|
|
|
|
let suggestion = this.suggestions.appendChild(document.createElement("li"));
|
2024-12-10 20:40:44 +01:00
|
|
|
if (def.immediate) {
|
|
|
|
suggestion.classList.add("immediate");
|
|
|
|
}
|
|
|
|
|
2024-12-08 12:45:29 +01:00
|
|
|
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;
|
|
|
|
|
2024-12-10 20:40:44 +01:00
|
|
|
suggestion.addEventListener("click", (event) => {
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
if (def.immediate) {
|
|
|
|
this.hide();
|
|
|
|
this.runCommand(name);
|
|
|
|
} else {
|
|
|
|
this.input.value = name + " ";
|
|
|
|
this.updateSuggestions();
|
|
|
|
this.input.focus();
|
|
|
|
}
|
2024-12-08 12:45:29 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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`);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-12-10 20:40:44 +01:00
|
|
|
static registerCommand({ aliases, description, immediate, showInSuggestions, run }) {
|
2024-12-08 12:45:29 +01:00
|
|
|
for (let i = 0; i < aliases.length; ++i) {
|
|
|
|
CommandLine.commands.set(aliases[i], {
|
|
|
|
isAlias: i != 0,
|
|
|
|
description,
|
2024-12-10 20:40:44 +01:00
|
|
|
immediate,
|
|
|
|
showInSuggestions,
|
2024-12-08 12:45:29 +01:00
|
|
|
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?"',
|
2024-12-10 20:40:44 +01:00
|
|
|
immediate: true,
|
|
|
|
|
2024-12-08 12:45:29 +01:00
|
|
|
run() {
|
|
|
|
window.location = `${TREEHOUSE_SITE}/treehouse/cmd`;
|
|
|
|
},
|
|
|
|
});
|
2024-12-10 20:40:44 +01:00
|
|
|
|
|
|
|
CommandLine.registerCommand({
|
|
|
|
aliases: ["new", "n"],
|
|
|
|
description: "go to news feed",
|
|
|
|
immediate: true,
|
|
|
|
|
|
|
|
run() {
|
|
|
|
window.location = `${TREEHOUSE_SITE}/treehouse/new`;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
CommandLine.registerCommand({
|
|
|
|
aliases: ["index", "i", "-w-"],
|
|
|
|
description: "go home",
|
|
|
|
immediate: true,
|
|
|
|
|
|
|
|
run() {
|
|
|
|
window.location = `${TREEHOUSE_SITE}/`;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
CommandLine.registerCommand({
|
|
|
|
aliases: ["quit", "exit", "q", "q!", "wq", "wq!", "wqa", "wqa!", "bc", "bc!", "bca", "bca!"],
|
|
|
|
description: "quit liquidex's treehouse (congration!)",
|
|
|
|
// non-immediate because this is a destructive action
|
|
|
|
|
|
|
|
showInSuggestions(commandLine) {
|
|
|
|
return commandLine.length >= 1;
|
|
|
|
},
|
|
|
|
|
|
|
|
run() {
|
|
|
|
window.location = `${TREEHOUSE_SITE}/treehouse/quit`;
|
|
|
|
},
|
|
|
|
});
|