toggle switch css and improve logging

Author: everloste

index.html

@@ -62,7 +62,7 @@
 						</div>
 						<div class="simple-widget">
 							<label>Export modified files only (developer)</label>
-							<input type="checkbox" id="setting-export-modified-only"/>
+							<input type="checkbox" id="setting-export-modified-only" class="switch"/>
 						</div>
 					</div>
 				</div>
@@ -121,7 +121,7 @@ <h3 class="widget-text">A heading widget...</h3>
 				<template id="switch-widget-template">
 					<div class="widget switch-widget widget-with-input">
 						<label class="widget-text">A switch</label>
-						<input type="checkbox" class="widget-input widget-switch-input" id="widget-input-x" />
+						<input type="checkbox" class="widget-input widget-switch-input switch" id="widget-input-x" />
 					</div>
 				</template>
 

src/config.ts

@@ -235,7 +235,7 @@ export class ConfigClass {
 				});
 
 				if (input_value === null) {
-					console.log(`Input value is null, so not applying method ${this.datapack_id}:${method_name}`);
+					console.log(`[DPConfig] Input value is null, so not applying method ${this.datapack_id}:${method_name}`);
 				}
 				else {
 					applyMethodAsChangeToPack(

src/datapack_changes.ts

@@ -58,15 +58,15 @@ export class DatapackModifier {
 				application_method: method
 			};
 			this.changeQueue.push(change);
-			console.log(`Queued change: \nDatapack: ${change.datapack.id}\nFiles: ${change.file_path}\nValue: ${change.value_path}\nValue: ${change.value}\nMethod: ${change.application_method}`);
+			console.log(`[DatapackModifier] Queued change: \nDatapack: ${change.datapack.id}\nFiles: ${change.file_path}\nValue: ${change.value_path}\nValue: ${change.value}\nMethod: ${change.application_method}`);
 		}
 		else {
-			console.warn(`Datapack change wasn't queued - value ${value} (type <${typeof value}>) doesn't match application method "${method}!"`);
+			console.warn(`[DatapackModifier] Datapack change wasn't queued - value ${value} (type <${typeof value}>) doesn't match application method "${method}!"`);
 		}
 	}
 
 	public async applyChanges(datapacks: ReadonlyArray<Datapack>, export_settings: ExportSettings) {
-		console.time("Applying changes to packs...");
+		console.time("[DatapackModifier] Applying changes to packs");
 
 		// Apply changes to files
 		for (const change of this.changeQueue) {
@@ -94,7 +94,7 @@ export class DatapackModifier {
 			} else throw new Error("what");
 		}
 
-		console.timeEnd("Applying changes to packs...");
+		console.timeEnd("[DatapackModifier] Applying changes to packs");
 		for (const pack in packs) {
 			if (Object.prototype.hasOwnProperty.call(packs, pack)) {
 				const zip = packs[pack];
@@ -104,6 +104,7 @@ export class DatapackModifier {
 	}
 
 	public async saveFile(zip: JSZip, export_settings: ExportSettings) {
+		console.log(`[DatapackModifier] Saving file... [${zip.name}]`);
 		await zip.generateAsync({
 			type: "blob",
 			compression: export_settings.compressionLevel == 0 ? "STORE" : "DEFLATE",

src/page_interactions/settings.ts

@@ -8,6 +8,8 @@ export function getExportSettings(): ExportSettings {
 	element = document.getElementById("setting-export-modified-only") as HTMLInputElement;
 	const export_modified_only: boolean = element.checked;
 
+	console.info(`Getting export settings...\n\tCompression level: ${archive_compression_level}\n\tExport modified only: ${export_modified_only}`);
+
 	return {
 		compressionLevel: archive_compression_level as CompressionLevel,
 		modifiedOnly: export_modified_only

style.css

@@ -372,4 +372,36 @@ svg.icon {
 	svg.icon {
 		height: 1em;
 	}
+}
+
+.switch {
+	appearance: none;
+	position: relative;
+	display: inline-block;
+	box-sizing: content-box;
+	width: 4em;
+	height: 1.5em;
+	padding: 2px;
+	border: none;
+	cursor: pointer;
+	overflow: hidden;
+	background-color: var(--background);
+	transition: background ease 0.3s;
+	border: var(--border-width) solid var(--background-below);
+}
+.switch:before {
+	content: "";
+	display: block;
+	position: absolute;
+	width: 1.5em;
+	height: 1.5em;
+	background: var(--background-above-above);
+	transition: transform linear 0.05s;
+}
+.switch:checked {
+	background-color: var(--accent-color);
+}
+.switch:checked:before {
+	transform: translateX(2.5em);
+	background: var(--background-above);
 }