oop

Author: autumn-mck

src/config.ts

@@ -73,65 +73,65 @@ export class ConfigClass {
 		this.file = config_object as { config: ConfigDefinition };
 		this.widgets = this.file.config?.widgets || [];
 	}
-}
 
-export async function getWidgetsHtml(configObject: ConfigClass, zip: JSZip) {
-	let htmlWidgets = await Promise.all(
-		configObject.widgets.map(async (element, index) => {
-			const type = element.type;
-
-			if (!(type in typeTemplateMap)) {
-				console.error("No template found for type", type);
-				return;
-			}
-
-			// Create the thing
-			let template = document.getElementById(typeTemplateMap[type]) as HTMLTemplateElement;
-			let clone = template.content.cloneNode(true) as DocumentFragment;
-
-			const widgetText = clone.querySelector(".widget-text") as HTMLElement | null;
-			const inputElement = clone.querySelector(".widget-input") as HTMLInputElement | null;
-
-			if ("text" in element && widgetText) widgetText.innerText = element.text;
-
-			if (type === "switch") {
-				(clone.querySelector(".widget-switch-input") as HTMLInputElement).checked = !(
-					element.default === "disabled"
-				);
-			} else if (type === "slider" || type === "number" || type === "value") {
-				if (element.value.default) inputElement!.valueAsNumber = element.value.default;
-				if (element.value.range) {
-					inputElement!.min = element.value.range[0].toString();
-					inputElement!.max = element.value.range[1].toString();
-				}
-				if (element.value.step) {
-					inputElement!.step = element.value.step.toString();
-				}
+	async getWidgetsHtml(zip: JSZip) {
+		let htmlWidgets = await Promise.all(
+			this.widgets.map(async (element, index) => {
+				const type = element.type;
 
-				let suffix = "";
-
-				if ("suffix" in element.value && element.value.suffix) {
-					suffix = element.value.suffix;
-				} else if (element.value.type === "percent") {
-					suffix = " (%)";
+				if (!(type in typeTemplateMap)) {
+					console.error("No template found for type", type);
+					return;
 				}
 
-				if (suffix && widgetText) widgetText.innerText += suffix;
-			} else if (type === "image") {
-				const imageFile = await zip.file(element.file)?.async("blob");
-				if (imageFile) {
-					(clone.querySelector(".widget-image") as HTMLImageElement).src =
-						URL.createObjectURL(imageFile);
+				// Create the thing
+				let template = document.getElementById(typeTemplateMap[type]) as HTMLTemplateElement;
+				let clone = template.content.cloneNode(true) as DocumentFragment;
+
+				const widgetText = clone.querySelector(".widget-text") as HTMLElement | null;
+				const inputElement = clone.querySelector(".widget-input") as HTMLInputElement | null;
+
+				if ("text" in element && widgetText) widgetText.innerText = element.text;
+
+				if (type === "switch") {
+					(clone.querySelector(".widget-switch-input") as HTMLInputElement).checked = !(
+						element.default === "disabled"
+					);
+				} else if (type === "slider" || type === "number" || type === "value") {
+					if (element.value.default) inputElement!.valueAsNumber = element.value.default;
+					if (element.value.range) {
+						inputElement!.min = element.value.range[0].toString();
+						inputElement!.max = element.value.range[1].toString();
+					}
+					if (element.value.step) {
+						inputElement!.step = element.value.step.toString();
+					}
+
+					let suffix = "";
+
+					if ("suffix" in element.value && element.value.suffix) {
+						suffix = element.value.suffix;
+					} else if (element.value.type === "percent") {
+						suffix = " (%)";
+					}
+
+					if (suffix && widgetText) widgetText.innerText += suffix;
+				} else if (type === "image") {
+					const imageFile = await zip.file(element.file)?.async("blob");
+					if (imageFile) {
+						(clone.querySelector(".widget-image") as HTMLImageElement).src =
+							URL.createObjectURL(imageFile);
+					}
 				}
-			}
 
-			// Set input ID
-			if (inputElement) inputElement.id = "widget-input-" + index.toString();
+				// Set input ID
+				if (inputElement) inputElement.id = "widget-input-" + index.toString();
 
-			return clone;
-		})
-	);
+				return clone;
+			})
+		);
 
-	// Return array of HTML elements
-	return htmlWidgets.filter((element) => element !== undefined);
+		// Return array of HTML elements
+		return htmlWidgets.filter((element) => element !== undefined);
+	}
 }

src/datapack.ts

@@ -92,7 +92,7 @@ function detectModules(datapackZip: JSZip): Set<Module> {
 }
 
 async function writeConfigWidgetsToDocument(configObject: ConfigClass, zip: JSZip) {
-	const widgets: Array<DocumentFragment> = await getWidgetsHtml(configObject, zip);
+	const widgets: Array<DocumentFragment> = await configObject.getWidgetsHtml(zip);
 	const screen = document.getElementById("config-screen")!;
 	widgets.forEach((element) => {
 		screen.appendChild(element);