Temp: Actually use correct whitespace in joiner frames

It's been a long, long time coming...
NetLogo · Jan 8, 2024 · 51330e8 · 51330e8
1 parent 3a4c859
commit 51330e8
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 53 deletions.
diff --git a/app/assets/javascripts/beak/hnw/common/handle-frame-resize.coffee b/app/assets/javascripts/beak/hnw/common/handle-frame-resize.coffee
diff --git a/app/assets/javascripts/beak/hnw/host/handle-window-message.coffee b/app/assets/javascripts/beak/hnw/host/handle-window-message.coffee
@@ -62,6 +62,12 @@ handleWindowMessage = ( onWidgetMessage, onRainCheckMessage, getSession
         elem.height    = height
         document.title = title
 
+    when "resize-joiner"
+      joiners          = document.querySelectorAll("iframe.hnw-join-frame")
+      container        = Array.from(joiners).find((c) -> c.contentWindow is e.source)
+      container.height = e.data.data.height
+      container.width  = e.data.data.width
+
     else
       console.warn("Unknown init-host postMessage:", e.data)
 

diff --git a/app/assets/javascripts/beak/hnw/host/load-model.coffee b/app/assets/javascripts/beak/hnw/host/load-model.coffee
@@ -3,8 +3,7 @@ import AlertDisplay from "/alert-display.js"
 import Tortoise                    from "/beak/tortoise.js"
 import { NewSource, ScriptSource } from "/beak/nlogo-source.js"
 
-import genPageTitle      from "../common/gen-page-title.js"
-import handleFrameResize from "../common/handle-frame-resize.js"
+import genPageTitle from "../common/gen-page-title.js"
 
 session = undefined # Session
 
@@ -95,6 +94,4 @@ removeHostWidgets = (nlogo) ->
   newWidgets                  = widgets.replace(regex, "$1")
   [code, newWidgets, theRest...].join(delim)
 
-handleFrameResize((-> activeContainer), (-> session))
-
 export { loadInitialModel, loadModel }
diff --git a/app/assets/javascripts/beak/hnw/join/init.coffee b/app/assets/javascripts/beak/hnw/join/init.coffee
@@ -56,3 +56,9 @@ window.addEventListener("message", (e) ->
       initBabyMonitor(e)
 
 )
+
+resizer = new ResizeObserver(([{ contentRect: { height, width } }]) ->
+  parent.postMessage({ type: "resize-joiner", data: { height, width } }, "*")
+)
+
+resizer.observe(document.querySelector(".netlogo-model-container-join"))
diff --git a/app/assets/javascripts/beak/hnw/join/load-model.coffee b/app/assets/javascripts/beak/hnw/join/load-model.coffee
@@ -2,8 +2,7 @@ import AlertDisplay from "/alert-display.js"
 
 import Tortoise from "/beak/tortoise.js"
 
-import genPageTitle      from "../common/gen-page-title.js"
-import handleFrameResize from "../common/handle-frame-resize.js"
+import genPageTitle from "../common/gen-page-title.js"
 
 session = undefined # Session
 
@@ -50,6 +49,4 @@ loadHNWModel = (setSession) -> (role, view) ->
   Tortoise.loadHubNetWeb(modelContainer, role, view, openSession(setSession), listeners)
   return
 
-handleFrameResize((-> activeContainer), (-> session))
-
 export default loadHNWModel
diff --git a/app/views/hnwJoin.scala.html b/app/views/hnwJoin.scala.html
@@ -16,7 +16,7 @@
     @tagBuilder.pathToHTML("stylesheets/hubnetweb.css")
     @tagBuilder.pathToHTML("stylesheets/alert.css")
   </head>
-  <body class="flex-column join-page-padding">
+  <body class="flex-column join-body">
     @views.html.spinner()
     <div id="alert-container"></div>
     <div id="netlogo-model-container" class="netlogo-model-container-join"></div>

diff --git a/app/views/infoPane.scala.html b/app/views/infoPane.scala.html
@@ -16,7 +16,7 @@
     @tagBuilder.pathToHTML("stylesheets/hubnetweb.css")
     @tagBuilder.pathToHTML("stylesheets/alert.css")
   </head>
-  <body class="flex-column join-page-padding">
+  <body class="flex-column">
     <div id="info-pane-container"></div>
     @views.html.spinner()
     <div id="alert-container"></div>

diff --git a/public/stylesheets/widgets.css b/public/stylesheets/widgets.css
@@ -378,16 +378,15 @@
   box-shadow: 3px 3px rgba(0, 0, 0, 0.8);
 }
 
-.join-page-padding {
-  padding: 10px;
+.join-body {
+  margin: 0;
 }
 
 .netlogo-model-container-join {
   display: flex;
   flex-direction: row;
   justify-content: center;
   min-width: 900px;
-  width: 60%;
   margin: 0 auto;
   background-color: var(--light-gray);
 }