From d7e7d248cbe41cd7a9ef9c2fb022b6c4831f99a3 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 31 May 2026 15:22:56 +0000
Subject: [PATCH] =jakevan complete
---
src/forms/view.js | 140 +++++++++++++++++++++++++++-------------------
1 files changed, 83 insertions(+), 57 deletions(-)
diff --git a/src/forms/view.js b/src/forms/view.js
index d8f6948..788e929 100644
--- a/src/forms/view.js
+++ b/src/forms/view.js
@@ -1,86 +1,112 @@
/**
+ * view.js
* Frontend JavaScript for the Form Block
* Handles form validation and submission
*/
+/**
+ * view.js
+ * Frontend JavaScript for the Form Block
+ */
class FormBlock {
constructor() {
- this.controller = new window.jvbForm();
+ this.controller = window.jvbForm;
document.querySelectorAll('.jvb-form-block form').forEach(form => {
- this.controller.registerForm(form);
+ this.controller.registerForm(form, {
+ cache: true,
+ autoUpload: false,
+ imageMeta: false,
+ });
});
this.controller.subscribe((event, data) => {
if (event === 'form-submit') {
- this.handleFormSubmission(data);
+ this.handleFormSubmission(data).then(()=>{});
}
});
}
- async handleFormSubmission(data) {
- let [
- formId,
- formConfig,
- formData
- ] = [
- data.formId,
- data.config,
- data.data
- ];
- let form = formConfig.element;
+ async handleFormSubmission(eventData) {
+ const { config, data } = eventData;
+ const form = config.element;
- let headers = {
- 'X-WP-Nonce': jvbSettings.nonce,
- 'Content-Type': 'application/json'
- };
+ const submitData = new FormData();
- data['form_type'] = formId;
- data['form_id'] = form.id;
- let block = form.closest('.jvb-form-block');
- this.controller.showFormStatus(formId, 'uploading');
- try {
- const response = await fetch (`${jvbSettings.api}forms`,
- {
- method: 'POST',
- headers,
- body: JSON.stringify(formData)
- });
- if (!response.ok) {
- this.controller.showFormStatus(formId, 'error');
- const errorData = await response.json().catch(() => ({}));
- throw new Error(errorData.message|| `Request failed with status ${response.status}`);
+ // Add regular form fields
+ for (const [key, value] of Object.entries(data)) {
+ if (Array.isArray(value)) {
+ value.forEach(v => submitData.append(`${key}[]`, v));
+ } else if (typeof value === 'object' && value !== null) {
+ submitData.append(key, JSON.stringify(value));
+ } else {
+ submitData.append(key, value);
}
- this.controller.showFormStatus(formId, 'submitted');
-
- this.controller.showSummary(formId, '.jvb-form-block');
- this.controller.store.delete(formId);
-
- } catch (error) {
- throw error;
}
- }
+ config.element.querySelectorAll('[name="form_id"],[name="form_type"],[name="timestamp"],[name="cf-turnstile-response"]').forEach(input => {
+ submitData.append(input.name, input.value);
+ });
- updateUI(response, block) {
+ // Add uploaded files
+ if (window.jvbUploads) {
+ try {
+ const files = await window.jvbUploads.getFilesForForm(form);
- let summary = window.getTemplate('formSummary');
- summary.querySelector('h2').textContent = 'Success!';
- console.log('Form Response: ', response);
- console.log(summary);
- for (let [key, value] of Object.entries(response)) {
- let item = summary.querySelector(`#${key}`);
- if (item) {
- let title = item.querySelector('h4');
- if (title.innerText.includes('%s')) {
- title.innerHTML = title.replace('%s', '<b>'+value+'</b>');
- } else {
- item.querySelector('div').innerHTML = value;
+ files.forEach(({ file, fieldName }) => {
+ submitData.append(`${fieldName}[]`, file);
+ });
+ } catch (error) {
+ console.error('Error getting files:', error);
+ }
+ }
+
+ this.controller.showFormStatus(config.id, 'uploading');
+
+ try {
+ const response = await fetch(`${jvbSettings.api}forms`, {
+ method: 'POST',
+ credentials: 'same-origin',
+ body: submitData
+ });
+
+ const result = await response.json();
+
+ if (!response.ok) {
+ this.controller.showFormStatus(config.id, 'error');
+ this.controller.handleFormError(form, result);
+ return;
+ }
+
+ this.controller.showFormStatus(config.id, 'submitted');
+ // this.controller.handleFormSuccess(form, result);
+ this.controller.showSummary({ changes: data, config: config });
+ window.jvbA11y.announce('Form successfully submitted!');
+
+ // Clean up uploaded files
+ if (window.jvbUploads) {
+ const uploadFields = form.querySelectorAll('[data-upload-field]');
+ for (const field of uploadFields) {
+ const fieldId = window.jvbUploads.determineFieldId(field);
+ await window.jvbUploads.clearFieldFromStores(fieldId);
}
}
+
+ } catch (error) {
+ console.error('Form submission error:', error);
+ this.controller.showFormStatus(config.id, 'error');
+ this.controller.handleFormError(form, {
+ message: 'Network error. Please check your connection and try again.',
+ code: 'network_error'
+ });
+ } finally {
+ await this.controller.store.delete(config.id);
}
- block.append(summary);
}
}
-document.addEventListener('DOMContentLoaded', function() {
- new FormBlock();
+document.addEventListener('DOMContentLoaded', async function() {
+ window.auth.subscribe(event => {
+ if (event === 'auth-loaded') {
+ new FormBlock();
+ }
+ });
});
--
Gitblit v1.10.0