Skip to content

Commit 2437222

Browse files
MiodecMiodec
committed
refactor(commandline): rework some parts of the code
extract icon getting code to a function cleanup code that builds command html update the placeholder of the input according to the active command group fix some icon alignment update some strings
1 parent 4319830 commit 2437222

File tree

13 files changed

+76
-49
lines changed

13 files changed

+76
-49
lines changed

‎frontend/src/ts/commandline/commandline.ts‎

Lines changed: 63 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export function show(
140140
activeCommand = null;
141141
Focus.set(false);
142142
CommandlineLists.setStackToDefault();
143-
updateInput();
143+
await updateInput();
144144
await filterSubgroup();
145145
await showCommands();
146146
await updateActiveCommand();
@@ -157,7 +157,7 @@ export function show(
157157
value: showInputCommand.defaultValue?.() ?? "",
158158
icon: showInputCommand.icon ?? "fa-chevron-right",
159159
};
160-
updateInput(inputModeParams.value as string);
160+
void updateInput(inputModeParams.value as string);
161161
hideCommands();
162162
}
163163
}, 1);
@@ -198,7 +198,7 @@ async function goBackOrHide(): Promise<void> {
198198
value: null,
199199
icon: null,
200200
};
201-
updateInput("");
201+
await updateInput("");
202202
await filterSubgroup();
203203
await showCommands();
204204
await updateActiveCommand();
@@ -208,7 +208,7 @@ async function goBackOrHide(): Promise<void> {
208208
if (CommandlineLists.getStackLength() > 1) {
209209
CommandlineLists.popFromStack();
210210
activeIndex = 0;
211-
updateInput("");
211+
await updateInput("");
212212
await filterSubgroup();
213213
await showCommands();
214214
await updateActiveCommand();
@@ -362,6 +362,33 @@ async function getList(): Promise<Command[]> {
362362
return (await getSubgroup()).list;
363363
}
364364

365+
function getCommandIconsHtml(command: Command & { isActive: boolean }): {
366+
iconHtml: string;
367+
configIconHtml: string;
368+
} {
369+
let iconHtml = `<i class="fas fa-fw fa-chevron-right"></i>`;
370+
if (command.icon !== undefined && command.icon !== "") {
371+
const faIcon = command.icon.startsWith("fa-");
372+
const faType = command.iconType ?? "solid";
373+
const faTypeClass = faType === "solid" ? "fas" : "far";
374+
if (!faIcon) {
375+
iconHtml = `<div class="textIcon">${command.icon}</div>`;
376+
} else {
377+
iconHtml = `<i class="${faTypeClass} fa-fw ${command.icon}"></i>`;
378+
}
379+
}
380+
381+
let configIconHtml = `<i class="fas fa-fw"></i>`;
382+
if (command.isActive) {
383+
configIconHtml = `<i class="fas fa-fw fa-check"></i>`;
384+
}
385+
386+
return {
387+
iconHtml,
388+
configIconHtml,
389+
};
390+
}
391+
365392
async function showCommands(): Promise<void> {
366393
const element = document.querySelector("#commandLine .suggestions");
367394
if (element === null) {
@@ -417,46 +444,40 @@ async function showCommands(): Promise<void> {
417444

418445
for (const command of list) {
419446
if (command.found !== true) continue;
420-
let icon = command.icon ?? "fa-chevron-right";
421-
const faIcon = icon.startsWith("fa-");
422-
const iconType = command.iconType ?? "solid";
423-
const iconTypeClass = iconType === "solid" ? "fas" : "far";
424-
if (!faIcon) {
425-
icon = `<div class="textIcon">${icon}</div>`;
426-
} else {
427-
icon = `<i class="${iconTypeClass} fa-fw ${icon}"></i>`;
428-
}
429-
let configIcon = "";
430-
if (command.isActive) {
431-
firstActive = firstActive ?? index;
432-
configIcon = `<i class="fas fa-fw fa-check"></i>`;
433-
} else {
434-
configIcon = `<i class="fas fa-fw"></i>`;
435-
}
436-
437-
const iconHTML = `<div class="icon">${
438-
usingSingleList || configIcon === "" ? icon : configIcon
439-
}</div>`;
440447
let customStyle = "";
441448
if (command.customStyle !== undefined && command.customStyle !== "") {
442449
customStyle = command.customStyle;
443450
}
444451

452+
const { iconHtml, configIconHtml } = getCommandIconsHtml(command);
453+
445454
let display = command.display;
446455
if (usingSingleList) {
447456
display = (command.singleListDisplay ?? "") || command.display;
448-
display = display.replace(
449-
`<i class="fas fa-fw fa-chevron-right chevronIcon"></i>`,
450-
`<i class="fas fa-fw fa-chevron-right chevronIcon"></i>` + configIcon
451-
);
457+
if (command.configValue !== undefined) {
458+
display = display.replace(
459+
`<i class="fas fa-fw fa-chevron-right chevronIcon"></i>`,
460+
`<i class="fas fa-fw fa-chevron-right chevronIcon"></i>` +
461+
configIconHtml
462+
);
463+
}
464+
}
465+
466+
let finalIconHtml = iconHtml;
467+
if (
468+
!usingSingleList &&
469+
command.subgroup === undefined &&
470+
command.configValue !== undefined
471+
) {
472+
finalIconHtml = configIconHtml;
452473
}
453474

454475
if (command.customData !== undefined) {
455476
if (command.id.startsWith("changeTheme")) {
456477
html += `<div class="command changeThemeCommand" data-command-id="${
457478
command.id
458479
}" data-index="${index}" style="${customStyle}">
459-
${iconHTML}<div>${display}</div>
480+
<div class="icon">${finalIconHtml}</div><div>${display}</div>
460481
<div class="themeFavIcon ${
461482
command.customData["isFavorite"] === true ? "" : "hidden"
462483
}">
@@ -488,10 +509,10 @@ async function showCommands(): Promise<void> {
488509
fontFamily += " Preview";
489510
}
490511

491-
html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="font-family: ${fontFamily}">${iconHTML}<div>${display}</div></div>`;
512+
html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="font-family: ${fontFamily}"><div class="icon">${finalIconHtml}</div><div>${display}</div></div>`;
492513
}
493514
} else {
494-
html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="${customStyle}">${iconHTML}<div>${display}</div></div>`;
515+
html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="${customStyle}"><div class="icon">${finalIconHtml}</div><div>${display}</div></div>`;
495516
}
496517
index++;
497518
}
@@ -564,11 +585,11 @@ async function runActiveCommand(): Promise<void> {
564585
value: command.defaultValue?.() ?? "",
565586
icon: command.icon ?? "fa-chevron-right",
566587
};
567-
updateInput(inputModeParams.value as string);
588+
await updateInput(inputModeParams.value as string);
568589
hideCommands();
569590
} else if (command.subgroup) {
570591
CommandlineLists.pushToStack(command.subgroup);
571-
updateInput("");
592+
await updateInput("");
572593
await filterSubgroup();
573594
await showCommands();
574595
await updateActiveCommand();
@@ -609,7 +630,7 @@ function keepActiveCommandInView(): void {
609630
lastActiveIndex = active.dataset["index"];
610631
}
611632

612-
function updateInput(setInput?: string): void {
633+
async function updateInput(setInput?: string): Promise<void> {
613634
const iconElement: HTMLElement | null = document.querySelector(
614635
"#commandLine .searchicon"
615636
);
@@ -639,9 +660,15 @@ function updateInput(setInput?: string): void {
639660
element.setSelectionRange(0, element.value.length);
640661
}
641662
} else {
642-
iconElement.innerHTML = '<i class="fas fa-search"></i>';
663+
iconElement.innerHTML = '<i class="fas fa-fw fa-search"></i>';
643664
element.placeholder = "Search...";
644665

666+
const subgroup = await getSubgroup();
667+
668+
if (subgroup.title !== undefined && subgroup.title !== "") {
669+
element.placeholder = `${subgroup.title}`;
670+
}
671+
645672
let length = inputValue.length;
646673
if (setInput !== undefined) {
647674
length = setInput.length;
@@ -716,7 +743,7 @@ const modal = new AnimatedModal({
716743
lastSingleListModeInputValue !== ""
717744
) {
718745
inputValue = lastSingleListModeInputValue;
719-
updateInput();
746+
await updateInput();
720747
await filterSubgroup();
721748
await showCommands();
722749
await updateActiveCommand();

‎frontend/src/ts/commandline/lists.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -528,7 +528,7 @@ export async function getSingleSubgroup(): Promise<CommandsSubgroup> {
528528
}
529529

530530
singleList = {
531-
title: "All commands",
531+
title: "",
532532
list: singleCommands,
533533
};
534534
return singleList;

‎frontend/src/ts/commandline/lists/keymap-layouts.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { capitalizeFirstLetterOfEachWord } from "../../utils/strings";
66
import { Command, CommandsSubgroup } from "../types";
77

88
const subgroup: CommandsSubgroup = {
9-
title: "Change keymap layout...",
9+
title: "Keymap layout...",
1010
configKey: "keymapLayout",
1111
list: [
1212
{

‎frontend/src/ts/commandline/lists/min-acc.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as UpdateConfig from "../../config";
22
import { Command, CommandsSubgroup } from "../types";
33

44
const subgroup: CommandsSubgroup = {
5-
title: "Change min accuracy mode...",
5+
title: "Minimum accuracy...",
66
configKey: "minAcc",
77
list: [
88
{

‎frontend/src/ts/commandline/lists/min-burst.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { get as getTypingSpeedUnit } from "../../utils/typing-speed-units";
33
import { Command, CommandsSubgroup } from "../types";
44

55
const subgroup: CommandsSubgroup = {
6-
title: "Change min burst mode...",
6+
title: "Minimum burst...",
77
configKey: "minBurst",
88
list: [
99
{

‎frontend/src/ts/commandline/lists/min-wpm.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { get as getTypingSpeedUnit } from "../../utils/typing-speed-units";
33
import { Command, CommandsSubgroup } from "../types";
44

55
const subgroup: CommandsSubgroup = {
6-
title: "Change min speed mode...",
6+
title: "Minimum speed...",
77
configKey: "minWpm",
88
list: [
99
{

‎frontend/src/ts/commandline/lists/mode.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const commands: Command[] = [
99
display: "Mode...",
1010
icon: "fa-bars",
1111
subgroup: {
12-
title: "Change mode...",
12+
title: "Mode...",
1313
configKey: "mode",
1414
list: [
1515
{

‎frontend/src/ts/commandline/lists/opposite-shift-mode.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as ModesNotice from "./../../elements/modes-notice";
33
import { Command, CommandsSubgroup } from "../types";
44

55
const subgroup: CommandsSubgroup = {
6-
title: "Change opposite shift mode...",
6+
title: "Opposite shift mode...",
77
configKey: "oppositeShiftMode",
88
list: [
99
{
@@ -39,7 +39,7 @@ const subgroup: CommandsSubgroup = {
3939
const commands: Command[] = [
4040
{
4141
id: "changeOppositeShiftMode",
42-
display: "Change opposite shift mode...",
42+
display: "Opposite shift mode...",
4343
icon: "fa-exchange-alt",
4444
subgroup,
4545
},

‎frontend/src/ts/commandline/lists/punctuation.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const commands: Command[] = [
88
display: "Punctuation...",
99
icon: "fa-at",
1010
subgroup: {
11-
title: "Change punctuation...",
11+
title: "Punctuation...",
1212
configKey: "punctuation",
1313
list: [
1414
{

‎frontend/src/ts/commandline/lists/quote-length.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const commands: Command[] = [
1010
icon: "fa-quote-right",
1111
alias: "quotes",
1212
subgroup: {
13-
title: "Change quote length...",
13+
title: "Quote length...",
1414
configKey: "quoteLength",
1515
list: [
1616
{

0 commit comments

Comments
 (0)