From 34ac755630871c1b2c26d9ad830ef282be0fa00a Mon Sep 17 00:00:00 2001 From: Ferotiq <64989416+Ferotiq@users.noreply.github.com> Date: Sat, 26 Feb 2022 18:11:52 -0600 Subject: [PATCH] Add dynamic keymap legend style (#2592) by Ferotiq * Add dynamic keymap legend style * Speed * make it work with all layouts * Fix bug * Update layout-emulator.js * Update layout-emulator.js * mac fix * we didn't need layout state * make quote show up * remove some * Rename Co-authored-by: Miodec --- backend/api/schemas/config-schema.ts | 4 +- frontend/src/scripts/config.ts | 4 +- .../scripts/controllers/input-controller.ts | 1 + .../src/scripts/elements/commandline-lists.ts | 8 ++++ frontend/src/scripts/elements/keymap.ts | 5 ++- frontend/src/scripts/test/caps-warning.ts | 31 ++++++++++++---- frontend/src/scripts/test/layout-emulator.js | 6 +-- frontend/src/scripts/test/shift-tracker.js | 37 +++++++++++++++++++ frontend/src/scripts/types/types.d.ts | 2 +- frontend/static/index.html | 8 ++++ 10 files changed, 90 insertions(+), 16 deletions(-) diff --git a/backend/api/schemas/config-schema.ts b/backend/api/schemas/config-schema.ts index 05c376251..9c65a28c7 100644 --- a/backend/api/schemas/config-schema.ts +++ b/backend/api/schemas/config-schema.ts @@ -60,7 +60,9 @@ const CONFIG_SCHEMA = joi.object({ keymapStyle: joi .string() .valid("staggered", "alice", "matrix", "split", "split_matrix"), - keymapLegendStyle: joi.string().valid("lowercase", "uppercase", "blank"), + keymapLegendStyle: joi + .string() + .valid("lowercase", "uppercase", "blank", "dynamic"), keymapLayout: joi.string().valid(), fontFamily: joi.string(), smoothLineScroll: joi.boolean(), diff --git a/frontend/src/scripts/config.ts b/frontend/src/scripts/config.ts index 41f73153b..61c874967 100644 --- a/frontend/src/scripts/config.ts +++ b/frontend/src/scripts/config.ts @@ -1422,13 +1422,13 @@ export function setKeymapLegendStyle( ): boolean { if ( !isConfigValueValid("keymap legend style", style, [ - ["lowercase", "uppercase", "blank"], + ["lowercase", "uppercase", "blank", "dynamic"], ]) ) return false; // Remove existing styles - const keymapLegendStyles = ["lowercase", "uppercase", "blank"]; + const keymapLegendStyles = ["lowercase", "uppercase", "blank", "dynamic"]; keymapLegendStyles.forEach((name) => { $(".keymapLegendStyle").removeClass(name); }); diff --git a/frontend/src/scripts/controllers/input-controller.ts b/frontend/src/scripts/controllers/input-controller.ts index 88b7d0554..0c76e692a 100644 --- a/frontend/src/scripts/controllers/input-controller.ts +++ b/frontend/src/scripts/controllers/input-controller.ts @@ -779,6 +779,7 @@ $(document).keydown(async (event) => { correctShiftUsed = (await ShiftTracker.isUsingOppositeShift(event)) !== false; } + if (Config.funbox === "arrows") { let char = event.key; if (["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"].includes(char)) { diff --git a/frontend/src/scripts/elements/commandline-lists.ts b/frontend/src/scripts/elements/commandline-lists.ts index a43ee24c4..86d45e8ee 100644 --- a/frontend/src/scripts/elements/commandline-lists.ts +++ b/frontend/src/scripts/elements/commandline-lists.ts @@ -1590,6 +1590,14 @@ const commandsKeymapLegendStyle: MonkeyTypes.CommandsGroup = { UpdateConfig.setKeymapLegendStyle("blank"); }, }, + { + id: "setKeymapLegendStyleDynamic", + display: "dynamic", + configValue: "dynamic", + exec: (): void => { + UpdateConfig.setKeymapLegendStyle("dynamic"); + }, + }, ], }; diff --git a/frontend/src/scripts/elements/keymap.ts b/frontend/src/scripts/elements/keymap.ts index 685a9277d..3556e2ae4 100644 --- a/frontend/src/scripts/elements/keymap.ts +++ b/frontend/src/scripts/elements/keymap.ts @@ -164,7 +164,10 @@ export async function refresh( } else if (Config.keymapLegendStyle === "uppercase") { keyDisplay = keyDisplay.toUpperCase(); } - const keyElement = `
+ const keyElement = `
${keyDisplay} ${bump ? "
" : ""}
`; diff --git a/frontend/src/scripts/test/caps-warning.ts b/frontend/src/scripts/test/caps-warning.ts index fcdefed9b..823f29ed4 100644 --- a/frontend/src/scripts/test/caps-warning.ts +++ b/frontend/src/scripts/test/caps-warning.ts @@ -1,5 +1,7 @@ import Config from "../config"; +export let capsState = false; + function show(): void { if ($("#capsWarning").hasClass("hidden")) { $("#capsWarning").removeClass("hidden"); @@ -13,11 +15,17 @@ function hide(): void { } $(document).keydown(function (event) { + if ( + event?.originalEvent?.getModifierState && + event?.originalEvent?.getModifierState("CapsLock") + ) { + capsState = true; + } else { + capsState = false; + } + try { - if ( - Config.capsLockWarning && - event.originalEvent?.getModifierState("CapsLock") - ) { + if (Config.capsLockWarning && capsState) { show(); } else { hide(); @@ -26,11 +34,18 @@ $(document).keydown(function (event) { }); $(document).keyup(function (event) { + if ( + event?.originalEvent?.getModifierState && + event?.originalEvent?.getModifierState("CapsLock") + ) { + //filthy fix but optional chaining refues to work + capsState = true; + } else { + capsState = false; + } + try { - if ( - Config.capsLockWarning && - event.originalEvent?.getModifierState("CapsLock") - ) { + if (Config.capsLockWarning && capsState) { show(); } else { hide(); diff --git a/frontend/src/scripts/test/layout-emulator.js b/frontend/src/scripts/test/layout-emulator.js index 9ded871f6..7a0f9ce7f 100644 --- a/frontend/src/scripts/test/layout-emulator.js +++ b/frontend/src/scripts/test/layout-emulator.js @@ -1,11 +1,10 @@ import Config from "../config"; import * as Misc from "../misc"; +import { capsLock } from "./caps-warning"; export async function getCharFromEvent(event) { function emulatedLayoutShouldShiftKey(event, newKeyPreview) { - const isCapsLockHeld = event.originalEvent.getModifierState("CapsLock"); - if (isCapsLockHeld) - return Misc.isASCIILetter(newKeyPreview) !== event.shiftKey; + if (capsLock) return Misc.isASCIILetter(newKeyPreview) !== event.shiftKey; return event.shiftKey; } @@ -170,6 +169,7 @@ export async function getCharFromEvent(event) { } const layoutKeys = layout.keys; + const layoutMap = layoutKeys["row1"] .concat(layoutKeys["row2"]) .concat(layoutKeys["row3"]) diff --git a/frontend/src/scripts/test/shift-tracker.js b/frontend/src/scripts/test/shift-tracker.js index fe88cbb35..8c7814163 100644 --- a/frontend/src/scripts/test/shift-tracker.js +++ b/frontend/src/scripts/test/shift-tracker.js @@ -1,8 +1,10 @@ import Config from "../config"; import * as Misc from "../misc"; +import { capsLock } from "./caps-warning"; export let leftState = false; export let rightState = false; +let caseState = false; let keymapStrings = { left: null, @@ -10,6 +12,33 @@ let keymapStrings = { keymap: null, }; +function dynamicKeymapLegendStyle(uppercase) { + const keymapKeys = [...document.getElementsByClassName("keymap-key")]; + + const layoutKeys = keymapKeys.map((el) => el.dataset.key); + + const keys = keymapKeys.map((el) => el.childNodes[1]); + + if (capsLock) uppercase = !uppercase; + + if (layoutKeys.filter((v) => v === undefined).length > 2) return; + + if ((uppercase && caseState) || (!uppercase && !caseState)) return; + + const index = uppercase ? 1 : 0; + + caseState = index === 1 ? true : false; + + for (let i = 0; i < layoutKeys.length; i++) { + const layoutKey = layoutKeys[i], + key = keys[i]; + + if (key === undefined || layoutKey === undefined) continue; + + key.textContent = layoutKey[index]; + } +} + async function buildKeymapStrings() { if (keymapStrings.keymap === Config.keymapLayout) return; @@ -52,6 +81,10 @@ $(document).keydown((e) => { leftState = false; rightState = true; } + + if (Config.keymapLegendStyle === "dynamic") { + dynamicKeymapLegendStyle(leftState || rightState); + } }); $(document).keyup((e) => { @@ -59,6 +92,10 @@ $(document).keyup((e) => { leftState = false; rightState = false; } + + if (Config.keymapLegendStyle === "dynamic") { + dynamicKeymapLegendStyle(leftState || rightState); + } }); export function reset() { diff --git a/frontend/src/scripts/types/types.d.ts b/frontend/src/scripts/types/types.d.ts index 76f651119..0ab379ef3 100644 --- a/frontend/src/scripts/types/types.d.ts +++ b/frontend/src/scripts/types/types.d.ts @@ -57,7 +57,7 @@ declare namespace MonkeyTypes { | "split" | "split_matrix"; - type KeymapLegendStyle = "lowercase" | "uppercase" | "blank"; + type KeymapLegendStyle = "lowercase" | "uppercase" | "blank" | "dynamic"; type SingleListCommandLine = "manual" | "on"; diff --git a/frontend/static/index.html b/frontend/static/index.html index 79982df17..e6faab72f 100644 --- a/frontend/static/index.html +++ b/frontend/static/index.html @@ -3364,6 +3364,14 @@ > blank
+
+ dynamic +