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

Move inlined form styles to form styles in style element

Browse Source 
[MAILPOET-2811]
This commit is contained in:
Rostislav Wolny
2020-05-20 12:16:17 +02:00
committed by Veljko V
parent 2eabab4150
commit 63a972db4a
8 changed files with 28 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/Form/DisplayFormInWPContent.php
View File

@ -140,7 +140,6 @@ class DisplayFormInWPContent {
'form_type' => $displayType,
'styles' => $this->formRenderer->renderStyles($formData, '#' . $htmlId),
'html' => $this->formRenderer->renderHTML($formData),
'form_element_styles' => $this->formRenderer->renderFormElementStyles($formData),
];
// (POST) non ajax success/error variables

1
lib/Form/PreviewPage.php
View File

@ -90,7 +90,6 @@ class PreviewPage {
'form_type' => $formType,
'styles' => $this->formRenderer->renderStyles($formData, '#' . $htmlId),
'html' => $this->formRenderer->renderHTML($formData),
'form_element_styles' => $this->formRenderer->renderFormElementStyles($formData),
'success' => $formType === 'others',
'error' => $formType === 'others',
'delay' => 1,

6
lib/Form/Renderer.php
View File

@ -30,7 +30,7 @@ class Renderer {
$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->renderFormDivWrapperStyles($form, $prefix);
$html .= $this->styleUtils->renderFormSettingsStyles($form, $prefix);
$html .= '</style>';
return $html;
@ -94,8 +94,4 @@ class Renderer {
<input class="mailpoet_recaptcha_field" type="hidden" name="recaptcha">
</div>';
}
public function renderFormElementStyles(array $form): string {
return $this->styleUtils->renderFormElementStyles($form);
}
}

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

@ -111,10 +111,11 @@ EOL;
return implode(PHP_EOL, $formattedStyles);
}
public function renderFormDivWrapperStyles(array $form, string $selector = null): string {
public function renderFormSettingsStyles(array $form, string $selector = null): string {
if (is_null($selector)) return '';
if (!isset($form['settings'])) return '';
$formSettings = $form['settings'];
// Wrapper styles
$styles = [];
if (isset($formSettings['backgroundColor'])) {
@ -146,28 +147,26 @@ EOL;
$styles[] = 'background-repeat: ' . $backgroundRepeat;
$styles[] = 'background-size: ' . $backgroundSize;
}
$media = "@media (max-width: 500px) {{$selector} {background-image: none;}}";
return $selector . '{' . join(';', $styles) . '}' . $media;
}
public function renderFormElementStyles(array $form): string {
if (!isset($form['settings'])) return '';
$formSettings = $form['settings'];
$styles = [];
if (isset($formSettings['fontColor'])) {
$styles[] = 'color: ' . trim($formSettings['fontColor']);
}
if (isset($formSettings['form_padding'])) {
$styles[] = 'padding: ' . $formSettings['form_padding'] . 'px';
}
if (isset($formSettings['alignment'])) {
$styles[] = 'text-align: ' . $formSettings['alignment'];
}
$formWrapperStyles = $selector . '{' . join(';', $styles) . ';}';
return join(';', $styles);
// Media styles
$media = "@media (max-width: 500px) {{$selector} {background-image: none;}}";
// Form element styles
$formStyles = [];
if (isset($formSettings['form_padding'])) {
$formStyles[] = 'padding: ' . $formSettings['form_padding'] . 'px';
}
$formElementStyles = $selector . ' form.mailpoet_form {' . join(';', $formStyles) . ';}';
return $formWrapperStyles . $formElementStyles . $media;
}
}

1
lib/Form/Widget.php
View File

@ -226,7 +226,6 @@ class Widget extends \WP_Widget {
'after_widget' => $afterWidget,
'before_title' => $beforeTitle,
'after_title' => $afterTitle,
'form_element_styles' => $this->formRenderer->renderFormElementStyles($form),
];
// (POST) non ajax success/error variables

1
tests/unit/Form/DisplayFormInWPContentTest.php
View File

@ -38,7 +38,6 @@ class DisplayFormInWPContentTest extends \MailPoetUnitTest {
$this->renderer = $this->createMock(Renderer::class);
$this->renderer->expects($this->any())->method('renderStyles')->willReturn('<style></style>');
$this->renderer->expects($this->any())->method('renderHTML')->willReturn('<form></form>');
$this->renderer->expects($this->any())->method('renderFormElementStyles')->willReturn('');
$this->hook = new DisplayFormInWPContent($this->wp, $this->repository, $this->renderer, $this->assetsController, $this->templateRenderer);
}

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

@ -35,60 +35,56 @@ class StylesTest extends \MailPoetUnitTest {
public function testItShouldNotRenderStylesForFormWithoutSettings() {
$form = Fixtures::get('simple_form_body');
$styles = $this->styles->renderFormElementStyles($form);
$styles = $this->styles->renderFormSettingsStyles($form);
expect($styles)->equals('');
}
public function testItShouldRenderBackgroundColour() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['backgroundColor' => 'red'];
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->styles->renderFormDivWrapperStyles($form, '#prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
expect($styles)->contains('background-color: red');
}
public function testItShouldRenderFontColour() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['fontColor' => 'red'];
$styles = $this->styles->renderFormElementStyles($form);
expect($styles)->equals('color: red');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
expect($styles)->contains('color: red');
}
public function testItShouldRenderBorder() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['border_size' => '22', 'border_color' => 'red'];
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->styles->renderFormDivWrapperStyles($form, '#prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
expect($styles)->contains('border: 22px solid red');
}
public function testItShouldRenderPadding() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['form_padding' => '22'];
$styles = $this->styles->renderFormElementStyles($form);
expect($styles)->equals('padding: 22px');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
expect($styles)->contains('form.mailpoet_form {padding: 22px');
}
public function testItShouldRenderAlignment() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['alignment' => 'right'];
$styles = $this->styles->renderFormElementStyles($form);
expect($styles)->equals('text-align: right');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
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'];
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->styles->renderFormDivWrapperStyles($form, 'prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
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'];
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->styles->renderFormDivWrapperStyles($form, 'prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
expect($styles)->contains('background-image: url(xxx)');
expect($styles)->contains('background-position: center');
expect($styles)->contains('background-repeat: no-repeat');
@ -98,8 +94,7 @@ class StylesTest extends \MailPoetUnitTest {
public function testItShouldRenderImageBackgroundTile() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['background_image_url' => 'xxx', 'background_image_display' => 'tile'];
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->styles->renderFormDivWrapperStyles($form, 'prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
expect($styles)->contains('background-image: url(xxx)');
expect($styles)->contains('background-position: center');
expect($styles)->contains('background-repeat: repeat');
@ -109,8 +104,7 @@ class StylesTest extends \MailPoetUnitTest {
public function testItShouldRenderImageBackgroundFit() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['background_image_url' => 'xxx', 'background_image_display' => 'fit'];
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->styles->renderFormDivWrapperStyles($form, 'prefix');
$styles = $this->styles->renderFormSettingsStyles($form, '#prefix');
expect($styles)->contains('background-image: url(xxx)');
expect($styles)->contains('background-position: center top');
expect($styles)->contains('background-repeat: no-repeat');

1
views/form/front_end_form.html
View File

@ -31,7 +31,6 @@
action="<%= admin_url('admin-post.php?action=mailpoet_subscription_form') | raw %>"
class="mailpoet_form mailpoet_form_form mailpoet_form_<%= form_type %>"
novalidate
style="<%= form_element_styles %>"
data-delay="<%= delay %>"
data-position="<%= position %>"
data-background-color="<%= backgroundColor %>"