Skip to content

Added code.json preview window with copy to clipboard functionality #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
natalialuzuriaga merged 6 commits into from
Mar 17, 2025
Merged

Added code.json preview window with copy to clipboard functionality #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c424477
Added copy to clipboard functionality
natalialuzuriaga Mar 4, 2025
1e7aad6
Added favicon
natalialuzuriaga Mar 4, 2025
f14f2f4
Updated local file download functionality
natalialuzuriaga Mar 4, 2025
ce73f74
Removed extraneous comment
natalialuzuriaga Mar 4, 2025
30b289b
Updated submit button label
natalialuzuriaga Mar 5, 2025
770facd
Edited styling of buttons
natalialuzuriaga Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
body {
margin: 20px;
}

textarea {
margin-bottom: 10px;
}
Binary file added favicon.ico
View file
Open in desktop
Binary file not shown.
8 changes: 7 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
}).then(function (form) {
form.on("submit", function (submission) {
console.log("form submission here:", submission);
downloadFile(submission.data);
createCodeJson(submission.data);
});
});
})
Expand All @@ -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>
25 changes: 23 additions & 2 deletions js/formDataToJson.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -90,4 +109,6 @@ async function downloadFile(data) {
link.click();
}

window.createCodeJson = createCodeJson;
window.copyToClipboard = copyToClipboard;
window.downloadFile = downloadFile;
4 changes: 2 additions & 2 deletions js/generateFormComponents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -311,4 +311,4 @@ async function createFormComponents() {
return components;
}

window.createFormComponents = createFormComponents;
window.createFormComponents = createFormComponents;
Loading