mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[REF] playground: small refactoring
This commit is contained in:
Géry Debongnie
+86
-81
@@ -58,83 +58,6 @@ while True:
|
||||
sys.exit(0)
|
||||
`;
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tabbed editor
|
||||
//------------------------------------------------------------------------------
|
||||
class TabbedEditor extends owl.Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.state = {
|
||||
currentTab: this.props.display.split("|")[0]
|
||||
};
|
||||
this.tabs = {
|
||||
js: this.props.display.includes("js"),
|
||||
xml: this.props.display.includes("xml"),
|
||||
css: this.props.display.includes("css")
|
||||
};
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.editor = ace.edit(this.refs.editor);
|
||||
|
||||
// remove this for xml/css (?)
|
||||
this.editor.session.setOption("useWorker", false);
|
||||
this.editor.setValue(this.props[this.state.currentTab], -1);
|
||||
this.editor.setFontSize("12px");
|
||||
this.editor.setTheme("ace/theme/monokai");
|
||||
this.editor.session.setMode(MODES[this.state.currentTab]);
|
||||
const tabSize = this.state.currentTab === "xml" ? 2 : 4;
|
||||
this.editor.session.setOption("tabSize", tabSize);
|
||||
this.editor.on("blur", () => {
|
||||
const editorValue = this.editor.getValue();
|
||||
const propsValue = this.props[this.state.currentTab];
|
||||
if (editorValue !== propsValue) {
|
||||
this.trigger("updateCode", {
|
||||
type: this.state.currentTab,
|
||||
value: editorValue
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
patched() {
|
||||
if (this.editor) {
|
||||
window.dispatchEvent(new Event("resize"));
|
||||
this.editor.setValue(this.props[this.state.currentTab], -1);
|
||||
}
|
||||
}
|
||||
|
||||
willUnmount() {
|
||||
this.editor.destroy();
|
||||
delete this.editor;
|
||||
}
|
||||
|
||||
setTab(tab) {
|
||||
this.editor.setValue(this.props[tab], -1);
|
||||
|
||||
const mode = MODES[tab];
|
||||
this.editor.session.setMode(mode);
|
||||
const tabSize = tab === "xml" ? 2 : 4;
|
||||
this.editor.session.setOption("tabSize", tabSize);
|
||||
this.state.currentTab = tab;
|
||||
}
|
||||
|
||||
onMouseDown(ev) {
|
||||
if (ev.target.tagName === "DIV") {
|
||||
let y = ev.clientY;
|
||||
const resizer = ev => {
|
||||
const delta = ev.clientY - y;
|
||||
y = ev.clientY;
|
||||
this.trigger("updatePanelHeight", { delta });
|
||||
};
|
||||
document.body.addEventListener("mousemove", resizer);
|
||||
document.body.addEventListener("mouseup", () => {
|
||||
document.body.removeEventListener("mousemove", resizer);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// MAIN APP
|
||||
//------------------------------------------------------------------------------
|
||||
@@ -202,13 +125,20 @@ class App extends owl.Component {
|
||||
this.state.js
|
||||
}`;
|
||||
script.innerHTML = content;
|
||||
const errorHandler = e => this.displayError(e.message || e.reason.message);
|
||||
const errorHandler = e =>
|
||||
this.displayError(e.message || e.reason.message);
|
||||
iframe.contentWindow.addEventListener("error", errorHandler);
|
||||
iframe.contentWindow.addEventListener("unhandledrejection", errorHandler);
|
||||
iframe.contentWindow.addEventListener(
|
||||
"unhandledrejection",
|
||||
errorHandler
|
||||
);
|
||||
setTimeout(function() {
|
||||
if (iframe.contentWindow) {
|
||||
iframe.contentWindow.removeEventListener("error", errorHandler);
|
||||
iframe.contentWindow.removeEventListener("unhandledrejection", errorHandler);
|
||||
iframe.contentWindow.removeEventListener(
|
||||
"unhandledrejection",
|
||||
errorHandler
|
||||
);
|
||||
}
|
||||
}, 200);
|
||||
doc.body.appendChild(script);
|
||||
@@ -294,7 +224,10 @@ class App extends owl.Component {
|
||||
}
|
||||
|
||||
// Application code
|
||||
${this.state.js.split('\n').map(l => l === '' ? '' : ' ' + l).join('\n')}
|
||||
${this.state.js
|
||||
.split("\n")
|
||||
.map(l => (l === "" ? "" : " " + l))
|
||||
.join("\n")}
|
||||
}
|
||||
|
||||
// wait for DOM ready before starting
|
||||
@@ -312,6 +245,78 @@ owl.utils.whenReady(startApp);`;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tabbed editor
|
||||
//------------------------------------------------------------------------------
|
||||
class TabbedEditor extends owl.Component {
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.state = {
|
||||
currentTab: props.js ? "js" : props.xml ? "xml" : "css"
|
||||
};
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.editor = ace.edit(this.refs.editor);
|
||||
|
||||
// remove this for xml/css (?)
|
||||
this.editor.session.setOption("useWorker", false);
|
||||
this.editor.setValue(this.props[this.state.currentTab], -1);
|
||||
this.editor.setFontSize("12px");
|
||||
this.editor.setTheme("ace/theme/monokai");
|
||||
this.editor.session.setMode(MODES[this.state.currentTab]);
|
||||
const tabSize = this.state.currentTab === "xml" ? 2 : 4;
|
||||
this.editor.session.setOption("tabSize", tabSize);
|
||||
this.editor.on("blur", () => {
|
||||
const editorValue = this.editor.getValue();
|
||||
const propsValue = this.props[this.state.currentTab];
|
||||
if (editorValue !== propsValue) {
|
||||
this.trigger("updateCode", {
|
||||
type: this.state.currentTab,
|
||||
value: editorValue
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
patched() {
|
||||
if (this.editor) {
|
||||
window.dispatchEvent(new Event("resize"));
|
||||
this.editor.setValue(this.props[this.state.currentTab], -1);
|
||||
}
|
||||
}
|
||||
|
||||
willUnmount() {
|
||||
this.editor.destroy();
|
||||
delete this.editor;
|
||||
}
|
||||
|
||||
setTab(tab) {
|
||||
this.editor.setValue(this.props[tab], -1);
|
||||
|
||||
const mode = MODES[tab];
|
||||
this.editor.session.setMode(mode);
|
||||
const tabSize = tab === "xml" ? 2 : 4;
|
||||
this.editor.session.setOption("tabSize", tabSize);
|
||||
this.state.currentTab = tab;
|
||||
}
|
||||
|
||||
onMouseDown(ev) {
|
||||
if (ev.target.tagName === "DIV") {
|
||||
let y = ev.clientY;
|
||||
const resizer = ev => {
|
||||
const delta = ev.clientY - y;
|
||||
y = ev.clientY;
|
||||
this.trigger("updatePanelHeight", { delta });
|
||||
};
|
||||
document.body.addEventListener("mousemove", resizer);
|
||||
document.body.addEventListener("mouseup", () => {
|
||||
document.body.removeEventListener("mousemove", resizer);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Application initialization
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<templates>
|
||||
<div t-name="TabbedEditor" class="tabbed-editor" t-att-style="props.style">
|
||||
<div t-name="TabbedEditor" class="tabbed-editor">
|
||||
<div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
|
||||
<a t-if="tabs.js" class="tab flash" t-att-class="{active: state.currentTab==='js'}" t-on-click="setTab('js')">JS</a>
|
||||
<a t-if="tabs.xml" class="tab flash" t-att-class="{active: state.currentTab==='xml'}" t-on-click="setTab('xml')">XML</a>
|
||||
<a t-if="tabs.css" class="tab flash" t-att-class="{active: state.currentTab==='css'}" t-on-click="setTab('css')">CSS</a>
|
||||
<a t-if="props.js" class="tab flash" t-att-class="{active: state.currentTab==='js'}" t-on-click="setTab('js')">JS</a>
|
||||
<a t-if="props.xml" class="tab flash" t-att-class="{active: state.currentTab==='xml'}" t-on-click="setTab('xml')">XML</a>
|
||||
<a t-if="props.css" class="tab flash" t-att-class="{active: state.currentTab==='css'}" t-on-click="setTab('css')">CSS</a>
|
||||
</div>
|
||||
<div class="code-editor" t-ref="'editor'"></div>
|
||||
</div>
|
||||
@@ -20,13 +20,19 @@
|
||||
<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-if="!state.splitLayout">
|
||||
<t t-widget="TabbedEditor" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'js|xml|css'}" t-on-updateCode="updateCode"/>
|
||||
<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"
|
||||
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', style:topEditorStyle}" t-on-updateCode="updateCode"/>
|
||||
<div class="separator horizontal"/>
|
||||
<t t-widget="TabbedEditor" t-keepalive="1" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'xml|css', resizeable: true}" t-on-updateCode="updateCode" t-on-updatePanelHeight="updatePanelHeight"/>
|
||||
<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"/>
|
||||
|
||||
Reference in New Issue
Block a user