Refactor form preview specific FE functionality to extra module

[MAILPOET-2811]

assets/js/src/form_editor/form_preview.ts

@@ -0,0 +1,66 @@
+import jQuery from 'jquery';
+
+jQuery(($) => {
+  $(() => {
+    const previewForm = $('div.mailpoet_form[data-is-preview="1"]');
+    if (!previewForm.length) {
+      return;
+    }
+
+    previewForm.submit((e) => { e.preventDefault(); return false; });
+
+    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);
+
+    // Display only form on widget preview page
+    // This should keep element visible and still placed within the content but hide everything else
+    const widgetPreview = $('#mailpoet_widget_preview');
+    if (widgetPreview.length) {
+      $('#mailpoet_widget_preview').siblings().hide();
+      $('#mailpoet_widget_preview').parents().siblings().hide();
+    }
+  });
+});

assets/js/src/public.jsx

@@ -224,62 +224,5 @@ jQuery(($) => {
     });
 
     $('.mailpoet_captcha_update').on('click', updateCaptcha);
-
-    // Display only form on widget preview page
-    // This should keep element visible and still placed within the content but hide everything else
-    const widgetPreview = $('#mailpoet_widget_preview');
-    if (widgetPreview.length) {
-      $('#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);
-    }
   });
 });

lib/Form/AssetsController.php

@@ -44,6 +44,17 @@ class AssetsController {
     return $scripts;
   }
 
+  public function setupFormPreviewDependencies() {
+    $this->setupFrontEndDependencies();
+    $this->wp->wpEnqueueScript(
+      'mailpoet_form_preview',
+      Env::$assetsUrl . '/dist/js/' . $this->renderer->getJsAsset('form_preview.js'),
+      ['jquery'],
+      Env::$version,
+      true
+    );
+  }
+
   public function setupFrontEndDependencies() {
     $this->wp->wpEnqueueStyle(
       'mailpoet_public',

lib/Form/PreviewPage.php

@@ -39,7 +39,7 @@ class PreviewPage {
   }
 
   public function renderPage(int $formId, string $formType): string {
-    $this->assetsController->setupFrontEndDependencies();
+    $this->assetsController->setupFormPreviewDependencies();
     $formData = $this->fetchFormData($formId);
     if (!is_array($formData)) {
       return '';

webpack.config.js

@@ -365,6 +365,17 @@ const formEditorConfig = {
   },
 };
 
+// Form preview config
+const formPreviewConfig = {
+  name: 'form_preview',
+  entry: {
+    form_preview: 'form_editor/form_preview.ts',
+  },
+  externals: {
+    'jquery': 'jQuery',
+  },
+};
+
 // Block config
 const postEditorBlock = {
   name: 'post_editor_block',
@@ -384,7 +395,7 @@ const settingsConfig = {
   },
 };
 
-module.exports = [adminConfig, publicConfig, migratorConfig, formEditorConfig, testConfig, postEditorBlock, settingsConfig].map((config) => {
+module.exports = [adminConfig, publicConfig, migratorConfig, formEditorConfig, formPreviewConfig, testConfig, postEditorBlock, settingsConfig].map((config) => {
   if (config.name !== 'test') {
     config.plugins = config.plugins || [];
     config.plugins.push(