Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Forbid animation in preview while changing form width

Browse Source 
[MAILPOET-3175]
This commit is contained in:
Jan Lysý
2020-09-30 12:56:12 +02:00
committed by Veljko V
parent b2a1482a29
commit 8f425c40fb
1 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
assets/js/src/form_editor/form_preview.ts
View File

@ -15,6 +15,7 @@ jQuery(($) => {
setTimeout(() => form.addClass(to)); setTimeout(() => form.addClass(to));
}; };
let originalWidth = previewForm.css('width');
const updateForm = (event) => { const updateForm = (event) => {
if (!event.data) { if (!event.data) {
return; return;
@ -34,8 +35,26 @@ jQuery(($) => {
return; return;
} }
// Apply width settings
const unit = width.unit === 'pixel' ? 'px' : '%';
const newWidth = `${width.value}${unit}`;
if (formType === 'fixed_bar') {
const formElement = previewForm.find('form.mailpoet_form');
formElement.css('width', newWidth);
} else {
previewForm.css('width', newWidth);
if (unit === 'px') { // Update others container width to render full pixel size
$('#mailpoet_widget_preview #sidebar').css('width', newWidth);
} else { // Reset container size to default render percent size
$('#mailpoet_widget_preview #sidebar').css('width', null);
}
}
// When the width is changed we want to forbid animation
const forbidAnimation = newWidth !== originalWidth;
originalWidth = newWidth;
const animation = event.data.formSettings?.formPlacement?.[placementName]?.animation; const animation = event.data.formSettings?.formPlacement?.[placementName]?.animation;
if (animation !== '') { if (animation !== '' && !forbidAnimation) {
previewForm.removeClass((index, className) => (className.match(/(^|\s)mailpoet_form_animation\S+/g) || []).join(' ')); previewForm.removeClass((index, className) => (className.match(/(^|\s)mailpoet_form_animation\S+/g) || []).join(' '));
setTimeout(() => previewForm.addClass(`mailpoet_form_animation_${animation}`)); setTimeout(() => previewForm.addClass(`mailpoet_form_animation_${animation}`));
toggleClass(previewForm.prev('.mailpoet_form_popup_overlay'), 'mailpoet_form_overlay_animation', 'mailpoet_form_overlay_animation'); toggleClass(previewForm.prev('.mailpoet_form_popup_overlay'), 'mailpoet_form_overlay_animation', 'mailpoet_form_overlay_animation');
@ -43,20 +62,6 @@ jQuery(($) => {
const position = event.data.formSettings?.formPlacement?.[placementName]?.position; const position = event.data.formSettings?.formPlacement?.[placementName]?.position;
// Apply width settings
const unit = width.unit === 'pixel' ? 'px' : '%';
if (formType === 'fixed_bar') {
const formElement = previewForm.find('form.mailpoet_form');
formElement.css('width', `${width.value}${unit}`);
} else {
previewForm.css('width', `${width.value}${unit}`);
if (unit === 'px') { // Update others container width to render full pixel size
$('#mailpoet_widget_preview #sidebar').css('width', `${width.value}${unit}`);
} else { // Reset container size to default render percent size
$('#mailpoet_widget_preview #sidebar').css('width', null);
}
}
// Ajdust others (widget) container // Ajdust others (widget) container
if (formType === 'others') { if (formType === 'others') {
if (unit === 'px') { // Update others container width so that we can render full pixel size if (unit === 'px') { // Update others container width so that we can render full pixel size