Add files

2019-09-11 20:11:42 +02:00
commit ebabb20546
9 changed files with 150 additions and 0 deletions
--- a/web/embed.html
+++ b/web/embed.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Vortrag Matlab/Octave</title>
+    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
+    <script type="text/javascript" src="jquery.svg-1.5.0.min.js"></script>
+    <script type="text/javascript" src="jquery.svgdom-1.5.0.min.js"></script>
+</head>
+<body>
+
+<iframe src="presentation.svg" id="content" style="
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    right: 0px;
+    width: 100%;
+    border: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    z-index: 0;
+    height: 100%;
+"></iframe>
+
+<!--
+<iframe src="http://localhost:8123/" id="console" style="
+    position: fixed;
+    margin: 0;
+    padding: 0;
+    z-index: 1;
+"></iframe>-->
+
+<!-- this script takes care of displaying the consoles -->
+<script type="text/javascript">
+let consoles = {};
+
+function prepareTerminalFrame() {
+    let frame = document.createElement("iframe");
+    frame.setAttribute("src", "http://localhost:7681/");
+    frame.style.position = "fixed";
+    frame.style.margin = 0;
+    frame.style.padding = 0;
+    frame.style.zIndex = 1;
+    $(frame).on("load", function() {
+        $(frame).hide();
+    });
+    document.body.appendChild(frame);
+    return frame;
+}
+
+function resizeTerminal(terminal) {
+    let coordinates = terminal.placeholder.getBoundingClientRect();
+    terminal.frame.style.left = coordinates.left + "px";
+    terminal.frame.style.top = coordinates.top + "px";
+    terminal.frame.style.width = coordinates.width + "px";
+    terminal.frame.style.height = coordinates.height + "px";
+}
+
+$(window).on("load", function() {
+    let contentSvg = $("#content").contents().find("svg")[0];
+    let placeholderTexts = $("text:contains('--console--')", contentSvg);
+    
+    for (let text of placeholderTexts) {
+        let placeholder = text.closest("g[id^='id']");
+        let containerId = text.closest("g[id^='container-id']").getAttribute("id");
+        let frame = prepareTerminalFrame();
+        let terminal = {
+            "frame": frame,
+            "placeholder": placeholder
+        };
+        resizeTerminal(terminal);
+        if (!(containerId in consoles)) {
+            consoles[containerId] = [terminal];
+        } else {
+            consoles[containerId].push(terminal);
+        }
+    }
+    
+    let observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.type == "attributes" && mutation.attributeName == "visibility") {
+                let containerId = mutation.target.firstElementChild.getAttribute("id");
+                let visible = mutation.target.getAttribute("visibility") != "hidden";
+                if (containerId in consoles) {
+                    for(let terminal of consoles[containerId]) {
+                        if(visible) {
+                            $(terminal.frame).show();
+                            $(terminal.frame).focus();
+                        }  else {
+                            $(terminal.frame).hide();
+                        }
+                    }
+                }
+            }
+        });
+    });
+    
+    for (let containerId of Object.keys(consoles)) {
+        let container = $("#" + containerId, contentSvg).parent()[0]
+        observer.observe(container, {
+            attributes: true
+        });
+    }
+});
+
+$(window).on("resize", function() {
+    for (let containerId of Object.keys(consoles)) {
+        for (let terminal of consoles[containerId]) {
+            resizeTerminal(terminal);
+        }
+    }
+});
+</script>
+
+</body>
+</html>
+
+<!--
+$("text:contains('--console--')", $("#content").contents().find("svg")[0]).closest("g[id^='id']")[0].getBoundingClientRect()
+-->