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