pxt-core
Version:
Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors
144 lines (134 loc) • 5.01 kB
HTML
<html>
<head>
<title>MakeCode Multi Editor</title>
<style>
html, body {
overscroll-behavior: none;
}
iframe {
position: absolute;
width: calc(50% - 0.15rem);
height: 100%;
bottom: 0;
top: 0;
border: none;
}
#left {
left: 0;
right: calc(50% - 0.15rem);
}
#right {
right: 0;
left: calc(50% + 0.15rem);
}
#divider {
position: absolute;
width: 0.3rem;
cursor: col-resize;
height: 100%;
left: calc(50% - 0.15rem);
right: calc(50% + 0.15rem);
background: #bbb;
top: 0rem;
}
</style>
</head>
<body>
<iframe id="left" allow="usb;camera"></iframe>
<div id="divider"></div>
<iframe id="right" allow="usb;camera"></iframe>
<script>
(function () {
// This line gets patched up by the cloud
var pxtConfig = null;
var left = document.getElementById("left");
var right = document.getElementById("right");
var frames = [left, right]
var divider = document.getElementById("divider");
var localhost = window.location.hostname == "localhost";
var editor = (pxtConfig ? pxtConfig.relprefix : '/').replace(/-*$/, '');
var flags = "?nestededitorsim=1&editorlayout=ide&nosandbox=1&parentOrigin=" + encodeURIComponent(window.location.origin);
var ratio = .5;
var dividerWidth = 14;
function updateSrc(ifrm, hash) {
var h = hash ? "#" + hash : "";
console.log("hash: " + h)
if (localhost) {
ifrm.src = "/index.html" + flags + h;
} else {
ifrm.src = editor + flags + h;
}
}
function handleHash() {
var hashLeft = ""
var hashRight = ""
var route = (window.location.hash || "#");
var parts = route.replace(/^#/, '').split(':|:', 2);
updateSrc(left, parts[0]);
updateSrc(right, parts[1]);
window.history.replaceState('', '', '#')
}
function handleMessage(msg) {
var data = msg.data;
var source = msg.source;
if (!!data.broadcast) {
data.outer = true;
frames.filter(function (ifrm) {
return ifrm.contentWindow !== source;
})
.forEach(function (ifrm) {
ifrm.contentWindow.postMessage(data, window.location.origin)
});
}
}
function setWidths() {
var t = document.body.clientWidth;
var n = Math.floor(t * ratio);
var i = Math.max(t - n - dividerWidth, 4);
left.style.width = n + "px";
divider.style.left = n + "px";
divider.style.width = dividerWidth + "px";
right.style.left = n + dividerWidth + "px";
right.style.width = i + "px";
}
function startDrag() {
left.style.visibility = "hidden";
right.style.visibility = "hidden";
var n = divider.onmouseover;
var t = divider.onmouseout;
divider.onmouseover = null;
divider.onmouseout = null;
document.body.onmousemove = function (n) {
n || (n = window.event);
ratio = (n.clientX - dividerWidth / 2) / document.body.clientWidth;
ratio < .1 && (ratio = .1);
ratio > .9 && (ratio = .9);
setWidths();
}
document.body.onmouseup = function () {
document.body.onmousemove = null;
document.body.onmouseup = null;
left.style.visibility = "inherit";
right.style.visibility = "inherit";
divider.onmouseover = n;
divider.onmouseout = t;
}
}
window.onresize = setWidths;
window.onhashchange = handleHash;
window.onmessage = handleMessage;
divider.onmouseover = function () {
document.body.style.cursor = "w-resize";
divider.onmousedown = startDrag;
}
divider.onmouseout = function () {
document.body.style.cursor = "default";
divider.onmousedown = null;
}
setWidths();
handleHash();
})();
</script>
<!-- @include tracking.html -->
</body>
</html>