mirror of
https://github.com/KoboldAI/KoboldAI-Client.git
synced 2025-06-05 21:59:24 +02:00
Make context menus more universal
This commit is contained in:
@@ -90,21 +90,26 @@ var finder_actions = [
|
|||||||
// {name: "", icon: "palette", func: function() { highlightEl("#biasing") }},
|
// {name: "", icon: "palette", func: function() { highlightEl("#biasing") }},
|
||||||
];
|
];
|
||||||
|
|
||||||
const context_menu_actions = [
|
const context_menu_actions = {
|
||||||
{label: "Cut", icon: "content_cut", visibilityCondition: "SELECTION", click: cut},
|
gamescreen: [
|
||||||
{label: "Copy", icon: "content_copy", visibilityCondition: "SELECTION", click: copy},
|
{label: "Cut", icon: "content_cut", visibilityCondition: "SELECTION", click: cut},
|
||||||
{label: "Paste", icon: "content_paste", visibilityCondition: "SELECTION", click: paste},
|
{label: "Copy", icon: "content_copy", visibilityCondition: "SELECTION", click: copy},
|
||||||
// Null makes a seperation bar
|
{label: "Paste", icon: "content_paste", visibilityCondition: "SELECTION", click: paste},
|
||||||
null,
|
// Null makes a seperation bar
|
||||||
{label: "Add to Memory", icon: "assignment", visibilityCondition: "SELECTION", click: push_selection_to_memory},
|
null,
|
||||||
{label: "Add to World Info Entry", icon: "auto_stories", visibilityCondition: "SELECTION", click: push_selection_to_world_info},
|
{label: "Add to Memory", icon: "assignment", visibilityCondition: "SELECTION", click: push_selection_to_memory},
|
||||||
{label: "Add as Bias", icon: "insights", visibilityCondition: "SELECTION", click: push_selection_to_phrase_bias},
|
{label: "Add to World Info Entry", icon: "auto_stories", visibilityCondition: "SELECTION", click: push_selection_to_world_info},
|
||||||
{label: "Retry from here", icon: "refresh", visibilityCondition: "CARET", click: retry_from_here},
|
{label: "Add as Bias", icon: "insights", visibilityCondition: "SELECTION", click: push_selection_to_phrase_bias},
|
||||||
// Not implemented! See view_selection_probabiltiies
|
{label: "Retry from here", icon: "refresh", visibilityCondition: "CARET", click: retry_from_here},
|
||||||
// null,
|
// Not implemented! See view_selection_probabiltiies
|
||||||
// {label: "View Token Probabilities", icon: "assessment", visibilityCondition: "SELECTION", click: view_selection_probabilities},
|
// null,
|
||||||
// {label: "View Token Probabilities", icon: "account_tree", visibilityCondition: "SELECTION", click: view_selection_probabilities},
|
// {label: "View Token Probabilities", icon: "assessment", visibilityCondition: "SELECTION", click: view_selection_probabilities},
|
||||||
];
|
// {label: "View Token Probabilities", icon: "account_tree", visibilityCondition: "SELECTION", click: view_selection_probabilities},
|
||||||
|
],
|
||||||
|
wiImage: [
|
||||||
|
{label: "Boom!!", icon: "content_cut", visibilityCondition: "SELECTION", click: cut},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
// CTRL-[X]
|
// CTRL-[X]
|
||||||
const shortcuts = [
|
const shortcuts = [
|
||||||
@@ -5392,27 +5397,58 @@ process_cookies();
|
|||||||
(function() {
|
(function() {
|
||||||
const contextMenu = $e("div", document.body, {id: "context-menu", classes: ["hidden"]});
|
const contextMenu = $e("div", document.body, {id: "context-menu", classes: ["hidden"]});
|
||||||
|
|
||||||
for (const action of context_menu_actions) {
|
for (const [key, actions] of Object.entries(context_menu_actions)) {
|
||||||
// Null adds horizontal rule
|
for (const action of actions) {
|
||||||
if (!action) {
|
// Null adds horizontal rule
|
||||||
$e("hr", contextMenu);
|
if (!action) {
|
||||||
continue;
|
$e("hr", contextMenu);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
let item = $e("div", contextMenu, {
|
||||||
|
classes: ["context-menu-item", "noselect", `context-menu-${key}`],
|
||||||
|
"visibility-condition": action.visibilityCondition
|
||||||
|
});
|
||||||
|
let icon = $e("span", item, {classes: ["material-icons-outlined"], innerText: action.icon});
|
||||||
|
item.append(action.label);
|
||||||
|
|
||||||
|
item.addEventListener("mousedown", (e) => (e.preventDefault()));
|
||||||
|
item.addEventListener("click", action.click);
|
||||||
}
|
}
|
||||||
|
|
||||||
let item = $e("div", contextMenu, {
|
|
||||||
classes: ["context-menu-item", "noselect"],
|
|
||||||
"visibility-condition": action.visibilityCondition
|
|
||||||
});
|
|
||||||
let icon = $e("span", item, {classes: ["material-icons-outlined"], innerText: action.icon});
|
|
||||||
item.append(action.label);
|
|
||||||
|
|
||||||
item.addEventListener("mousedown", (e) => (e.preventDefault()));
|
|
||||||
item.addEventListener("click", action.click);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
$el("#gamescreen").addEventListener("contextmenu", function(event) {
|
$el("#gamescreen").addEventListener("contextmenu", function(event) {
|
||||||
// If control is held, do not run our custom logic or cancel the browser's.
|
|
||||||
if (event.ctrlKey) return;
|
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
|
// When we make a browser context menu, close ours.
|
||||||
|
document.addEventListener("contextmenu", function(event) {
|
||||||
|
let target = event.target;
|
||||||
|
while (!target.hasAttribute("context-menu")) {
|
||||||
|
target = target.parentElement;
|
||||||
|
if (!target) break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If no custom context menu or control is held, do not run our custom
|
||||||
|
// logic or cancel the browser's.
|
||||||
|
if (!target || event.ctrlKey) {
|
||||||
|
console.log("yawn")
|
||||||
|
contextMenu.classList.add("hidden");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show only applicable actions in the context menu
|
||||||
|
let contextMenuType = target.getAttribute("context-menu");
|
||||||
|
for (const contextMenuItem of document.getElementsByClassName("context-menu-item")) {
|
||||||
|
if (contextMenuItem.classList.contains(`context-menu-${contextMenuType}`)) {
|
||||||
|
contextMenuItem.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
contextMenuItem.classList.add("hidden");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Don't open browser context menu
|
// Don't open browser context menu
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@@ -5430,7 +5466,7 @@ process_cookies();
|
|||||||
if (getSelectionText()) $(".context-menu-item[visibility-condition=SELECTION]").removeClass("disabled");
|
if (getSelectionText()) $(".context-menu-item[visibility-condition=SELECTION]").removeClass("disabled");
|
||||||
|
|
||||||
// The caret is placed
|
// The caret is placed
|
||||||
if (get_caret_position($("#gamescreen")[0]) !== null) $(".context-menu-item[visibility-condition=CARET]").removeClass("disabled");
|
if (get_caret_position(target) !== null) $(".context-menu-item[visibility-condition=CARET]").removeClass("disabled");
|
||||||
|
|
||||||
contextMenu.classList.remove("hidden");
|
contextMenu.classList.remove("hidden");
|
||||||
|
|
||||||
@@ -5439,11 +5475,8 @@ process_cookies();
|
|||||||
|
|
||||||
// Don't let the document contextmenu catch us and close our context menu
|
// Don't let the document contextmenu catch us and close our context menu
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
});
|
|
||||||
|
|
||||||
// When we make a browser context menu, close ours.
|
console.log("Hey!!", target)
|
||||||
document.addEventListener("contextmenu", function(event) {
|
|
||||||
contextMenu.classList.add("hidden");
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// When we click outside of our context menu, close ours.
|
// When we click outside of our context menu, close ours.
|
||||||
|
@@ -45,7 +45,7 @@
|
|||||||
<!------------ Main Screen--------------------->
|
<!------------ Main Screen--------------------->
|
||||||
<div id="main-grid" class="main-grid settings_pinned var_sync_alt_model_numseqs" onclick="close_menus();" option_length="0">
|
<div id="main-grid" class="main-grid settings_pinned var_sync_alt_model_numseqs" onclick="close_menus();" option_length="0">
|
||||||
<!------------ Game Text Screen--------------------->
|
<!------------ Game Text Screen--------------------->
|
||||||
<div class="gamescreen" id="gamescreen">
|
<div class="gamescreen" id="gamescreen" context-menu="gamescreen">
|
||||||
<div id="disconnect_message"><center><h1>Disconnected</h1></center></div>
|
<div id="disconnect_message"><center><h1>Disconnected</h1></center></div>
|
||||||
|
|
||||||
<div id="welcome_container" class="welcome_container">
|
<div id="welcome_container" class="welcome_container">
|
||||||
|
Reference in New Issue
Block a user