Make it actually work

ChALkeR · ChALkeR · commit 0bc2d98a3f8c · 2016-08-16T02:40:22.000+03:00
diff --git a/index.html b/index.html
@@ -47,6 +47,7 @@ <h2 id="project_tagline">A QML engine in a web browser.</h2>
     </div>
 
     <div id="result">
+      <iframe src="runner/runner.html" />
     </div>
 
     <footer id="footer">
diff --git a/main.js b/main.js
@@ -3,4 +3,22 @@ window.addEventListener("DOMContentLoaded", function () {
   var editor = CodeMirror.fromTextArea(textarea, {
     lineNumbers: true
   });
+
+  var iframe = document.querySelector("#result iframe");
+  iframe.addEventListener("load", function () {
+    iframe.contentWindow.postMessage(textarea.value, "*");
+  });
+
+  var execute = function() {
+    iframe.src = iframe.src;
+  };
+
+  textarea.addEventListener("change", execute);
+
+  editor.on("change", function() {
+    textarea.value = editor.getValue();
+    execute();
+  });
+
+  execute();
 });
diff --git a/runner/runner.html b/runner/runner.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script defer src="../node_modules/qmlweb/lib/qt.min.js"></script>
+    <script defer src="../node_modules/qmlweb/lib/qmlweb.parser.min.js"></script>
+    <script defer src="runner.js"></script>
+    <title>QmlWeb Runner</title>
+  </head>
+  <body style="margin: 0">
+  </body>
+</html>
diff --git a/runner/runner.js b/runner/runner.js
@@ -0,0 +1,9 @@
+(function() {
+  var QMLEngine = window.QmlWeb ? QmlWeb.QMLEngine : window.QMLEngine;
+
+  window.addEventListener("message", function (message) {
+    var qmlEngine = new QMLEngine();
+    qmlEngine.loadQML(message.data);
+    qmlEngine.start();
+  });
+})();
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
@@ -39,12 +39,23 @@ body {
   display: none;
 }
 
-textarea {
+textarea, iframe {
   box-sizing: border-box;
   margin: 0;
   display: block;
 }
+iframe {
+  border: 0px none;
+}
+#result, #result > iframe,
 #code, #code .CodeMirror, #code > textarea {
   width: 50vw;
   height: calc(100vh - 120px);
 }
+
+/* Alternate: enable flex */
+#result {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
