sodajs
Version:
Light weight but powerful template engine for JavaScript.
64 lines (56 loc) • 6.33 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sodajs Playground</title>
<link rel="stylesheet" type="text/css" href="//unpkg.com/normalize.css@5.0.0" />
<link rel="stylesheet" type="text/css" href="//unpkg.com/codemirror@5.20.2/lib/codemirror.css" />
<style>
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:40%;overflow:hidden;background-color:#ccc}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;left:40px;background:rgba(61,61,62,.7);min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:#ddd}
</style>
</head>
<body>
<a href="https://github.com/AlloyTeam/sodajs" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
<img src="https://alloyteam.github.io/omi/asset/github.png" alt="" />
</a>
<div class="container">
<div class="playground">
<div class="preview">
<iframe class="frame" id="frame"></iframe>
</div>
<div class="editor">
<textarea id="editor">
var tpl = `
<ul>
<li soda-repeat="item in list" soda-if="item.show">
{{item.name}}
</li>
</ul>`
var data = {
list: [
{name: "Hello" ,show: true},
{name: "sodajs" ,show: true},
{name: "AlloyTeam"}
]
};
document.getElementById('container').innerHTML = soda(tpl, data);</textarea>
</div>
</div>
<div class="notification hide" id="notification">
<pre class="notification-content" id="notification-content"></pre>
</div>
</div>
<script src="//unpkg.com/babel-standalone@6.18.2/babel.min.js"></script>
<script src="//unpkg.com/codemirror@5.20.2/lib/codemirror.js"></script>
<script src="//unpkg.com/codemirror@5.20.2/mode/xml/xml.js"></script>
<script src="//unpkg.com/codemirror@5.20.2/mode/javascript/javascript.js"></script>
<script>
function getQueryString(){for(var d,a={},b=location.search.slice(1),c=/([^&=]+)=([^&]*)/g;d=c.exec(b);)a[decodeURIComponent(d[1])]=decodeURIComponent(d[2]);return a}function hideNotify(){notification.classList.add("hide")}function showNotify(a,b){notificationContent.innerHTML=a,notification.classList.remove("hide"),lastTimer&&clearTimeout(lastTimer),b&&(lastTimer=setTimeout(hideNotify,b))}function runCompiled(a){var c,b=frame.contentDocument.body;lastScript&&b.removeChild(lastScript),c=document.createElement("script"),c.innerHTML=a,lastScript=c,b.appendChild(c)}function compile(a,b){var c,d;a=a||"",lastCode=a,hideNotify(),c="/* @jsx createElement */\n";try{d=Babel.transform(c+a,{presets:["es2015","stage-1"]}).code}catch(e){return console.error(e),showNotify(e),void 0}return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)}var style,lastTimer,isReady,lastCode,lastScript,queryString=getQueryString(),sourceFromQueryString=queryString.code,backgroundColor=queryString.bgColor,editorTheme=queryString.theme||"dark",notification=document.getElementById("notification"),notificationContent=document.getElementById("notification-content"),frame=document.getElementById("frame"),storageKey="sodajs_playground_source",myTextarea=document.getElementById("editor"),editor=CodeMirror.fromTextArea(myTextarea,{lineNumbers:!0,theme:editorTheme,tabSize:2,mode:"javascript"}),lastStorageSource=localStorage.getItem(storageKey),source=sourceFromQueryString||lastStorageSource||editor.getValue();"dark"===editorTheme&&(style=document.createElement("style"),style.innerHTML=".container {background-color: #1e1d23}",document.body.appendChild(style)),source&&(editor.setValue(source),compile(source,!0)),isReady=!1,window.onmessage=function(a){var b;try{b=JSON.parse(a.data)}catch(c){return}switch(b.type){case"ready":isReady=!0,compile(lastCode);break;case"error":showNotify(b.message)}},frame.src="./preview.html";
editor.on("changes",function(a){
var b=a.getValue();compile(b),localStorage.setItem(storageKey,b);
window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/sodajs/pg/index.html?code="+encodeURIComponent(b));}
);
</script>
</body>
</html>