-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/js/formDataToJson.js b/js/formDataToJson.js
index 0498a4b..ea72e47 100644
--- a/js/formDataToJson.js
+++ b/js/formDataToJson.js
@@ -80,65 +80,166 @@ async function createUnsdgJson(data) {
const jsonString = JSON.stringify(jsonData, null, 2);
document.getElementById("json-result").value = jsonString;
+ showNotificationModal("Form data generated successfully!", 'success');
+}
+
+// Shows notification modal with message and type
+function showNotificationModal(message, type = 'info') {
+ const modal = document.getElementById('notification-modal');
+ const messageEl = modal.querySelector('.notification-message');
+
+ // Remove previous type classes
+ modal.classList.remove('success', 'error', 'info');
+ modal.classList.add(type);
+
+ messageEl.textContent = message;
+ modal.setAttribute('aria-hidden', 'false');
+
+ // Auto-hide after 4 seconds
+ setTimeout(() => {
+ closeNotificationModal();
+ }, 4000);
+}
+
+// Closes notification modal
+function closeNotificationModal() {
+ const modal = document.getElementById('notification-modal');
+ modal.setAttribute('aria-hidden', 'true');
+}
+
+// Adds visual feedback to button
+function addButtonFeedback(button, success = true) {
+ const originalClasses = button.className;
+ const feedbackClass = success ? 'success' : 'error';
+ const feedbackText = success ? '✓' : '✕';
+
+ button.classList.add(feedbackClass);
+ const feedbackSpan = button.querySelector('.btn-feedback');
+ if (feedbackSpan) {
+ feedbackSpan.textContent = feedbackText;
+ }
+
+ setTimeout(() => {
+ button.className = originalClasses;
+ if (feedbackSpan) {
+ feedbackSpan.textContent = '';
+ }
+ }, 1500);
}
// Copies code.json to clipboard
async function copyToClipboard(event){
event.preventDefault();
+ const button = event.currentTarget;
+
+ try {
+ const textArea = document.getElementById("json-result");
+ const text = textArea.value;
+
+ if (!text || text.trim() === '') {
+ showNotificationModal("No data to copy. Please submit the form first.", 'error');
+ addButtonFeedback(button, false);
+ return;
+ }
- var textArea = document.getElementById("json-result");
- textArea.select();
- document.execCommand("copy")
+ // Use modern Clipboard API with fallback
+ if (navigator.clipboard && window.isSecureContext) {
+ await navigator.clipboard.writeText(text);
+ } else {
+ // Fallback for older browsers
+ textArea.select();
+ document.execCommand("copy");
+ }
+
+ showNotificationModal("Copied to clipboard!", 'success');
+ addButtonFeedback(button, true);
+ } catch (error) {
+ console.error("Failed to copy:", error);
+ showNotificationModal("Failed to copy. Please try selecting and copying manually.", 'error');
+ addButtonFeedback(button, false);
+ }
}
// Triggers email(mailtolink)
async function emailFile(event) {
event.preventDefault();
+ const button = event.currentTarget;
- const codeJson = document.getElementById("json-result").value
- const jsonObject = JSON.parse(codeJson);
+ const codeJson = document.getElementById("json-result").value;
- try {
- const cleanData = {...jsonObject};
- delete cleanData.submit;
+ if (!codeJson || codeJson.trim() === '') {
+ showNotificationModal("No data to email. Please submit the form first.", 'error');
+ addButtonFeedback(button, false);
+ return;
+ }
+
+ try {
+ const jsonObject = JSON.parse(codeJson);
+ const cleanData = {...jsonObject};
+ delete cleanData.submit;
- const jsonString = JSON.stringify(cleanData, null, 2);
+ const jsonString = JSON.stringify(cleanData, null, 2);
- const subject = "unsdg.json Generator Results";
- const body = `Hello,\n\nHere are the unsdg.json results:\n\n${jsonString}\n\nThank you!`;
+ const subject = "unsdg.json Generator Results";
+ const body = `Hello,\n\nHere are the unsdg.json results:\n\n${jsonString}\n\nThank you!`;
- const recipients = ["unsdg@chaoss.community"];
+ const recipients = ["unsdg@chaoss.community"];
- const mailtoLink = `mailto:${recipients}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+ const mailtoLink = `mailto:${recipients}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
- window.location.href = mailtoLink;
+ window.location.href = mailtoLink;
- console.log("Email client opened");
- } catch {
- console.error("Error preparing email:", error);
- showNotificationModal("Error preparing email. Please try again or copy the data manually.", 'error');
- }
+ showNotificationModal("Opening email client...", 'info');
+ addButtonFeedback(button, true);
+ console.log("Email client opened");
+ } catch (error) {
+ console.error("Error preparing email:", error);
+ showNotificationModal("Error preparing email. Please try again or copy the data manually.", 'error');
+ addButtonFeedback(button, false);
+ }
}
// Triggers local file download
async function downloadFile(event) {
event.preventDefault();
+ const button = event.currentTarget;
- 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
- const link = document.createElement("a");
- link.href = URL.createObjectURL(blob);
- link.download = "unsdg.json";
+ const codeJson = document.getElementById("json-result").value;
+
+ if (!codeJson || codeJson.trim() === '') {
+ showNotificationModal("No data to download. Please submit the form first.", 'error');
+ addButtonFeedback(button, false);
+ return;
+ }
- // Trigger the download
- link.click();
+ try {
+ 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
+ const link = document.createElement("a");
+ link.href = URL.createObjectURL(blob);
+ link.download = "unsdg.json";
+
+ // Trigger the download
+ link.click();
+
+ // Clean up
+ URL.revokeObjectURL(link.href);
+
+ showNotificationModal("File downloaded successfully!", 'success');
+ addButtonFeedback(button, true);
+ } catch (error) {
+ console.error("Error downloading file:", error);
+ showNotificationModal("Error downloading file. Please try again.", 'error');
+ addButtonFeedback(button, false);
+ }
}
window.downloadFile = downloadFile;
window.copyToClipboard = copyToClipboard;
window.emailFile = emailFile;
-window.createUnsdgJson = createUnsdgJson
\ No newline at end of file
+window.createUnsdgJson = createUnsdgJson;
+window.showNotificationModal = showNotificationModal;
+window.closeNotificationModal = closeNotificationModal;
\ No newline at end of file
Read-only textarea containing your form submission data in JSON format
+ + +