mjmlhelper 2.2.3 → 2.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/boilerplate/_inc/button.mjml +1 -1
- package/boilerplate/_inc/two-col-left.mjml +11 -11
- package/boilerplate/index.mjml +26 -6
- package/mjmlhelper.js +41 -15
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -118,3 +118,5 @@ npm run mailchimp
|
|
|
118
118
|
### mailchimp
|
|
119
119
|
|
|
120
120
|
creating mailchimp emails in their classic editor can be a bit tedious. a first block is created by default and you can only create more blocks by duplicating the first one and choosing any other variant. if there is only one block left, it cannot be deleted.
|
|
121
|
+
|
|
122
|
+
images must be sized (width is crucial) exactly as mentionned in the image edit mask (Content Studio).
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<mj-section>
|
|
2
2
|
<mj-column>
|
|
3
3
|
<!-- always provide an explicit link (otherwise outlook.com strips those tags) -->
|
|
4
|
-
<mj-button href="https://red.de">Button</mj-button>
|
|
4
|
+
<mj-button href="https://red.de" css-class="hover">Button</mj-button>
|
|
5
5
|
</mj-column>
|
|
6
6
|
</mj-section>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<mj-section direction="ltr">
|
|
2
|
-
<mj-column width="50%" padding="0% 2%" css-class="mobile-full-width">
|
|
3
|
-
<mj-image src="_assets/276x165.jpg" />
|
|
4
|
-
</mj-column>
|
|
5
|
-
|
|
6
|
-
<mj-column width="50%" padding="0% 2%" css-class="no-mobile-full-width">
|
|
7
|
-
<mj-text>
|
|
8
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
|
9
|
-
</mj-text>
|
|
10
|
-
</mj-column>
|
|
11
|
-
</mj-section>
|
|
1
|
+
<mj-section direction="ltr">
|
|
2
|
+
<mj-column width="50%" padding="0% 2%" css-class="mobile-full-width">
|
|
3
|
+
<mj-image src="_assets/276x165.jpg" />
|
|
4
|
+
</mj-column>
|
|
5
|
+
|
|
6
|
+
<mj-column width="50%" padding="0% 2%" css-class="no-mobile-full-width">
|
|
7
|
+
<mj-text>
|
|
8
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
|
9
|
+
</mj-text>
|
|
10
|
+
</mj-column>
|
|
11
|
+
</mj-section>
|
package/boilerplate/index.mjml
CHANGED
|
@@ -8,9 +8,14 @@
|
|
|
8
8
|
|
|
9
9
|
<!-- custom fonts (only working for apple mail and iphone/ipad) -->
|
|
10
10
|
<mj-font name="Indie Flower" href="https://fonts.googleapis.com/css?family=Indie+Flower:400" />
|
|
11
|
+
<!-- prettier-ignore -->
|
|
11
12
|
<mj-style>
|
|
12
|
-
@font-face {
|
|
13
|
-
|
|
13
|
+
@font-face {
|
|
14
|
+
font-family: 'Custom';
|
|
15
|
+
font-style: normal;
|
|
16
|
+
font-weight: 400;
|
|
17
|
+
src: url('_assets/font.woff2') format('woff2');
|
|
18
|
+
}
|
|
14
19
|
</mj-style>
|
|
15
20
|
|
|
16
21
|
<mj-attributes>
|
|
@@ -42,13 +47,28 @@
|
|
|
42
47
|
<mj-class name="smallest" font-size="9px" line-height="13px" />
|
|
43
48
|
<mj-class name="strong" font-weight="bold" />
|
|
44
49
|
</mj-attributes>
|
|
50
|
+
<!-- prettier-ignore -->
|
|
45
51
|
<mj-style>
|
|
46
|
-
@media all and (max-width: 500px) {
|
|
47
|
-
|
|
52
|
+
@media all and (max-width: 500px) {
|
|
53
|
+
.mobile-hidden { display: none !important; }
|
|
54
|
+
}
|
|
55
|
+
a {
|
|
56
|
+
color: #333333;
|
|
57
|
+
text-decoration: none;
|
|
58
|
+
border: none;
|
|
59
|
+
}
|
|
60
|
+
.hover:hover td, .hover a:hover, .hover p:hover {
|
|
61
|
+
background-color:#00E18E !important;
|
|
62
|
+
}
|
|
48
63
|
</mj-style>
|
|
64
|
+
<!-- prettier-ignore -->
|
|
49
65
|
<mj-style inline="inline">
|
|
50
|
-
.link-nostyle {
|
|
51
|
-
|
|
66
|
+
.link-nostyle {
|
|
67
|
+
color: #333333; text-decoration: none; border: none;
|
|
68
|
+
}
|
|
69
|
+
.box-shadow {
|
|
70
|
+
box-shadow: 0px 0px 30px 0px #cecece;
|
|
71
|
+
}
|
|
52
72
|
</mj-style>
|
|
53
73
|
</mj-head>
|
|
54
74
|
<mj-body>
|
package/mjmlhelper.js
CHANGED
|
@@ -90,25 +90,33 @@ class mjmlhelper {
|
|
|
90
90
|
// fix font size 0 problem (https://github.com/vielhuber/mjmlhelper/issues/1)
|
|
91
91
|
data = data.substring(0, pos) + ' .mce-content-body { font-size: 13px; } ' + data.substring(pos);
|
|
92
92
|
// fix problem where img sizes get overwritten
|
|
93
|
-
data =
|
|
93
|
+
data =
|
|
94
|
+
data.substring(0, pos) +
|
|
95
|
+
' .preserve-cr-full-size { width:100% !important; height:auto !important; } ' +
|
|
96
|
+
data.substring(pos);
|
|
94
97
|
positions = this.findAllPositions('<img', data);
|
|
95
98
|
shift = 0;
|
|
96
99
|
positions.forEach(positions__value => {
|
|
97
100
|
let begin = positions__value + shift,
|
|
98
101
|
end = data.indexOf('>', begin) + '>'.length,
|
|
99
102
|
tag = data.substring(begin, end);
|
|
100
|
-
if(
|
|
101
|
-
if(
|
|
102
|
-
data =
|
|
103
|
+
if (tag.indexOf('width:100%') > -1) {
|
|
104
|
+
if (tag.indexOf('class="') > -1) {
|
|
105
|
+
data =
|
|
106
|
+
data.substring(0, begin) +
|
|
107
|
+
tag.replace('class="', 'class="preserve-cr-full-size ') +
|
|
108
|
+
data.substring(end);
|
|
103
109
|
shift += 'class="preserve-cr-full-size '.length - 'class="'.length;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
|
|
110
|
+
} else {
|
|
111
|
+
data =
|
|
112
|
+
data.substring(0, begin) +
|
|
113
|
+
tag.replace('<img ', '<img class="preserve-cr-full-size" ') +
|
|
114
|
+
data.substring(end);
|
|
107
115
|
shift += '<img class="preserve-cr-full-size" '.length - '<img '.length;
|
|
108
116
|
}
|
|
109
117
|
}
|
|
110
118
|
});
|
|
111
|
-
|
|
119
|
+
|
|
112
120
|
// placeholders
|
|
113
121
|
data = this.replaceAll(data, '%UNSUBSCRIBE%', '{UNSUBSCRIBE}');
|
|
114
122
|
data = this.replaceAll(data, '%WEBVERSION%', '{ONLINE_VERSION}');
|
|
@@ -132,9 +140,11 @@ class mjmlhelper {
|
|
|
132
140
|
|
|
133
141
|
// first and last tag
|
|
134
142
|
positions = this.findAllPositions(' mj-outlook-group-fix', data).concat(
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
positions.sort((a, b) => {
|
|
143
|
+
this.findAllPositions('mj-hero-content', data).concat([])
|
|
144
|
+
);
|
|
145
|
+
positions.sort((a, b) => {
|
|
146
|
+
return a - b;
|
|
147
|
+
});
|
|
138
148
|
shift = 0;
|
|
139
149
|
positions.forEach(positions__value => {
|
|
140
150
|
let begin = data.indexOf('>', positions__value + shift) + '>'.length,
|
|
@@ -156,8 +166,8 @@ class mjmlhelper {
|
|
|
156
166
|
shift += '<!--#html #-->'.length + '<!--#/html#-->'.length;
|
|
157
167
|
});
|
|
158
168
|
// prevent nested html tags (cleverreach has problems with that)
|
|
159
|
-
data = data.replace(/(<!--#html #-->)(((?!<!--#\/html#-->).)*(<!--#html #-->))/gs,'$2');
|
|
160
|
-
data = data.replace(/((<!--#\/html#-->)((?!<!--#html #-->).)*)(<!--#\/html#-->)/gs,'$1');
|
|
169
|
+
data = data.replace(/(<!--#html #-->)(((?!<!--#\/html#-->).)*(<!--#html #-->))/gs, '$2');
|
|
170
|
+
data = data.replace(/((<!--#\/html#-->)((?!<!--#html #-->).)*)(<!--#\/html#-->)/gs, '$1');
|
|
161
171
|
|
|
162
172
|
return data;
|
|
163
173
|
}
|
|
@@ -179,13 +189,29 @@ class mjmlhelper {
|
|
|
179
189
|
pos = data.indexOf(style_tag) + style_tag.length;
|
|
180
190
|
data = data.substring(0, pos) + ' img { max-width:100%; height:auto !important; } ' + data.substring(pos);
|
|
181
191
|
|
|
182
|
-
|
|
183
192
|
// increase ordering icon
|
|
184
193
|
// also there is a bug in mailchimp: when adding a new module and changing it's type, the ID is lost and the element cannot be moved; we fix this also here (we simply hide the move icon when the ID is missing)
|
|
185
194
|
pos = data.indexOf(style_tag) + style_tag.length;
|
|
186
195
|
data =
|
|
187
196
|
data.substring(0, pos) +
|
|
188
|
-
|
|
197
|
+
`
|
|
198
|
+
.extra-controls .tpl-repeatwrap {
|
|
199
|
+
transform: translateX(-100%) translateY(-50px) !important;
|
|
200
|
+
border: 2px solid grey !important;
|
|
201
|
+
}
|
|
202
|
+
.tpl-repeatmovewrap > .tpl-repeatmove {
|
|
203
|
+
background-color: #fff !important;
|
|
204
|
+
width: 100px !important;
|
|
205
|
+
height: 50px !important;
|
|
206
|
+
border: 2px solid grey !important;
|
|
207
|
+
background-position: center !important;
|
|
208
|
+
transform: translateX(-95px) translateY(-20px) !important;
|
|
209
|
+
display: none !important;
|
|
210
|
+
}
|
|
211
|
+
div[mcrepeatable][id] .tpl-repeatmovewrap > .tpl-repeatmove {
|
|
212
|
+
display: block !important;
|
|
213
|
+
}
|
|
214
|
+
` +
|
|
189
215
|
data.substring(pos);
|
|
190
216
|
|
|
191
217
|
// remove hide icon
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mjmlhelper",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.5",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "mjmlhelper.js",
|
|
6
6
|
"dependencies": {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"jsdom": "^22.1.0",
|
|
13
13
|
"mjml": "^4.14.1",
|
|
14
14
|
"nodemailer": "^6.9.5",
|
|
15
|
-
"npm": "^10.
|
|
15
|
+
"npm": "^10.2.0",
|
|
16
16
|
"onchange": "^7.1.0",
|
|
17
17
|
"prettier": "^3.0.3"
|
|
18
18
|
},
|