From dc46c68d0c958cbe0e38142fd7c7ca9982ee8eaa Mon Sep 17 00:00:00 2001 From: Spencer14420 <67592325+Spencer14420@users.noreply.github.com> Date: Sun, 24 Nov 2024 14:08:00 -0500 Subject: [PATCH] Allow users to set a callback function (#11) * Allow users to set a callback function * 1.3.0 --- dist/ContactForm.d.ts | 26 +++++--- dist/index.js | 106 +++++++++++++++-------------- package-lock.json | 4 +- package.json | 2 +- src/ContactForm.ts | 151 ++++++++++++++++++++++-------------------- 5 files changed, 154 insertions(+), 135 deletions(-) diff --git a/dist/ContactForm.d.ts b/dist/ContactForm.d.ts index bd9a680..befe180 100644 --- a/dist/ContactForm.d.ts +++ b/dist/ContactForm.d.ts @@ -1,15 +1,19 @@ import "bootstrap"; import { Modal } from "bootstrap"; + export declare class ContactForm { - serverScript: string; - tokenInputName: string | null; - successModal: Modal | null; - messageAlert: HTMLElement | null; - constructor(serverScript: string, tokenInputName?: string | null); - initializeEventListeners(): void; - isEmail(email: string): boolean; - messageSuccess(): void; - sendMessage(data: Record): Promise; - handleSubmit(): void; - displayAlert(message: string): void; + serverScript: string; + tokenInputName: string | null; + successModal: Modal | null; + messageAlert: HTMLElement | null; + onSuccess: ((responseData: Record) => void) | null; + + constructor( + serverScript: string, + tokenInputName?: string | null, + onSuccess?: ((responseData: Record) => void) | null, + ); + + handleSubmit(): void; + displayAlert(message: string): void; } diff --git a/dist/index.js b/dist/index.js index 83a51de..5ac95d5 100644 --- a/dist/index.js +++ b/dist/index.js @@ -2,67 +2,19 @@ import "bootstrap"; import { Modal } from "bootstrap"; export class ContactForm { - constructor(serverScript, tokenInputName = null) { - this.successModal = null; + constructor(serverScript, tokenInputName = null, onSuccess = null) { this.serverScript = serverScript; this.tokenInputName = tokenInputName; + this.onSuccess = onSuccess; const modalElement = document.querySelector( "#success" ); - if (modalElement) { - this.successModal = new Modal(modalElement); - } + this.successModal = modalElement ? new Modal(modalElement) : null; this.messageAlert = document.querySelector( "#message-alert" ); this.initializeEventListeners(); } - initializeEventListeners() { - document.querySelector("#sendmessage")?.addEventListener("click", () => this.handleSubmit()); - } - isEmail(email) { - if (email.length > 254) { - return false; - } - const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - return emailPattern.test(email); - } - messageSuccess() { - ["#name", "#email", "#message"].forEach((selector) => { - const element = document.querySelector( - selector - ); - if (element) { - element.value = ""; - } - }); - document.querySelector("#contactCancel")?.click(); - if (this.successModal) { - this.successModal.show(); - } - } - async sendMessage(data) { - const formData = new FormData(); - Object.entries(data).forEach(([key, value]) => formData.append(key, value)); - try { - const response = await fetch(this.serverScript, { - method: "POST", - body: formData - }); - const responseData = await response.json(); - const errorMessage = responseData.message || "An error occurred. Please try again later."; - if (!response.ok || responseData.status !== "success") { - this.displayAlert(errorMessage); - return; - } - this.messageSuccess(); - } catch (error) { - console.error("Error sending message", error); - this.displayAlert( - "An unexpected error occurred. Please try again later." - ); - } - } handleSubmit() { const emailElement = document.querySelector( "#email" @@ -113,4 +65,56 @@ export class ContactForm { console.error("Message alert element not found."); } } + initializeEventListeners() { + document.querySelector("#sendmessage")?.addEventListener("click", () => this.handleSubmit()); + } + isEmail(email) { + if (email.length > 254) { + return false; + } + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailPattern.test(email); + } + messageSuccess(responseData) { + ["#name", "#email", "#message"].forEach((selector) => { + const element = document.querySelector( + selector + ); + if (element) { + element.value = ""; + } + }); + const cancelButton = document.querySelector( + "#contactCancel" + ); + cancelButton?.click(); + if (this.successModal) { + this.successModal.show(); + } + if (this.onSuccess) { + this.onSuccess(responseData || {}); + } + } + async sendMessage(data) { + const formData = new FormData(); + Object.entries(data).forEach(([key, value]) => formData.append(key, value)); + try { + const response = await fetch(this.serverScript, { + method: "POST", + body: formData + }); + const responseData = await response.json(); + const errorMessage = responseData.message || "An error occurred. Please try again later."; + if (!response.ok || responseData.status !== "success") { + this.displayAlert(errorMessage); + return; + } + this.messageSuccess(responseData); + } catch (error) { + console.error("Error sending message", error); + this.displayAlert( + "An unexpected error occurred. Please try again later." + ); + } + } } diff --git a/package-lock.json b/package-lock.json index ef2e143..63c9cfe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "spemailhandler", - "version": "1.2.0", + "version": "1.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "spemailhandler", - "version": "1.2.0", + "version": "1.3.0", "license": "MIT", "dependencies": { "bootstrap": "^5.3.3" diff --git a/package.json b/package.json index d828fa6..d63de50 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "spemailhandler", - "version": "1.2.0", + "version": "1.3.0", "description": "A script to handle the interaction between a Bootstrap-based contact form and the server, handling form submission and feedback.", "main": "dist/index.js", "types": "dist/ContactForm.d.ts", diff --git a/src/ContactForm.ts b/src/ContactForm.ts index 2dba862..728c181 100644 --- a/src/ContactForm.ts +++ b/src/ContactForm.ts @@ -2,21 +2,25 @@ import "bootstrap"; import { Modal } from "bootstrap"; export class ContactForm { - serverScript: string; - tokenInputName: string | null; - successModal: Modal | null = null; - messageAlert: HTMLElement | null; - - constructor(serverScript: string, tokenInputName: string | null = null) { + public serverScript: string; + public tokenInputName: string | null; + public successModal: Modal | null; + public messageAlert: HTMLElement | null; + public onSuccess: ((responseData: Record) => void) | null; + + constructor( + serverScript: string, + tokenInputName: string | null = null, + onSuccess: ((responseData: Record) => void) | null = null, + ) { this.serverScript = serverScript; this.tokenInputName = tokenInputName; + this.onSuccess = onSuccess; const modalElement = document.querySelector( "#success", ) as HTMLElement | null; - if (modalElement) { - this.successModal = new Modal(modalElement); - } + this.successModal = modalElement ? new Modal(modalElement) : null; this.messageAlert = document.querySelector( "#message-alert", @@ -25,66 +29,7 @@ export class ContactForm { this.initializeEventListeners(); } - initializeEventListeners(): void { - document - .querySelector("#sendmessage") - ?.addEventListener("click", () => this.handleSubmit()); - } - - isEmail(email: string): boolean { - if (email.length > 254) { - return false; - } - const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - return emailPattern.test(email); - } - - messageSuccess(): void { - ["#name", "#email", "#message"].forEach((selector) => { - const element = document.querySelector( - selector, - ) as HTMLInputElement | null; - if (element) { - element.value = ""; - } - }); - ( - document.querySelector("#contactCancel") as HTMLButtonElement | null - )?.click(); - if (this.successModal) { - this.successModal.show(); - } - } - - async sendMessage(data: Record): Promise { - const formData = new FormData(); - Object.entries(data).forEach(([key, value]) => formData.append(key, value)); - - try { - const response = await fetch(this.serverScript, { - method: "POST", - body: formData, - }); - - const responseData = await response.json(); - const errorMessage = - responseData.message || "An error occurred. Please try again later."; - - if (!response.ok || responseData.status !== "success") { - this.displayAlert(errorMessage); - return; - } - - this.messageSuccess(); - } catch (error) { - console.error("Error sending message", error); - this.displayAlert( - "An unexpected error occurred. Please try again later.", - ); - } - } - - handleSubmit(): void { + public handleSubmit(): void { const emailElement = document.querySelector( "#email", ) as HTMLInputElement | null; @@ -138,7 +83,7 @@ export class ContactForm { this.sendMessage(data); } - displayAlert(message: string): void { + public displayAlert(message: string): void { if (this.messageAlert) { this.messageAlert.innerHTML = message; this.messageAlert.style.display = "block"; @@ -146,4 +91,70 @@ export class ContactForm { console.error("Message alert element not found."); } } + + private initializeEventListeners(): void { + document + .querySelector("#sendmessage") + ?.addEventListener("click", () => this.handleSubmit()); + } + + private isEmail(email: string): boolean { + if (email.length > 254) { + return false; + } + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailPattern.test(email); + } + + private messageSuccess(responseData?: Record): void { + ["#name", "#email", "#message"].forEach((selector) => { + const element = document.querySelector( + selector, + ) as HTMLInputElement | null; + if (element) { + element.value = ""; + } + }); + + const cancelButton = document.querySelector( + "#contactCancel", + ) as HTMLButtonElement | null; + cancelButton?.click(); + + if (this.successModal) { + this.successModal.show(); + } + + if (this.onSuccess) { + this.onSuccess(responseData || {}); + } + } + + private async sendMessage(data: Record): Promise { + const formData = new FormData(); + Object.entries(data).forEach(([key, value]) => formData.append(key, value)); + + try { + const response = await fetch(this.serverScript, { + method: "POST", + body: formData, + }); + + const responseData = await response.json(); + const errorMessage = + responseData.message || "An error occurred. Please try again later."; + + if (!response.ok || responseData.status !== "success") { + this.displayAlert(errorMessage); + return; + } + + this.messageSuccess(responseData); + } catch (error) { + console.error("Error sending message", error); + this.displayAlert( + "An unexpected error occurred. Please try again later.", + ); + } + } }