added html and css editors

codeeditor-app/elements/output-frame/output-frame.ts

@@ -6,12 +6,14 @@ import { postMessage } from "../../../shared/post-message";
 
 export class OutputFrame extends BaseElement {
     public Iframe: HTMLIFrameElement | null = null;
-    public CurrentIframeScriptRemoveResponseListener: Function | null = null;
+    private CurrentIframeScriptRemoveResponseListener: Function | null = null;
 
     constructor() {
         super();
     }
 
+    private scripts: any = {};
+
     onInit(): void {
         this.reset();
     }
@@ -19,7 +21,7 @@ export class OutputFrame extends BaseElement {
     onUpdate(): void {
     }
 
-    reset(resetNotificationBubbles: boolean = true) {
+    reset(onload: ((ev: Event) => void) | null = null, resetNotificationBubbles: boolean = true) {
         if (this.CurrentIframeScriptRemoveResponseListener != null) {
             this.CurrentIframeScriptRemoveResponseListener();
             this.CurrentIframeScriptRemoveResponseListener = null;
@@ -32,6 +34,13 @@ export class OutputFrame extends BaseElement {
         this.Iframe = document.createElement("iframe");
         this.Iframe.setAttribute("sandbox", "allow-pointer-lock allow-same-origin allow-scripts");
         this.Iframe.src = GetOutputFrameUrl();
+
+        if (onload) {
+            this.Iframe.onload = ((ev) => {
+                onload(ev);
+            });
+        }
+
         this.appendChild(this.Iframe);
 
         if (resetNotificationBubbles) {
@@ -43,41 +52,34 @@ export class OutputFrame extends BaseElement {
     }
 
     setError() {
-        this.reset();
-        if (this.Iframe) {
-            this.Iframe.src = GetOutputFrameUrl() + "execution-time-error.html";
-        }
-    }
-
-    preventInfiniteLoop(value: string) {
-        return value.replace("while (true)", "while (false)");
-    }
-
-    setScript(value: string) {
-        this.reset();
-        this.onIframeLoaded(() => {
-            this.CurrentIframeScriptRemoveResponseListener = postMessage(this.Iframe?.contentWindow, "script", value, (executeTimeInMs, exceedTimeInMs) => {
-                if (executeTimeInMs === -1) {
-                    this.setError();
-                }
-                else {
-                    var bubbles = GetNotificationBubbles();
-                    bubbles.add("code executed in: " + executeTimeInMs + "ms", "info");
-                }
-            });
+        this.reset(() => {
+            if (this.Iframe)
+                this.Iframe.src = GetOutputFrameUrl() + "execution-time-error.html";
         });
     }
 
-    onIframeLoaded(fn: Function) {
-        if (this.Iframe) {
-            this.Iframe.onload = () => {
-                fn();
+    setScript(language: string, value: string) {
+        this.scripts[language] = value;
+        this.reset(() => {
+            for (const lang in this.scripts) {
+                if (lang != "javascript")
+                    this.doPostMessage(lang, this.scripts[lang]);
             }
-        }
-        else {
-            this.waitFor(this.Iframe, () => {
-                this.onIframeLoaded(fn);
-            });
-        }
+
+            if (this.scripts["javascript"])
+                this.doPostMessage("javascript", this.scripts["javascript"]);
+        });
+    }
+
+    doPostMessage(language: string, value: string) {
+        this.CurrentIframeScriptRemoveResponseListener = postMessage(this.Iframe?.contentWindow, language, this.scripts[language], language == 'javascript' ? (executeTimeInMs, exceedTimeInMs) => {
+            if (executeTimeInMs === -1) {
+                this.setError();
+            }
+            else {
+                var bubbles = GetNotificationBubbles();
+                bubbles.add(language + " executed in: " + executeTimeInMs + "ms", "info");
+            }
+        } : undefined);
     }
 }