Fiiiinally make popup stuff a bit more generic

static/koboldai.css

@@ -1807,23 +1807,6 @@ body {
 	width:95%;
 }
 /*------------------------------ Context Viewer --------------------------------------------*/
-#context-viewer-container {
-	position: absolute;
-	left: 0px;
-	top: 0px;
-
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	background-color: rgba(0, 0, 0, 0.7);
-
-	width: 100vw;
-	height: 100vh;
-
-	z-index: 20;
-}
-
 #context-viewer {
 	display: flex;
 	flex-direction: column;
@@ -1977,24 +1960,6 @@ body {
 
 /* Finder */
 
-#finder-container,
-#debug-file-container,
-#prompt-config-container {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	position: absolute;
-	left: 0px;
-	top: 0px;
-
-	background-color: rgba(0, 0, 0, 0.5);
-	z-index: 99999999;
-
-	width: 100vw;
-	height: 100vh;
-}
-
 #finder-container {
 	flex-direction: column;
 }
@@ -2400,6 +2365,22 @@ body {
 	color: white
 }
 
+#popup-container {
+	position: absolute;
+	left: 0px;
+	top: 0px;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	background-color: rgba(0, 0, 0, 0.7);
+
+	width: 100vw;
+	height: 100vh;
+
+	z-index: 20;
+}
 
 /*---------------------------------- Global ------------------------------------------------*/
 .hidden {

static/koboldai.js

@@ -3675,17 +3675,14 @@ function close_menus() {
 	document.getElementById('save-confirm').classList.add("hidden");
 	document.getElementById('error_message').classList.add("hidden");
 	document.getElementById("advanced_theme_editor").classList.add("hidden");
-	document.getElementById("context-viewer-container").classList.add("hidden");
 	document.getElementById("save_preset").classList.add("hidden");
 	document.getElementById("log_popup").classList.add("hidden");
+	closePopups();
 	
 	//unselect sampler items
 	for (temp of document.getElementsByClassName("sample_order")) {
 		temp.classList.remove("selected");
 	}
-	
-	const finderContainer = document.getElementById("finder-container");
-	finderContainer.classList.add("hidden");
 }
 
 function toggle_flyout(x) {
@@ -3980,9 +3977,7 @@ async function downloadDebugFile(redact=true) {
 }
 
 function configurePrompt(placeholderData) {
-	console.log(placeholderData);
-	const container = document.querySelector("#prompt-config-container");
-	container.classList.remove("hidden");
+	showPopup("prompt-config");
 
 	const placeholders = document.querySelector("#prompt-config-placeholders");
 
@@ -4020,7 +4015,7 @@ function sendPromptConfiguration() {
 
 	socket.emit("configure_prompt", data);
 
-	document.querySelector("#prompt-config-container").classList.add("hidden");
+	closePopups();
 	$(".prompt-config-ph").remove();
 }
 
@@ -4180,13 +4175,12 @@ function highlightEl(element) {
 }
 
 function addSearchListing(action, highlight) {
-	const finderContainer = document.getElementById("finder-container");
 	const finder = document.getElementById("finder");
 
 	let result = document.createElement("div");
 	result.classList.add("finder-result");
 	result.addEventListener("click", function(event) {
-		finderContainer.classList.add("hidden");
+		closePopups();
 		action.func();
 	});
 
@@ -4600,14 +4594,13 @@ function cycleFinderMode() {
 }
 
 function open_finder() {
-	const finderContainer = document.getElementById("finder-container");
 	const finderInput = document.getElementById("finder-input");
 	finderInput.value = "";
 	$(".finder-result").remove();
 	finder_selection_index = -1;
 	updateFinderMode("ui");
 	
-	finderContainer.classList.remove("hidden");
+	showPopup("finder");
 	finderInput.focus();
 }
 
@@ -4690,6 +4683,34 @@ document.onkeydown = detect_key_down;
 document.onkeyup = detect_key_up;
 document.getElementById("input_text").onkeydown = detect_enter_submit;
 
+/* -- Popups -- */
+function showPopup(id) {
+	closePopups();
+
+	const container = $el("#popup-container");
+	container.classList.remove("hidden");
+
+	for (const popupWindow of container.children) {
+		popupWindow.classList.add("hidden");
+	}
+
+	const popup = $el(`#${id}`);
+	popup.classList.remove("hidden");
+}
+
+function closePopups() {
+	const container = $el("#popup-container");
+	container.classList.add("hidden");
+
+	for (const popupWindow of container.children) {
+		popupWindow.classList.add("hidden");
+	}
+}
+
+$el("#popup-container").addEventListener("click", function(event) {
+	if (event.target === this) closePopups();
+});
+
 /* -- Colab Cookie Handling -- */
 if (colab_cookies != null) {
 	for (const cookie of Object.keys(colab_cookies)) {
@@ -4766,7 +4787,6 @@ process_cookies();
 
 /* -- Finder -- */
 (function() {
-	const finderContainer = document.getElementById("finder-container");
 	const finderInput = document.getElementById("finder-input");
 	const finderIcon = document.getElementById("finder-icon");
 
@@ -4869,26 +4889,8 @@ process_cookies();
 		finder_selection_index = future;
 		updateFinderSelection(delta);
 	});
-
-	finderContainer.addEventListener("click", function(e) {
-		if (e.target !== this) return;
-		finderContainer.classList.add("hidden");
-	});
 })();
 
-/* -- Debug File -- */
-(function() {
-	const debugContainer = document.getElementById("debug-file-container");
-	// TODO: All of this generic backdrop code really sucks. There should be a
-	// standardised thing for popups that adds the dimmed backdrop and standard
-	// closing, etc.
-
-	debugContainer.addEventListener("click", function(e) {
-		debugContainer.classList.add("hidden");
-	});
-})();
-
-
 /* -- Context Menu -- */
 (function() {
 	const contextMenu = $e("div", document.body, {id: "context-menu", classes: ["hidden"]});

templates/popups.html

@@ -166,9 +166,10 @@
 		<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="document.getElementById('advanced_theme_editor').classList.add('hidden');">Ok</button>
 	</div>
 </div>
-<!---------------- Context Viewer ---------------------->
-<div id="context-viewer-container" class="hidden">
-	<div id="context-viewer">
+
+<div id="popup-container" class="hidden">
+	<!---------------- Context Viewer ---------------------->
+	<div id="context-viewer" class="popup-window">
 		<div id="context-viewer-header">
 			<h3 class="noselect">Context Viewer</h3>
 			<div id="context-viewer-header-right">
@@ -184,7 +185,7 @@
 						<span class="noselect context-block-example context-submit">Submit</span>
 					</div>
 				</div>
-				<span id="context-viewer-close" class="material-icons-outlined" onclick='$el("#context-viewer-container").classList.add("hidden");'>close</span>
+				<span id="context-viewer-close" class="material-icons-outlined" onclick='closePopups();'>close</span>
 			</div>
 		</div>
 		<span class="help_text">
@@ -193,10 +194,9 @@
 		</span>
 		<div id="context-container"></div>
 	</div>
-</div>
-<!---------------- Finder ---------------------->
-<div id="finder-container" class="hidden">
-	<div id="finder">
+
+	<!---------------- Finder ---------------------->
+	<div id="finder" class="popup-window">
 		<div id="finder-bar">
 			<input id="finder-input" placeholder="Search for something..."></input>
 			<span id="finder-icon" class="material-icons-outlined">search</span>
@@ -212,11 +212,9 @@
 			a threat to society
 		</span>
 	</div>
-</div>
 
-<!---------------- Debug File ---------------------->
-<div id="debug-file-container" class="hidden">
-	<div id="debug-file-prompt">
+	<!---------------- Debug File ---------------------->
+	<div id="debug-file-prompt" class="popup-window">
 		<div id="redacted" onclick="downloadDebugFile(true);">
 			<span class="focus">Download debug file</span>
 			<span class="help_text">Sensitive information, including any story data, is redacted.</span>
@@ -229,11 +227,9 @@
 			</span>
 		</div>
 	</div>
-</div>
 
-<!---------------- Prompt Config ------------------->
-<div id="prompt-config-container" class="hidden">
-	<div id="prompt-config">
+	<!---------------- Prompt Config ------------------->
+	<div id="prompt-config" class="popup-window">
 		<div id="prompt-config-header">
 			<h3 class="noselect">Prompt Configuration</h3>
 			<span class="help_text">This prompt has placeholders you need to fill in before starting.</span>

templates/settings flyout.html

@@ -107,7 +107,7 @@
 		<div id="probabilities">
 			
 		</div>
-		<span id="debug-dump" class="cursor" onclick="document.getElementById('debug-file-container').classList.remove('hidden');">Download debug dump</span>
+		<span id="debug-dump" class="cursor" onclick="showPopup('debug-file-prompt');">Download debug dump</span>
 		<div id="Images">
 			<button class="settings_button var_sync_alt_system_generating_image" onclick="socket.emit('generate_image', {})">Generate Image</button>
 			<div id="action image"></div>

templates/story flyout.html

@@ -110,7 +110,7 @@
 		</div>
 	</div>
 	<div id="token-breakdown-container" class="settings_footer" style="padding-top: 10px;">
-		<div class="token_breakdown" onclick='socket.emit("update_tokens", document.getElementById("input_text").value);$el("#context-viewer-container").classList.remove("hidden");'>
+		<div class="token_breakdown" onclick='socket.emit("update_tokens", document.getElementById("input_text").value);showPopup("context-viewer");'>
 			<div id="soft_prompt_tokens" style="width:0%; background-color: var(--context_colors_soft_prompt);"></div>
 			<div id="memory_tokens" style="width:40%; background-color: var(--context_colors_memory);"></div>
 			<div id="authors_notes_tokens" style="width:10%; background-color: var(--context_colors_authors_notes);"></div>