imp: remove need for playground-iframe.html file

This commit is contained in:
Géry Debongnie
2019-03-29 13:44:21 +01:00
parent 9477faa52a
commit 064baedff8
3 changed files with 25 additions and 31 deletions
-11
View File
@@ -1,11 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="libs/owl.js"></script>
</head>
<body>
</body>
</html>
+12 -7
View File
@@ -62,23 +62,28 @@ class Playground extends Component {
runCode() {
this.updateStateFromEditor();
// inject js
// create iframe
const iframe = document.createElement("iframe");
iframe.src = "playground-iframe.html";
iframe.onload = () => {
const doc = iframe.contentWindow.document;
const script = doc.createElement("script");
script.type = "text/javascript";
script.innerHTML = this.state.js;
doc.body.appendChild(script);
// inject js
const owlScript = doc.createElement("script");
owlScript.type = "text/javascript";
owlScript.src = "libs/owl.js";
owlScript.addEventListener("load", () => {
const script = doc.createElement("script");
script.type = "text/javascript";
script.innerHTML = this.state.js;
doc.body.appendChild(script);
});
doc.head.appendChild(owlScript);
// inject css
const style = document.createElement("style");
style.innerHTML = this.state.css;
doc.head.appendChild(style);
};
this.refs.content.innerHTML = "";
this.refs.content.appendChild(iframe);
}
+13 -13
View File
@@ -97,14 +97,14 @@ for (let i = 1; i < 16000; i++) {
// Counter Widget
//------------------------------------------------------------------------------
class Counter extends owl.core.Component {
inlineTemplate = \`
<div>
<button t-on-click="increment(-1)">-</button>
<span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
<button t-on-click="increment(1)">+</button>
</div>\`;
constructor(parent, props) {
super(parent, props);
this.inlineTemplate = \`
<div>
<button t-on-click="increment(-1)">-</button>
<span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
<button t-on-click="increment(1)">+</button>
</div>\`;
this.state = {
counter: props.initialState || 0
};
@@ -119,16 +119,16 @@ class Counter extends owl.core.Component {
// Message Widget
//------------------------------------------------------------------------------
class Message extends owl.core.Component {
inlineTemplate = \`
<div class="message">
<span class="author"><t t-esc="props.author"/></span>
<span class="msg"><t t-esc="props.msg"/></span>
<button class="remove" t-on-click="removeMessage">Remove</button>
<t t-widget="Counter" t-props="{initialState: props.id}"/>
</div>\`;
constructor(parent, props) {
super(parent, props);
this.inlineTemplate = \`
<div class="message">
<span class="author"><t t-esc="props.author"/></span>
<span class="msg"><t t-esc="props.msg"/></span>
<button class="remove" t-on-click="removeMessage">Remove</button>
<t t-widget="Counter" t-props="{initialState: props.id}"/>
</div>\`;
this.widgets = { Counter };
}