multi route hash to both frames (microsoft#6996)

pelikhan · web-flow · commit ecf91a4994dd · 2020-05-10T21:32:29.000-07:00
* route hash to both frames

* fix multi routing

* reorder
diff --git a/docs/multi.html b/docs/multi.html
@@ -73,6 +73,7 @@
         (function () {
             var left = document.getElementById("left");
             var right = document.getElementById("right");
+            var frames = [left, right]
             var selectLeft = document.getElementById("selectleft");
             var selectRight = document.getElementById("selectright");
             var divider = document.getElementById("divider");
@@ -86,8 +87,7 @@
                 var source = msg.source;
                 if (!!data.broadcast) {
                     data.outer = true;
-                    [left, right]
-                        .filter(function (ifrm) {
+                    frames.filter(function (ifrm) {
                             return ifrm.contentWindow !== source;
                         })
                         .forEach(function (ifrm) {
@@ -96,18 +96,26 @@
                 }
             };
 
-            function updateSrc(ifrm, select) {
+            function updateSrc(ifrm, select, hash) {
+                var h = hash ? "#" + hash : "";
                 if (localhost) {
-                    ifrm.src = "/index.html" + flags;
+                    ifrm.src = "/index.html" + flags + h;
                 } else {
-                    ifrm.src = select.value + flags;
+                    ifrm.src = select.value + flags + h;
                 }
             }
+            function handleHash() {
+                var hashLeft = ""
+                var hashRight = ""
+                var route = (window.location.hash || "#");
+                var parts = route.replace(/^#/, '').split(':|:', 2);
+                updateSrc(left, selectLeft, parts[0]);
+                updateSrc(right, selectRight, parts[1]);
+                window.history.replaceState('', '', '#')
+            }
 
             selectLeft.onchange = function () { updateSrc(left, selectLeft); }
             selectRight.onchange = function () { updateSrc(right, selectRight); }
-            updateSrc(left, selectLeft);
-            updateSrc(right, selectRight);
 
             function setWidths() {
                 var t = document.body.clientWidth;
@@ -146,7 +154,8 @@
                 }
             }
             window.onresize = setWidths;
-            setWidths();
+            window.onhashchange = handleHash;
+
             divider.onmouseover = function () {
                 document.body.style.cursor = "w-resize";
                 divider.onmousedown = startDrag;
@@ -155,6 +164,9 @@
                 document.body.style.cursor = "default";
                 divider.onmousedown = null;
             }
+
+            setWidths();
+            handleHash();
         })();        
     </script>
     <!-- @include tracking.html -->
diff --git a/webapp/public/multi.html b/webapp/public/multi.html
@@ -49,38 +49,45 @@
 
             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";
             var ratio = .5;
             var dividerWidth = 14;
 
-            window.onmessage = function (msg) {
+            function updateSrc(ifrm, hash) {
+                var h = hash ? "#" + hash : "";
+                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;
-                    [left, right]
-                        .filter(function (ifrm) {
+                    frames.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);
@@ -115,7 +122,9 @@
                 }
             }
             window.onresize = setWidths;
-            setWidths();
+            window.onhashchange = handleHash;
+            window.onmessage = handleMessage;
+
             divider.onmouseover = function () {
                 document.body.style.cursor = "w-resize";
                 divider.onmousedown = startDrag;
@@ -124,6 +133,8 @@
                 document.body.style.cursor = "default";
                 divider.onmousedown = null;
             }
+            setWidths();
+            handleHash();
         })();        
     </script>
     <!-- @include tracking.html -->
