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

Move style rendering

Browse Source 
[MAILPOET-2880]
This commit is contained in:
Pavel Dohnal
2020-05-13 15:03:37 +02:00
committed by Veljko V
parent e26f5318ff
commit 4cbaf975b0
3 changed files with 39 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/js/src/public.jsx
View File

@@ -46,27 +46,6 @@ jQuery(($) => {
return true;
}
function moveStyle(formDiv) {
const form = formDiv.find('form');
formDiv.data('background-image', form.css('background-image'));
formDiv.css('background-image', form.css('background-image'));
formDiv.css('background-position', form.css('background-position'));
formDiv.css('background-repeat', form.css('background-repeat'));
formDiv.css('background-size', form.css('background-size'));
form.css('background-image', '');
form.css('background-position', '');
form.css('background-repeat', '');
form.css('background-size', '');
}
function checkFormBackground(formDiv) {
if ($(window).width() >= 500) {
formDiv.css('background-image', formDiv.data('background-image'));
} else {
formDiv.css('background-image', '');
}
}
function showForm(formDiv, showOverlay = false) {
const form = formDiv.find('form');
const position = form.data('position');
@@ -108,9 +87,6 @@ jQuery(($) => {
$('.mailpoet_form').each((index, element) => {
$(element).children('.mailpoet_paragraph').last().addClass('last');
});
$('div.mailpoet_form').each((index, element) => {
moveStyle($(element));
});
$('.mailpoet_form_close_icon').click((event) => {
const closeIcon = $(event.target);
const formDiv = closeIcon.parent();
@@ -138,7 +114,6 @@ jQuery(($) => {
// Detect form is placed in tight container
const formDiv = $(element);
checkFormContainer(formDiv.find('form'));
checkFormBackground(formDiv);
});
});

37
lib/Form/Renderer.php
View File

@@ -30,6 +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->render($this->getStyles($form), $prefix);
$html .= $this->renderFormDivWrapperStyles($form, $prefix);
$html .= '</style>';
return $html;
@@ -94,7 +95,8 @@ class Renderer {
</div>';
}
public function renderFormElementStyles(array $form): string {
private function renderFormDivWrapperStyles(array $form, string $selector = null): string {
if (is_null($selector)) return '';
if (!isset($form['settings'])) return '';
$formSettings = $form['settings'];
$styles = [];
@@ -103,10 +105,6 @@ class Renderer {
$styles[] = 'background-color: ' . trim($formSettings['backgroundColor']);
}
if (isset($formSettings['fontColor'])) {
$styles[] = 'color: ' . trim($formSettings['fontColor']);
}
if (isset($formSettings['border_size']) && isset($formSettings['border_color'])) {
$styles[] = 'border: ' . $formSettings['border_size'] . 'px solid ' . $formSettings['border_color'];
}
@@ -115,14 +113,6 @@ class Renderer {
$styles[] = 'border-radius: ' . $formSettings['border_radius'] . 'px';
}
if (isset($formSettings['form_padding'])) {
$styles[] = 'padding: ' . $formSettings['form_padding'] . 'px';
}
if (isset($formSettings['alignment'])) {
$styles[] = 'text-align: ' . $formSettings['alignment'];
}
if (isset($formSettings['background_image_url'])) {
$styles[] = 'background-image: url(' . trim($formSettings['background_image_url']) . ')';
$backgroundPosition = 'center';
@@ -140,6 +130,27 @@ class Renderer {
$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'];
}
return join(';', $styles);
}

24
tests/unit/Form/RendererTest.php
View File

@@ -107,8 +107,9 @@ class RendererTest extends \MailPoetUnitTest {
public function testItShouldRenderBackgroundColour() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['backgroundColor' => 'red'];
$styles = $this->renderer->renderFormElementStyles($form);
expect($styles)->equals('background-color: red');
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->renderer->renderStyles($form, 'prefix');
expect($styles)->contains('background-color: red');
}
public function testItShouldRenderFontColour() {
@@ -121,8 +122,9 @@ class RendererTest extends \MailPoetUnitTest {
public function testItShouldRenderBorder() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['border_size' => '22', 'border_color' => 'red'];
$styles = $this->renderer->renderFormElementStyles($form);
expect($styles)->equals('border: 22px solid red');
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->renderer->renderStyles($form, 'prefix');
expect($styles)->contains('border: 22px solid red');
}
public function testItShouldRenderPadding() {
@@ -142,14 +144,16 @@ class RendererTest extends \MailPoetUnitTest {
public function testItShouldRenderBorderWithRadius() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['border_size' => '22', 'border_color' => 'red', 'border_radius' => '11'];
$styles = $this->renderer->renderFormElementStyles($form);
expect($styles)->equals('border: 22px solid red;border-radius: 11px');
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->renderer->renderStyles($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'];
$styles = $this->renderer->renderFormElementStyles($form);
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->renderer->renderStyles($form, 'prefix');
expect($styles)->contains('background-image: url(xxx)');
expect($styles)->contains('background-position: center');
expect($styles)->contains('background-repeat: no-repeat');
@@ -159,7 +163,8 @@ class RendererTest extends \MailPoetUnitTest {
public function testItShouldRenderImageBackgroundTile() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['background_image_url' => 'xxx', 'background_image_display' => 'tile'];
$styles = $this->renderer->renderFormElementStyles($form);
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->renderer->renderStyles($form, 'prefix');
expect($styles)->contains('background-image: url(xxx)');
expect($styles)->contains('background-position: center');
expect($styles)->contains('background-repeat: repeat');
@@ -169,7 +174,8 @@ class RendererTest extends \MailPoetUnitTest {
public function testItShouldRenderImageBackgroundFit() {
$form = Fixtures::get('simple_form_body');
$form['settings'] = ['background_image_url' => 'xxx', 'background_image_display' => 'fit'];
$styles = $this->renderer->renderFormElementStyles($form);
$form['styles'] = '.mailpoet_paragraph {}';
$styles = $this->renderer->renderStyles($form, 'prefix');
expect($styles)->contains('background-image: url(xxx)');
expect($styles)->contains('background-position: center top');
expect($styles)->contains('background-repeat: no-repeat');