From cc33c9f5cfb52637651786ca630ea84c03161e93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Sun, 31 Mar 2019 09:35:03 +0200 Subject: [PATCH] ref: split app widget in 2 --- playground.css | 49 +++++++++++-------- src/app.js | 125 ++++++++++++++++++++++++++++++++----------------- 2 files changed, 112 insertions(+), 62 deletions(-) diff --git a/playground.css b/playground.css index f8579baf..4dca11ed 100644 --- a/playground.css +++ b/playground.css @@ -29,20 +29,44 @@ body { } .menubar { - padding-left: 8px; background-color: #1c2128; color: white; - line-height: 50px; font-size: 18px; + display: flex; + flex-direction: row-reverse; + align-items: center; +} + +.menubar select { + margin-right: 15px; + font-size: 16px; + height: 25px; +} + +.run-code { + margin-right: 12px; + height: 25px; + border: 2px solid transparent; +} +.run-code:hover { + border-bottom: 2px solid gray; +} + +/* TABBED EDITOR ****************************************/ + +.tabBar { + color: white; + height: 22px; + margin-top: -22px; + padding-left: 5px; } .tab { display: inline-block; cursor: pointer; padding: 0 8px; - vertical-align: -9px; font-size: 16px; - line-height: 26px; + line-height: 20px; width: 34px; text-align: center; } @@ -55,24 +79,9 @@ body { font-weight: bold; } -.right-thing { - float: right; -} - -.right-thing select { - margin-right: 15px; - font-size: 16px; -} -.run-code { - margin-right: 12px; - padding: 4px; -} -.run-code:hover { - border-bottom: 2px solid gray; -} - .code-editor { margin-top: 8px; + height: calc(100% - 10px); } /* SEPARATOR ****************************************/ diff --git a/src/app.js b/src/app.js index 24cf3417..aed03879 100644 --- a/src/app.js +++ b/src/app.js @@ -11,23 +11,87 @@ const MODES = { const DEFAULT_XML = ` `; +//------------------------------------------------------------------------------ +// Tabbed editor +//------------------------------------------------------------------------------ +const EDITOR_TEMPLATE = ` +
+
+ JS + XML + CSS +
+
+
`; + +class TabbedEditor extends Component { + constructor() { + super(...arguments); + this.inlineTemplate = EDITOR_TEMPLATE; + this.state = { + currentTab: "js" + }; + } + + mounted() { + this.editor = ace.edit(this.refs.editor); + + // remove this for xml/css (?) + this.editor.session.setOption("useWorker", false); + this.editor.setValue(this.props.js, -1); + this.editor.setFontSize("14px"); + this.editor.setTheme("ace/theme/monokai"); + this.editor.session.setMode("ace/mode/javascript"); + 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 + }); + } + }); + } + + updateProps() { + const result = super.updateProps(...arguments); + if (this.editor) { + this.editor.setValue(this.props[this.state.currentTab], -1); + } + return result; + } + + 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); + this.updateState({ currentTab: tab }); + } +} + +//------------------------------------------------------------------------------ +// MAIN APP +//------------------------------------------------------------------------------ + const TEMPLATE = `
- JS - XML - CSS -
- - ▶ Run -
+ ▶ Run +
-
+
@@ -50,6 +114,8 @@ class App extends Component { this.version = owl._version; this.SAMPLES = SAMPLES; this.inlineTemplate = TEMPLATE; + this.widgets = { TabbedEditor }; + this.state = { currentTab: "js", js: SAMPLES[0].code, @@ -57,22 +123,11 @@ class App extends Component { xml: SAMPLES[0].xml || DEFAULT_XML, error: false, displayWelcome: true, - leftPaneWidth: window.innerWidth / 2 + leftPaneWidth: Math.ceil(window.innerWidth / 2) }; } - mounted() { - this.editor = ace.edit(this.refs.editor); - this.editor.session.setOption("useWorker", false); - this.editor.setValue(this.state.js, -1); - this.editor.setFontSize("14px"); - this.editor.setTheme("ace/theme/monokai"); - this.editor.session.setMode("ace/mode/javascript"); - } - async runCode() { - this.updateStateFromEditor(); - // check templates var qweb = new owl.core.QWeb(); var error = false; @@ -124,23 +179,6 @@ class App extends Component { css: sample.css || "", xml: sample.xml || DEFAULT_XML }); - this.editor.setValue(this.state[this.state.currentTab], -1); - } - - updateStateFromEditor() { - const value = this.editor.getValue(); - this.updateState({ - [this.state.currentTab]: value - }); - } - - setTab(tab) { - this.updateStateFromEditor(); - this.editor.setValue(this.state[tab], -1); - - const mode = MODES[tab]; - this.editor.session.setMode(mode); - this.updateState({ currentTab: tab }); } get leftPaneStyle() { @@ -148,7 +186,7 @@ class App extends Component { } get rightPaneStyle() { - return `width:${window.innerWidth - 5 - this.state.leftPaneWidth}px`; + return `width:${window.innerWidth - 6 - this.state.leftPaneWidth}px`; } onMouseDown(ev) { @@ -168,6 +206,9 @@ class App extends Component { } }); } + updateCode(ev) { + this.state[ev.type] = ev.value; + } } //------------------------------------------------------------------------------