diff --git a/assets/css/src/components-public/_public.scss b/assets/css/src/components-public/_public.scss index 6c34c29b33..43b907c015 100644 --- a/assets/css/src/components-public/_public.scss +++ b/assets/css/src/components-public/_public.scss @@ -171,6 +171,26 @@ $form-columns-space-between: 20px; } } +.mailpoet_widget_preview { + background-color: #ffffff; + height: 100%; + left: 0; + max-width: 100% !important; + position: fixed; + top: 0; + width: 100% !important; + z-index: 100000; + + .widget-area { + display: block !important; + float: none !important; + margin: 10px auto; + max-height: calc(100vh - 60px); + overflow-y: auto !important; + width: 340px; + } +} + .mailpoet_form_popup_overlay { background-color: black; display: none; diff --git a/assets/js/src/public.jsx b/assets/js/src/public.jsx index 7f8222d8b3..e47849e397 100644 --- a/assets/js/src/public.jsx +++ b/assets/js/src/public.jsx @@ -214,5 +214,13 @@ 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(); + } }); }); diff --git a/lib/Form/PreviewPage.php b/lib/Form/PreviewPage.php index 0b0be146ab..1568faf6ea 100644 --- a/lib/Form/PreviewPage.php +++ b/lib/Form/PreviewPage.php @@ -44,7 +44,14 @@ class PreviewPage { if (!is_array($formData)) { return ''; } - return $this->getPostContent() . $this->getFormContent($formData, $formId, $formType); + return $this->templateRenderer->render( + 'form/form_preview.html', + [ + 'post' => $this->getPostContent(), + 'form' => $this->getFormContent($formData, $formId, $formType), + 'formType' => $formType, + ] + ); } public function renderTitle() { diff --git a/lib/Form/PreviewWidget.php b/lib/Form/PreviewWidget.php new file mode 100644 index 0000000000..b290f07085 --- /dev/null +++ b/lib/Form/PreviewWidget.php @@ -0,0 +1,25 @@ +formHtml = $formHtml; + parent::__construct( + 'mailpoet_form_preview', + 'Dummy form form preview', + [] + ); + } + + /** + * Output the widget itself. + */ + public function widget($args, $instance = null) { + echo $this->formHtml; + } +} diff --git a/views/form/form_preview.html b/views/form/form_preview.html new file mode 100644 index 0000000000..9985a9a667 --- /dev/null +++ b/views/form/form_preview.html @@ -0,0 +1,14 @@ +<% block content %> + <% if(formType == 'sidebar') %> +
+ <% else %> + <%= post | raw %> + <%= form | raw %> + <% endif %> +<% endblock %>