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

- Ported newsletter rendering engine

Browse Source
This commit is contained in:
MrCasual
2015-09-09 21:01:05 -04:00
parent c8956018b4
commit 42c5885cbd
13 changed files with 783 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
lib/Newsletter/Blocks/Button.php Normal file
View File

@@ -0,0 +1,41 @@
<?php namespace MailPoet\Newsletter\Blocks;
use MailPoet\Newsletter\Blocks\Renderer as BlocksRenderer;
class Button {
static function render($element) {
$template = '<tr>
<td class="mailpoet_col mailpoet_button mailpoet_padded" valign = "top" >
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="' . $element['styles']['block']['textAlign'] . '">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="' . $element['url'] . '"
style="height:' . $element['styles']['block']['lineHeight'] . ';width:' . $element['styles']['block']['width'] . ';v-text-anchor:middle;"
arcsize="' . round($element['styles']['block']['borderRadius'] / $element['styles']['block']['lineHeight'] * 100) . '%" strokecolor="' . $element['styles']['block']['borderColor'] . '"
fillcolor="' . $element['styles']['block']['backgroundColor'] . '">
<w:anchorlock/>
<center style="color:' . $element['styles']['block']['fontColor'] . ';font-family:' . $element['styles']['block']['fontFamily'] . ';font-size:' . $element['styles']['block']['fontSize'] . ';font-weight:bold;">
' . $element['text'] . '
</center>
</v:roundrect>
<![endif]-->
<a class="mailpoet_button" href="' . $element['url'] . '"
style="display:inline-block;text-align:center;text-decoration:none;-webkit-text-size-adjust:none;mso-hide:all;' . BlocksRenderer::getBlockStyles($element, array('textAlign')) . '">
' . $element['text'] . '
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>';
return $template;
}
}

22
lib/Newsletter/Blocks/Divider.php Normal file
View File

@@ -0,0 +1,22 @@
<?php namespace MailPoet\Newsletter\Blocks;
class Divider {
static function render($element) {
$template = '<tr>
<td class="mailpoet_col mailpoet_divider mailpoet_padded" style="background-color: ' . $element['styles']['block']['backgroundColor'] . '; padding: ' . $element['styles']['block']['padding'] . ' 0;" valign="top">
<table width="100%">
<tr>
<td style="border-top-width: ' . $element['styles']['block']['borderWidth'] . ';
border-top-style: ' . $element['styles']['block']['borderStyle'] . ';
border-top-color: ' . $element['styles']['block']['borderColor'] . ';">
</td>
</tr>
</table>
</td>
</tr>';
return $template;
}
}

27
lib/Newsletter/Blocks/Footer.php Normal file
View File

@@ -0,0 +1,27 @@
<?php namespace MailPoet\Newsletter\Blocks;
use MailPoet\Newsletter\Blocks\Renderer as BlocksRenderer;
class Footer {
static function render($element) {
// apply link styles
if(isset($element['styles']['link'])) {
$element['text'] = str_replace('<a', '<a style="' . BlocksRenderer::getStyles($element['styles'], 'link') . '"', $element['text']);
}
// apply text styles
if(isset($element['styles']['link'])) {
$element['text'] = str_replace('<p', '<p style="' . BlocksRenderer::getStyles($element['styles'], 'text') . '"', $element['text']);
}
$template = '<tr>
<td class="mailpoet_col mailpoet_footer" style="' . BlocksRenderer::getStyles($element['styles'], 'block') . '" valign="top">
<div>' . $element['text'] . '</div>
</td>
</tr>';
return $template;
}
}

27
lib/Newsletter/Blocks/Header.php Normal file
View File

@@ -0,0 +1,27 @@
<?php namespace MailPoet\Newsletter\Blocks;
use MailPoet\Newsletter\Blocks\Renderer as BlocksRenderer;
class Header {
static function render($element) {
// apply link styles
if(isset($element['styles']['link'])) {
$element['text'] = str_replace('<a', '<a style="' . BlocksRenderer::getStyles($element['styles'], 'link') . '"', $element['text']);
}
// apply text styles
if(isset($element['styles']['link'])) {
$element['text'] = str_replace('<p', '<p style="' . BlocksRenderer::getStyles($element['styles'], 'text') . '"', $element['text']);
}
$template = '<tr>
<td class="mailpoet_col mailpoet_header" style="' . BlocksRenderer::getBlockStyles($element) . '" valign="top">
<div>' . $element['text'] . '</div>
</td>
</tr>';
return $template;
}
}

