Responsive sizing option for interactives

css/components/_pretext.scss

@@ -28,6 +28,7 @@ $navbar-breakpoint: 800px !default;
 @use 'google-search';
 @use 'pretext-search';
 @use 'interactives/runestone';
+@use 'interactives/other';
 @use 'interactives/webwork';
 @use 'interactives/sagecell';
 

css/components/interactives/_other.scss

@@ -0,0 +1,34 @@
+.interactive-iframe-container {
+  max-width: 100%;
+  overflow: auto;
+  & > iframe {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+}
+
+.interactive-iframe-container__opener {
+  display: block;
+  margin-right: 5px;
+  margin-top: 11px;
+  margin-bottom: 5px;
+  font-size: 0.8rem;
+  & .icon {
+    font-size: 18px;
+  }
+
+  // if figcaption or instructions follow, this should float next to that
+  &:has(+ figcaption, + .instructions) {
+    float: left;
+    z-index: 1; // place above fig caption in render stack
+    position: relative;  // for z-index
+  }
+
+  // and if both, the figcaption should clear
+  + .instructions + figcaption {
+    clear: left;
+  }
+
+  + .instructions { margin-top: .5em; }
+}

examples/sample-article/media/code/d3/collision.js

@@ -21,7 +21,8 @@ force.start();
 
 var svg = d3.select("#d3-collision").append("svg")
     .attr("width", width)
-    .attr("height", height);
+    .attr("height", height)
+    .attr("display", "block");
 
 svg.selectAll("circle")
     .data(nodes.slice(1))

examples/sample-article/media/code/d3/graph-layout.js

@@ -14,27 +14,32 @@
     main()
 
     function main() {
-        var range = 50
+        setSize(data)
+
+        // Add more data when we have a larger canvas
+        var range = Math.pow(width, 1.3) / 50
         var data = {
             nodes:d3.range(0, range).map(function(d){ return {label: "l"+d ,r:~~d3.randomUniform(4, 16)()}}),
             links:d3.range(0, range).map(function(){ return {source:~~d3.randomUniform(range)(), target:~~d3.randomUniform(range)()} })        
         }
 
-        setSize(data)
         drawChart(data)
     }
 
     function setSize(data) {
-        width = document.querySelector("#d3-graph-layout").clientWidth
-        height = document.querySelector("#d3-graph-layout").clientHeight
+        // boundingRect provides true decimal values for dimensions.
+        // clientWidth/clientHeight are integer values that may have been rounded up
+        let boundingRect = document.querySelector("#d3-graph-layout").getBoundingClientRect()
+        width = Math.floor(boundingRect.width)
+        height = Math.floor(boundingRect.height)
 
         margin = {top:0, left:0, bottom:0, right:0 }
 
 
         chartWidth = width - (margin.left+margin.right)
         chartHeight = height - (margin.top+margin.bottom)
 
-        svg.attr("width", width).attr("height", height)
+        svg.attr("width", width).attr("height", height).attr("display", "block")
 
 
         chartLayer

examples/sample-article/media/code/mcclure/slope.css

@@ -36,7 +36,8 @@ h1 {
 svg {
 	background: white;
 	border: 1px solid darkslategray;
-	margin: 20px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 
 .function_radio_container {

examples/sample-article/media/code/mcclure/slope.js

@@ -4,7 +4,7 @@
 
 var body_width = 600;
 $("body").css("width", body_width);
-var svg_width = 580, svg_height = 400, graph_padding = 20;
+var svg_width = 600, svg_height = 400, graph_padding = 20;
 $("#the_graph").css("margin-left", (body_width-svg_width)/2);
 var svg = d3.select("#the_graph")
 	.attr("width", svg_width)

examples/sample-article/media/code/splice/splice-resize.js

@@ -0,0 +1,19 @@
+const bodyEl = document.body;
+bodyEl.style.background = 'red';
+
+const growBtn = document.createElement('button');
+growBtn.textContent = 'Grow';
+document.currentScript.parentElement.appendChild(growBtn);
+
+growBtn.addEventListener('click', () => {
+  const currentHeight = bodyEl.clientHeight;
+  const newHeight = currentHeight + 100;
+  bodyEl.style.height = `${newHeight}px`;
+  window.parent.postMessage(
+    {
+      subject: 'lti.frameResize',
+      height: newHeight,
+    },
+    '*'
+  )
+});

examples/sample-article/publication.xml

@@ -144,6 +144,13 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
         <feedback href="http://example.com/not-implemented.html"><!-- My Button Text --></feedback>
         <!-- A "portable" build is meant to be a single file that is transportable -->
         <!-- <platform portable="yes"/> -->
+        <interactives resize-behavior="responsive">
+            <javascript resize-behavior="fixed-height"/>
+            <jsxgraph resize-behavior="fixed-height"/>
+            <sage resize-behavior="fixed-height"/>
+            <circuitjs resize-behavior="fixed-height"/>
+            <d3 resize-behavior="fixed-height"/>
+        </interactives>
     </html>
 
     <!-- 10pt font is the default   -->