Add live preview of width/position settings to preview

[MAILPOET-2811]
This commit is contained in:
Rostislav Wolny
2020-05-18 17:03:50 +02:00
committed by Veljko V
parent 49ce4cfa1f
commit eb494d5ea9
3 changed files with 71 additions and 3 deletions

View File

@@ -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);
}
});
});