Merge pull request #4 from angelasofiaremolinagutierrez/brython-activ…

…ecode-template

Add the html elements as a template needed for Brython

runestone/activecode/js/activecode_brython.js

@@ -0,0 +1,58 @@
+import { ActiveCode } from "./activecode.js";
+
+export default class BrythonActiveCode extends ActiveCode {
+    constructor(opts) {
+        super(opts);
+        opts.alignVertical = true;
+        this.code = $("<textarea />").html(this.origElem.innerHTML).text();
+        $(this.runButton).text("Render");
+        this.editor.setValue(this.code);
+    }
+
+    async runProg() {   
+        var prog = await this.buildProg(true);
+        let saveCode = "True";
+        this.saveCode = await this.manage_scrubber(saveCode);
+        $(this.output).text("");
+        if (!this.alignVertical) {
+            $(this.codeDiv).switchClass("col-md-12", "col-md-6", {
+                duration: 500,
+                queue: false,
+            });
+        }
+        $(this.outDiv).show({ duration: 700, queue: false });
+        document.body.onload("brython()");
+        prog =
+            "<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js'></script>" +
+            "<script type=text/javascript>window.onerror = function(msg,url,line) {alert(msg+' on line: '+line);};</script>" +
+            "<script type='text/python'>" +
+            prog +
+            "</script>";
+        this.output.srcdoc = prog;
+    }
+
+    createOutput() {
+        this.alignVertical = true;
+        var outDiv = document.createElement("div");
+        $(outDiv).addClass("ac_output");
+        if (this.alignVertical) {
+            $(outDiv).addClass("col-md-12");
+        } else {
+            $(outDiv).addClass("col-md-5");
+        }
+        this.outDiv = outDiv;
+        this.output = document.createElement("iframe");
+        $(this.output).css("background-color", "white");
+        $(this.output).css("position", "relative");
+        $(this.output).css("height", "400px");
+        $(this.output).css("width", "100%");
+        outDiv.appendChild(this.output);
+        this.outerDiv.appendChild(outDiv);
+        var clearDiv = document.createElement("div");
+        $(clearDiv).css("clear", "both"); // needed to make parent div resize properly
+        this.outerDiv.appendChild(clearDiv);
+    }
+    enableSaveLoad() {
+        $(this.runButton).text($.i18n("msg_activecode_render"));
+    }
+}