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; }
+}

doc/guide/publisher/publication-file.xml

@@ -905,6 +905,48 @@
                 <li><c>yes</c>: show a button in the navigation bar, that when clicked, displays a popup allowing the user to copy an iframe code snippet to paste into their website or LMS.</li>
             </ul></p>
         </subsection>
+
+        <subsection xml:id="online-interactives-options">
+            <title>Interactives Options</title>
+            <idx><h>publisher options</h><h>html interactives</h></idx>
+
+            <p>
+                The
+                <cd>
+                    <cline>/publication/html</cline>
+                </cd>
+                element can have an attribute <attr>design-width</attr> with an integer value. This will be used as the base value for converting the percentage based widths of an interactive into a pixel values when that is required. The default value is <c>600</c> (100% width is 600px).
+            </p>
+
+           <p>
+              The
+              <cd>
+                  <cline>/publication/html/interactives</cline>
+              </cd>
+              element can have an attribute <attr>resize-behavior</attr> that is used to control how interactives respond to window resizing. Possible values are:
+              <ul>
+                  <li><c>fixed-height</c> (default): interactives will maintain their initial height as the window size changes. When the content becomes too wide to display, a horizontal scrollbar will appear.</li>
+                  <li><c>responsive</c>: interactives will resize dynamically as the window size changes to maintain their aspect ratio.</li>
+              </ul>
+              In addition to this global setting, you can add child elemements to 
+              <cd>
+                  <cline>/publication/html/interactives</cline>
+              </cd>
+              to set the resize behavior for specific types of interactives. Each child element should be named after the interactive type (e.g. <c>geogebra</c> or <c>desmos</c>) and have a <attr>resize-behavior</attr> attribute with the same possible values as above. Settings on these child elements will override the global setting for that specific interactive type. Known interactive types that can be specified this way are:
+              <ul>
+                <li>calcplot3d</li>
+                <li>circuitjs</li>
+                <li>d3</li>
+                <li>desmos</li>
+                <li>doenetml</li>
+                <li>geogebra</li>
+                <li>iframe</li>
+                <li>javascript</li>
+                <li>jsxgraph</li>
+                <li>sage</li>
+              </ul>
+            </p>
+        </subsection>
     </section>
 
     <section xml:id="publication-file-revealjs">

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

@@ -152,6 +152,13 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
         <!-- Banner options, these default to "yes" but can be set to -->
         <!-- "no" toremove the indicated element from the top banner  -->
         <banner byline="yes" subtitle="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   -->