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;
+	overflow-y: clip;
-	transition: max-height 0.2s ease-out;
+	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">
+					<div class="prompt-wrapper">
-ocean floor scientific expedition, underwater wildlife</textarea
+						<textarea id="prompt"></textarea>
-					>
+					</div>
-					<br />
 					<label for="negPrompt">Negative prompt:</label>
-					<br />
+					<div class="prompt-wrapper">
-					<textarea id="negPrompt">
+						<textarea id="negPrompt"></textarea>
-people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry</textarea
+					</div>
-					>
-					<br />
 					<!-- <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;
 		}
 	});
 }