89 lines
2.8 KiB
Handlebars
89 lines
2.8 KiB
Handlebars
<style>
|
|
body.noscroll {
|
|
overflow: hidden;
|
|
}
|
|
#editor-frame,
|
|
#editor-frame-loader {
|
|
position: fixed;
|
|
z-index: 10000;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
#editor-frame-loader {
|
|
z-index: 10001;
|
|
background: #eaeced;
|
|
}
|
|
#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;
|
|
}
|
|
@-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-loader" style="display: none;">
|
|
<div></div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// campaign or template
|
|
var type = window.location.pathname.split('/')[1].slice(0, -1);
|
|
|
|
var editorWindow;
|
|
|
|
var $editorFrame = $('<iframe id="editor-frame"/>')
|
|
.attr('src', '/{{editorName}}/editor?id={{id}}&type=' + type)
|
|
.on('load', function() {
|
|
editorWindow = $editorFrame[0].contentWindow;
|
|
editorWindow.bridge = editorWindow.bridge || {};
|
|
editorWindow.bridge.exit = function() {
|
|
closeEditor();
|
|
}
|
|
setTimeout(function() {
|
|
$('#editor-frame-loader').hide();
|
|
}, 300);
|
|
});
|
|
|
|
var openEditor = function() {
|
|
$('body').addClass('noscroll');
|
|
$('#editor-frame-loader').show();
|
|
$editorFrame.appendTo($('body'));
|
|
}
|
|
|
|
var closeEditor = function() {
|
|
$('body').removeClass('noscroll');
|
|
$editorFrame = $editorFrame.detach();
|
|
if (editorWindow.bridge.lastSavedHtml) {
|
|
$('#template-html').val(editorWindow.bridge.lastSavedHtml);
|
|
$('#html-preview-frame').attr('srcdoc', editorWindow.bridge.lastSavedHtml);
|
|
$('#html-preview').show();
|
|
}
|
|
// Reload to discard unsaved changes
|
|
$editorFrame.attr('src', '/{{editorName}}/editor?id={{id}}&type=' + type + '&cb=' + Math.random());
|
|
}
|
|
|
|
$('#btn-open-{{editorName}}').on('click', function() {
|
|
openEditor();
|
|
});
|
|
});
|
|
</script>
|