Make context menus more universal

static/koboldai.js

@@ -90,7 +90,8 @@ var finder_actions = [
 	// {name: "", icon: "palette", func: function() { highlightEl("#biasing") }},
 ];
 
-const context_menu_actions = [
+const context_menu_actions = {
+	gamescreen: [
 		{label: "Cut", icon: "content_cut", visibilityCondition: "SELECTION", click: cut},
 		{label: "Copy", icon: "content_copy", visibilityCondition: "SELECTION", click: copy},
 		{label: "Paste", icon: "content_paste", visibilityCondition: "SELECTION", click: paste},
@@ -104,7 +105,11 @@ const context_menu_actions = [
 		// null,
 		// {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]
 const shortcuts = [
@@ -5392,7 +5397,8 @@ process_cookies();
 (function() {
 	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)) {
+		for (const action of actions) {
 			// Null adds horizontal rule
 			if (!action) {
 				$e("hr", contextMenu);
@@ -5400,7 +5406,7 @@ process_cookies();
 			}
 
 			let item = $e("div", contextMenu, {
-			classes: ["context-menu-item", "noselect"],
+				classes: ["context-menu-item", "noselect", `context-menu-${key}`],
 				"visibility-condition": action.visibilityCondition
 			});
 			let icon = $e("span", item, {classes: ["material-icons-outlined"], innerText: action.icon});
@@ -5409,10 +5415,40 @@ process_cookies();
 			item.addEventListener("mousedown", (e) => (e.preventDefault()));
 			item.addEventListener("click", action.click);
 		}
+	}
 
+	/*
 	$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
 		event.preventDefault();
@@ -5430,7 +5466,7 @@ process_cookies();
 		if (getSelectionText()) $(".context-menu-item[visibility-condition=SELECTION]").removeClass("disabled");
 		
 		// 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");
 
@@ -5439,11 +5475,8 @@ process_cookies();
 
 		// Don't let the document contextmenu catch us and close our context menu
 		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.

templates/index_new.html

@@ -45,7 +45,7 @@
 	<!------------ Main Screen--------------------->
 	<div id="main-grid" class="main-grid settings_pinned var_sync_alt_model_numseqs" onclick="close_menus();" option_length="0">
 		<!------------ 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="welcome_container" class="welcome_container">