create widget templates

Author: everloste

index.html

@@ -29,42 +29,52 @@ <h3 class="name"></h3>
 					</div>
 				</template>
 
-				<div class="config-screen">
-					<p>No config loaded</p>
-
-					<div class="widget text-widget">
-						<p>A text widget...</p>
-					</div>
-
-					<div class="widget title-widget">
-						<h3>A heading widget...</h3>
-					</div>
-
-					<div class="widget image-widget">
-						<p>⚠ Image widgets are not supported</p>
-					</div>
-
-					<div class="widget slider-widget">
-						<p>A slider</p>
-						<input
-							type="range"
-							min="1"
-							max="100"
-							value="50"
-							class="widget-input widget-range-input"
-							id="myRange" />
-					</div>
-
-					<div class="widget switch-widget">
-						<p>A switch</p>
-						<input type="checkbox" class="widget-input widget-switch-input" />
-					</div>
+				<form class="config-screen" id="config-screen">
+					<template id="text-widget-template">
+						<div class="widget text-widget">
+							<p>A text widget...</p>
+						</div>
+					</template>
 
-					<div class="widget number-widget">
-						<p>A number box</p>
-						<input type="number" class="widget-input widget-number-input" />
-					</div>
-				</div>
+					<template id="title-widget-template">
+						<div class="widget title-widget">
+							<h3>A heading widget...</h3>
+						</div>
+					</template>
+					
+					<template id="image-widget-template">
+						<div class="widget image-widget">
+							<p>⚠ Image widgets are not supported</p>
+						</div>
+					</template>
+					
+					<template id="slider-widget-template">
+						<div class="widget slider-widget">
+							<label>A slider</label>
+							<input
+								type="range"
+								min="1"
+								max="100"
+								value="50"
+								class="widget-input widget-range-input"
+								/>
+						</div>
+					</template>
+					
+					<template id="switch-widget-template">
+						<div class="widget switch-widget">
+							<label>A switch</label>
+							<input type="checkbox" class="widget-input widget-switch-input" />
+						</div>
+					</template>
+					
+					<template id="number-widget-template">
+						<div class="widget number-widget">
+							<label>A number box</label>
+							<input type="number" class="widget-input widget-number-input" />
+						</div>
+					</template>
+				</form>
 
 				<script type="module" src="/src/main.ts"></script>
 			</div>

src/config.ts

@@ -75,8 +75,8 @@ export class ConfigClass {
 			}
 			else if (type == "slider" || type == "number" || type == "value") {
 				(clone.querySelector(".widget-switch-input") as HTMLInputElement).valueAsNumber = element.value.default;
-				if (element.value.range[0]) (clone.querySelector(".widget-switch-input") as HTMLInputElement).min = element.value.range[0].toString();
-				if (element.value.range[1]) (clone.querySelector(".widget-switch-input") as HTMLInputElement).max = element.value.range[1].toString();
+				if (element.value.range) (clone.querySelector(".widget-switch-input") as HTMLInputElement).min = element.value.range[0].toString();
+				if (element.value.range) (clone.querySelector(".widget-switch-input") as HTMLInputElement).max = element.value.range[1].toString();
 			}
 
 			(clone.querySelector(".widget-switch-input") as HTMLInputElement).id = "input-widget-" + i.toString();