GrapeJS and Mosaico Integration
This commit is contained in:
witzig
parent
c36071524d
commit
588eed008b
13 changed files with 1493 additions and 18 deletions
|
|
@ -3,36 +3,45 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
#editor-frame,
|
||||
#editor-frame-spinner {
|
||||
border: none;
|
||||
#editor-frame-loader {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
#editor-frame-spinner {
|
||||
#editor-frame-loader {
|
||||
z-index: 10001;
|
||||
background: white;
|
||||
background: #eaeced;
|
||||
}
|
||||
#editor-frame-spinner div {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-top: -60px;
|
||||
margin-left: -60px;
|
||||
#editor-frame-loader div {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 62px; margin-left: -31px;
|
||||
height: 72px; margin-top: -36px;
|
||||
background: url('/mailtrain-header.png');
|
||||
-webkit-animation: pulsate 1.2s ease-out;
|
||||
animation: pulsate 1.2s ease-out;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#editor-frame-spinner span:before {
|
||||
font-size: 120px;
|
||||
color: #efefef;
|
||||
@-webkit-keyframes pulsate {
|
||||
0% { -webkit-transform: scale(0.1, 0.1); opacity: 0.5; }
|
||||
70% { opacity: 1.0; }
|
||||
100% { -webkit-transform: scale(1.2, 1.2); opacity: 0.0; }
|
||||
}
|
||||
@keyframes pulsate {
|
||||
0% { transform: scale(0.1, 0.1); opacity: 0.5; }
|
||||
70% { opacity: 1.0; }
|
||||
100% { transform: scale(1.2, 1.2); opacity: 0.0; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="editor-frame-spinner" style="display: none;">
|
||||
<div><span class="glyphicon glyphicon-refresh spinning"></span></div>
|
||||
<div id="editor-frame-loader" style="display: none;">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
@ -51,13 +60,13 @@
|
|||
closeEditor();
|
||||
}
|
||||
setTimeout(function() {
|
||||
$('#editor-frame-spinner').hide();
|
||||
}, 200);
|
||||
$('#editor-frame-loader').hide();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
var openEditor = function() {
|
||||
$('body').addClass('noscroll');
|
||||
$('#editor-frame-spinner').show();
|
||||
$('#editor-frame-loader').show();
|
||||
$editorFrame.appendTo($('body'));
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +76,7 @@
|
|||
if (editorWindow.bridge.lastSavedHtml) {
|
||||
$('#template-html').val(editorWindow.bridge.lastSavedHtml);
|
||||
$('#html-preview-frame').attr('srcdoc', editorWindow.bridge.lastSavedHtml);
|
||||
$('#html-preview').show(); // it's hidden when there's no html
|
||||
$('#html-preview').show();
|
||||
}
|
||||
// Reload to discard unsaved changes
|
||||
$editorFrame.attr('src', '/{{editorName}}/editor?id={{id}}&type=' + type + '&cb=' + Math.random());
|
||||
|
|
|
|||
44
views/partials/editor-navbar.hbs
Normal file
44
views/partials/editor-navbar.hbs
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<style>
|
||||
#mt-navbar {
|
||||
background: #DE4320;
|
||||
overflow: hidden;
|
||||
height: 34px;
|
||||
}
|
||||
.mt-logo {
|
||||
height: 24px;
|
||||
padding: 5px 0 5px 35px;
|
||||
-webkit-filter: brightness(0) invert(1);
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
.mt-btn {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 150px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-family: sans-serif;
|
||||
cursor: pointer;
|
||||
border-left: 1px solid #972E15;
|
||||
}
|
||||
.mt-btn:hover {
|
||||
background: #972E15;
|
||||
}
|
||||
#mt-save span:after {
|
||||
content: '{{#translate}}SAVE{{/translate}}';
|
||||
}
|
||||
#mt-save.busy span:after {
|
||||
content: '{{#translate}}SAVING{{/translate}}';
|
||||
}
|
||||
#mt-save.busy {
|
||||
background: #972E15;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="mt-navbar">
|
||||
<img class="mt-logo" src="/mailtrain-header.png">
|
||||
<a id="mt-close" class="mt-btn">{{#translate}}CLOSE{{/translate}}</a>
|
||||
<a id="mt-save" class="mt-btn"><span></span></a>
|
||||
</div>
|
||||
27
views/partials/grapejs.hbs
Normal file
27
views/partials/grapejs.hbs
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<style>
|
||||
#btn-open-grapejs {
|
||||
background-color: #4E6A8A;
|
||||
border-color: #4E6A8A;
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
#btn-open-grapejs:hover {
|
||||
background-color: #394C61;
|
||||
border-color: #394C61;
|
||||
}
|
||||
</style>
|
||||
|
||||
{{> html_to_text}}
|
||||
|
||||
<input type="hidden" id="template-html" value="{{html}}">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">{{#translate}}Template content (HTML){{/translate}}</label>
|
||||
<div class="col-sm-10">
|
||||
<a class="btn btn-lg btn-success" role="button" id="btn-open-grapejs">{{#translate}}Open GrapeJS{{/translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{> html_preview}}
|
||||
|
||||
{{> editor_bridge}}
|
||||
41
views/partials/html-to-text.hbs
Normal file
41
views/partials/html-to-text.hbs
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<div class="form-group">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
<span class="help-block">
|
||||
{{#translate}}To extract the text from HTML click <a id="html-to-plaintext-btn" role="button">here</a>.{{/translate}}
|
||||
<span id="html-to-plaintext-spinner" class="glyphicon glyphicon-refresh spinning hidden"></span>
|
||||
{{#translate}}Please note that your existing plaintext in the field above will be overwritten. This feature uses the <a href="http://premailer.dialect.ca/api" target="_blank" rel="noreferrer">Premailer API</a>, a third party service. Their Terms of Service and Privacy Policy apply.{{/translate}}
|
||||
<span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': '{{csrfToken}}' } });
|
||||
var $spinner = $('#html-to-plaintext-spinner');
|
||||
|
||||
$('#html-to-plaintext-btn').on('click', function() {
|
||||
var html = $('#template-html').val();
|
||||
|
||||
if (!html) {
|
||||
alert('Missing HTML content');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!$spinner.hasClass('hidden')) {
|
||||
return;
|
||||
}
|
||||
$spinner.removeClass('hidden');
|
||||
|
||||
$.post('/editorapi/html-to-text?editor={{editorName}}', { html: html }, null, 'html')
|
||||
.success(function(data) {
|
||||
$('#template-text').val(data);
|
||||
})
|
||||
.fail(function(data) {
|
||||
alert(data.responseText || '{{#translate}}An error occurred while talking to the server{{/translate}}');
|
||||
})
|
||||
.always(function() {
|
||||
$spinner.addClass('hidden');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
27
views/partials/mosaico.hbs
Normal file
27
views/partials/mosaico.hbs
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<style>
|
||||
#btn-open-mosaico {
|
||||
background-color: #4E6A8A;
|
||||
border-color: #4E6A8A;
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
#btn-open-mosaico:hover {
|
||||
background-color: #394C61;
|
||||
border-color: #394C61;
|
||||
}
|
||||
</style>
|
||||
|
||||
{{> html_to_text}}
|
||||
|
||||
<input type="hidden" id="template-html" value="{{html}}">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">{{#translate}}Template content (HTML){{/translate}}</label>
|
||||
<div class="col-sm-10">
|
||||
<a class="btn btn-lg btn-success" role="button" id="btn-open-mosaico">{{#translate}}Open Mosaico{{/translate}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{> html_preview}}
|
||||
|
||||
{{> editor_bridge}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue