[REF] playground: small refactoring

extras/playground/app.js

@@ -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
 //------------------------------------------------------------------------------

extras/playground/templates.xml

@@ -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="props.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="props.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.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-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-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"/>
+          <t t-widget="TabbedEditor" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'js|xml|css'}" 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>
       </div>
       <div class="separator vertical" t-on-mousedown="onMouseDown"/>