mailtrain/views/partials/editor-bridge.hbs

<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>