Integration of custom version of grapesjs-mjml
This commit is contained in:
Dominique Da Silva
parent
8ccb8e374b
commit
523f921088
8 changed files with 354 additions and 391 deletions
263
public/grapejs/dist/css/grapesjs-mjml.css
vendored
263
public/grapejs/dist/css/grapesjs-mjml.css
vendored
|
|
@ -1,216 +1,129 @@
|
|||
.gjs-clm-tags .gjs-sm-title,
|
||||
.gjs-sm-sector .gjs-sm-title {
|
||||
border-top: none;
|
||||
/* Editor Customization */
|
||||
|
||||
.gjs-four-color {
|
||||
color: #f45e43;
|
||||
}
|
||||
|
||||
.gjs-clm-tags .gjs-clm-tag {
|
||||
/* background-color: $tag-color; */
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 5px 8px;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.gjs-field {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.gjs-btnt.gjs-pn-active,
|
||||
.gjs-pn-btn.gjs-pn-active {
|
||||
box-shadow: none;
|
||||
.gjs-four-color-h:hover {
|
||||
color: #f45e43;
|
||||
}
|
||||
|
||||
.gjs-pn-btn:hover {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
color: #f45e43;
|
||||
}
|
||||
|
||||
.gjs-btnt.gjs-pn-active,
|
||||
.gjs-color-active,
|
||||
.gjs-pn-btn.gjs-pn-active,
|
||||
.gjs-pn-btn:active,
|
||||
.gjs-block:hover {
|
||||
color: #f45e43; /* #f46d4c,#e4505d */
|
||||
.gjs-mdl-title {
|
||||
color: #f45e43;
|
||||
}
|
||||
|
||||
#gjs-rte-toolbar .gjs-rte-btn,
|
||||
.gjs-btn-prim,
|
||||
.gjs-btnt,
|
||||
.gjs-clm-tags .gjs-sm-composite.gjs-clm-field,
|
||||
.gjs-clm-tags .gjs-sm-field.gjs-sm-composite,
|
||||
.gjs-clm-tags .gjs-sm-stack #gjs-sm-add,
|
||||
.gjs-color-main,
|
||||
.gjs-mdl-dialog,
|
||||
.gjs-off-prv,
|
||||
.gjs-pn-btn,
|
||||
.gjs-pn-panel,
|
||||
.gjs-sm-sector .gjs-sm-composite.gjs-clm-field,
|
||||
.gjs-sm-sector .gjs-sm-field.gjs-sm-composite,
|
||||
.gjs-sm-sector .gjs-sm-stack #gjs-sm-add {
|
||||
color: #888686;
|
||||
.gjs-cv-canvas {
|
||||
width: calc(100% - 230px);
|
||||
}
|
||||
|
||||
#gjs-rte-toolbar,
|
||||
.gjs-bg-main,
|
||||
.gjs-clm-select option,
|
||||
.gjs-clm-tags .gjs-sm-colorp-c,
|
||||
.gjs-editor,
|
||||
.gjs-mdl-dialog,
|
||||
.gjs-nv-item .gjs-nv-title-c,
|
||||
.gjs-off-prv,
|
||||
.gjs-pn-panel,
|
||||
.gjs-select option,
|
||||
.gjs-sm-sector .gjs-sm-colorp-c,
|
||||
.gjs-sm-select option,
|
||||
.gjs-sm-unit option,
|
||||
.sp-container,
|
||||
.gjs-block {
|
||||
background-color: #2c2e35;
|
||||
.gjs-pn-options {
|
||||
right: 230px;
|
||||
}
|
||||
|
||||
.gjs-import-label,
|
||||
.gjs-export-label {
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
.gjs-pn-views {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.gjs-mdl-dialog .gjs-btn-import {
|
||||
margin-top: 10px;
|
||||
.gjs-pn-views .gjs-pn-buttons {
|
||||
justify-content: space-around;
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.gjs-pn-views-container {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.gjs-mdl-dialog {
|
||||
max-width: 1060px;
|
||||
}
|
||||
|
||||
/* Code Mirror styles */
|
||||
|
||||
.CodeMirror {
|
||||
border-radius: 3px;
|
||||
background: #15202d !important;
|
||||
height: 450px;
|
||||
font-family: sans-serif, monospace;
|
||||
letter-spacing: 0.3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Extra */
|
||||
|
||||
.gjs-block {
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
margin: 10px 2.5% 5px;
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
|
||||
transition: box-shadow 0.2s ease 0s;
|
||||
.CodeMirror-gutters {
|
||||
background: #1e2837 !important;
|
||||
}
|
||||
|
||||
.gjs-block:hover {
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
.CodeMirror-linenumber {
|
||||
color: #3b4555 !important;
|
||||
}
|
||||
|
||||
#gjs-pn-views-container.gjs-pn-panel {
|
||||
padding: 39px 0 0;
|
||||
/* Panels buttons */
|
||||
|
||||
.gjs-pn-devices-c {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#gjs-pn-views.gjs-pn-panel {
|
||||
padding: 0;
|
||||
.gjs-pn-options {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.gjs-pn-devices-c .fa-desktop {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.gjs-pn-options .fa-repeat,
|
||||
.gjs-pn-devices-c .fa-arrows-alt {
|
||||
margin-right: 4px;
|
||||
padding-right: 16px;
|
||||
border-right: dotted 1px #3b4555;
|
||||
}
|
||||
|
||||
.gjs-pn-devices-c .fa-arrows-alt {
|
||||
padding-left: 16px
|
||||
}
|
||||
|
||||
.gjs-pn-devices-c .fa-arrows-alt.gjs-pn-active {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#gjs-pn-views .gjs-pn-btn {
|
||||
margin: 0;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
width: 25%;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* .gjs-pn-options .fa-undo {
|
||||
margin-left: 4px;
|
||||
padding-left: 16px;
|
||||
border-left: dotted 1px #3b4555;
|
||||
} */
|
||||
|
||||
/* MJML Plugin Styles */
|
||||
|
||||
/* Edit modal container */
|
||||
.gjs-edit-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#gjs-pn-views .gjs-pn-active {
|
||||
/*
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border-bottom: 2px solid #f45e43;
|
||||
*/
|
||||
border-radius: 0;
|
||||
/* Edit modal help */
|
||||
.gjs-edit-help {
|
||||
color: #7d7d91;
|
||||
font-size: 0.8rem;
|
||||
padding: 12px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#gjs-pn-devices-c {
|
||||
padding-left: 30px;
|
||||
/* Edit modal button save */
|
||||
.gjs-edit-btn-save,
|
||||
.gjs-btn-import {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
padding: 8px 16px;
|
||||
margin: 12px 0 5px 0;
|
||||
background: #c54b36;
|
||||
}
|
||||
|
||||
#gjs-pn-options {
|
||||
padding-right: 30px;
|
||||
|
||||
/* Modal dialog */
|
||||
|
||||
.gjs-mdl-dialog-lg {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.gjs-sm-composite .gjs-sm-properties {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#gjs-sm-border-top-left-radius,
|
||||
#gjs-sm-border-top-right-radius,
|
||||
#gjs-sm-border-bottom-left-radius,
|
||||
#gjs-sm-border-bottom-right-radius,
|
||||
#gjs-sm-margin-top,
|
||||
#gjs-sm-margin-bottom,
|
||||
#gjs-sm-margin-right,
|
||||
#gjs-sm-margin-left,
|
||||
#gjs-sm-padding-top,
|
||||
#gjs-sm-padding-bottom,
|
||||
#gjs-sm-padding-right,
|
||||
#gjs-sm-padding-left {
|
||||
flex: 999 1 60px;
|
||||
}
|
||||
|
||||
#gjs-sm-border-width,
|
||||
#gjs-sm-border-style,
|
||||
#gjs-sm-border-color {
|
||||
flex: 999 1 80px;
|
||||
}
|
||||
|
||||
#gjs-sm-margin-left,
|
||||
#gjs-sm-padding-left {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
#gjs-sm-margin-right,
|
||||
#gjs-sm-padding-right {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#gjs-sm-margin-bottom,
|
||||
#gjs-sm-padding-bottom {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.gjs-field-radio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gjs-field-radio #gjs-sm-input-holder {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gjs-radio-item {
|
||||
flex: 1 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gjs-sm-sector .gjs-sm-property.gjs-sm-list {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.gjs-mdl-content {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.gjs-sm-sector .gjs-sm-property .gjs-sm-layer.gjs-sm-active {
|
||||
background-color: rgba(255, 255, 255, 0.09);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#gjs-pn-views-container,
|
||||
#gjs-pn-views{
|
||||
min-width: 270px;
|
||||
}
|
||||
*/
|
||||
|
||||
.gjs-f-button::before { content: 'B'; }
|
||||
.gjs-f-divider::before { content: 'D'; }
|
||||
|
||||
.gjs-mdl-dialog-sm {
|
||||
width: 300px;
|
||||
}
|
||||
|
|
|
|||
34
public/grapejs/dist/js/grapesjs-mjml-custom.min.js
vendored
Normal file
34
public/grapejs/dist/js/grapesjs-mjml-custom.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -3,84 +3,70 @@
|
|||
<mj-title>Hello World</mj-title>
|
||||
</mj-head>
|
||||
<mj-body>
|
||||
<mj-container>
|
||||
|
||||
<!-- Company Header -->
|
||||
<mj-section background-color="#f0f0f0">
|
||||
<mj-column>
|
||||
<mj-text font-style="italic" font-size="20" color="#626262">
|
||||
My Company
|
||||
</mj-text>
|
||||
<mj-text font-style="italic" font-size="20px" color="#626262">My Company</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
|
||||
<!-- Image Header -->
|
||||
<mj-section background-url="./images/clouds.jpg" background-size="cover" background-repeat="no-repeat">
|
||||
<mj-column>
|
||||
<mj-text align="center" color="#fff" font-size="40" font-family="Helvetica Neue" padding-top="30px" padding-bottom="30px">Slogan here</mj-text>
|
||||
<mj-button background-color="#F63A4D" href="#">
|
||||
Promotion
|
||||
</mj-button>
|
||||
<mj-text align="center" color="#fff" font-size="40px" font-family="Helvetica Neue" padding-top="30px" padding-bottom="30px">Slogan here</mj-text>
|
||||
<mj-button background-color="#F63A4D" href="#">Promotion</mj-button>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
|
||||
<!-- Intro text -->
|
||||
<mj-section background-color="#fafafa">
|
||||
<mj-column width="400">
|
||||
<mj-text font-style="italic" font-size="20" font-family="Helvetica Neue" color="#cc2d2d">Attention!</mj-text>
|
||||
<mj-text color="#525252">
|
||||
The MJML Mode is currently experimental and there're a few bugs you should avoid.
|
||||
<ul>
|
||||
<li>Don't toggle visibility in the layer manager.</li>
|
||||
<mj-column width="400px">
|
||||
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#cc2d2d">Attention!</mj-text>
|
||||
<mj-text color="#525252">The MJML Mode is currently experimental and there're a few bugs you should avoid.
|
||||
<!-- <ul>
|
||||
<li>Don't import the mj-head if you import a custom template.</li>
|
||||
<li>Don't duplicate mj-image as the duplicate is missing the src attribute on export. This bug is probably not limited to mj-image.</li>
|
||||
<li>Don't use % values.</li>
|
||||
</ul>
|
||||
<li>Toggling visibility in the layer manager have no effect.</li>
|
||||
</ul> -->
|
||||
It's generally working great and very promising. Thanks to @artf for making this all possible.
|
||||
</mj-text>
|
||||
<mj-button background-color="#F45E43" href="https://github.com/artf/grapesjs-mjml">Learn more about GrapesJS MJML</mj-button>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
|
||||
<mj-raw>
|
||||
<!-- Side image -->
|
||||
</mj-raw>
|
||||
<mj-section background-color="white">
|
||||
<mj-column>
|
||||
<mj-image src="./images/bird-1.jpg" />
|
||||
<mj-image src="./images/bird-1.jpg"></mj-image>
|
||||
</mj-column>
|
||||
<mj-column>
|
||||
<mj-text font-style="italic" font-size="20" font-family="Helvetica Neue" color="#626262">
|
||||
Amazing Birds
|
||||
</mj-text>
|
||||
<mj-text color="#525252">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
|
||||
<mj-text font-style="italic" font-size="20px" font-family="Helvetica Neue" color="#626262">Amazing Birds</mj-text>
|
||||
<mj-text color="#525252">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
|
||||
<!-- Icons -->
|
||||
<mj-section background-color="#fbfbfb">
|
||||
<mj-column>
|
||||
<mj-image width="200" src="./images/bird-2.jpg" />
|
||||
<mj-image width="200px" src="./images/bird-2.jpg"></mj-image>
|
||||
</mj-column>
|
||||
<mj-column>
|
||||
<mj-image width="200" src="./images/bird-3.jpg" />
|
||||
<mj-image width="200px" src="./images/bird-3.jpg"></mj-image>
|
||||
</mj-column>
|
||||
<mj-column>
|
||||
<mj-image width="200" src="./images/bird-4.jpg" />
|
||||
<mj-image width="200px" src="./images/bird-4.jpg"></mj-image>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
|
||||
<!-- Footer -->
|
||||
<mj-section background-color="#e7e7e7">
|
||||
<mj-column>
|
||||
<mj-text color="#525252">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget
|
||||
nulla elit. Nulla aliquet mollis faucibus.
|
||||
</mj-text>
|
||||
<mj-text color="#525252">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus.
|
||||
Sed eget nulla elit. Nulla aliquet mollis faucibus.</mj-text>
|
||||
<mj-button href="#">Hello There!</mj-button>
|
||||
<mj-social display="facebook twitter" />
|
||||
<mj-social>
|
||||
<mj-social-element name="facebook"></mj-social-element>
|
||||
<mj-social-element name="twitter"></mj-social-element>
|
||||
</mj-social>
|
||||
</mj-column>
|
||||
</mj-section>
|
||||
|
||||
</mj-container>
|
||||
</mj-body>
|
||||
</mjml>
|
||||
|
|
@ -59,8 +59,8 @@ select {
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
border: 2px solid #DCE4EC;
|
||||
background: #FFF;
|
||||
border: 2px solid #d3d7db;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -85,10 +85,11 @@ select:focus {
|
|||
}
|
||||
|
||||
input[readonly] {
|
||||
color: #999999;
|
||||
color: #92908e;
|
||||
}
|
||||
|
||||
input[readonly]:focus {
|
||||
border-color: #DCE4EC;
|
||||
border-color: #C5CCD2;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
|
|
@ -135,7 +136,7 @@ textarea {
|
|||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.input-group-addon > * {
|
||||
.input-group-addon>* {
|
||||
line-height: 2.8em;
|
||||
}
|
||||
|
||||
|
|
@ -156,15 +157,34 @@ textarea {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.alert-success { color: #397740; background-color: #DEF0D9; border-color: #CFEAC8; }
|
||||
.alert-info { color: #33708E; background-color: #D9EDF6; border-color: #BCDFF0; }
|
||||
.alert-warning { color: #8A6D3F; background-color: #FCF8E4; border-color: #F9F2CE; }
|
||||
.alert-danger { color: #AA4144; background-color: #F2DEDE; border-color: #EBCCCC; }
|
||||
.alert-success {
|
||||
color: #397740;
|
||||
background-color: #DEF0D9;
|
||||
border-color: #CFEAC8;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #33708E;
|
||||
background-color: #D9EDF6;
|
||||
border-color: #BCDFF0;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
color: #8A6D3F;
|
||||
background-color: #FCF8E4;
|
||||
border-color: #F9F2CE;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: #AA4144;
|
||||
background-color: #F2DEDE;
|
||||
border-color: #EBCCCC;
|
||||
}
|
||||
|
||||
|
||||
/* --- GPG Key ------------- */
|
||||
|
||||
.form-group.gpg > label {
|
||||
.form-group.gpg>label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.gjs-one-bg {
|
||||
background: #373d49;
|
||||
}
|
||||
|
||||
#toast-container {
|
||||
top: auto !important;
|
||||
bottom: 5px;
|
||||
|
|
@ -31,8 +35,12 @@
|
|||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
#toast-container > div {
|
||||
opacity: 0.95;
|
||||
opacity: 0.98;
|
||||
}
|
||||
.toast-warning {
|
||||
background-color: rgb(226, 116, 13)
|
||||
}
|
||||
|
||||
#merge-tag-reference-container {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
|
|
@ -40,6 +48,10 @@
|
|||
#merge-tag-reference-container table th {
|
||||
padding: 5px 20px 5px 0;
|
||||
}
|
||||
|
||||
[data-tooltip]::after {
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -135,52 +147,52 @@
|
|||
'X-CSRF-TOKEN': '{{csrfToken}}',
|
||||
},
|
||||
},
|
||||
styleManager: {
|
||||
clearProperties: true,
|
||||
},
|
||||
|
||||
container : '#gjs',
|
||||
fromElement: false,
|
||||
avoidInlineStyle: 0,
|
||||
plugins: [],
|
||||
pluginsOpts: {},
|
||||
};
|
||||
|
||||
if (mode === 'mjml') {
|
||||
var serializer = new XMLSerializer();
|
||||
var doc = new DOMParser().parseFromString(resource.editorData.mjml, 'text/xml');
|
||||
var doc = document.createElement('mjml');
|
||||
doc.innerHTML = resource.editorData.mjml.replace(/<[/]?mjml>/g, '');
|
||||
|
||||
// convert relative to absolute urls
|
||||
['mj-wrapper', 'mj-section', 'mj-navbar', 'mj-hero', 'mj-image'].forEach(function(tagName) {
|
||||
var elements = doc.getElementsByTagName(tagName);
|
||||
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var node = elements[i];
|
||||
var attrName = tagName === 'mj-image' ? 'src' : 'background-url';
|
||||
var url = node.getAttribute(attrName);
|
||||
|
||||
if (url && url.substring(0, 2) === './') {
|
||||
var absoluteUrl = serviceUrl + 'grapejs/templates/' + resource.editorData.template + '/' + url.substring(2);
|
||||
node.setAttribute(attrName, absoluteUrl);
|
||||
// Document head with title
|
||||
var head = doc.getElementsByTagName('mj-head')[0];
|
||||
if (!head) {
|
||||
document.createElement('mj-head')
|
||||
document.prepend(head);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var title = doc.getElementsByTagName('mj-title')[0];
|
||||
var title = head.getElementsByTagName('mj-title')[0];
|
||||
if (title) {
|
||||
title.textContent = resource.name;
|
||||
} else {
|
||||
title = document.createElement('mj-title');
|
||||
title.textContent = resource.name;
|
||||
head.prepend(title);
|
||||
}
|
||||
|
||||
var head = doc.getElementsByTagName('mj-head')[0];
|
||||
var mjHead = head ? serializer.serializeToString(head) : '<mj-head></mj-head>';
|
||||
c.plugins.push('grapesjs-mjml', 'gjs-preset-mjml');
|
||||
|
||||
var container = doc.getElementsByTagName('mj-container')[0];
|
||||
var mjContainer = container ? serializer.serializeToString(container) : '<mj-container></mj-container>';
|
||||
|
||||
c.plugins.push('gjs-mjml', 'gjs-preset-mjml');
|
||||
c.pluginsOpts['gjs-mjml'] = {
|
||||
preMjml: '<mjml>' + mjHead + '<mj-body>',
|
||||
postMjml: '</mj-body></mjml>',
|
||||
c.pluginsOpts['grapesjs-mjml'] = {
|
||||
editorBackgroundColor: "{{{editor.config.mjml.editorBackgroundColor}}}",
|
||||
canvasBackgroundStyle: "{{{editor.config.mjml.canvasBackgroundStyle}}}",
|
||||
canvasLabelsColor: "{{{editor.config.mjml.canvasLabelsColor}}}",
|
||||
};
|
||||
c.components = mjContainer;
|
||||
|
||||
c.pluginsOpts['gjs-preset-mjml'] = {
|
||||
mailtrain: {
|
||||
id: resource.id,
|
||||
subject: resource.subject,
|
||||
serviceUrl: serviceUrl,
|
||||
template: resource.editorData.template
|
||||
}
|
||||
};
|
||||
|
||||
c.components = doc.outerHTML;
|
||||
}
|
||||
|
||||
if (mode === 'html') {
|
||||
|
|
@ -212,10 +224,6 @@
|
|||
editor.AssetManager.add(data.files);
|
||||
});
|
||||
|
||||
function getMjml() {
|
||||
var c = config.pluginsOpts['gjs-mjml'];
|
||||
return c.preMjml + editor.getHtml() + c.postMjml;
|
||||
}
|
||||
|
||||
function getPreparedHtml(callback) {
|
||||
var html;
|
||||
|
|
@ -286,7 +294,7 @@
|
|||
getPreparedHtml(function(html) {
|
||||
var editorData = '{{editor.mode}}' === 'mjml' ? {
|
||||
template: resource.editorData.template,
|
||||
mjml: getMjml(),
|
||||
mjml: editor.getHtml(),
|
||||
} : {
|
||||
template: resource.editorData.template,
|
||||
css: editor.getCss(),
|
||||
|
|
@ -308,6 +316,7 @@
|
|||
.success(function() {
|
||||
window.bridge.lastSavedHtml = html;
|
||||
toastr.success('Sucessfully saved');
|
||||
editor.UndoManager.clear();
|
||||
})
|
||||
.fail(function(data) {
|
||||
toastr.error(data.responseText || 'An error occured while saving the document');
|
||||
|
|
@ -324,7 +333,8 @@
|
|||
// Close Button
|
||||
|
||||
$('#mt-close').on('click', function() {
|
||||
if (confirm('Unsaved changes will be lost. Close now?') === true) {
|
||||
var haveChanges = (editor.UndoManager.hasUndo() || editor.UndoManager.hasRedo());
|
||||
if (!haveChanges || confirm('Unsaved changes will be lost. Close now?') === true) {
|
||||
window.bridge.exit
|
||||
? window.bridge.exit()
|
||||
: window.location.href = '/{{type}}s/edit/{{resource.id}}?tab=template';
|
||||
|
|
@ -346,23 +356,17 @@
|
|||
var testContentEl = testContainer.querySelector('input[name=html]');
|
||||
|
||||
cmdm.add('send-test', {
|
||||
run(editor, sender) {
|
||||
run(editor, sender = {}) {
|
||||
// TODO: Show a spinner
|
||||
getPreparedHtml(function(html) {
|
||||
sender.set('active', 0);
|
||||
var mdlDialog = document.querySelector('.gjs-mdl-dialog');
|
||||
testContentEl.value = html;
|
||||
mdlDialog.className += ' ' + mdlClass;
|
||||
testContainer.style.display = 'block';
|
||||
md.setTitle('Test your Newsletter');
|
||||
|
||||
var modalContent = $('<div>').append(testContainer).html();
|
||||
for(var i=0; i<100; i++) {
|
||||
try {
|
||||
var modalContent = $('<div/>').append(testContainer)[0].outerHTML;
|
||||
md.setContent(modalContent);
|
||||
break;
|
||||
} catch(err) {}
|
||||
}
|
||||
|
||||
testContainerCopy = $(".gjs-mdl-dialog #test-form");
|
||||
|
||||
|
|
@ -380,7 +384,7 @@
|
|||
statusFormElC.style.opacity = '0';
|
||||
statusFormEl.removeAttribute('data-tooltip');
|
||||
md.close();
|
||||
toastr.success('Testmail sent');
|
||||
toastr.success('Test mail sent');
|
||||
} else if (res.errors) {
|
||||
statusFormEl.className = 'fa fa-exclamation-circle';
|
||||
statusFormEl.setAttribute('data-tooltip', res.errors);
|
||||
|
|
@ -405,49 +409,38 @@
|
|||
});
|
||||
|
||||
md.open();
|
||||
md.getModel().once('change:open', function() {
|
||||
md.onceClose(function() {
|
||||
md.setContent(' ');
|
||||
mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
|
||||
sender.set && sender.set('active', 0);
|
||||
//clean status
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
pnm.addButton('options', {
|
||||
id: 'send-test',
|
||||
className: 'fa fa-paper-plane',
|
||||
command: 'send-test',
|
||||
attributes: {
|
||||
'title': 'Test Newsletter',
|
||||
'data-tooltip-pos': 'bottom',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Merge Tag Reference command
|
||||
|
||||
var mergeTagReferenceContainer = document.getElementById('merge-tag-reference-container');
|
||||
cmdm.add('open-merge-tag-reference', {
|
||||
run(editor, sender) {
|
||||
sender.set('active', 0);
|
||||
run(editor, sender = {}) {
|
||||
var mdlDialog = document.querySelector('.gjs-mdl-dialog');
|
||||
mdlDialog.className += ' gjs-mdl-dialog-lg';
|
||||
mergeTagReferenceContainer.style.display = 'block';
|
||||
md.setTitle('Merge tag reference');
|
||||
for(var i=0; i<100; i++) {
|
||||
try {
|
||||
md.setContent(mergeTagReferenceContainer);
|
||||
break;
|
||||
} catch(err) {}
|
||||
}
|
||||
md.open();
|
||||
md.getModel().once('change:open', function() {
|
||||
md.onceClose(function() {
|
||||
md.setContent(' ');
|
||||
mdlDialog.className = mdlDialog.className.replace('gjs-mdl-dialog-lg', '');
|
||||
sender.set && sender.set('active', 0);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add buttons
|
||||
|
||||
pnm.addButton('options', {
|
||||
id: 'view-merge-tag-reference',
|
||||
className: 'fa fa-tags',
|
||||
|
|
@ -459,20 +452,56 @@
|
|||
});
|
||||
|
||||
|
||||
pnm.addButton('options', {
|
||||
id: 'send-test',
|
||||
className: 'fa fa-paper-plane',
|
||||
command: 'send-test',
|
||||
attributes: {
|
||||
'title': 'Test Newsletter',
|
||||
'data-tooltip-pos': 'bottom'
|
||||
},
|
||||
});
|
||||
|
||||
// Simple warn notifier
|
||||
|
||||
var origWarn = console.warn;
|
||||
toastr.options = {
|
||||
closeButton: true,
|
||||
preventDuplicates: true,
|
||||
showDuration: 250,
|
||||
hideDuration: 150
|
||||
};
|
||||
console.warn = function(msg) {
|
||||
toastr.warning(msg);
|
||||
origWarn(msg);
|
||||
|
||||
console.lastLog = [];
|
||||
console.origWarn = console.warn.bind(console);
|
||||
console.origError = console.error.bind(console);
|
||||
|
||||
var console2toastrTimeout;
|
||||
var console2toastr = function(callback, args) {
|
||||
clearTimeout(console2toastrTimeout);
|
||||
var messages = Array.from(args).map((e) => typeof (e) === 'object' ? e.message : e);
|
||||
messages.forEach(function (msg) {
|
||||
if (console.lastLog.indexOf(msg) === -1) callback(msg);
|
||||
});
|
||||
console.lastLog = messages;
|
||||
console2toastrTimeout = setTimeout(function () { console.lastLog.length = 0; }, 1000);
|
||||
};
|
||||
|
||||
console.warn = function() {
|
||||
console2toastr(toastr.warning.bind(toastr), arguments);
|
||||
console.origWarn.apply(console, arguments);
|
||||
};
|
||||
|
||||
console.error = function () {
|
||||
console2toastr(toastr.error.bind(toastr), arguments);
|
||||
console.origError.apply(console, arguments);
|
||||
};
|
||||
|
||||
// Disable history to use delete key
|
||||
|
||||
history.pushState(null, null, location.href);
|
||||
window.onpopstate = function () {
|
||||
history.go(1);
|
||||
};
|
||||
|
||||
// Beautify tooltips
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,20 @@
|
|||
<meta charset="utf-8">
|
||||
<title>GrapesJS Newsletter Editor</title>
|
||||
|
||||
<link rel="stylesheet" href="/grapejs/dist/css/grapes.min.css?v=0.14.25">
|
||||
<link rel="stylesheet" href="/grapejs/dist/css/grapes.min.css?v=0.15.8">
|
||||
<link rel="stylesheet" href="/grapejs/dist/css/toastr.min.css?v=2.1.3">
|
||||
<link rel="stylesheet" href="/grapejs/dist/css/material.css">
|
||||
<link rel="stylesheet" href="/grapejs/dist/css/tooltip.css">
|
||||
|
||||
<script src="/javascript/jquery-2.2.1.min.js"></script>
|
||||
<script src="/grapejs/dist/js/grapes.min.js?v=0.14.25"></script>
|
||||
<script src="/grapejs/dist/js/grapes.min.js?v=0.15.8"></script>
|
||||
<script src="/grapejs/dist/js/toastr.min.js?v=2.1.3"></script>
|
||||
<script src="/grapejs/dist/js/ajaxable.min.js?v=0.2.3"></script>
|
||||
|
||||
{{#switch editor.mode}}
|
||||
{{#case "mjml"}}
|
||||
<link rel="stylesheet" href="/grapejs/dist/css/grapesjs-mjml.css?v=0.0.7">
|
||||
<script src="/grapejs/dist/js/grapesjs-mjml.min.js?v=0.0.27"></script>
|
||||
<link rel="stylesheet" href="/grapejs/dist/css/grapesjs-mjml.css?v=0.0.8">
|
||||
<script src="/grapejs/dist/js/grapesjs-mjml-custom.min.js?v=0.1.16"></script>
|
||||
<script src="/grapejs/dist/js/grapesjs-preset-mjml.js"></script>
|
||||
{{/case}}
|
||||
{{#case "html"}}
|
||||
|
|
|
|||
|
|
@ -3,19 +3,30 @@
|
|||
<mj-title>{{title}}</mj-title>
|
||||
<mj-font name="Lato" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic" />
|
||||
<mj-attributes>
|
||||
<mj-all font-size="15px" color="#2D3E4F" font-family="Lato, Helvetica, Arial, sans-serif" />
|
||||
<mj-class name="h1" font-size="42px" line-height="68px" color="#b4bcc2" />
|
||||
<mj-all font-size="14px" color="#2D3E4F" font-family="Lato, Helvetica, Arial, sans-serif" />
|
||||
<mj-class name="h1" font-size="36px" line-height="40px" color="#c2c9ce" />
|
||||
<mj-class name="h3" font-size="24px" line-height="32px" />
|
||||
<mj-class name="p" font-size="15px" line-height="24px" />
|
||||
<mj-class name="small" font-size="12px" line-height="16px" color="#999999" />
|
||||
<mj-class name="hr" border-width="1px" border-style="solid" border-color="#e4e5e6" />
|
||||
<mj-class name="button" font-size="16px" background-color="#2D3E4F" color="white" align="left" inner-padding="16px 24px" border-radius="6px" />
|
||||
<mj-class name="hr" border-width="2px" border-style="solid" border-color="#dadddf" />
|
||||
<mj-class name="button" font-size="16px" background-color="#2D3E4F" color="white" align="left" inner-padding="16px 24px" border-radius="6px" css-class="button" />
|
||||
<mj-class name="footer-text" font-size="12px" line-height="18px" color="#999999" />
|
||||
</mj-attributes>
|
||||
<mj-style>
|
||||
a {
|
||||
color:#2D3E4F;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color:#1F68D5;
|
||||
text-decoration: underline #ADBED7;
|
||||
}
|
||||
.button td a:hover {
|
||||
background: #1e2a36 !important;
|
||||
}
|
||||
</mj-style>
|
||||
</mj-head>
|
||||
<mj-body>
|
||||
<mj-container width="560" background-color="#ffffff">
|
||||
|
||||
<mj-body background-color="#fbfafa">
|
||||
<mj-raw>
|
||||
{{#if isWeb}}
|
||||
<style>
|
||||
|
|
@ -52,11 +63,8 @@
|
|||
|
||||
<mj-raw>
|
||||
{{#if isWeb}}
|
||||
<!-- fixes https://github.com/mjmlio/mjml/issues/359 -->
|
||||
{{> subscription_footer_scripts btnBgColor='#2D3E4F' btnBgColorHover='#1A242F'}}
|
||||
{{/if}}
|
||||
</mj-raw>
|
||||
|
||||
</mj-container>
|
||||
</mj-body>
|
||||
</mjml>
|
||||
|
|
|
|||
|
|
@ -23,33 +23,6 @@
|
|||
el.value = moment.tz.guess() || '';
|
||||
});
|
||||
}
|
||||
|
||||
// Fixes MJML Button until they do ...
|
||||
// https://github.com/mjmlio/mjml/issues/359
|
||||
|
||||
var btnBgColor = '{{btnBgColor}}';
|
||||
var btnBgColorHover = '{{btnBgColorHover}}';
|
||||
|
||||
if (btnBgColor) {
|
||||
var s = document.createElement('style');
|
||||
var c = document.createTextNode(
|
||||
'.td-btn:hover { background-color: ' + btnBgColorHover + '; }' +
|
||||
'.td-btn { cursor: pointer !important; }' +
|
||||
'.a-btn { background-color: transparent !important; }'
|
||||
);
|
||||
s.appendChild(c);
|
||||
document.getElementsByTagName('head')[0].appendChild(s);
|
||||
forEach(document.querySelectorAll('a'), function(i, a) {
|
||||
if (a.parentNode.getAttribute('bgcolor') === btnBgColor) {
|
||||
a.target = '_self';
|
||||
a.className += 'a-btn';
|
||||
a.parentNode.className += 'td-btn';
|
||||
a.parentNode.onclick = function() {
|
||||
a.click();
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue