123 lines
3.6 KiB
HTML
123 lines
3.6 KiB
HTML
<!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()
|
|
-->
|