playground
This commit is contained in:
kmdjs
parent
ba4b687a54
commit
d7284a42dc
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omi Playground</title>
|
||||
<link rel="shortcut icon" href="../../asset/omi.ico">
|
||||
<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!important}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:32%;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/Omi" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="../../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">
|
||||
class List extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
this.data.items = [];
|
||||
}
|
||||
|
||||
render () {
|
||||
return ` <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`;
|
||||
}
|
||||
}
|
||||
|
||||
Omi.makeHTML(List);
|
||||
|
||||
class Todo extends Omi.Component {
|
||||
constructor(data, renderTo) {
|
||||
super(data, renderTo);
|
||||
}
|
||||
|
||||
install (){
|
||||
this.data.length = this.data.items.length;
|
||||
}
|
||||
|
||||
add (evt) {
|
||||
evt.preventDefault();
|
||||
this.list.data.items.push(this.data.text);
|
||||
this.data.length = this.list.data.items.length;
|
||||
this.data.text = '';
|
||||
this.update();
|
||||
}
|
||||
|
||||
style () {
|
||||
return `
|
||||
h3 { color:red; }
|
||||
button{ color:green;}
|
||||
`;
|
||||
}
|
||||
|
||||
handleChange(target){
|
||||
this.data.text = target.value;
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div>
|
||||
<h3>TODO</h3>
|
||||
<List omi-id="list" name="list" />
|
||||
<form onsubmit="add(event)" >
|
||||
<input type="text" onchange="handleChange(this)" value="{{text}}" />
|
||||
<button>Add #{{length}}</button>
|
||||
</form>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Omi.render(new Todo({ items: [] , text : '' }),'#container');</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="omi_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)});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<script src="../../dist/omi.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
|
||||
<script>
|
||||
parent.postMessage(JSON.stringify({
|
||||
type: 'ready',
|
||||
}), '*');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue