some more fixes and things

fixed scrolling on basically everything but the canvas, prompt fields
now automatically expand when focused, prompt, host and negprompt now
are stored on localstorage. on hover prompt and negprompt fields now
show full text in tooltips

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

css/index.css

@@ -97,8 +97,9 @@ body {
 
 .content {
 	max-height: 0;
-	overflow: hidden;
-	transition: max-height 0.2s ease-out;
+	overflow-y: clip;
+	overflow-x: visible;
+	transition: max-height 0.2s ease-out, height 0s ease-out;
 }
 
 .menu-container {
@@ -155,3 +156,30 @@ body {
 	font-weight: 600;
 	color: #fff;
 }
+
+#models {
+	width: 100%;
+	text-overflow: ellipsis;
+}
+
+/* Prompt Fields */
+
+div.prompt-wrapper {
+	overflow: visible;
+}
+
+div.prompt-wrapper > textarea {
+	margin: 0;
+	padding: 0;
+
+	top: 0px;
+	bottom: 0px;
+	left: 0px;
+	right: 0;
+
+	resize: vertical;
+}
+
+div.prompt-wrapper > textarea:focus {
+	width: 700px;
+}

index.html

@@ -37,16 +37,13 @@
 				<div class="content">
 					<label for="prompt">Prompt:</label>
 					<br />
-					<textarea id="prompt">
-ocean floor scientific expedition, underwater wildlife</textarea
-					>
-					<br />
+					<div class="prompt-wrapper">
+						<textarea id="prompt"></textarea>
+					</div>
 					<label for="negPrompt">Negative prompt:</label>
-					<br />
-					<textarea id="negPrompt">
-people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry</textarea
-					>
-					<br />
+					<div class="prompt-wrapper">
+						<textarea id="negPrompt"></textarea>
+					</div>
 					<!-- <hr /> -->
 				</div>
 				<!-- SD section -->

js/index.js

@@ -113,8 +113,29 @@ const bgCanvas = document.getElementById("backgroundCanvas"); // gray bg grid
 const bgCtx = bgCanvas.getContext("2d");
 
 function startup() {
-	checkIfWebuiIsRunning();
 	loadSettings();
+
+	const hostEl = document.getElementById("host");
+	hostEl.oninput = () => {
+		host = hostEl.value;
+		localStorage.setItem("host", host);
+	};
+
+	const promptEl = document.getElementById("prompt");
+	promptEl.oninput = () => {
+		stableDiffusionData.prompt = promptEl.value;
+		promptEl.title = promptEl.value;
+		localStorage.setItem("prompt", stableDiffusionData.prompt);
+	};
+
+	const negPromptEl = document.getElementById("negPrompt");
+	negPromptEl.oninput = () => {
+		stableDiffusionData.negative_prompt = negPromptEl.value;
+		negPromptEl.title = negPromptEl.value;
+		localStorage.setItem("neg_prompt", stableDiffusionData.negative_prompt);
+	};
+
+	checkIfWebuiIsRunning();
 	getSamplers();
 	getUpscalers();
 	getModels();
@@ -859,6 +880,18 @@ async function upscaleAndDownload() {
 
 function loadSettings() {
 	// set default values if not set
+	var _host =
+		localStorage.getItem("host") == null
+			? "http://127.0.0.1:7860"
+			: localStorage.getItem("host");
+	var _prompt =
+		localStorage.getItem("prompt") == null
+			? "oceanographic study, underwater wildlife, award winning"
+			: localStorage.getItem("prompt");
+	var _negprompt =
+		localStorage.getItem("neg_prompt") == null
+			? "people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry"
+			: localStorage.getItem("neg_prompt");
 	var _sampler =
 		localStorage.getItem("sampler") == null
 			? "DDIM"
@@ -885,9 +918,18 @@ function loadSettings() {
 			: localStorage.getItem("overmask_px");
 
 	// set the values into the UI
+	document.getElementById("host").value = String(_host);
+	document.getElementById("prompt").value = String(_prompt);
+	document.getElementById("prompt").title = String(_prompt);
+	document.getElementById("negPrompt").value = String(_negprompt);
+	document.getElementById("negPrompt").title = String(_negprompt);
 	document.getElementById("samplerSelect").value = String(_sampler);
 	document.getElementById("maskBlur").value = Number(_mask_blur);
 	document.getElementById("seed").value = Number(_seed);
 	document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);
 	// document.getElementById("overMaskPx").value = Number(_overmask_px);
 }
+
+document.getElementById("mainHSplit").addEventListener("wheel", (evn) => {
+	evn.preventDefault();
+});

js/input.js

@@ -323,7 +323,6 @@ window.onmousemove = (evn) => {
 window.addEventListener(
 	"wheel",
 	(evn) => {
-		evn.preventDefault();
 		mouse.contexts.forEach(({name}) => {
 			mouse.listen[name].onwheel.emit({
 				target: evn.target,

js/settingsbar.js

@@ -36,13 +36,32 @@ document.querySelectorAll(".floating-window").forEach((w) => {
 
 var coll = document.getElementsByClassName("collapsible");
 for (var i = 0; i < coll.length; i++) {
+	let active = false;
 	coll[i].addEventListener("click", function () {
-		this.classList.toggle("active");
 		var content = this.nextElementSibling;
-		if (content.style.maxHeight) {
+
+		if (!active) {
+			this.classList.add("active");
+			content.classList.add("active");
+		} else {
+			this.classList.remove("active");
+			content.classList.remove("active");
+		}
+
+		const observer = new ResizeObserver(() => {
+			if (active) content.style.maxHeight = content.scrollHeight + "px";
+		});
+
+		Array.from(content.children).forEach((child) => {
+			observer.observe(child);
+		});
+
+		if (active) {
 			content.style.maxHeight = null;
+			active = false;
 		} else {
 			content.style.maxHeight = content.scrollHeight + "px";
+			active = true;
 		}
 	});
 }