From 8f425c40fbd0ec2b7e2c68e8b65129f59f9c7dbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Lys=C3=BD?= <lysyjan87@gmail.com>
Date: Wed, 30 Sep 2020 12:56:12 +0200
Subject: [PATCH] Forbid animation in preview while changing form width
 [MAILPOET-3175]

---
 assets/js/src/form_editor/form_preview.ts | 35 +++++++++++++----------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/assets/js/src/form_editor/form_preview.ts b/assets/js/src/form_editor/form_preview.ts
index e27884c4cf..adb96c719b 100644
--- a/assets/js/src/form_editor/form_preview.ts
+++ b/assets/js/src/form_editor/form_preview.ts
@@ -15,6 +15,7 @@ jQuery(($) => {
       setTimeout(() => form.addClass(to));
     };
 
+    let originalWidth = previewForm.css('width');
     const updateForm = (event) => {
       if (!event.data) {
         return;
@@ -34,8 +35,26 @@ jQuery(($) => {
         return;
       }
 
+      // Apply width settings
+      const unit = width.unit === 'pixel' ? 'px' : '%';
+      const newWidth = `${width.value}${unit}`;
+      if (formType === 'fixed_bar') {
+        const formElement = previewForm.find('form.mailpoet_form');
+        formElement.css('width', newWidth);
+      } else {
+        previewForm.css('width', newWidth);
+        if (unit === 'px') { // Update others container width to render full pixel size
+          $('#mailpoet_widget_preview #sidebar').css('width', newWidth);
+        } else { // Reset container size to default render percent size
+          $('#mailpoet_widget_preview #sidebar').css('width', null);
+        }
+      }
+      // When the width is changed we want to forbid animation
+      const forbidAnimation = newWidth !== originalWidth;
+      originalWidth = newWidth;
+
       const animation = event.data.formSettings?.formPlacement?.[placementName]?.animation;
-      if (animation !== '') {
+      if (animation !== '' && !forbidAnimation) {
         previewForm.removeClass((index, className) => (className.match(/(^|\s)mailpoet_form_animation\S+/g) || []).join(' '));
         setTimeout(() => previewForm.addClass(`mailpoet_form_animation_${animation}`));
         toggleClass(previewForm.prev('.mailpoet_form_popup_overlay'), 'mailpoet_form_overlay_animation', 'mailpoet_form_overlay_animation');
@@ -43,20 +62,6 @@ jQuery(($) => {
 
       const position = event.data.formSettings?.formPlacement?.[placementName]?.position;
 
-      // Apply width settings
-      const unit = width.unit === 'pixel' ? 'px' : '%';
-      if (formType === 'fixed_bar') {
-        const formElement = previewForm.find('form.mailpoet_form');
-        formElement.css('width', `${width.value}${unit}`);
-      } else {
-        previewForm.css('width', `${width.value}${unit}`);
-        if (unit === 'px') { // Update others container width to render full pixel size
-          $('#mailpoet_widget_preview #sidebar').css('width', `${width.value}${unit}`);
-        } else { // Reset container size to default render percent size
-          $('#mailpoet_widget_preview #sidebar').css('width', null);
-        }
-      }
-
       // Ajdust others (widget) container
       if (formType === 'others') {
         if (unit === 'px') { // Update others container width so that we can render full pixel size