pxt-microbit-test/multi.html at master · FranklinWhale/pxt-microbit-test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<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"></iframe>
    <div id="divider"></div>
    <iframe id="right" allow="usb"></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 divider = document.getElementById("divider");
            var localhost = window.location.hostname == "localhost";
            var editor = (pxtConfig ? pxtConfig.relprefix : '/').replace(/-*$/, '');
            var flags = "?nestededitorsim=1&editorlayout=ide&nosandbox=1";
            var ratio = .5;
            var dividerWidth = 14;

            window.onmessage = function (msg) {
                var data = msg.data;
                var source = msg.source;
                if (!!data.broadcast) {
                    data.outer = true;
                    [left, right]
                        .filter(function (ifrm) {
                            return ifrm.contentWindow !== source;
                        })
                        .forEach(function (ifrm) {
                            ifrm.contentWindow.postMessage(data, window.location.origin)
                        });
                }
            };

            function updateSrc(ifrm) {
                if (localhost) {
                    ifrm.src = "/index.html" + flags;
                } else {
                    ifrm.src = editor + flags;
                }
            }
            updateSrc(left);
            updateSrc(right);

            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;
            setWidths();
            divider.onmouseover = function () {
                document.body.style.cursor = "w-resize";
                divider.onmousedown = startDrag;
            }
            divider.onmouseout = function () {
                document.body.style.cursor = "default";
                divider.onmousedown = null;
            }
        })();
    </script>
    <!-- @include tracking.html -->
</body>

</html>