From ba1b33d0926f5836d385f6def9253d06fbe1ae38 Mon Sep 17 00:00:00 2001 From: somebody Date: Sat, 22 Oct 2022 23:23:04 -0500 Subject: [PATCH] Shortcuts, shortcut viewer, and other fixes --- static/koboldai.css | 55 +++++++++++++++++++++++++++++++++++++ static/koboldai.js | 64 ++++++++++++++++++++++++++++++------------- templates/popups.html | 11 +++++++- themes/Darkness.css | 2 +- themes/Monochrome.css | 2 +- themes/Nostalgia.css | 2 +- themes/Unicorn.css | 2 +- 7 files changed, 114 insertions(+), 24 deletions(-) diff --git a/static/koboldai.css b/static/koboldai.css index 40f43a88..d86374d5 100644 --- a/static/koboldai.css +++ b/static/koboldai.css @@ -2382,6 +2382,61 @@ body { z-index: 20; } +.popup-close { + cursor: pointer; +} + +/* Shortcuts */ +#shortcuts-popup { + width: 50%; + height: 75%; + padding-bottom: 10px; + background-color: var(--popup_background_color); +} + +#shortcuts-popup > .popup-header { + display: flex; + justify-content: space-between; + align-items: center; + + padding: 4px 7px; + margin-bottom: 5px; +} + +#shortcuts-popup h2 { + display: inline; + margin: 0px; + position: relative; + top: 4px; +} + +#shortcut-container { + padding: 0px 5px; + column-count: 2; + column-rule: 2px solid #ffffff1b; +} + +.shortcut-item { + display: flex; + justify-content: space-between; + width: 100%; +} + +.shortcut-keys { + display: inline-flex; + column-gap: 5px; + + margin-bottom: 3px; +} + +.shortcut-key { + background-color: #284b62; + padding: 2px 5px; + font-size: 16px; + font-family: monospace; + border-radius: 3px; +} + /*---------------------------------- Global ------------------------------------------------*/ .hidden { display: none; diff --git a/static/koboldai.js b/static/koboldai.js index adcfc2e6..bcc0685f 100644 --- a/static/koboldai.js +++ b/static/koboldai.js @@ -105,6 +105,18 @@ const context_menu_actions = [ // {label: "View Token Probabilities", icon: "account_tree", visibilityCondition: "SELECTION", click: view_selection_probabilities}, ]; +// CTRL-[X] +const shortcuts = [ + {key: "k", desc: "Finder", func: open_finder}, + {key: "/", desc: "Help screen", func: () => openPopup("shortcuts-popup")}, + {key: "z", desc: "Undoes last story action", func: () => socket.emit("back", {})}, + {key: "y", desc: "Redoes last story action", func: () => socket.emit("redo", {})}, + {key: "e", desc: "Retries last story action", func: () => socket.emit("retry", {})}, + {key: "m", desc: "Focuses Memory", func: () => focusEl("#memory")}, + {key: "l", desc: "Focuses Author's Note", func: () => focusEl("#authors_notes")}, // CTRL-N is reserved :^( + {key: "g", desc: "Focuses game text", func: () => focusEl("#input_text")}, +] + function $el(selector) { // We do not preemptively fetch all elements upon execution (wall of consts) // due to the layer of mental overhead it adds to debugging and reading @@ -4150,16 +4162,20 @@ function highlightEl(element) { return; } - let area = $(element).closest(".tab-target")[0]; - - if (!area) { - console.error("No error? :^("); - return; + const area = $(element).closest(".tab-target")[0]; + if (area) { + // If we need to click a tab to make the element visible, do so. + let tab = Array.from($(".tab")).filter((c) => c.getAttribute("tab-target") === area.id)[0]; + tab.click(); } - - let tab = Array.from($(".tab")).filter((c) => c.getAttribute("tab-target") === area.id)[0]; - tab.click(); + element.scrollIntoView(); + return element; +} + +function focusEl(element) { + const el = highlightEl(element); + if (el) el.focus(); } function addSearchListing(action, highlight) { @@ -5323,19 +5339,29 @@ function initalizeTooltips() { } /* -- Shortcuts -- */ -document.addEventListener("keydown", function(event) { - - if (!event.ctrlKey) return; +(function() { + document.addEventListener("keydown", function(event) { + if (!event.ctrlKey) return; - switch (event.key) { - // TODO: Add other shortcuts - case "k": - open_finder() - + for (const shortcut of shortcuts) { + if (shortcut.key !== event.key) continue; event.preventDefault(); - break; -} -}); + shortcut.func(); + } + }); + + // Display shortcuts in popup + const shortcutContainer = $el("#shortcut-container"); + for (const shortcut of shortcuts) { + const shortcutRow = $e("div", shortcutContainer, {classes: ["shortcut-item"]}); + const shortcutEl = $e("div", shortcutRow, {classes: ["shortcut-keys"]}); + for (const key of ["Ctrl", shortcut.key.toUpperCase()]) { + console.log("HELLO") + $e("span", shortcutEl, {classes: ["shortcut-key"], innerText: key}); + } + const shortcutDesc = $e("div", shortcutRow, {classes: ["shortcut-desc"], innerText: shortcut.desc}); + } +})(); //function to load more actions if nessisary function infinite_scroll() { diff --git a/templates/popups.html b/templates/popups.html index 7a1109a6..7ed4e952 100644 --- a/templates/popups.html +++ b/templates/popups.html @@ -170,7 +170,7 @@