Refactor form preview specific FE functionality to extra module
[MAILPOET-2811]
This commit is contained in:
Rostislav Wolny
committed by
Veljko V
Veljko V
parent
dd1f89f4d9
commit
a7cea43aac
66
assets/js/src/form_editor/form_preview.ts
Normal file
66
assets/js/src/form_editor/form_preview.ts
Normal file
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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 '';
|
||||
|
||||
@ -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(
|
||||
|
||||
Reference in New Issue
Block a user