19
lib/Newsletter/Blocks/Image.php Normal file
View File

@@ -0,0 +1,19 @@
<?php namespace MailPoet\Newsletter\Blocks;
use MailPoet\Newsletter\Blocks\Renderer as BlocksRenderer;
class Image {
static function render($element) {
$element['width'] = (int) $element['width'];
$template = '<tr>
<td class="mailpoet_col mailpoet_image ' . (($element['padded'] === true) ? "mailpoet_padded" : "") . '" style="' . BlocksRenderer::getBlockStyles($element) . '" valign="top">
<img style="top:0; left:0; height: auto; width:100%;" src="' . $element['src'] . '" width="' . (($element['padded'] === true) ? $element['width'] - (20 * 2) : $element['width']) . '">
</td>
</tr>';
return $template;
}
}

107
lib/Newsletter/Blocks/Renderer.php Normal file
View File

@@ -0,0 +1,107 @@
<?php namespace MailPoet\Newsletter\Blocks;
class Renderer {
static $typeFace = array(
'Arial' => "Arial, 'Helvetica Neue', Helvetica, sans-serif",
'Comic Sans MS' => "'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif",
'Courier New' => "'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace",
'Georgia' => "Georgia, Times, 'Times New Roman', serif",
'Lucida' => "'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
'Tahoma' => "Tahoma, Verdana, Segoe, sans-serif",
'Times New Roman' => "'Times New Roman', Times, Baskerville, Georgia, serif",
'Trebuchet MS' => "'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif",
'Verdana' => "Verdana, Geneva, sans-serif"
);
static $cssAtributesTable = array(
'backgroundColor' => 'background-color',
'fontColor' => 'color',
'fontFamily' => 'font-family',
'textDecoration' => 'text-decoration',
'textAlign' => 'text-align',
'fontSize' => 'font-size',
'borderWidth' => 'border-width',
'borderStyle' => 'border-style',
'borderColor' => 'border-color',
'borderRadius' => 'border-radius',
'lineHeight' => 'line-height'
);
static function render($data, $column = null) {
$blockContent = '';
$blockCount = count($data['blocks']);
foreach ($data['blocks'] as $i => $block) {
$blockContent .= self::createElementFromBlockType($block);
if(isset($block['blocks']) && is_array($block['blocks'])) {
$blockContent = self::render($block);
}
// vertical orientation denotes column container
if($block['type'] == 'container' && $block['orientation'] == 'vertical') {
$columns[] = $blockContent;
}
}
return (isset($columns)) ? $columns : $blockContent;
}
static function createElementFromBlockType($block) {
switch ($block['type']) {
case 'header':
$element = Header::render($block);
break;
case 'image':
$element = Image::render($block);
break;
case 'text':
$element = Text::render($block);
break;
case 'button':
$element = Button::render($block);
break;
case 'divider':
$element = Divider::render($block);
break;
case 'spacer':
$element = Spacer::render($block);
break;
case 'social':
$element = Social::render($block);
break;
case 'footer':
$element = Footer::render($block);
break;
default:
$element = '';//'UNRECOGNIZED ELEMENT';
break;
}
return $element;
}
static function getBlockStyles($element, $ignore = false) {
if(!isset($element['styles']['block'])) {
return;
}
return self::getStyles($element['styles'], 'block', $ignore);
}
static function getStyles($styles, $type, $ignore = false) {
$css = '';
foreach ($styles[$type] as $attribute => $style) {
if($ignore && in_array($attribute, $ignore)) {
continue;
}
$css .= self::translateCSSAttribute($attribute) . ': ' . $style . ' !important;';
}
return $css;
}
static function translateCSSAttribute($attribute) {
return (isset(self::$cssAtributesTable[$attribute])) ? self::$cssAtributesTable[$attribute] : $attribute;
}
}

23
lib/Newsletter/Blocks/Social.php Normal file
View File

@@ -0,0 +1,23 @@
<?php namespace MailPoet\Newsletter\Blocks;
class Social {
static function render($element) {
$iconsBlock = '';
if(is_array($element['icons'])) {
foreach ($element['icons'] as $icon) {
$iconsBlock .= '<a href="' . $icon['link'] . '"><img src="' . $icon['image'] . '" width = "32" height = "32" style="width: 32px; height: 32px;" alt="' . $icon['iconType'] . '"></a><img src="http://mp3.mailpoet.net/spacer.gif" width = "10" height = "1" style=" width: 10px; height: 1px;">';
}
}
$template = '<tr>
<td class="mailpoet_col mailpoet_social" valign="top">
<div class="mailpoet_social-icon mailpoet_padded">
' . $iconsBlock . '
</div>
</td>
</tr>';
return $template;
}
}

