| | |
| | | (()=>{class e{constructor(){this.controller=new window.jvbForm,document.querySelectorAll(".jvb-form-block form").forEach((e=>{this.controller.registerForm(e)})),this.controller.subscribe(((e,o)=>{"form-submit"===e&&this.handleFormSubmission(o)}))}async handleFormSubmission(e){let[o,t,r]=[e.formId,e.config,e.data],s=t.element,n={"X-WP-Nonce":jvbSettings.nonce,"Content-Type":"application/json"};e.form_type=o,e.form_id=s.id,s.closest(".jvb-form-block"),this.controller.showFormStatus(o,"uploading");try{const e=await fetch(`${jvbSettings.api}forms`,{method:"POST",headers:n,body:JSON.stringify(r)});if(!e.ok){this.controller.showFormStatus(o,"error");const t=await e.json().catch((()=>({})));throw new Error(t.message||`Request failed with status ${e.status}`)}this.controller.showFormStatus(o,"submitted"),this.controller.showSummary(o,".jvb-form-block"),this.controller.store.delete(o)}catch(e){throw e}}updateUI(e,o){let t=window.getTemplate("formSummary");t.querySelector("h2").textContent="Success!",console.log("Form Response: ",e),console.log(t);for(let[o,r]of Object.entries(e)){let e=t.querySelector(`#${o}`);if(e){let o=e.querySelector("h4");o.innerText.includes("%s")?o.innerHTML=o.replace("%s","<b>"+r+"</b>"):e.querySelector("div").innerHTML=r}}o.append(t)}}document.addEventListener("DOMContentLoaded",(function(){new e}))})(); |
| | | /******/ (() => { // webpackBootstrap |
| | | /*!***************************!*\ |
| | | !*** ./src/forms/view.js ***! |
| | | \***************************/ |
| | | /** |
| | | * 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 = window.jvbForm; |
| | | document.querySelectorAll('.jvb-form-block form').forEach(form => { |
| | | this.controller.registerForm(form, { |
| | | cache: true, |
| | | autoUpload: false, |
| | | imageMeta: false |
| | | }); |
| | | }); |
| | | this.controller.subscribe((event, data) => { |
| | | if (event === 'form-submit') { |
| | | this.handleFormSubmission(data).then(() => {}); |
| | | } |
| | | }); |
| | | } |
| | | async handleFormSubmission(eventData) { |
| | | const { |
| | | config, |
| | | data |
| | | } = eventData; |
| | | const form = config.element; |
| | | const submitData = new FormData(); |
| | | |
| | | // 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); |
| | | } |
| | | } |
| | | config.element.querySelectorAll('[name="form_id"],[name="form_type"],[name="timestamp"],[name="cf-turnstile-response"]').forEach(input => { |
| | | submitData.append(input.name, input.value); |
| | | }); |
| | | |
| | | // Add uploaded files |
| | | if (window.jvbUploads) { |
| | | try { |
| | | const files = await window.jvbUploads.getFilesForForm(form); |
| | | 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); |
| | | } |
| | | } |
| | | } |
| | | document.addEventListener('DOMContentLoaded', async function () { |
| | | window.auth.subscribe(event => { |
| | | if (event === 'auth-loaded') { |
| | | new FormBlock(); |
| | | } |
| | | }); |
| | | }); |
| | | /******/ })() |
| | | ; |
| | | //# sourceMappingURL=view.js.map |