JSFiddle - React, Tailwind, and code Playground

Studio Email Template Interface

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<form class="form-horizontal">
    <div class="form-group">
        <label for="email-html" class="col-sm-12 control-label text-left">Paste in the HTML template code for your email</label>
        <div class="col-sm-12 text-right">
            <textarea class="form-control" rows="10" id="email-html"></textarea>
            <button type="button" class="btn-link" id="expression-help" data-toggle="modal" data-target="#expressionsHelp">How to insert data from your form?</button>
            <hr>
            <button type="button" class="btn btn-default" id="send-test" data-toggle="modal" data-target="#sendTestEmail">Send a test email</button>
            <button type="button" class="btn btn-primary" id="preview-template">Preview template</button>
        </div>
    </div>
    <div class="form-group">
        <p class="help-block">To use the value from a form field, enter the field label in square brackets <code>[*]</code> to include its value.</p>
        <label for="sendto" class="col-sm-6 control-label">Send email to</label>
        <div class="col-sm-6">
            <input type="email" class="form-control" id="sendto" placeholder="Enter email address">
        </div>
    </div>
    <div class="form-group">
        <label for="sendcc" class="col-sm-6 control-label">Send a Carbon Copy (cc) to</label>
        <div class="col-sm-6">
            <input type="email" class="form-control" id="sendcc" placeholder="Enter email address">
        </div>
    </div>
    <div class="form-group">
        <label for="sendreply" class="col-sm-6 control-label">Send user’s replies to</label>
        <div class="col-sm-6">
            <input type="email" class="form-control" id="sendreply"...

CSS

.form-horizontal {
    padding: 40px 25px 0 25px;
}

.form-horizontal .form-group {
    margin-bottom: 0;
    padding: 15px 0;
}

.form-horizontal .form-group:first-child {
    margin-top: 0px;
}

.form-horizontal .preview-buttom {
    padding-top: 7px;
}

.text-left {
    text-align: left !important;
    margin-bottom: 5px !important;
}
.form-horizontal hr {
    margin-top: 10px !important;
}

.overlayPanelContent iframe {
    width: 100%;
    border: none;
}

/*
===========================
CONTENTS:

01 Overlay 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Overlay --------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
body.overlayIsActive {
    overflow: hidden;
}

body.overlayIsActive > :not(.overlay),
body.overlayIsActive > :not(.overlay) * {
	pointer-events: none;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: none;
	width: 100%;
	height: 100%;
	z-index: 1000;
	-webkit-transform: translate3d(0,0,0);
    pointer-events: none;
}

.overlay.active {
	pointer-events: all;
}

.overlayPanelScreen {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 19999;
	background: rgba(0,0,0,0.7);
	-webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
	opacity: 0;
	pointer-events: none;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
}

.overlay.active .overlayPanelScreen {
	opacity: 1;
	pointer-events: all;
}

.overlayPanel {
	position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
	background: rgba(0,0,0,0.3);
	z-index: 20000;
	padding:...

JavaScript

// Opens preview Email Template
$(document).on('click', '#preview-template', function() {
	var overlay = new Overlay("",{
		showOnInit : true,
			entranceAnim : 'fadeInDown',
            size: 'large',
            title: 'Email Template Preview',
            afterOpen: createIframe()
	});
});

// Copy Example Email to Text Area
$(document).on('click', '#use-email-template', function() {
	var exampleHTML = $('#email-template-html').val();
    $('#email-html').val(exampleHTML);
    $('#emailExample').modal('toggle');
});

function createIframe() {
    setTimeout( function() {
        // Compile HTML Template
        var source = $("#email-html").val();
        //var template = Handlebars.compile(source);
        
        var data = {
            "Name" : "Hugo"
        };
        
        // Create iFrame and add values to Template
        $('<iframe>', {
            src: '',
            id:  'frame'
        }).appendTo('.overlayPanelContent');
        
        var iFrame = document.getElementById('frame')
        iFrame.contentDocument.body.innerHTML = source;
        iFrame.height = iFrame.contentWindow.document.body.scrollHeight + "px";
    }, 500);
}