[IMP] owl: update to v0.13.0

This commit is contained in:
Géry Debongnie
2019-06-05 10:58:52 +02:00
parent c394b955ed
commit 449c9beaab
5 changed files with 324 additions and 207 deletions
+30 -27
View File
@@ -39,26 +39,32 @@ const DEFAULT_HTML = `<!DOCTYPE html>
</html>
`;
const APP_PY = `import sys
import thread
import webbrowser
const APP_PY = `#!/usr/bin/env python3
import threading
import time
import BaseHTTPServer, SimpleHTTPServer
from http.server import SimpleHTTPRequestHandler, HTTPServer
def start_server():
httpd = BaseHTTPServer.HTTPServer(('127.0.0.1', 3600), SimpleHTTPServer.SimpleHTTPRequestHandler)
SimpleHTTPRequestHandler.extensions_map['.js'] = 'application/javascript'
httpd = HTTPServer(('0.0.0.0', 3600), SimpleHTTPRequestHandler)
httpd.serve_forever()
thread.start_new_thread(start_server,())
url = 'http://127.0.0.1:3600'
webbrowser.open_new(url)
while True:
try:
time.sleep(1)
except KeyboardInterrupt:
sys.exit(0)
if __name__ == "__main__":
print("Owl Application")
print("---------------")
print("Server running on: {}".format(url))
threading.Thread(target=start_server, daemon=True).start()
while True:
try:
time.sleep(1)
except KeyboardInterrupt:
httpd.server_close()
quit(0)
`;
/**
@@ -242,20 +248,20 @@ class App extends owl.Component {
});
}
updateCode(ev) {
this.state[ev.type] = ev.value;
this.state[ev.detail.type] = ev.detail.value;
}
toggleLayout() {
this.state.splitLayout = !this.state.splitLayout;
}
updatePanelHeight(ev) {
if (!ev.delta) {
if (!ev.detail.delta) {
return;
}
let height = this.state.topPanelHeight;
if (!height) {
height = document.getElementsByClassName("tabbed-editor")[0].clientHeight;
}
this.state.topPanelHeight = height + ev.delta;
this.state.topPanelHeight = height + ev.detail.delta;
}
async downloadCode() {
@@ -287,10 +293,11 @@ class TabbedEditor extends owl.Component {
this.sessions[tab].setUndoManager(new ace.UndoManager());
}
}
this.editor = null;
}
mounted() {
this.editor = ace.edit(this.refs.editor);
this.editor = this.editor || ace.edit(this.refs.editor);
this.editor.setValue(this.props[this.state.currentTab], -1);
this.editor.setFontSize("12px");
@@ -314,20 +321,16 @@ class TabbedEditor extends owl.Component {
const session = this.sessions[this.state.currentTab];
session.setValue(this.props[this.state.currentTab], -1);
this.editor.setSession(session);
}
willUnmount() {
this.editor.destroy();
delete this.editor;
this.editor.resize();
}
setTab(tab) {
if (this.state.currentTab !== tab) {
this.state.currentTab = tab;
const session = this.sessions[this.state.currentTab];
session.doc.setValue(this.props[tab], -1);
this.editor.setSession(session);
}
if (this.state.currentTab !== tab) {
this.state.currentTab = tab;
const session = this.sessions[this.state.currentTab];
session.doc.setValue(this.props[tab], -1);
this.editor.setSession(session);
}
}
onMouseDown(ev) {
+2
View File
@@ -185,4 +185,6 @@ body {
font-size: 30px;
color: darkred;
text-align: center;
padding-left: 30px;
padding-right: 30px;
}
+3 -3
View File
@@ -85,7 +85,7 @@ const WIDGET_COMPOSITION_XML = `<templates>
<div t-name="App">
<t t-widget="ClickCounter"/>
<t t-widget="InputWidget" t-props="{reverse: true}"/>
<t t-widget="InputWidget" reverse="true"/>
</div>
</templates>`;
@@ -287,7 +287,7 @@ const LIFECYCLE_DEMO_XML = `<templates>
<button t-on-click="increment">Increment</button>
<button t-on-click="toggleSubWidget">ToggleSubWidget</button>
<div t-if="state.flag">
<t t-widget="HookWidget" t-props="{n:state.n}"/>
<t t-widget="HookWidget" n="state.n"/>
</div>
</div>
<div t-name="HookWidget" t-on-click="increment">Demo Sub Widget. Props: <t t-esc="props.n"/>. State: <t t-esc="state.n"/>. (click on me to update me)</div>
@@ -515,7 +515,7 @@ const TODO_APP_STORE_XML = `<templates>
<label for="toggle-all"></label>
<ul class="todo-list">
<t t-foreach="visibleTodos" t-as="todo">
<t t-widget="TodoItem" t-key="todo.id" t-props="todo"/>
<t t-widget="TodoItem" t-key="todo.id" id="todo.id" completed="todo.completed" title="todo.title"/>
</t>
</ul>
</section>
+12 -10
View File
@@ -11,7 +11,9 @@
</div>
<div t-name="App" class="playground">
<div class="left-bar" t-att-style="leftPaneStyle" t-att-class="{split: state.splitLayout}">
<div class="left-bar" t-att-class="{split: state.splitLayout}"
t-att-style="leftPaneStyle"
t-on-updateCode="updateCode">
<div class="menubar">
<a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
<select t-on-change="setSample">
@@ -22,20 +24,20 @@
<a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
<a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas" t-att-class="state.splitLayout ? 'fa-toggle-on' : 'fa-toggle-off'"></i></a>
</div>
<t t-widget="TabbedEditor"
js="state.js"
css="!state.splitLayout and state.css"
xml="!state.splitLayout and state.js"
t-att-style="topEditorStyle"/>
<t t-if="state.splitLayout">
<t t-widget="TabbedEditor"
t-props="{js:state.js, css:false, xml: false}"
t-on-updateCode="updateCode"
t-att-style="topEditorStyle"/>
<div class="separator horizontal"/>
<t t-widget="TabbedEditor" t-keepalive="1"
t-props="{js:false, css:state.css, xml: state.xml, resizeable: true}"
t-on-updateCode="updateCode"
js="false"
css="state.css"
xml="state.xml"
resizeable="true"
t-on-updatePanelHeight="updatePanelHeight"/>
</t>
<t t-else="1">
<t t-widget="TabbedEditor" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'js|xml|css'}" t-on-updateCode="updateCode"/>
</t>
</div>
<div class="separator vertical" t-on-mousedown="onMouseDown"/>
<div class="right-pane" t-att-style="rightPaneStyle">