adrian/contact-mailer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

second step, something is broken

Browse Source
This commit is contained in:
Adrian Amaglio 2020-08-27 15:04:30 +02:00
parent 384cb08dcc
commit d0461a4163
2 changed files with 54 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
client/index.js
View File

@ -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.')
})
}
}

2
test.html
View File

@ -27,6 +27,6 @@
<input type="submit" />
</form>
<script src="./client/index.js"></script>
<script> jeanCloudContactFormIntercept ('contact-mailer-form', 'light') </script>
<script> jeanCloudContactFormIntercept ('contact-mailer-form', new JeanCloudContactFormNotifier()) </script>
</body>
</html>