diff --git a/web/customLoraLoaders.js b/web/customLoraLoaders.js index 7ee90ff..d8a680b 100644 --- a/web/customLoraLoaders.js +++ b/web/customLoraLoaders.js @@ -1,4 +1,4 @@ -import { SettingUtils } from '../sn0w.js'; // Adjust path as needed +import { SettingUtils } from './sn0w.js'; import { app } from "../../../scripts/app.js"; const xlId = "sn0w.CustomLoraLoadersXL"; @@ -7,7 +7,10 @@ const xlSettingDefinition = { name: "[Sn0w] Custom Lora Loaders XL", type: SettingUtils.createMultilineSetting, defaultValue: "ExampleName1:Value1\nExampleName2:Value2", - tooltip: "Enter each name-value pair on a new line, separated by a colon (:)." + attrs: { + height: "80", + tooltip: "Enter each name-value pair on a new line, separated by a colon (:).", + } }; const nonXlId = "sn0w.CustomLoraLoaders1.5"; @@ -16,7 +19,10 @@ const nonXlSettingDefinition = { name: "[Sn0w] Custom Lora Loaders 1.5", type: SettingUtils.createMultilineSetting, defaultValue: "ExampleName1:Value1\nExampleName2:Value2", - tooltip: "Enter each name-value pair on a new line, separated by a colon (:)." + attrs: { + height: "80", + tooltip: "Enter each name-value pair on a new line, separated by a colon (:).", + } }; const registerSetting = (settingDefinition) => { diff --git a/sn0w.js b/web/sn0w.js similarity index 70% rename from sn0w.js rename to web/sn0w.js index b1c4396..b5f66c9 100644 --- a/sn0w.js +++ b/web/sn0w.js @@ -1,38 +1,43 @@ export class SettingUtils { - static createMultilineSetting(name, setter, value, attrs, tooltip = "") { + static createMultilineSetting(name, setter, value, attrs) { + console.log(attrs) + const tr = document.createElement("tr"); const tdLabel = document.createElement("td"); const tdInput = document.createElement("td"); const label = document.createElement("label"); const textarea = document.createElement("textarea"); - + // Generate a unique ID for associating the label with the textarea const uniqueId = `custom-setting-${Date.now()}`; label.setAttribute("for", uniqueId); label.textContent = name; - label.className = "comfy-tooltip-indicator"; - + textarea.id = uniqueId; textarea.value = value; - textarea.setAttribute("style", "width: 100%; height: 100px; resize: none;"); - + textarea.setAttribute("style", `width: 100%; height: ${attrs["height"]}px; resize: none;`); + // Apply event handler textarea.onchange = () => setter(textarea.value); - + // Apply additional attributes for (const [key, val] of Object.entries(attrs)) { textarea.setAttribute(key, val); } - + tdLabel.appendChild(label); tdInput.appendChild(textarea); tr.appendChild(tdLabel); tr.appendChild(tdInput); - if (tooltip) { - label.title = tooltip; // Setting tooltip if provided + const tooltip = attrs["tooltip"]; + + // Setting tooltip if provided + if (tooltip != "") { + tr.title = tooltip; + label.className = "comfy-tooltip-indicator"; } - + return tr; } }