| | |
| | | document.addEventListener("DOMContentLoaded",(function(){let e=new window.jvbForm;document.querySelectorAll(".jvb-form-block").forEach((t=>{e.registerForm(t.querySelector("form"))})),e.subscribe(((e,t)=>{"form-submit"===e&&async function(e,t,o){let r={"X-WP-Nonce":jvbSettings.nonce,"Content-Type":"application/json"};t.form_type=o.dataset.formId,t.form_id=o.id;let n=o.closest(".jvb-form-block"),i=window.getTemplate("spinner");o.hidden=!0,n.classList.add("loading"),n.prepend(i);try{const e=await fetch(`${jvbSettings.api}forms`,{method:"POST",headers:r,body:JSON.stringify(t)});if(!e.ok){const t=await e.json().catch((()=>({})));throw new Error(t.message||`Request failed with status ${e.status}`)}!function(e,t){if(!1===e.success){let o=t.querySelector("form");return o.removeAttribute("hidden"),void("required"in e&&e.required.forEach((e=>{let t=o.querySelector(`[name=${e}]`);t.classList.add("required","error"),t.scrollIntoView()})))}let o=window.getTemplate("formSummary");o.querySelector("h2").textContent="Success!",console.log("Form Response: ",e);for(let[t,r]of Object.entries(e)){let e=o.querySelector(`#${t}`),n=e.querySelector("h4");n.innerText.includes("%s")?n.innerHTML=n.replace("%s","<b>"+r+"</b>"):e.querySelector("div").innerHTML=r}t.append(o)}(await e.json(),n)}catch(e){throw e}finally{n.classList.remove("loading")}}(0,t.data,t.config.element)}))})); |
| | | /******/ (() => { // 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 |