From d0461a4163271808087ad6f37c6fe2535bfc589e Mon Sep 17 00:00:00 2001 From: Adrian Amaglio Date: Thu, 27 Aug 2020 15:04:30 +0200 Subject: [PATCH] second step, something is broken --- client/index.js | 93 ++++++++++++++++++++++++++++--------------------- test.html | 2 +- 2 files changed, 54 insertions(+), 41 deletions(-) diff --git a/client/index.js b/client/index.js index 6280fed..266cfe7 100644 --- a/client/index.js +++ b/client/index.js @@ -1,40 +1,57 @@ -function jeanCloudContactMailerMessage (messageContainer, theme, level, text) { - /* This function displays a message on top of the form */ - const messageElement = document.createElement('p') - const messageId = 'contact-mailer-' + theme + '-message-' + level - messageContainer.appendChild(messageElement) - messageElement.textContent = text - messageElement.classList.add('contact-mailer-message') - messageElement.classList.add(messageId) - messageElement.id = messageId - /*messageElement.title = 'Cliquer pour fermer' - messageElement.onclick = () => { - messageElement.parentNode.removeChild(messageElement) - }*/ +class JeanCloudContactFormNotifier { + constructor (theme, messageContainer) { + /* Choose the theme */ + this.theme = theme ? theme : 'light' - /*add close button to the alert message*/ - const closeButtonElement = document.createElement('span') - messageElement.appendChild(closeButtonElement) - closeButtonElement.textContent = "×" - closeButtonElement.classList.add('contact-mailer-message-close-button') - closeButtonElement.title = 'Cliquer pour fermer' - closeButtonElement.onclick = () => { - messageElement.parentNode.removeChild(messageElement) + /* Create or get the message container */ + if (messageContainer) { + this.messageContainer = messageContainer + } else { + this.messageContainer = document.createElement('div') + this.messageContainer.classList.add('contact-mailer-message-container') + document.body.appendChild(this.messageContainer) + } } - /* Jump to message */ - const url = location.href; //Save down the URL without hash. - location.href = "#"+messageId; //Go to the target element. - history.replaceState(null,null,url); //Don't like hashes. Changing it back. + message(level, text) { + /* This function displays a message */ + const messageElement = document.createElement('p') + const messageId = 'contact-mailer-' + this.theme + '-message-' + level + this.messageContainer.appendChild(messageElement) + messageElement.textContent = text + messageElement.classList.add('contact-mailer-message') + messageElement.classList.add(messageId) + messageElement.id = messageId - setTimeout(() => { - try { - messageContainer.removeChild(messageElement) - } catch (e) {} /* Silently fail if message was already deleted by click */ - }, 10000) + /*add close button to the alert message*/ + const closeButtonElement = document.createElement('span') + messageElement.appendChild(closeButtonElement) + closeButtonElement.textContent = "×" + closeButtonElement.classList.add('contact-mailer-message-close-button') + closeButtonElement.title = 'Cliquer pour fermer' + closeButtonElement.onclick = () => { + messageElement.parentNode.removeChild(messageElement) + } + + setTimeout(() => { + try { + messageElement.parentNode.removeChild(messageElement) + } catch (e) {} /* Silently fail if message was already deleted by click */ + }, 10000) + + } + + success (text) { + this.message('success', text) + } + + error (text) { + this.message('error', text) + } } -function jeanCloudContactFormIntercept (formId, theme) { + +function jeanCloudContactFormIntercept (formId, notifier) { /* * This function intercepts a form submission and send it via XHR. * Param formId is the HTML id of the form @@ -44,10 +61,6 @@ function jeanCloudContactFormIntercept (formId, theme) { console.error('You tried to intercept form id:"' + formId + '" but it was not found.') return } - /* Create the message container */ - const messageBox = document.createElement('div') - messageBox.classList.add('contact-mailer-message-container') - formElem.before(messageBox) /* Intercept the submit event */ formElem.onsubmit = async (e) => { @@ -55,7 +68,7 @@ function jeanCloudContactFormIntercept (formId, theme) { /* Add loading text */ const submitButton = formElem.querySelector('[type="submit"]') const loadingText = document.createElement('span') - loadingText.classList.add(".contact-mailer-sending"); + loadingText.classList.add("contact-mailer-sending"); loadingText.textContent = 'Envoi en cours…' submitButton.after(loadingText) /* XHR */ @@ -67,19 +80,19 @@ function jeanCloudContactFormIntercept (formId, theme) { .then(data => { loadingText.parentNode.removeChild(loadingText) if (data.ok && data.status == 200) { - jeanCloudContactMailerMessage (messageBox, theme, 'success', 'Le message a bien été envoyé !') + notifier.success('Le message a bien été envoyé !') formElem.reset() } else if (!data.ok && data.status == 500) { - jeanCloudContactMailerMessage (messageBox, theme, 'error', 'Erreur du service d’envoi. Réessayez plus tard ou contactez https://jean-cloud.net') + notifier.error('Erreur du service d’envoi. Réessayez plus tard ou contactez https://jean-cloud.net') } else if (!data.ok && data.status == 400) { - jeanCloudContactMailerMessage (messageBox, theme, 'error', 'Une erreur est survenue dans la requête que vous avez effectué. Réessayez plus tard ou contactez le webmaster par un autre moyen.') + notifier.error('Une erreur est survenue dans la requête que vous avez effectué. Réessayez plus tard ou contactez le webmaster par un autre moyen.') // TODO display server’s error message } }) .catch((error) => { loadingText.parentNode.removeChild(loadingText) - jeanCloudContactMailerMessage (messageBox, theme, 'error', 'Impossible d’envoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.') + notifier.error('Impossible d’envoyer le formulaire. Vérifiez votre connexion internet ou réessayez plus tard.') }) } } diff --git a/test.html b/test.html index ad751c0..94c873d 100644 --- a/test.html +++ b/test.html @@ -27,6 +27,6 @@ - +