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

Render form width on FE from settings

Browse Source 
[MAILPOET-2811]
This commit is contained in:
Rostislav Wolny
2020-05-20 16:25:52 +02:00
committed by Veljko V
parent 32f5e09d7d
commit 9ebd96fb6a
8 changed files with 197 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/css/src/components-public/_public.scss
View File

@@ -230,13 +230,11 @@ div.mailpoet_form_popup {
display: none;
left: 50%;
max-height: calc(100vh - 60px);
max-width: 560px;
overflow-y: auto;
padding: 20px;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
width: 560px;
z-index: 100001;
}
@@ -264,12 +262,11 @@ div.mailpoet_form_fixed_bar {
overflow-y: auto;
padding: 10px;
position: fixed;
width: 100%;
width: 100% !important;
z-index: 100000;
form {
margin: 0 auto;
max-width: 960px;
}
.mailpoet_form_close_icon {
@@ -292,8 +289,6 @@ div.mailpoet_form_slide_in {
box-shadow: 0 4px 35px 0 rgba(195, 65, 2, .2);
display: none;
max-height: calc(100vh - 60px);
max-width: 600px;
min-width: 350px;
overflow-y: auto;
padding: 10px;
position: fixed;

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

@@ -10,11 +10,12 @@ jQuery(($) => {
previewForm.submit((e) => { e.preventDefault(); return false; });
const updateForm = (event) => {
let width = null;
if (!event.data) {
return;
}
let width = null;
const formType = event.data.formType;
// Get width settings based on type
if (formType === 'popup') {
width = event.data.formSettings?.popupStyles.width;
} else if (formType === 'fixed_bar') {
@@ -27,10 +28,26 @@ jQuery(($) => {
width = event.data.formSettings?.otherStyles.width;
}
if (width) {
const unit = width.unit === 'pixel' ? 'px' : '%';
if (!width) {
return;
}
// 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}`);
previewForm.css('max-width', `${width.value}${unit}`);
}
// Ajdust others (widget) container
if (formType === 'others') {
if (unit === 'px') { // Update others container width so that we can 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);
}
}
if (formType === 'slide_in') {

2
lib/Form/DisplayFormInWPContent.php
View File

@@ -138,7 +138,7 @@ class DisplayFormInWPContent {
'form_id' => $form->getId(),
'form_success_message' => $formSettings['success_message'] ?? null,
'form_type' => $displayType,
'styles' => $this->formRenderer->renderStyles($formData, '#' . $htmlId),
'styles' => $this->formRenderer->renderStyles($formData, '#' . $htmlId, $displayType),
'html' => $this->formRenderer->renderHTML($formData),
];

2
lib/Form/PreviewPage.php
View File

@@ -89,7 +89,7 @@ class PreviewPage {
'form_id' => $formId,
'form_success_message' => $formData['settings']['success_message'] ?? null,
'form_type' => $formDisplayType,
'styles' => $this->formRenderer->renderStyles($formData, '#' . $htmlId),
'styles' => $this->formRenderer->renderStyles($formData, '#' . $htmlId, $formDisplayType),
'html' => $this->formRenderer->renderHTML($formData),
'success' => $formDisplayType === FormEntity::DISPLAY_TYPE_OTHERS,
'error' => $formDisplayType === FormEntity::DISPLAY_TYPE_OTHERS,

4
lib/Form/Renderer.php
View File

@@ -26,11 +26,11 @@ class Renderer {
$this->blocksRenderer = $blocksRenderer;
}
public function renderStyles(array $form, string $prefix): string {
public function renderStyles(array $form, string $prefix, string $displayType): string {
$html = '<style type="text/css">';
$html .= '.mailpoet_hp_email_label{display:none!important;}'; // move honeypot field out of sight
$html .= $this->styleUtils->prefixStyles($this->getCustomStyles($form), $prefix);
$html .= $this->styleUtils->renderFormSettingsStyles($form, $prefix);
$html .= $this->styleUtils->renderFormSettingsStyles($form, $prefix, $displayType);
$html .= '</style>';
return $html;

68
lib/Form/Util/Styles.php
View File

@@ -2,6 +2,7 @@
namespace MailPoet\Form\Util;
use MailPoet\Entities\FormEntity;
use MailPoetVendor\Sabberworm\CSS\Parser as CSSParser;
class Styles {
@@ -111,8 +112,7 @@ EOL;
return implode(PHP_EOL, $formattedStyles);
}
public function renderFormSettingsStyles(array $form, string $selector = null): string {
if (is_null($selector)) return '';
public function renderFormSettingsStyles(array $form, string $selector, string $displayType): string {
if (!isset($form['settings'])) return '';
$formSettings = $form['settings'];
// Wrapper styles
@@ -165,8 +165,68 @@ EOL;
if (isset($formSettings['form_padding'])) {
$formStyles[] = 'padding: ' . $formSettings['form_padding'] . 'px';
}
$formElementStyles = $selector . ' form.mailpoet_form {' . join(';', $formStyles) . ';}';
$formElementStyles = '';
if ($formStyles) {
$formElementStyles = $selector . ' form.mailpoet_form {' . join(';', $formStyles) . ';}';
}
return $formWrapperStyles . $formElementStyles . $media;
// Width styles
$widthStyles = $this->renderWidthStyles($formSettings, $selector, $displayType);
return $formWrapperStyles . $formElementStyles . $widthStyles . $media;
}
private function renderWidthStyles($formSettings, $selector, $displayType) {
$styles = [];
if ($displayType === FormEntity::DISPLAY_TYPE_POPUP) {
if (isset($formSettings['popup_styles']['width'])) {
$width = $this->getWidthValue($formSettings['popup_styles']['width']);
$styles[] = "width: $width";
$styles[] = "max-width: 100vw";
} else { // BC compatibilty
$styles[] = 'width: 560px';
$styles[] = 'max-width: 560px';
}
} elseif ($displayType === FormEntity::DISPLAY_TYPE_SLIDE_IN) {
if (isset($formSettings['slide_in_styles']['width'])) {
$width = $this->getWidthValue($formSettings['slide_in_styles']['width']);
$styles[] = "width: $width";
$styles[] = "max-width: 100vw";
} else { // BC compatibilty
$styles[] = 'max-width: 600px';
$styles[] = 'min-width: 350px';
}
} elseif ($displayType === FormEntity::DISPLAY_TYPE_FIXED_BAR) {
if (isset($formSettings['fixed_bar_styles']['width'])) {
$width = $this->getWidthValue($formSettings['fixed_bar_styles']['width']);
$styles[] = "width: $width";
$styles[] = "max-width: 100%";
} else { // BC compatibilty
$styles[] = 'max-width: 960px';
}
} elseif ($displayType === FormEntity::DISPLAY_TYPE_BELOW_POST) {
if (isset($formSettings['below_post_styles']['width'])) {
$width = $this->getWidthValue($formSettings['below_post_styles']['width']);
$styles[] = "width: $width";
}
} elseif ($displayType === FormEntity::DISPLAY_TYPE_OTHERS) {
if (isset($formSettings['other_styles']['width'])) {
$width = $this->getWidthValue($formSettings['other_styles']['width']);
$styles[] = "width: $width";
}
}
$widthSelector = $selector;
$widthSelector .= $displayType === FormEntity::DISPLAY_TYPE_FIXED_BAR ? ' form.mailpoet_form' : '';
if (!$styles) {
return '';
}
return $widthSelector . '{' . join(';', $styles) . ';}';
}
private function getWidthValue(array $width) {
return $width['value'] . ($width['unit'] === 'percent' ? '%' : 'px');
}
}

3
lib/Form/Widget.php
View File

@@ -5,6 +5,7 @@ namespace MailPoet\Form;
use MailPoet\API\JSON\API;
use MailPoet\Config\Renderer as ConfigRenderer;
use MailPoet\DI\ContainerWrapper;
use MailPoet\Entities\FormEntity;
use MailPoet\Form\Renderer as FormRenderer;
use MailPoet\Models\Form;
use MailPoet\Settings\SettingsController;
@@ -220,7 +221,7 @@ class Widget extends \WP_Widget {
'form_type' => $formType,
'form_success_message' => $form['settings']['success_message'],
'title' => $title,
'styles' => $this->formRenderer->renderStyles($form, '#' . $formId),
'styles' => $this->formRenderer->renderStyles($form, '#' . $formId, FormEntity::DISPLAY_TYPE_OTHERS),
'html' => $this->formRenderer->renderHTML($form),
'before_widget' => $beforeWidget,
'after_widget' => $afterWidget,

115
tests/unit/Form/Util/StylesTest.php
View File

@@ -3,6 +3,7 @@
namespace MailPoet\Test\Form\Util;
use Codeception\Util\Fixtures;
use MailPoet\Entities\FormEntity;
use MailPoet\Form\Util\Styles;
class StylesTest extends \MailPoetUnitTest {
@@ -35,56 +36,56 @@ class StylesTest extends \MailPoetUnitTest {
public function testItShouldNotRenderStylesForFormWithoutSettings() {
$form = Fixtures::get('simple_form_body');
$styles = $this->styles->renderFormSettingsStyles($form);
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->equals('');
}
public function testItShouldRenderBackgroundColour() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['backgroundColor' => 'red'];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->contains('background-color: red');
}
public function testItShouldRenderFontColour() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['fontColor' => 'red'];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->contains('color: red');
}
public function testItShouldRenderBorder() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['border_size' => '22', 'border_color' => 'red'];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->contains('border: 22px solid red');
}
public function testItShouldRenderPadding() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['form_padding' => '22'];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->contains('form.mailpoet_form {padding: 22px');
}
public function testItShouldRenderAlignment() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['alignment' => 'right'];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->contains('text-align: right');
}
public function testItShouldRenderBorderWithRadius() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['border_size' => '22', 'border_color' => 'red', 'border_radius' => '11'];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->contains('border: 22px solid red;border-radius: 11px');
}
public function testItShouldRenderImageBackground() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['background_image_url' => 'xxx'];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->contains('background-image: url(xxx)');
expect($styles)->contains('background-position: center');
expect($styles)->contains('background-repeat: no-repeat');
@@ -94,7 +95,7 @@ class StylesTest extends \MailPoetUnitTest {
public function testItShouldRenderImageBackgroundTile() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['background_image_url' => 'xxx', 'background_image_display' => 'tile'];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->contains('background-image: url(xxx)');
expect($styles)->contains('background-position: center');
expect($styles)->contains('background-repeat: repeat');
@@ -104,10 +105,104 @@ class StylesTest extends \MailPoetUnitTest {
public function testItShouldRenderImageBackgroundFit() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['background_image_url' => 'xxx', 'background_image_display' => 'fit'];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
expect($styles)->contains('background-image: url(xxx)');
expect($styles)->contains('background-position: center top');
expect($styles)->contains('background-repeat: no-repeat');
expect($styles)->contains('background-size: contain');
}
public function testItRendersWidthCssForBellowPost() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['backgroundColor' => 'red'];
// BC Style
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_BELOW_POST);
list($styleWithoutMedia) = explode('@media ', $styles);
expect($styleWithoutMedia)->notContains('width:');
expect($styleWithoutMedia)->notContains('max-width:');
// Pixel
$width = [
'unit' => 'pixel',
'value' => '900',
];
$form['settings'] = ['below_post_styles' => ['width' => $width]];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_BELOW_POST);
list($styleWithoutMedia) = explode('@media ', $styles);
expect($styleWithoutMedia)->contains('width: 900px;');
expect($styleWithoutMedia)->notContains('max-width:');
}
public function testItRendersWidthCssForFixedBar() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['backgroundColor' => 'red'];
// BC Style
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_FIXED_BAR);
list($styleWithoutMedia) = explode('@media ', $styles);
expect($styleWithoutMedia)->contains('max-width: 960px;');
// Percent
$width = [
'unit' => 'percent',
'value' => '90',
];
$form['settings'] = ['fixed_bar_styles' => ['width' => $width]];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_FIXED_BAR);
list($styleWithoutMedia) = explode('@media ', $styles);
expect($styleWithoutMedia)->contains('width: 90%;max-width: 100%;');
}
public function testItRendersWidthCssForPopup() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['backgroundColor' => 'red'];
// BC Style
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_POPUP);
list($styleWithoutMedia) = explode('@media ', $styles);
expect($styleWithoutMedia)->contains('width: 560px;max-width: 560px;');
// Pixel
$width = [
'unit' => 'pixel',
'value' => '900',
];
$form['settings'] = ['popup_styles' => ['width' => $width]];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_POPUP);
list($styleWithoutMedia) = explode('@media ', $styles);
expect($styleWithoutMedia)->contains('width: 900px;max-width: 100vw;');
}
public function testItRendersWidthCssForSlideIn() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['backgroundColor' => 'red'];
// BC Style
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_SLIDE_IN);
list($styleWithoutMedia) = explode('@media ', $styles);
expect($styleWithoutMedia)->contains('max-width: 600px;min-width: 350px;');
// Percent
$width = [
'unit' => 'percent',
'value' => '90',
];
$form['settings'] = ['slide_in_styles' => ['width' => $width]];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_SLIDE_IN);
list($styleWithoutMedia) = explode('@media ', $styles);
expect($styleWithoutMedia)->contains('width: 90%;max-width: 100vw;');
}
public function testItRendersWidthCssForOthers() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['backgroundColor' => 'red'];
// BC Style
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
list($styleWithoutMedia) = explode('@media ', $styles);
expect($styleWithoutMedia)->notContains('width:');
expect($styleWithoutMedia)->notContains('max-width:');
// Percent
$width = [
'unit' => 'percent',
'value' => '90',
];
$form['settings'] = ['other_styles' => ['width' => $width]];
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix', FormEntity::DISPLAY_TYPE_OTHERS);
list($styleWithoutMedia) = explode('@media ', $styles);
expect($styleWithoutMedia)->contains('width: 90%;');
expect($styleWithoutMedia)->notContains('max-width:');
}
}