Merge pull request #35 from DSACMS/nat/json-preview

natalialuzuriaga · web-flow · commit c3fded89d63e · 2025-03-17T12:25:41.000-07:00
Added code.json preview window with copy to clipboard functionality
diff --git a/css/styles.css b/css/styles.css
@@ -1,3 +1,7 @@
 body {
     margin: 20px;
+}
+
+textarea {
+    margin-bottom: 10px;
 }
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -40,7 +40,7 @@
 					}).then(function (form) {
 						form.on("submit", function (submission) {
 							console.log("form submission here:", submission);
-							downloadFile(submission.data);
+							createCodeJson(submission.data);
 						});
 					});
 				})
@@ -52,5 +52,11 @@
 	<body>
 		<div id="form-header"></div>
 		<div id="formio"></div>
+		<div id="output">
+			<label for="json-result">Your JSON Metadata </label>
+        	<textarea class="form-control" rows="10" id="json-result" readonly></textarea>
+			<button type="button" class="btn btn-outline" href="#" onclick="copyToClipboard(event)">Copy</button>
+			<button type="button" class="btn btn-outline" href="#" onclick="downloadFile(event)">Download</button>
+		</div>
 	</body>
 </html>
diff --git a/js/formDataToJson.js b/js/formDataToJson.js
@@ -73,12 +73,31 @@ async function populateCodeJson(data) {
 	return codeJson;
 }
 
-// Creates code.json and triggers file download
-async function downloadFile(data) {
+// Creates code.json object
+async function createCodeJson(data) {
 	delete data.submit;
 	const codeJson = await populateCodeJson(data);
 
 	const jsonString = JSON.stringify(codeJson, null, 2);
+	document.getElementById("json-result").value = jsonString;
+}
+
+// Copies code.json to clipboard
+async function copyToClipboard(event){
+	event.preventDefault();
+
+	var textArea = document.getElementById("json-result");
+    textArea.select();
+	document.execCommand("copy")
+}
+
+// Triggers local file download
+async function downloadFile(event) {
+	event.preventDefault();
+
+	const codeJson = document.getElementById("json-result").value
+	const jsonObject = JSON.parse(codeJson);
+	const jsonString = JSON.stringify(jsonObject, null, 2);
 	const blob = new Blob([jsonString], { type: "application/json" });
 
 	// Create anchor element and create download link
@@ -90,4 +109,6 @@ async function downloadFile(data) {
 	link.click();
 }
 
+window.createCodeJson = createCodeJson;
+window.copyToClipboard = copyToClipboard;
 window.downloadFile = downloadFile;
diff --git a/js/generateFormComponents.js b/js/generateFormComponents.js
@@ -299,7 +299,7 @@ async function createFormComponents() {
 	// Add submit button to form
 	components.push({
 		type: "button",
-		label: "Submit",
+		label: "Generate code.json metadata",
 		key: "submit",
 		disableOnInvalid: false,
 		input: true,
@@ -311,4 +311,4 @@ async function createFormComponents() {
 	return components;
 }
 
-window.createFormComponents = createFormComponents;
+window.createFormComponents = createFormComponents;

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
`1`	`1`	`body {`
`2`	`2`	`margin: 20px;`
	`3`	`+}`
	`4`	`+`
	`5`	`+textarea {`
	`6`	`+ margin-bottom: 10px;`
`3`	`7`	`}`