Email Template Syntax

by Hugo Carneiro

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
<script src="http://f.cl.ly/items/1m3B0x262L1y121S461R/pv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<div class="form-horizontal">
    <div class="form-group" data-validation-rule="textrule">
        <label class="col-sm-6 control-label" for="textinput0"><span class="not-required">(Optional)</span> First Name</label>
        <div class="col-sm-6">
            <input id="textinput0" name="textinput0" value="" data-label="plain text" placeholder="" type="text" class="form-control validation valid" aria-invalid="false">
        </div>
    </div>
    <div class="form-group" data-validation-rule="textrule">
        <label class="col-sm-6 control-label" for="textinput1"><span class="not-required">(Optional)</span> Last Name</label>
        <div class="col-sm-6">
            <input id="textinput1" name="textinput1" value="" data-label="plain text" placeholder="" type="text" class="form-control validation valid" aria-invalid="false">
        </div>
    </div>
    <div class="form-group" data-validation-rule="textrule">
        <label class="col-sm-6 control-label" for="textinput2"><span class="not-required">(Optional)</span> Nickname</label>
        <div class="col-sm-6">
            <input id="textinput2" name="textinput2" value="" data-label="plain text" placeholder="" type="text" class="form-control validation valid" aria-invalid="false">
        </div>
    </div>
    <div class="form-group" data-validation-rule="checkboxrule">
        <label class="col-sm-6 control-label" for="checkboxes"><span class="not-required">(Optional)</span> Are you married?</label>
        <div class="col-sm-6">
            <div class="checkbox">
                <input type="checkbox" name="checkbox5" id="checkboxes-gur"...

CSS

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

.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: 0px;
	-webkit-border-radius: 5px;
 	-webkit-transform: translate3d(0,0,0) scale(0);
 	transform: translate3d(0,0,0) scale(0);
}

.overlay.active .overlayPanel {
 	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.overlay-sm .overlayPanel {
    width: 70%;
    left: 15%;
    right: 15%;
    top: 15%;
    bottom: 15%;
}

@media...

JavaScript

$(document).on('click', '#open-overlay', function() {
        var overlay = new Overlay("",{
		showOnInit : true,
			entranceAnim : 'fadeInDown',
			afterOpen : createIframe()
	});
});

function createIframe() {
    setTimeout( function() {
        // Compile HTML Template
        var source = $("#email-template").html();
        var cleanSource = source.replace("// <![CDATA[", "").replace("// ]]>", "");
        cleanSource = Handlebars.compile(cleanSource);
        
        // Prepare values to print on Template
        var materialsChecked = [];
        $('.checkbox input:checked').each(function() {
        	var checkedValue = $(this).val();
            materialsChecked.push(checkedValue);
        });
        
        var htmlStrArray = [];
        for(var item in materialsChecked) {
            if ( materialsRef.hasOwnProperty(materialsChecked[item]) ) {
                htmlStrArray.push( materialsRef[materialsChecked[item]] )
            }
        }
        var htmlStr = htmlStrArray.join('');
        
        var data = {
            "First Name" : "Hugo",
            "List" : htmlStr
        };
        
        // Create iFrame and add values to Template
        if (Modernizr.ios) {
           $('<iframe>', {
                src: '//',
                id:  'frame'
            }).appendTo('.overlayPanelContent'); 
        } else {
        	$('<iframe>', {
                src: '',
                id:  'frame'
            }).appendTo('.overlayPanelContent');
        }
        
        var iFrame = document.getElementById('frame')
        iFrame.contentDocument.body.innerHTML = cleanSource(data);
        iFrame.height = iFrame.contentWindow.document.body.scrollHeight + "px";
    }, 500);
}