Support embedding the playground on another page

rhaiscript · Jul 4, 2020 · 9e68aa6 · 9e68aa6 · alvinhochun · Jul 4, 2020
1 parent a2c2aec
commit 9e68aa6
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git a/js/index.js b/js/index.js
@@ -11,13 +11,48 @@ Vue.use(Select);
 Vue.use(Switch);
 Vue.use(Tooltip);
 
-import("./playground.vue").catch(console.error).then(module => {
+const playgroundImport = import("./playground.vue").catch(console.error);
+
+let embedWaitPromise;
+if (window.location.hash.startsWith("#embed-") && window.parent !== window) {
+    const id = window.location.hash.substr(7);
+    let embedResolve;
+    embedWaitPromise = new Promise((resolve, _reject) => {
+        embedResolve = resolve;
+    });
+    function onMessage(ev) {
+        if (ev.data.to === "rhai-playground" && ev.data.req === "embed-init") {
+            if (typeof ev.data.code !== "string") {
+                throw "Code is not a string";
+            }
+            embedResolve({ code: ev.data.code });
+        }
+    }
+    window.addEventListener("message", onMessage);
+    window.parent.postMessage({ from: "rhai-playground", req: "embed-loaded", id }, "*");
+    const loading = document.createElement("div");
+    loading.innerText = "(embedded)";
+    document.getElementById("loading").appendChild(loading);
+} else {
+    embedWaitPromise = Promise.resolve(null);
+}
+
+Promise.all([playgroundImport, embedWaitPromise]).then(([module, embedInit]) => {
     document.getElementById("loading").remove();
 
+    const playground = module.default;
+    const initialCode = embedInit ? embedInit.code : undefined;
+    const isEmbedded = embedInit ? true : false;
+
     new Vue({
         el: "#topContainer",
         render(h) {
-            return h(module.default);
+            return h(playground, {
+                props: {
+                    initialCode,
+                    isEmbedded,
+                },
+            });
         },
     })
 })
diff --git a/js/playground.vue b/js/playground.vue
@@ -72,7 +72,7 @@
                     </p>
                 </b-field>
                 <b-field style="margin-bottom: 0.75rem;">
-                    <p class="control">
+                    <p class="control" v-if="!$data._isEmbedded">
                         <b-dropdown
                             aria-role="menu"
                             :disabled="exampleScriptChangePromise !== null || isScriptRunning"
@@ -394,6 +394,16 @@ for (let key of cmThemesImport.keys()) {
 Object.freeze(cmThemeList);
 
 export default {
+    props: {
+        initialCode: {
+            type: String,
+            default: initialCode,
+        },
+        isEmbedded: {
+            type: Boolean,
+            default: false,
+        },
+    },
     data() {
         return {
             exampleScriptList,
@@ -405,6 +415,7 @@ export default {
             isScriptRunning: false,
             runningOps: null,
             stopDisabled: true,
+            _isEmbedded: this.isEmbedded,
         };
     },
     computed: {
@@ -523,7 +534,7 @@ export default {
         this.$_r = r;
         this.$nextTick(() => {
             cm.refresh();
-            cm.setValue(initialCode);
+            cm.setValue(this.initialCode);
             cm.focus();
         });
     },