Create remaining mail partials

Improve mail partial lookup method

ServiceProvider.php

@@ -297,8 +297,13 @@ protected function registerMailer()
             ]);
 
             $manager->registerMailPartials([
+                'header' => 'system::mail.partial-header',
+                'footer' => 'system::mail.partial-footer',
                 'button' => 'system::mail.partial-button',
+                'panel' => 'system::mail.partial-panel',
                 'table' => 'system::mail.partial-table',
+                'subcopy' => 'system::mail.partial-subcopy',
+                'promotion' => 'system::mail.partial-promotion',
             ]);
         });
 

assets/js/mailbrandsettings/mailbrandsettings.js

@@ -1,40 +1,37 @@
+var previewIframe
 
 $(document).on('change', '.field-colorpicker', function() {
-    $('#brandSettingsForm').request('onRefresh', {
-        data: { 'fields': ['_mail_preview'] }
+    $('#brandSettingsForm').request('onUpdateSampleMessage').done(function(data) {
+        updatePreviewContent(data.previewHtml)
     })
 })
 
-function createPreviewContainer(el, content) {
-    var newiframe
-
-    // Shadow DOM ignores media queries
-    // if (document.body.attachShadow) {
-    if (false) {
-        var shadow = el.attachShadow({ mode: 'open' })
-        shadow.innerHTML = content
-    }
-    else {
-        newiframe = document.createElement('iframe')
+function updatePreviewContent(content) {
+    'srcdoc' in previewIframe
+        ? previewIframe.srcdoc = content
+        : previewIframe.src = 'data:text/html;charset=UTF-8,' + content
+}
 
-        'srcdoc' in newiframe
-            ? newiframe.srcdoc = content
-            : newiframe.src = 'data:text/html;charset=UTF-8,' + content
+function adjustPreviewHeight() {
+    previewIframe.style.height = (previewIframe.contentWindow.document.getElementsByTagName('body')[0].scrollHeight) +'px'
+}
 
-        var parent = el.parentNode
-        parent.replaceChild(newiframe, el)
+function createPreviewContainer(el, content) {
+    previewIframe = document.createElement('iframe')
 
-        newiframe.style.width = '100%'
-        newiframe.setAttribute('frameborder', 0)
+    updatePreviewContent(content)
 
-        newiframe.onload = adjustIframeHeight
-    }
+    previewIframe.style.width = '100%'
+    previewIframe.setAttribute('frameborder', 0)
+    previewIframe.setAttribute('id', el.id)
+    previewIframe.onload = adjustPreviewHeight
 
-    function adjustIframeHeight() {
-        newiframe.style.height = '500px'
-        newiframe.style.height = 1 + (newiframe.contentWindow.document.getElementsByTagName('body')[0].scrollHeight) +'px'
-    }
+    var parent = el.parentNode
+    parent.replaceChild(previewIframe, el)
 
-    $(document).render(adjustIframeHeight)
-    $(window).resize(adjustIframeHeight)
+    /*
+     * Auto adjust height
+     */
+    $(document).render(adjustPreviewHeight)
+    $(window).resize(adjustPreviewHeight)
 }

classes/MailManager.php

@@ -1,6 +1,7 @@
 <?php namespace System\Classes;
 
 use Twig;
+use Config;
 use Markdown;
 use System\Models\MailPartial;
 use System\Models\MailTemplate;
@@ -91,9 +92,10 @@ public function addContentToMailer($message, $code, $data)
             $message->subject(Twig::parse($template->subject, $data));
         }
 
-        if (!isset($data['subject'])) {
-            $data['subject'] = $swiftMessage->getSubject();
-        }
+        $data += [
+            'subject' => $swiftMessage->getSubject(),
+            'appName' => Config::get('app.name')
+        ];
 
         /*
          * HTML contents
@@ -199,7 +201,7 @@ public function renderTextTemplate($template, $data = [])
 
     public function renderPartial($code, $params)
     {
-        if (!$partial = MailPartial::whereCode($code)->first()) {
+        if (!$partial = MailPartial::findOrMakePartial($code)) {
             return '<!-- Missing partial: '.$code.' -->';
         }
 

controllers/MailBrandSettings.php

@@ -2,6 +2,7 @@
 
 use File;
 use Flash;
+use Config;
 use Backend;
 use BackendMenu;
 use ApplicationException;
@@ -60,16 +61,30 @@ public function index()
         }
     }
 
+    public function onUpdateSampleMessage()
+    {
+        $this->pageAction();
+
+        $this->formGetWidget()->setFormValues();
+
+        return ['previewHtml' => $this->renderSampleMessage()];
+    }
+
     public function renderSampleMessage()
     {
+        $data = [
+            'subject' => Config::get('app.name'),
+            'appName' => Config::get('app.name'),
+        ];
+
         $layout = new MailLayout;
         $layout->fillFromCode('default');
 
         $template = new MailTemplate;
         $template->layout = $layout;
         $template->content_html = File::get(base_path('modules/system/models/mailbrandsetting/sample_template.htm'));
 
-        return MailManager::instance()->renderTemplate($template);
+        return MailManager::instance()->renderTemplate($template, $data);
     }
 
     public function formCreateModelObject()

models/MailPartial.php

@@ -8,6 +8,7 @@
 use System\Classes\MailManager;
 use October\Rain\Mail\MailParser;
 use ApplicationException;
+use Exception;
 
 /**
  * Mail partial
@@ -50,6 +51,22 @@ public function afterFetch()
         }
     }
 
+    public static function findOrMakePartial($code)
+    {
+        try {
+            if (!$template = self::whereCode($code)->first()) {
+                $template = new self;
+                $template->code = $code;
+                $template->fillFromCode($code);
+            }
+
+            return $template;
+        }
+        catch (Exception $ex) {
+            return null;
+        }
+    }
+
     /**
      * Loops over each mail layout and ensures the system has a layout,
      * if the layout does not exist, it will create one.

models/mailbrandsetting/custom.less

@@ -7,7 +7,7 @@ body, body *:not(html):not(style):not(br):not(tr):not(code) {
 
 body {
     background-color: @body-bg;
-    color: #74787E;
+    color: @text-color;
     height: 100%;
     hyphens: auto;
     line-height: 1.4;
@@ -64,7 +64,7 @@ h3 {
 }
 
 p {
-    color: #74787E;
+    color: @text-color;
     font-size: 16px;
     line-height: 1.5em;
     margin-top: 0;
@@ -107,12 +107,11 @@ img {
     text-align: center;
 }
 
-.header a {
+.header a, .header span {
     color: #bbbfc3;
     font-size: 19px;
     font-weight: bold;
     text-decoration: none;
-    text-shadow: 0 1px 0 white;
 }
 
 /* Body */
@@ -185,7 +184,7 @@ img {
 }
 
 .table td {
-    color: #74787E;
+    color: @text-color;
     font-size: 15px;
     line-height: 18px;
     padding: 10px 0;

models/mailbrandsetting/fields.yaml

@@ -59,12 +59,12 @@ secondaryTabs:
             type: section
 
         header_color:
-            label: Site name color
+            label: Header color
             type: colorpicker
             availableColors: []
 
         heading_color:
-            label: Heading color
+            label: Headings color
             type: colorpicker
             availableColors: []
 

models/mailbrandsetting/sample_template.htm

@@ -1,7 +1,3 @@
-{% component 'header' %}
-October CMS
-{% endcomponent %}
-
 # Heading 1
 
 This is a paragraph filled with Lorem Ipsum and a link.
@@ -44,12 +40,8 @@
 {% endcomponent %}
 
 Thanks,
-October CMS
+{{ appName }}
 
 {% component 'subcopy' %}
 This is the subcopy of the email
 {% endcomponent %}
-
-{% component 'footer' %}
-© 2017 October CMS. All rights reserved.
-{% endcomponent %}

views/mail/layout-default.htm

@@ -15,6 +15,12 @@
     </style>
 
     <table class="wrapper" width="100%" cellpadding="0" cellspacing="0">
+
+<!-- Header -->
+{% component 'header' %}
+{{ subject }}
+{% endcomponent %}
+
         <tr>
             <td align="center">
                 <table class="content" width="100%" cellpadding="0" cellspacing="0">
@@ -34,6 +40,12 @@
                 </table>
             </td>
         </tr>
+
+<!-- Footer -->
+{% component 'footer' %}
+&copy; 2017 {{ appName }}. All rights reserved.
+{% endcomponent %}
+
     </table>
 
 </body>

views/mail/partial-footer.htm

@@ -0,0 +1,16 @@
+name = "Footer"
+==
+-------------------
+{{ body }}
+==
+<tr>
+    <td>
+        <table class="footer" align="center" width="570" cellpadding="0" cellspacing="0">
+            <tr>
+                <td class="content-cell" align="center">
+                    {{ body|md }}
+                </td>
+            </tr>
+        </table>
+    </td>
+</tr>

views/mail/partial-header.htm

@@ -0,0 +1,17 @@
+name = "Header"
+==
+*** {{ body }} <{{ url }}>
+==
+<tr>
+    <td class="header">
+        {% if url %}
+            <a href="{{ url }}">
+                {{ body }}
+            </a>
+        {% else %}
+            <span>
+                {{ body }}
+            </span>
+        {% endif %}
+    </td>
+</tr>

views/mail/partial-panel.htm

@@ -0,0 +1,17 @@
+name = "Panel"
+==
+{{ body }}
+==
+<table class="panel" width="100%" cellpadding="0" cellspacing="0">
+    <tr>
+        <td class="panel-content">
+            <table width="100%" cellpadding="0" cellspacing="0">
+                <tr>
+                    <td class="panel-item">
+                        {{ body|md }}
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+</table>

views/mail/partial-promotion.htm

@@ -0,0 +1,11 @@
+name = "Promotion"
+==
+{{ body }}
+==
+<table class="promotion" align="center" width="100%" cellpadding="0" cellspacing="0">
+    <tr>
+        <td align="center">
+            {{ body|md }}
+        </td>
+    </tr>
+</table>

views/mail/partial-subcopy.htm

@@ -0,0 +1,7 @@
+<table class="subcopy" width="100%" cellpadding="0" cellspacing="0">
+    <tr>
+        <td>
+            {{ body|md }}
+        </td>
+    </tr>
+</table>