Move style rendering

[MAILPOET-2880]

assets/js/src/public.jsx

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

lib/Form/Renderer.php

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

tests/unit/Form/RendererTest.php

@@ -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);
+    $form['styles'] = '.mailpoet_paragraph {}';
-    expect($styles)->equals('background-color: red');
+    $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);
+    $form['styles'] = '.mailpoet_paragraph {}';
-    expect($styles)->equals('border: 22px solid red');
+    $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);
+    $form['styles'] = '.mailpoet_paragraph {}';
-    expect($styles)->equals('border: 22px solid red;border-radius: 11px');
+    $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');