From 9562d8704c401e5a2f5ea47719156ac47e9853d3 Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Mon, 21 Jan 2019 16:55:37 +0100 Subject: [PATCH 1/3] Fix public.js to follow eslint rules [MAILPOET-1567] --- assets/js/src/public.js | 74 +++++++++++++++++++++-------------------- 1 file changed, 38 insertions(+), 36 deletions(-) diff --git a/assets/js/src/public.js b/assets/js/src/public.js index 787da900b6..8175dddef0 100644 --- a/assets/js/src/public.js +++ b/assets/js/src/public.js @@ -62,49 +62,51 @@ function ( // eslint-disable-line func-names endpoint: 'subscribers', action: 'subscribe', data: formData.data - }).fail(function (response) { // eslint-disable-line func-names - form.find('.mailpoet_validate_error').html( - response.errors.map(function (error) { // eslint-disable-line func-names - return error.message; - }).join('
') - ).show(); - }).done(function (response) { // eslint-disable-line func-names - if (window.grecaptcha && formData.recaptcha) { - window.grecaptcha.reset(formData.recaptcha); - } - return response; - }).done(function (response) { // eslint-disable-line func-names - // successfully subscribed - if ( - response.meta !== undefined + }) + .fail(function handleFailedPost(response) { + form.find('.mailpoet_validate_error').html( + response.errors.map(function buildErrorMessage(error) { + return error.message; + }).join('
') + ).show(); + }) + .done(function handleRecaptcha(response) { + if (window.grecaptcha && formData.recaptcha) { + window.grecaptcha.reset(formData.recaptcha); + } + return response; + }) + .done(function handleSuccess(response) { + // successfully subscribed + if ( + response.meta !== undefined && response.meta.redirect_url !== undefined - ) { + ) { // go to page - window.location.href = response.meta.redirect_url; - } else { + window.location.href = response.meta.redirect_url; + } else { // display success message - form.find('.mailpoet_validate_success').show(); - } + form.find('.mailpoet_validate_success').show(); + } - // reset form - form.trigger('reset'); - // reset validation - parsley.reset(); - // reset captcha - if (window.grecaptcha && formData.recaptcha) { - window.grecaptcha.reset(formData.recaptcha); - } + // reset form + form.trigger('reset'); + // reset validation + parsley.reset(); + // reset captcha + if (window.grecaptcha && formData.recaptcha) { + window.grecaptcha.reset(formData.recaptcha); + } - // resize iframe - if ( - window.frameElement !== null + // resize iframe + if ( + window.frameElement !== null && MailPoet !== undefined && MailPoet.Iframe - ) { - MailPoet.Iframe.autoSize(window.frameElement); - } - }); - + ) { + MailPoet.Iframe.autoSize(window.frameElement); + } + }); return false; }); }); From 0d433c7f7cd869e1d9dc18b8fd49530e6c30ab8c Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Tue, 22 Jan 2019 09:55:24 +0100 Subject: [PATCH 2/3] Add loading animation to form submit button [MAILPOET-1567] --- assets/css/src/public.styl | 46 ++++++++++++++++++++++++++++++++++++++ assets/js/src/public.js | 4 ++++ lib/Form/Block/Submit.php | 6 ++++- 3 files changed, 55 insertions(+), 1 deletion(-) diff --git a/assets/css/src/public.styl b/assets/css/src/public.styl index bf8e56f134..0b71fcac53 100644 --- a/assets/css/src/public.styl +++ b/assets/css/src/public.styl @@ -12,3 +12,49 @@ .mailpoet_list_label .mailpoet_date_label display:block + +/* form loading */ +.mailpoet_form_sending + .mailpoet_form_loading + display:block + .mailpoet_submit + display:none + +.mailpoet_form_loading + display:none + width: 30px + text-align: center + +.mailpoet_form_loading > span + width: 5px + height: 5px + background-color: #5b5b5b + + border-radius: 100% + display: inline-block + -webkit-animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both + animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both + +.mailpoet_form_loading .mailpoet_bounce1 + -webkit-animation-delay: -0.32s + animation-delay: -0.32s + +.mailpoet_form_loading .mailpoet_bounce2 { + -webkit-animation-delay: -0.16s + animation-delay: -0.16s + margin: 0 7px +} + +@-webkit-keyframes mailpoet-bouncedelay + 0%, 80%, 100% + -webkit-transform: scale(0) + 40% + -webkit-transform: scale(1.0) + +@keyframes mailpoet-bouncedelay + 0%, 80%, 100% + -webkit-transform: scale(0) + transform: scale(0) + 40% + -webkit-transform: scale(1.0) + transform: scale(1.0) diff --git a/assets/js/src/public.js b/assets/js/src/public.js index 8175dddef0..cac2b2c614 100644 --- a/assets/js/src/public.js +++ b/assets/js/src/public.js @@ -54,6 +54,7 @@ function ( // eslint-disable-line func-names formData.data.recaptcha = window.grecaptcha.getResponse(formData.recaptcha); } + form.addClass('mailpoet_form_sending'); // ajax request MailPoet.Ajax.post({ url: window.MailPoetForm.ajax_url, @@ -106,6 +107,9 @@ function ( // eslint-disable-line func-names ) { MailPoet.Iframe.autoSize(window.frameElement); } + }) + .always(function subscribeFormAlways() { + form.removeClass('mailpoet_form_sending'); }); return false; }); diff --git a/lib/Form/Block/Submit.php b/lib/Form/Block/Submit.php index 59db472009..864ca08960 100644 --- a/lib/Form/Block/Submit.php +++ b/lib/Form/Block/Submit.php @@ -14,7 +14,11 @@ class Submit extends Base { $html .= 'data-automation-id="subscribe-submit-button" '; - $html .= '/>

'; + $html .= '/>'; + + $html .= ''; + + $html .= '

'; return $html; } From 9f3c98380fd4604ca5127aa5d158ff50b317ff1d Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Tue, 22 Jan 2019 09:56:19 +0100 Subject: [PATCH 3/3] Add submit animation styles to form editor [MAILPOET-1567] --- lib/Form/Util/Styles.php | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/lib/Form/Util/Styles.php b/lib/Form/Util/Styles.php index 00435cde56..372466303e 100644 --- a/lib/Form/Util/Styles.php +++ b/lib/Form/Util/Styles.php @@ -65,6 +65,18 @@ class Styles { .mailpoet_validate_error { color:#B94A48; } + +.mailpoet_form_loading { + width: 30px; + text-align: center; + line-height: normal; +} + +.mailpoet_form_loading > span { + width: 5px; + height: 5px; + background-color: #5b5b5b; +} EOL; function __construct($stylesheet = null) {