mailtrain/views/mosaico/editor.hbs

<style>
    html,
    body {
        margin: 0;
        padding: 0;
    }
    body {
        position: absolute;
        top: 34px;
        bottom: 0;
        width: 100%;
    }

    #mt-navbar {
        position: absolute;
        width: 100%;
        top: -34px;
    }
    #mt-navbar .mt-logo {
        padding-left: 10px;
    }

    #merge-tag-reference-container * {
        background: none;
        text-align: left;
        border: none;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }
    #merge-tag-reference-container th,
    #merge-tag-reference-container td {
        padding: 5px 10px 5px 0;
        height: 2em;
    }
</style>


{{> editor_navbar}}


{{#if resource.mergeTags}}
    <div id="merge-tag-reference-container" title="{{#translate}}Merge tag reference{{/translate}}" style="display: none">
        <table class="">
            <thead>
                <tr>
                    <th>
                        {{#translate}}Merge tag{{/translate}}
                    </th>
                    <th>
                        {{#translate}}Description{{/translate}}
                    </th>
                </tr>
            </thead>
            <tbody>
                {{#each resource.mergeTags}}
                    <tr>
                        <th>
                            [{{key}}]
                        </th>
                        <td>
                            {{value}}
                        </td>
                    </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
{{/if}}


<script>
    $(function() {

        if (!Mosaico.isCompatible()) {
            alert('Update your browser!');
            return;
        }

        window.bridge = window.bridge || {};
        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': '{{csrfToken}}' } });

        var uploadHost = window.location.protocol + '//' + window.location.host;
        var plugins = [];
        var config = {
            // Mosaico needs absolute URLs
            imgProcessorBackend: uploadHost + '/editorapi/img',
            titleToken: '{{#translate}}MOSAICO Responsive Email Designer{{/translate}}',
            fileuploadConfig: {
                url: uploadHost + '/editorapi/upload?type={{type}}&id={{resource.id}}&editor={{resource.editorName}}',
            },
            {{#if languageStrings}}
                strings: {{{languageStrings}}},
            {{/if}}
        };


        // Save Button

        plugins.push(function(viewModel) {
            $(document).ready(function() {
                $('#mt-save').on('click', function() {
                    if ($(this).hasClass('busy')) {
                        return;
                    }
                    $(this).addClass('busy');

                    var html = viewModel.exportHTML();

                    $.post('/editorapi/update?type={{type}}&editor={{resource.editorName}}', {
                        id: {{resource.id}},
                        name: '{{resource.name}}',
                        {{#if resource.list}} list: {{resource.list}}, {{/if}}
                        html: html,
                        editorData: JSON.stringify({
                            template: '{{resource.editorData.template}}',
                            model: viewModel.exportJSON(),
                            metadata: viewModel.exportMetadata(),
                        }),
                    }, null, 'html')
                        .success(function() {
                            setTimeout(function() {
                                window.bridge.lastSavedHtml = html;
                                viewModel.notifier.success('{{#translate}}Sucessfully saved{{/translate}}');
                                $(this).removeClass('busy');
                            }.bind(this), 500); // Don't save too fast
                        }.bind(this))
                        .fail(function(data) {
                            viewModel.notifier.error(data.responseText || '{{#translate}}An error occured while saving the document{{/translate}}');
                            $(this).removeClass('busy');
                        }.bind(this))

                });
            });
        });


        // Close Button

        plugins.push(function(viewModel) {
            $(document).ready(function() {
                $('#mt-close').on('click', function() {
                    if (confirm('{{#translate}}Unsaved changes will be lost. Close now?{{/translate}}') === true) {
                        window.bridge.exit
                            ? window.bridge.exit()
                            : window.location.href = '/{{type}}s/edit/{{resource.id}}?tab=template';
                    }
                });
            });
        });


        // Download Button

        plugins.push(function(viewModel) {
            viewModel.download = {
                name: 'Download', // Translated by Mosaico
                enabled: ko.observable(true),
                execute: function() {
                    viewModel.download.enabled(false);
                    viewModel.notifier.info(viewModel.t('Downloading...'));
                    viewModel.exportHTMLtoTextarea('#downloadHtmlTextarea');
                    var $downloadForm = $('#downloadForm');
                    $downloadForm.attr('action', '/editorapi/download?editor={{resource.editorName}}');
                    if (!$downloadForm.find('input[name=_csrf]').length) {
                        $('<input>').attr({
                            type: 'hidden',
                            name: '_csrf',
                            value: '{{csrfToken}}',
                        }).appendTo($downloadForm);
                    }
                    $downloadForm.submit();
                    viewModel.download.enabled(true);
                },
            };
        });


        // Test E-Mail Button

        plugins.push(function(viewModel) {
            viewModel.test = {
                name: 'Test', // Translated by Mosaico
                enabled: ko.observable(true),
                isValidEmail: function(email) {
                    return /\S+@\S+\.\S+/.test(email);
                },
                execute: function() {
                    viewModel.test.enabled(false);
                    var email = localStorage.getItem('testemail');
                    if (!viewModel.test.isValidEmail(email)) {
                        email = viewModel.t('Insert here the recipient email address');
                    }
                    email = prompt(viewModel.t('Test email address'), email);
                    if (viewModel.test.isValidEmail(email)) {
                        localStorage.setItem('testemail', email);
                        $.post('/editorapi/test?editor={{resource.editorName}}', {
                            email: email,
                            subject: '[test] {{resource.name}}',
                            html: viewModel.exportHTML(),
                        }, null, 'html')
                            .success(function() {
                                viewModel.notifier.success(viewModel.t('Test email sent...'));
                            })
                            .fail(function() {
                                viewModel.notifier.error(viewModel.t('Unexpected error talking to server: contact us!'));
                            })
                            .always(function() {
                              viewModel.test.enabled(true);
                            });
                    } else {
                        viewModel.test.enabled(true);
                        email !== null && alert(viewModel.t('Invalid email address'));
                    }
                }
            };
        });


        // Merge Tag Reference

        plugins.push(function(viewModel) {
            var addButton = function() {
                var $toobarRightButtons = $('#toolbar .rightButtons');
                if (!$toobarRightButtons.length) {
                    setTimeout(addButton, 50);
                    return;
                }
                $('<a title="{{#translate}}Tags{{/translate}}" id="btnMergeReference" class="ui-button ui-corner-all ui-widget" role="button">\
                    <span class="ui-button-icon ui-icon fa fa-fw fa-tags"></span>\
                    <span class="ui-button-icon-space"></span>{{#translate}}Tags{{/translate}}\
                  </a>')
                .prependTo($toobarRightButtons)
                .css('color', 'white', '!important')
                .on('click', function() {
                    $('#merge-tag-reference-container').dialog({
                        modal: true,
                        width: 'auto',
                        draggable: true,
                        resizable: false,
                        appendTo: '#mo-body',
                        closeText: '',
                    });
                });
            };
            addButton();
        });


        // (Custom) HTML postRenderers

        plugins.push(function(viewModel) {
            viewModel.originalExportHTML = viewModel.exportHTML;
            viewModel.exportHTML = function() {
                var html = viewModel.originalExportHTML();
                window.mosaicoHTMLPostRenderers.forEach(function(postRender) {
                    html = postRender(html);
                });
                return html;
            };
        });


        // Finally start Mosaico

        Mosaico.start(
            config,
            uploadHost + '/{{resource.editorName}}/templates/{{resource.editorData.template}}/index.html',
            {{#if resource.editorData.metadata}} {{{resource.editorData.metadata}}} {{else}} undefined {{/if}},
            {{#if resource.editorData.model}} {{{resource.editorData.model}}} {{else}} undefined {{/if}},
            plugins.concat(window.mosaicoPlugins)
        );

    });
</script>