22
lib/Newsletter/Blocks/Spacer.php Normal file
View File

@@ -0,0 +1,22 @@
<?php namespace MailPoet\Newsletter\Blocks;
use MailPoet\Newsletter\Blocks\Renderer as BlocksRenderer;
class Spacer {
static function render($element) {
// if the parent container (column) has background set and the divider element has a transparent background,
// it will assume the newsletter background, not that of the parent container
if($element['styles']['block']['backgroundColor'] === 'transparent') {
unset($element['styles']['block']['backgroundColor']);
}
$template = '<tr>
<td class="mailpoet_col mailpoet_spacer" style="' . BlocksRenderer::getBlockStyles($element) . '" valign="top">
</td>
</tr>';
return $template;
}
}

74
lib/Newsletter/Blocks/Text.php Normal file
View File

@@ -0,0 +1,74 @@
<?php namespace MailPoet\Newsletter\Blocks;
class Text {
static function render($element) {
// convert <blockquote> elements to tables
$blockquoteTemplate = '<table cellpadding="0" cellspacing="0" border="0" class="mailpoet_blockquote">
<tbody>
<tr>
<td valign="top">
$1
</td>
</tr>
</tbody>
</table>
<br>';
$element['text'] = preg_replace('/<blockquote>(.*?)<\/blockquote>/s', $blockquoteTemplate, $element['text']);
// add line breaks after tags
$element['text'] = preg_replace('/(<\/(ul|ol|h\d)>)/', '$1<br>', $element['text']);
$element['text'] = self::removeEmptyHTMLTags($element['text']);
// convert empty <p> tags to line breaks
$element['text'] = preg_replace('/<p(?:.+style=\".*?\")?><\/p>/', '<br>', $element['text']);
// convert <p> to <span>
$element['text'] = preg_replace('/<p>(.*?)<\/p>/', '<table cellpadding="0" cellspacing="0" border="0"><tr><td><span class="paragraph">$1</span></td></tr></table>', $element['text']);
$element['text'] = preg_replace('/<p(.+style=\".*?\")?>(.*?)<\/p>/', '<table cellpadding="0" cellspacing="0" border="0"><tr><td $1><span class="paragraph">$2</span></td></tr></table>', $element['text']);
// remove the last break line
$element['text'] = preg_replace('/<br>([^<br>]*)$/s', '', $element['text']);
$template = '<tr>
<td class="mailpoet_col mailpoet_text mailpoet_padded" valign="top">
' . $element['text'] . '
</td>
</tr>';
return $template;
}
static function removeEmptyHTMLTags($html) {
$pattern = <<<'EOD'
~
<
(?:
!--[^-]*(?:-(?!->)[^-]*)*-->[^<]*(*SKIP)(*F) # skip comments
|
( # group 1
(span|em|strong) # tag name in group 2
[^"'>]* #'"# all that is not a quote or a closing angle bracket
(?: # quoted attributes
"[^\\"]*(?:\\.[^\\"]*)*+" [^"'>]* #'"# double quote
|
'[^\\']*(?:\\.[^\\']*)*+' [^"'>]* #'"# single quote
)*+
>
\s*
(?:
<!--[^-]*(?:-(?!->)[^-]*)*+--> \s* # html comments
|
<(?1) \s* # recursion with the group 1
)*+
</\2> # closing tag
) # end of the group 1
)
~sxi
EOD;
return preg_replace($pattern, '', $html);
}
}

65
lib/Newsletter/Columns/Renderer.php Normal file
View File

@@ -0,0 +1,65 @@
<?php namespace MailPoet\Newsletter\Columns;
class Renderer {
static function render($columnsCount, $columnsData) {
$columnWidths = array(
1 => 600,
2 => 300,
3 => 200
);
$columnClasses = array(
1 => 'mailpoet_col-one',
2 => 'mailpoet_col-two',
3 => 'mailpoet_col-three'
);
$columnWidth = $columnWidths[$columnsCount];
$columnClass = $columnClasses[$columnsCount];
// open column container
$columnContainerTemplate = '<tr>
<td class="mailpoet_content" align="left" style="border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="mailpoet_cols-wrapper" style="border-collapse: collapse; padding-left: 0px; padding-right: 0px;">
<!--[if mso]>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="' . $columnWidth . '" style="width: ' . $columnWidth . 'px;" valign="top">
<![endif]-->';
$columnOpenTemplate = '<table width="' . $columnWidth . '" border="0" cellpadding="0" cellspacing="0" align="left" class="mailpoet_force-row ' . $columnClass . ' mailpoet_col" style="width: ' . $columnWidth . 'px; border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout: fixed; margin-left: auto; margin-right: auto;" bgcolor="#999999"><tbody>';
$columnCloseTemplate = '</tbody></table>
<!--[if mso]>
</td>
<td width="' . $columnWidth . '" style="width: ' . $columnWidth . 'px;" valign="top">
<![endif]-->';
foreach ($columnsData as $index => $columnData) {
$index++;
$columnContainerTemplate .= $columnOpenTemplate . $columnData;
if($columnsCount > 1 && $index != $columnsCount) {
$columnContainerTemplate .= $columnCloseTemplate;
}
}
// close column container
$columnContainerTemplate .= ' </tbody>
</table>
<!--[if mso]>
</td>
</tr>
</tbody>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>';
return $columnContainerTemplate;
}
}

1
lib/Newsletter/NewsletterData.json Normal file
View File

File diff suppressed because one or more lines are too long

266
lib/Newsletter/NewsletterTemplate.html Normal file
View File

@@ -0,0 +1,266 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>MailPoet Newsletter Template</title>
</head>
<body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-line-height-rule: exactly; font-family: Helvetica, Arial, sans-serif; text-align: left; color: #333333; margin: 0; padding: 0;"
bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<style type="text/css">
body {
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
mso-line-height-rule: exactly;
text-align: left;
}
h1,
h2,
h3,
p,
ol,
ul,
li {
margin: 0;
}
ol,
ul,
li {
padding-left: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.ReadMsgBody {
width: 100%;
background-color: #ebebeb;
}
table {
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
p {
margin: 0;
padding: 0;
margin-bottom: 0;
}
table td {
border-collapse: collapse;
}
img {
-ms-interpolation-mode: bicubic;
margin: 0;
border: 0;
padding: 0;
display: block;
}
td.mailpoet_button, .mailpoet_image, .mailpoet_text, .mailpoet_social {
padding-bottom: 20px;
}
.mailpoet_button div {
padding: 8px 0 8px 0;
}
.yshortcuts a {
border-bottom: none !important;
}
.mailpoet_container {
width: 600px;
max-width: 600px;
}
.mailpoet_col,
.mailpoet_cols-wrapper {
padding-left: 0px;
padding-right: 0px;
}
.mailpoet_col-one,
.mailpoet_col-two,
.mailpoet_col-three {
table-layout: fixed;
margin-left: auto;
margin-right: auto;
}
.mailpoet_col-one,
.mailpoet_col-two,
.mailpoet_col-three,
.mailpoet_header,
.mailpoet_footer {
margin-left: auto;
margin-right: auto;
}
.mailpoet_footer div, .mailpoet_header div {
margin: 5px 0 5px 0;
}
/* .mailpoet_col-one ol,*/
.mailpoet_col-one ul {
margin-left: 18px;
}
/*.mailpoet_col-two ol,*/
.mailpoet_col-two ul {
margin-left: 16px;
}
.mailpoet_col-two li {
padding-left: 5px;
}
/*.mailpoet_col-three ol,*/
.mailpoet_col-three ul {
margin-left: 14px;
}
.mailpoet_col-three li {
padding-left: 6px;
}
.mailpoet_content-wrapper a {
text-decoration: underline;
}
.mailpoet_padded {
padding-left: 20px;
padding-right: 20px;
word-break: break-word;
word-wrap: break-word;
}
.mailpoet_centered {
margin-left: auto;
margin-right: auto;
}
.mailpoet_center {
text-align: center;
}
.mailpoet_right {
text-align: right;
}
.mailpoet_left {
text-align: left;
}
.mailpoet_justify {
text-align: justify;
}
.mailpoet_blockquote {
border-left: 2px #565656 solid;
padding-left: 10px;
font-style: italic;
}
.mailpoet_blockquote p.mailpoet_signature {
font-style: normal;
font-weight: bold;
}
.mailpoet_social {
text-align: center;
}
.mailpoet_social img {
display: inline;
}
.mailpoet_social div {
padding: 5px 0 5px 0;
}
.ios-footer a {
color: #aaaaaa !important;
text-decoration: underline;
}
@media screen and (max-width: 400px) and (-webkit-min-device-pixel-ratio: 1) {
[class="mailpoet_cols-wrapper"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media screen and (max-width: 599px) and (-webkit-min-device-pixel-ratio: 1) {
[class~="mailpoet_force-row"],
[class="mailpoet_container"] {
width: 100% !important;
max-width: 100% !important;
}
a[class="mailpoet_button"] {
width: 100% !important;
max-width: 100% !important;
padding: 5px 0 !important;
}
td[class="mailpoet_col"] {
width: 100% !important;
}
[class=mailpoet_wrapper] ol,
[class=mailpoet_wrapper] ul {
margin-left: 18px !important;
}
[class=mailpoet_wrapper] li {
padding-left: 2px !important;
}
.mailpoet_social img {
height: 32x !important;
width: 32px !important;
padding-bottom: 20px !important;
}
}
{{newsletter_editor_styles}}
</style>
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td align="center" class="mailpoet_content-wrapper" valign="top" style="border-collapse:collapse;" bgcolor="#333333">
<table border="0" width="600" cellpadding="0" cellspacing="0" class="mailpoet_container" style="border-spacing:0;mso-table-lspace:0;mso-table-rspace:0;max-width:600px">
<tbody>
{{newsletter_editor_content}}
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>

89
lib/Newsletter/Renderer.php Normal file
View File

@@ -0,0 +1,89 @@
<?php
namespace MailPoet\Newsletter;
if(!defined('ABSPATH')) exit;
class Renderer {
public $template = 'NewsletterTemplate.html';
function __construct($newsletterData) {
$this->data = $newsletterData;
$this->template = file_get_contents(dirname(__FILE__) . '/' . $this->template);
}
function renderAll() {
$newsletterContent = $this->renderContent($this->data['data']);
$newsletterStyles = $this->renderStyles($this->data['styles']);
$renderedTemplate = $this->renderTemplate($this->template, array(
$newsletterStyles,
$newsletterContent
));
$renderedTemplateWithInlinedStyles = $this->inlineCSSStyles($renderedTemplate);
return $this->postProcessRenderedTemplate($renderedTemplateWithInlinedStyles);
}
function renderContent($content) {
$newsletterContent = '';
foreach ($content['blocks'] as $contentBlock) {
if(isset($contentBlock['blocks']) && is_array($contentBlock['blocks'])) {
$columnCount = count($contentBlock['blocks']);
$columnData = Blocks\Renderer::render($contentBlock);
$newsletterContent .= Columns\Renderer::render($columnCount, $columnData);
}
}
return $newsletterContent;
}
function renderStyles($styles) {
$newsletterStyles = '';
foreach ($styles as $selector => $style) {
switch ($selector) {
case 'text':
$selector = 'span.paragraph, ul, ol';
break;
case 'background':
$selector = '.mailpoet_content-wrapper';
break;
case 'link':
$selector = '.mailpoet_content-wrapper a';
break;
case 'newsletter':
$selector = '.mailpoet_container, .mailpoet_col-one, .mailpoet_col-two, .mailpoet_col-three';
break;
}
$newsletterStyles .= $selector . '{' . PHP_EOL;
foreach ($style as $attribute => $individualStyle) {
$newsletterStyles .= Blocks\Renderer::translateCSSAttribute($attribute) . ':' . $individualStyle . ';' . PHP_EOL;
}
$newsletterStyles .= '}' . PHP_EOL;
}
return $newsletterStyles;
}
function renderTemplate($template, $data) {
return preg_replace_callback('/{{\w+}}/', function ($matches) use (&$data) {
return array_shift($data);
}, $template);
}
function inlineCSSStyles($template) {
$inliner = new \MailPoet\Util\CSS();
return $inliner->inlineCSS(null, $template);
}
function postProcessRenderedTemplate($template) {
// remove padding from last element inside each column
$DOM = \pQuery::parseStr($template);
$lastColumnElement = $DOM->query('.mailpoet_col > tbody > tr:last-child > td');
foreach ($lastColumnElement as $element) {
$element->setAttribute('style', str_replace('padding-bottom:20px;', '', $element->attributes['style']));
}
return $DOM->__toString();
}
}