<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="description" content="Test out Eta templates in the browser here" /> <style> body { background-color: #f4f4f4; color: #555; max-width: 800px; padding: 20px; font-size: 16px; font-weight: 200; margin: 0 auto; font-family: Helvetica Neue, arial, verdana; }
h2 { text-shadow: 0 1px 2px #fff; margin: 0; }
h2 span { font-weight: 200; font-size: 14px; }
a { color: #2b80ff; }
.smaller { font-size: 0.8em; }
h4 { margin: 4px 0; font-weight: 400; font-size: 20px; }
textarea { border: 1px solid lightgrey; outline: none; font-size: 14px; width: 96%; height: 210px; padding: 10px; text-align: left; resize: vertical; }
.templategroup, .datagroup, .functiongroup, .resultgroup { width: 48%; margin: 4px 2% 4px 0; float: left; min-width: 300px; }
#function, #result { background: #ddd; height: 212px; padding: 10px; font-size: 14px; overflow-y: auto; }
#function, #result { white-space: pre; }
.definegroup { display: none; }
.templategroup.withdefs .definegroup { display: block; }
.templategroup.withdefs #template { height: 90px; }
textarea.defines { height: 60px; }
.stripgroup { padding-top: 8px; width: 160px; float: left; }
#sampletabs { list-style: none; margin: 0; padding: 0; }
#sampletabs li { float: left; margin: 4px; padding: 4px 8px; background: #ddd; cursor: pointer; }
#sampletabs li.active { background: #2b80ff; color: #fff; }
@media all and (max-width: 740px) { .templategroup, .datagroup, .functiongroup, .resultgroup { width: 100%; margin-right: 0; }
pre { overflow-x: scroll; } } </style> <title>Eta Playground</title> </head>
<body> <h2> Playground <span >Based on the excellent <a href="http://olado.github.io/doT/index.html">DoT.js</a> website</span > </h2> <div id="samples"> <ul id="sampletabs"></ul> <div style="clear: both; height: 10px"></div> <div class="templategroup"> <h4>Template</h4> <textarea autocomplete="off" id="template">Hi<% console.log("Hope you like Eta!"); %><%= it.htmlstuff %>
<% for (var key in it.obj) { %>Value: <%= it.obj[key] %>, Key: <%= key %>
<% if (key === 'thirdchild') { %> <% for (var i = 0, arr = it.obj[key]; i < arr.length; i++) { %> Salutations! Index: <%= i %>, parent key: <%= key %> <% } %><% } %><% } %>
Partial: <%~ include("mypartial") %></textarea > </div> <div class="functiongroup"> <h4>eta.compile()</h4> <div id="function"></div> </div> <div style="clear: both"></div> <div class="datagroup"> <h4>Data</h4> <textarea autocomplete="off" id="data">"htmlstuff": "<script>alert('hey')</script><p>alert('hey')</p><p>alert('hey')</p><p>alert('hey')</p>","arr": ["Hey", "<p>Malicious XSS</p>", "Hey", 3, 12],"obj": { "firstchild": "this is a lowercase string", "secondchild": "HEY", "thirdchild": [3, 6, 3, 2, 5, 4]} </textarea> </div> <div class="resultgroup"> <h4>Result</h4> <div id="result"></div> </div> </div> <script type="module"> import { Eta } from "../dist/browser.module.mjs";
var eta = new Eta();
window.onload = function () { eta.loadTemplate("mypartial", eta.compile("This is a partial"));
function escape(str) { var escMap = { "&": "&", "<": "<", ">": ">", '"': """, "'": "'", "/": "/", };
function replaceChar(s) { return escMap[s]; } var newStr = String(str); if (/[&<>"'/]/.test(newStr)) { return newStr.replace(/[&<>"'/]/g, replaceChar); } else { return newStr; } }
function render() { console.clear(); var options = JSON.parse("{" + document.getElementById("data").value + "}"); console.log(JSON.stringify(options)); var template = document.getElementById("template").value; try { var functionResult = eta.compile(template).toString(); document.getElementById("function").innerHTML = escape(functionResult); if (!eta.config.async) { document.getElementById("result").innerHTML = eta.renderString(template, options); } else { eta.renderStringAsync(template, options).then(function (res) { document.getElementById("result").innerHTML = res; }); } console.log(eta.renderString(template, options)); } catch (ex) { console.error(ex.message); } } render(); document.getElementById("template").addEventListener("input", render); document.getElementById("data").addEventListener("input", render); }; </script> </body></html>