Add live preview of width/position settings to preview

[MAILPOET-2811]

assets/css/src/components-public/_public.scss

@@ -230,13 +230,13 @@ div.mailpoet_form_popup {
   display: none;
   left: 50%;
   max-height: calc(100vh - 60px);
-  max-width: 560px !important;
+  max-width: 560px;
   overflow-y: auto;
   padding: 20px;
   position: fixed;
   top: 50%;
   transform: translate(-50%, -50%);
-  width: 560px !important;
+  width: 560px;
   z-index: 100001;
 }
 
@@ -264,7 +264,7 @@ div.mailpoet_form_fixed_bar {
   overflow-y: auto;
   padding: 10px;
   position: fixed;
-  width: 100% !important;
+  width: 100%;
   z-index: 100000;
 
   form {

assets/js/src/form_editor/components/preview/preview.tsx

@@ -1,6 +1,7 @@
 import React, {
   useEffect,
   useState,
+  useRef,
 } from 'react';
 import MailPoet from 'mailpoet';
 import { Spinner } from '@wordpress/components';
@@ -16,6 +17,7 @@ import FixedBarSettings from './fixed_bar_settings';
 import SlideInSettings from './slide_in_settings';
 
 const FormPreview = () => {
+  const iframeElement = useRef(null);
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const { hidePreview, changePreviewSettings } = useDispatch('mailpoet-form-editor');
   const isPreview = useSelect(
@@ -32,6 +34,11 @@ const FormPreview = () => {
     []
   );
 
+  const formSettings = useSelect(
+    (select) => select('mailpoet-form-editor').getFormSettings(),
+    []
+  );
+
   const formId = useSelect(
     (select) => select('mailpoet-form-editor').getFormData().id,
     []
@@ -41,6 +48,17 @@ const FormPreview = () => {
     setIframeLoaded(false);
   }, [isPreview]);
 
+  useEffect(() => {
+    if (!iframeElement.current) {
+      return;
+    }
+    const data = { formType: previewSettings.formType, formSettings };
+    iframeElement.current.contentWindow.postMessage(
+      data,
+      (window as any).mailpoet_form_preview_page
+    );
+  }, [formSettings, iframeElement, previewSettings]);
+
   if (!isPreview) return null;
 
   function setFormType(type) {
@@ -107,6 +125,7 @@ const FormPreview = () => {
               </div>
             )}
             <iframe
+              ref={iframeElement}
               className="mailpoet_form_preview_iframe"
               src={iframeSrc}
               title={MailPoet.I18n.t('formPreview')}

assets/js/src/public.jsx

@@ -232,5 +232,54 @@ jQuery(($) => {
       $('#mailpoet_widget_preview').siblings().hide();
       $('#mailpoet_widget_preview').parents().siblings().hide();
     }
+
+    const previewForm = $('div.mailpoet_form[data-is-preview="1"]');
+    if (previewForm) {
+      const updateForm = (event) => {
+        let width = null;
+        if (!event.data) {
+          return;
+        }
+        const formType = event.data.formType;
+        if (formType === 'popup') {
+          width = event.data.formSettings?.popupStyles.width;
+        } else if (formType === 'fixed_bar') {
+          width = event.data.formSettings?.fixedBarStyles.width;
+        } else if (formType === 'slide_in') {
+          width = event.data.formSettings?.slideInStyles.width;
+        } else if (formType === 'below_post') {
+          width = event.data.formSettings?.belowPostStyles.width;
+        } else if (formType === 'others') {
+          width = event.data.formSettings?.otherStyles.width;
+        }
+
+        if (width) {
+          const unit = width.unit === 'pixel' ? 'px' : '%';
+          previewForm.css('width', `${width.value}${unit}`);
+          previewForm.css('max-width', `${width.value}${unit}`);
+        }
+
+        if (formType === 'slide_in') {
+          if (previewForm.hasClass('mailpoet_form_position_left') && event.data.formSettings?.slideInFormPosition === 'right') {
+            previewForm.removeClass('mailpoet_form_position_left');
+            previewForm.addClass('mailpoet_form_position_right');
+          } else if (previewForm.hasClass('mailpoet_form_position_right') && event.data.formSettings?.slideInFormPosition === 'left') {
+            previewForm.removeClass('mailpoet_form_position_right');
+            previewForm.addClass('mailpoet_form_position_left');
+          }
+        }
+
+        if (formType === 'fixed_bar') {
+          if (previewForm.hasClass('mailpoet_form_position_bottom') && event.data.formSettings?.fixedBarFormPosition === 'top') {
+            previewForm.removeClass('mailpoet_form_position_bottom');
+            previewForm.addClass('mailpoet_form_position_top');
+          } else if (previewForm.hasClass('mailpoet_form_position_top') && event.data.formSettings?.fixedBarFormPosition === 'bottom') {
+            previewForm.removeClass('mailpoet_form_position_top');
+            previewForm.addClass('mailpoet_form_position_bottom');
+          }
+        }
+      };
+      window.addEventListener('message', updateForm, false);
+    }
   });
 });