|
1
|
|
|
<?php |
|
2
|
|
|
|
|
3
|
|
|
/** |
|
4
|
|
|
* ____ _ _ _ _ |
|
5
|
|
|
* | _ \| |__ | |_ ___ _ __ ___ __ _(_) | |
|
6
|
|
|
* | |_) | '_ \| __/ _ \ '_ ` _ \ / _` | | | |
|
7
|
|
|
* | __/| | | | || __/ | | | | | (_| | | | |
|
8
|
|
|
* |_| |_| |_|\__\___|_| |_| |_|\__,_|_|_| |
|
9
|
|
|
* |
|
10
|
|
|
* This file is part of Kristuff\Phtemail. |
|
11
|
|
|
* |
|
12
|
|
|
* (c) Kristuff <[email protected]> |
|
13
|
|
|
* |
|
14
|
|
|
* For the full copyright and license information, please view the LICENSE |
|
15
|
|
|
* file that was distributed with this source code. |
|
16
|
|
|
* |
|
17
|
|
|
* @version 0.2.0 |
|
18
|
|
|
* @copyright 2017-2020 Kristuff |
|
19
|
|
|
*/ |
|
20
|
|
|
|
|
21
|
|
|
namespace Kristuff\Phtemail\Core; |
|
22
|
|
|
|
|
23
|
|
|
/** |
|
24
|
|
|
* Extends the HtmlBuilder with html head helper functions |
|
25
|
|
|
*/ |
|
26
|
|
|
abstract class HtmlHeadBuilder extends HtmlBuilder |
|
27
|
|
|
{ |
|
28
|
|
|
/** |
|
29
|
|
|
* Gets html meta tags as string |
|
30
|
|
|
* |
|
31
|
|
|
* @access protected |
|
32
|
|
|
* @return string |
|
33
|
|
|
*/ |
|
34
|
|
|
protected function getMeta() |
|
35
|
|
|
{ |
|
36
|
|
|
$html = ' <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />'.PHP_EOL; |
|
37
|
|
|
$html .= ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">'.PHP_EOL; |
|
38
|
|
|
$html .= ' <meta name="viewport" content="width=device-width, initial-scale=1.0">'.PHP_EOL; |
|
39
|
|
|
$html .= $this->getHtmlComment('Disable auto telephone linking in iOS', ' '); |
|
40
|
|
|
$html .= ' <meta name="format-detection" content="telephone=no" />'.PHP_EOL; |
|
41
|
|
|
return $html; |
|
42
|
|
|
} |
|
43
|
|
|
|
|
44
|
|
|
/** |
|
45
|
|
|
* Gets html title tag as string |
|
46
|
|
|
* |
|
47
|
|
|
* @access protected |
|
48
|
|
|
* @param string $title The email meta title |
|
49
|
|
|
* |
|
50
|
|
|
* @return string |
|
51
|
|
|
*/ |
|
52
|
|
|
protected function getTitle(string $title) |
|
53
|
|
|
{ |
|
54
|
|
|
return ' <title>' . $title . '</title>' . PHP_EOL; |
|
55
|
|
|
} |
|
56
|
|
|
|
|
57
|
|
|
/** |
|
58
|
|
|
* Gets the html styles as string |
|
59
|
|
|
* |
|
60
|
|
|
* @access protected |
|
61
|
|
|
* |
|
62
|
|
|
* @return string |
|
63
|
|
|
*/ |
|
64
|
|
|
protected function getStyles() |
|
65
|
|
|
{ |
|
66
|
|
|
// start style tag |
|
67
|
|
|
$html = ' <style type="text/css">'.PHP_EOL; |
|
68
|
|
|
$html .= PHP_EOL; |
|
69
|
|
|
|
|
70
|
|
|
// -- reset styles ---------------------------------------- |
|
71
|
|
|
$html .= $this->getCssComment('--- RESET STYLES ---', ' '); |
|
72
|
|
|
$html .= ' html { background-color:'. $this->backsideBackgroundColor . '; margin:0; padding:0; }'.PHP_EOL; |
|
73
|
|
|
$html .= ' body, #bodyTable, #bodyCell, #bodyCell{height:100% !important; margin:0; padding:0;'; |
|
74
|
|
|
$html .= ' width:100% !important; font-family:'. $this->emailBodyFont .';}'.PHP_EOL; |
|
75
|
|
|
$html .= ' table{border-collapse:collapse;}'.PHP_EOL; |
|
76
|
|
|
$html .= ' table[id=bodyTable] {width:100%!important;margin:auto;max-width:500px!important; color:'. $this->emailBodyColor . ';font-weight:normal;}'.PHP_EOL; |
|
77
|
|
|
$html .= ' img, a img{border:0; outline:none; text-decoration:none;height:auto; line-height:100%;}'.PHP_EOL; |
|
78
|
|
|
$html .= ' a {text-decoration:none !important;border-bottom: 1px solid;}'.PHP_EOL; |
|
79
|
|
|
|
|
80
|
|
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
|
81
|
|
|
// todo custom COLOR !!!!!!!!!!!!!! font size ? line height ? margin ? see |
|
82
|
|
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
|
83
|
|
|
$html .= ' h1, h2, h3, h4, h5, h6 {color:#5F5F5F; font-weight:normal; font-family:'. $this->emailBodyFont .';'.PHP_EOL; |
|
84
|
|
|
$html .= ' font-size:20px; line-height:125%; text-align:Left; letter-spacing:normal;'.PHP_EOL; |
|
85
|
|
|
$html .= ' margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;'.PHP_EOL; |
|
86
|
|
|
$html .= ' padding-top:0;padding-bottom:10px;padding-left:0;padding-right:0;}'.PHP_EOL; |
|
87
|
|
|
// custom |
|
88
|
|
|
$html .= ' p {margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;'; |
|
89
|
|
|
$html .= 'padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;}'.PHP_EOL; |
|
90
|
|
|
$html .= ' p + p {padding-top:10px;}'.PHP_EOL; |
|
91
|
|
|
$html .= PHP_EOL; |
|
92
|
|
|
|
|
93
|
|
|
// -- client specific styles ------------------------------------------- |
|
94
|
|
|
$html .= $this->getCssComment('--- CLIENT-SPECIFIC STYLES ---', ' '); |
|
95
|
|
|
$html .= ' .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}'. $this->getCssComment(' Force Hotmail/Outlook.com to display emails at full width.'); |
|
96
|
|
|
$html .= ' .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;}' . $this->getCssComment(' Force Hotmail/Outlook.com to display line heights normally.'); |
|
97
|
|
|
$html .= ' table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}' . $this->getCssComment(' Remove spacing between tables in Outlook 2007 and up.'); |
|
98
|
|
|
$html .= ' #outlook a{padding:0;}'. $this->getCssComment(' Force Outlook 2007 and up to provide a "view in browser" message.'); |
|
99
|
|
|
$html .= ' img{-ms-interpolation-mode: bicubic;display:block;outline:none; text-decoration:none;}'. $this->getCssComment(' Force IE to smoothly render resized images.'); |
|
100
|
|
|
$html .= ' body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-weight:normal!important;}'. $this->getCssComment(' Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. '); |
|
101
|
|
|
$html .= ' .ExternalClass td[class="ecxflexibleContainerBox"] h3 {padding-top: 10px !important;} '. $this->getCssComment(' Force hotmail to push 2-grid sub headers down'); |
|
102
|
|
|
$html .= PHP_EOL; |
|
103
|
|
|
|
|
104
|
|
|
// -- our styles -------------------------------------------------------- |
|
105
|
|
|
$html .= $this->getCssComment('--- FRAMEWORK HACKS & OVERRIDES ---', ' '); |
|
106
|
|
|
|
|
107
|
|
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
|
108
|
|
|
// todo custom font size ? line height ? colors .. |
|
109
|
|
|
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!#3497D9!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! |
|
110
|
|
|
$html .= ' h1{display:block;font-size:32px;font-style:normal;font-weight:200!important;line-height:100%;}'.PHP_EOL; |
|
111
|
|
|
$html .= ' h2{display:block;font-size:27px;font-style:normal;font-weight:200!important;line-height:120%;}'.PHP_EOL; |
|
112
|
|
|
$html .= ' h3{display:block;font-size:24px;font-style:normal;font-weight:200!important;line-height:110%;}'.PHP_EOL; |
|
113
|
|
|
$html .= ' h4{display:block;font-size:22px;font-style:normal;font-weight:200!important;line-height:100%;}'.PHP_EOL; |
|
114
|
|
|
$html .= ' h5{display:block;font-size:20px;font-style:normal;font-weight:200!important;line-height:110%;}'.PHP_EOL; |
|
115
|
|
|
$html .= ' h6{display:block;font-size:18px;font-style:normal;font-weight:200!important;line-height:110%;}'.PHP_EOL; |
|
116
|
|
|
|
|
117
|
|
|
$html .= ' .flexibleImage{height:auto;}'.PHP_EOL; |
|
118
|
|
|
$html .= ' .linkRemoveBorder{border-bottom:0 !important;}'.PHP_EOL; |
|
119
|
|
|
$html .= ' table[class=flexibleContainerCellDivider] {padding-bottom:0 !important;padding-top:0 !important;}'.PHP_EOL; |
|
120
|
|
|
|
|
121
|
|
|
$html .= ' body, #bodyTable{background-color:'. $this->backsideBackgroundColor . ';}'.PHP_EOL; |
|
122
|
|
|
$html .= ' #emailHeader{background-color:' . $this->backsideBackgroundColor . ';}'.PHP_EOL; |
|
123
|
|
|
$html .= ' #emailBody{background-color:' . $this->emailBodyBackgroundColor . ';}'.PHP_EOL; |
|
124
|
|
|
$html .= ' #emailFooter{background-color:' . $this->backsideBackgroundColor . ';}'.PHP_EOL; |
|
125
|
|
|
$html .= ' .emailButton{background-color:#3497D9; border-collapse:separate;}'.PHP_EOL; |
|
126
|
|
|
$html .= ' .buttonContent{color:#FFFFFF; font-family:Helvetica; font-size:18px; font-weight:200; line-height:100%; padding:15px; text-align:center;}'.PHP_EOL; |
|
127
|
|
|
$html .= ' .buttonContent a{color:#FFFFFF; display:block; text-decoration:none!important; border:0!important;}'.PHP_EOL; |
|
128
|
|
|
$html .= PHP_EOL; |
|
129
|
|
|
|
|
130
|
|
|
|
|
131
|
|
|
// ------------------------------------------------------------- |
|
132
|
|
|
// -- mobiles styles ------------------------------------------- |
|
133
|
|
|
// ------------------------------------------------------------- |
|
134
|
|
|
$html .= $this->getCssComment('--- MOBILE STYLES ---', ' '); |
|
135
|
|
|
$html .= ' @media only screen and (max-width: '. strval($this->emailBodyWidth - 20) . 'px) {'.PHP_EOL; |
|
136
|
|
|
$html .= PHP_EOL; |
|
137
|
|
|
|
|
138
|
|
|
// -- client specific styles ------------------------------------------- |
|
139
|
|
|
$html .= $this->getCssComment('--- CLIENT-SPECIFIC STYLES ---', ' '); |
|
140
|
|
|
$html .= ' body{width:100% !important; min-width:100% !important;}'. $this->getCssComment(' Force iOS Mail to render the email at full width.'); |
|
141
|
|
|
$html .= PHP_EOL; |
|
142
|
|
|
|
|
143
|
|
|
//todo |
|
144
|
|
|
$html .= $this->getCssComment('--- FRAMEWORK STYLES ---', ' '); |
|
145
|
|
|
$html .= ' table[id="emailHeader"],'.PHP_EOL; |
|
146
|
|
|
$html .= ' table[id="emailBody"],'.PHP_EOL; |
|
147
|
|
|
$html .= ' table[id="emailFooter"],'.PHP_EOL; |
|
148
|
|
|
$html .= ' table[class="flexibleContainer"],'.PHP_EOL; |
|
149
|
|
|
$html .= ' td[class="flexibleContainerCell"] {width:100% !important;}'.PHP_EOL; |
|
150
|
|
|
$html .= ' td[class="flexibleContainerBox"], '.PHP_EOL; |
|
151
|
|
|
$html .= ' td[class="flexibleContainerBox"] table {display: block;width: 100%;text-align: left;}'.PHP_EOL; |
|
152
|
|
|
|
|
153
|
|
|
//todo |
|
154
|
|
|
|
|
155
|
|
|
$html .= $this->getCssComment('The following style rule makes any image classed with \'flexibleImage\'fluid' . PHP_EOL |
|
156
|
|
|
. ' when the query activates. Make sure you add an inline max-width to those '. PHP_EOL |
|
157
|
|
|
. ' to prevent them from blowing out.', ' '); |
|
158
|
|
|
|
|
159
|
|
|
$html .= ' td[class="imageContent"] img {height:auto !important; width:100% !important; max-width:100% !important; }'. PHP_EOL; |
|
160
|
|
|
$html .= ' img[class="flexibleImage"]{height:auto !important; width:100% !important;max-width:100% !important;}'. PHP_EOL; |
|
161
|
|
|
$html .= ' img[class="flexibleImageSmall"]{height:auto !important; width:auto !important;}'. PHP_EOL; |
|
162
|
|
|
|
|
163
|
|
|
$html .= $this->getCssComment('Create top space for every second element in a block', ' '); |
|
164
|
|
|
$html .= ' table[class="flexibleContainerBoxNext"]{padding-top: 10px !important;}'. PHP_EOL; |
|
165
|
|
|
|
|
166
|
|
|
$html .= $this->getCssComment('Make buttons in the email span the full width of their container, allowing' |
|
167
|
|
|
. 'for left- or right-handed ease of use.', ' '); |
|
168
|
|
|
|
|
169
|
|
|
$html .= ' table[class="emailButton"]{width:100% !important;}'. PHP_EOL; |
|
170
|
|
|
$html .= ' td[class="buttonContent"]{padding:0 !important;}'. PHP_EOL; |
|
171
|
|
|
$html .= ' td[class="buttonContent"] a{padding:15px !important;}'. PHP_EOL; |
|
172
|
|
|
$html .= ' }'.PHP_EOL; |
|
173
|
|
|
|
|
174
|
|
|
//todo more ... |
|
175
|
|
|
|
|
176
|
|
|
// close style tag |
|
177
|
|
|
$html .= ' </style>'.PHP_EOL; |
|
178
|
|
|
|
|
179
|
|
|
// ------- conditional formatting for outlook -------------------- |
|
180
|
|
|
$html .= $this->getHtmlComment('Outlook Conditional CSS. ' . PHP_EOL |
|
181
|
|
|
. ' These two style blocks target Outlook 2007 & 2010 specifically, forcing' . PHP_EOL |
|
182
|
|
|
. ' columns into a single vertical stack as on mobile clients. This is' . PHP_EOL |
|
183
|
|
|
. ' primarily done to avoid the \'page break bug\' and is optional.' . PHP_EOL |
|
184
|
|
|
. ' More information here: https://templates.mailchimp.com/development/css/outlook-conditional-css' . PHP_EOL |
|
185
|
|
|
. ' ',' '); |
|
186
|
|
|
|
|
187
|
|
|
$html .= ' <!--[if mso 12]>'.PHP_EOL; |
|
188
|
|
|
$html .= ' <style type="text/css">'.PHP_EOL; |
|
189
|
|
|
$html .= ' .flexibleContainer{display:block !important; width:100% !important;}'.PHP_EOL; |
|
190
|
|
|
$html .= ' </style>'.PHP_EOL; |
|
191
|
|
|
$html .= ' <![endif]-->'.PHP_EOL; |
|
192
|
|
|
$html .= ' <!--[if mso 14]>'.PHP_EOL; |
|
193
|
|
|
$html .= ' <style type="text/css">'.PHP_EOL; |
|
194
|
|
|
$html .= ' .flexibleContainer{display:block !important; width:100% !important;}'.PHP_EOL; |
|
195
|
|
|
$html .= ' </style>'.PHP_EOL; |
|
196
|
|
|
$html .= ' <![endif]-->'.PHP_EOL; |
|
197
|
|
|
|
|
198
|
|
|
// done |
|
199
|
|
|
return $html; |
|
200
|
|
|
} |
|
201
|
|
|
|
|
202
|
|
|
/** |
|
203
|
|
|
* Get a formatted CSS comment for given string if $renderCssComments is true, |
|
204
|
|
|
* otherwise an empty string or just a break line. |
|
205
|
|
|
* |
|
206
|
|
|
* @access public |
|
207
|
|
|
* @param string $text The comment text. |
|
208
|
|
|
* @param string $indent The indentation before comment. Default is an empty string. |
|
209
|
|
|
* @param bool $breakLine True to add a break line (ie: PHP_EOL) after comment. Default is true. |
|
210
|
|
|
* |
|
211
|
|
|
* @return string |
|
212
|
|
|
*/ |
|
213
|
|
|
protected function getCssComment(string $text, string $indent = '', bool $breakLine = true) |
|
214
|
|
|
{ |
|
215
|
|
|
return $this->renderCssComments ? $indent . '/* ' . $text . ' */' . ($breakLine ? PHP_EOL : '') : ($breakLine ? PHP_EOL : ''); |
|
216
|
|
|
} |
|
217
|
|
|
} |
kristuff /
phtemail
