mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
add: add playground application
This commit is contained in:
Géry Debongnie
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Odoo Web Lab Playground</title>
|
||||
<link rel="icon" href="data:,">
|
||||
|
||||
<script src="/libs/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="/libs/owl.js"></script>
|
||||
|
||||
<!-- Application JS/CSS -->
|
||||
<link rel="stylesheet" href="/playground.css">
|
||||
<script type="module" src="/src/playground.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
+21315
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,116 @@
|
||||
ace.define(
|
||||
"ace/theme/monokai",
|
||||
["require", "exports", "module", "ace/lib/dom"],
|
||||
function(require, exports, module) {
|
||||
exports.isDark = true;
|
||||
exports.cssClass = "ace-monokai";
|
||||
exports.cssText =
|
||||
".ace-monokai .ace_gutter {\
|
||||
background: #2F3129;\
|
||||
color: #8F908A\
|
||||
}\
|
||||
.ace-monokai .ace_print-margin {\
|
||||
width: 1px;\
|
||||
background: #555651\
|
||||
}\
|
||||
.ace-monokai {\
|
||||
background-color: #272822;\
|
||||
color: #F8F8F2\
|
||||
}\
|
||||
.ace-monokai .ace_cursor {\
|
||||
color: #F8F8F0\
|
||||
}\
|
||||
.ace-monokai .ace_marker-layer .ace_selection {\
|
||||
background: #49483E\
|
||||
}\
|
||||
.ace-monokai.ace_multiselect .ace_selection.ace_start {\
|
||||
box-shadow: 0 0 3px 0px #272822;\
|
||||
}\
|
||||
.ace-monokai .ace_marker-layer .ace_step {\
|
||||
background: rgb(102, 82, 0)\
|
||||
}\
|
||||
.ace-monokai .ace_marker-layer .ace_bracket {\
|
||||
margin: -1px 0 0 -1px;\
|
||||
border: 1px solid #49483E\
|
||||
}\
|
||||
.ace-monokai .ace_marker-layer .ace_active-line {\
|
||||
background: #202020\
|
||||
}\
|
||||
.ace-monokai .ace_gutter-active-line {\
|
||||
background-color: #272727\
|
||||
}\
|
||||
.ace-monokai .ace_marker-layer .ace_selected-word {\
|
||||
border: 1px solid #49483E\
|
||||
}\
|
||||
.ace-monokai .ace_invisible {\
|
||||
color: #52524d\
|
||||
}\
|
||||
.ace-monokai .ace_entity.ace_name.ace_tag,\
|
||||
.ace-monokai .ace_keyword,\
|
||||
.ace-monokai .ace_meta.ace_tag,\
|
||||
.ace-monokai .ace_storage {\
|
||||
color: #F92672\
|
||||
}\
|
||||
.ace-monokai .ace_punctuation,\
|
||||
.ace-monokai .ace_punctuation.ace_tag {\
|
||||
color: #fff\
|
||||
}\
|
||||
.ace-monokai .ace_constant.ace_character,\
|
||||
.ace-monokai .ace_constant.ace_language,\
|
||||
.ace-monokai .ace_constant.ace_numeric,\
|
||||
.ace-monokai .ace_constant.ace_other {\
|
||||
color: #AE81FF\
|
||||
}\
|
||||
.ace-monokai .ace_invalid {\
|
||||
color: #F8F8F0;\
|
||||
background-color: #F92672\
|
||||
}\
|
||||
.ace-monokai .ace_invalid.ace_deprecated {\
|
||||
color: #F8F8F0;\
|
||||
background-color: #AE81FF\
|
||||
}\
|
||||
.ace-monokai .ace_support.ace_constant,\
|
||||
.ace-monokai .ace_support.ace_function {\
|
||||
color: #66D9EF\
|
||||
}\
|
||||
.ace-monokai .ace_fold {\
|
||||
background-color: #A6E22E;\
|
||||
border-color: #F8F8F2\
|
||||
}\
|
||||
.ace-monokai .ace_storage.ace_type,\
|
||||
.ace-monokai .ace_support.ace_class,\
|
||||
.ace-monokai .ace_support.ace_type {\
|
||||
font-style: italic;\
|
||||
color: #66D9EF\
|
||||
}\
|
||||
.ace-monokai .ace_entity.ace_name.ace_function,\
|
||||
.ace-monokai .ace_entity.ace_other,\
|
||||
.ace-monokai .ace_entity.ace_other.ace_attribute-name,\
|
||||
.ace-monokai .ace_variable {\
|
||||
color: #A6E22E\
|
||||
}\
|
||||
.ace-monokai .ace_variable.ace_parameter {\
|
||||
font-style: italic;\
|
||||
color: #FD971F\
|
||||
}\
|
||||
.ace-monokai .ace_string {\
|
||||
color: #E6DB74\
|
||||
}\
|
||||
.ace-monokai .ace_comment {\
|
||||
color: #75715E\
|
||||
}\
|
||||
.ace-monokai .ace_indent-guide {\
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y\
|
||||
}";
|
||||
|
||||
var dom = require("../lib/dom");
|
||||
dom.importCssString(exports.cssText, exports.cssClass);
|
||||
}
|
||||
);
|
||||
(function() {
|
||||
ace.require(["ace/theme/monokai"], function(m) {
|
||||
if (typeof module == "object" && typeof exports == "object" && module) {
|
||||
module.exports = m;
|
||||
}
|
||||
});
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,41 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.playground {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
|
||||
.left-bar {
|
||||
position: relative;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
.left-bar > button {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.code-editor {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.content iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export const HELLO_WORLD = `class HelloWorld extends owl.core.Component {
|
||||
inlineTemplate = \`<div>Hello <t t-esc="props.name"/></div>\`;
|
||||
}
|
||||
|
||||
const env = {
|
||||
qweb: new owl.core.QWeb()
|
||||
};
|
||||
|
||||
const hello = new HelloWorld(env, { name: "World" });
|
||||
hello.mount(document.body);
|
||||
`;
|
||||
@@ -0,0 +1,61 @@
|
||||
import { HELLO_WORLD } from "./demos.js";
|
||||
|
||||
class Playground extends owl.core.Component {
|
||||
inlineTemplate = `
|
||||
<div class="playground">
|
||||
<div class="left-bar">
|
||||
<button t-on-click="runCode">▶ Run</button>
|
||||
<div class="code-editor" t-ref="editor"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<iframe t-ref="iframe"/>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
mounted() {
|
||||
this.editor = ace.edit(this.refs.editor);
|
||||
this.editor.session.setOption("useWorker", false);
|
||||
this.editor.setValue(HELLO_WORLD, -1);
|
||||
this.editor.setTheme("ace/theme/monokai");
|
||||
this.editor.session.setMode("ace/mode/javascript");
|
||||
const doc = this.refs.iframe.contentWindow.document;
|
||||
|
||||
// add owl library
|
||||
const owlScript = doc.createElement("script");
|
||||
owlScript.src = "libs/owl.js";
|
||||
doc.body.appendChild(owlScript);
|
||||
}
|
||||
|
||||
runCode() {
|
||||
const doc = this.refs.iframe.contentWindow.document;
|
||||
|
||||
// // add owl library
|
||||
// const owlScript = doc.createElement("script");
|
||||
// owlScript.src = "libs/owl.js";
|
||||
// doc.body.appendChild(owlScript);
|
||||
|
||||
const code = this.editor.getValue();
|
||||
const script = doc.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
script.innerHTML = code;
|
||||
doc.body.appendChild(script);
|
||||
// var thisDoc = this.contentWindow.document;
|
||||
// if ( ! thisDoc.getElementById(scriptID)) {
|
||||
// var scriptObj = thisDoc.createElement("script");
|
||||
// scriptObj.type = "text/javascript";
|
||||
// scriptObj.id = scriptId;
|
||||
// scriptObj.innerHTML = script;
|
||||
// thisDoc.body.appendChild(scriptObj);
|
||||
// }
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async function() {
|
||||
const env = {
|
||||
qweb: new owl.core.QWeb()
|
||||
};
|
||||
|
||||
const playground = new Playground(env);
|
||||
playground.mount(document.body);
|
||||
});
|
||||
Reference in New Issue
Block a user