diff --git a/css/components/_pretext.scss b/css/components/_pretext.scss index 45b9b4274a..7ef08d698c 100644 --- a/css/components/_pretext.scss +++ b/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'; diff --git a/css/components/interactives/_other.scss b/css/components/interactives/_other.scss new file mode 100644 index 0000000000..a21373545d --- /dev/null +++ b/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; } +} diff --git a/examples/sample-article/media/code/d3/collision.js b/examples/sample-article/media/code/d3/collision.js index b82593ec81..8e7d38fcd8 100644 --- a/examples/sample-article/media/code/d3/collision.js +++ b/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)) diff --git a/examples/sample-article/media/code/d3/graph-layout.js b/examples/sample-article/media/code/d3/graph-layout.js index 453bf1d8de..b572ea6743 100644 --- a/examples/sample-article/media/code/d3/graph-layout.js +++ b/examples/sample-article/media/code/d3/graph-layout.js @@ -14,19 +14,24 @@ 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 } @@ -34,7 +39,7 @@ 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 diff --git a/examples/sample-article/media/code/mcclure/slope.css b/examples/sample-article/media/code/mcclure/slope.css index 999ff001d3..f4ff41a81b 100644 --- a/examples/sample-article/media/code/mcclure/slope.css +++ b/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 { diff --git a/examples/sample-article/media/code/mcclure/slope.js b/examples/sample-article/media/code/mcclure/slope.js index d859bfd88d..119ae4d51c 100644 --- a/examples/sample-article/media/code/mcclure/slope.js +++ b/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) diff --git a/examples/sample-article/media/code/splice/splice-resize.js b/examples/sample-article/media/code/splice/splice-resize.js new file mode 100644 index 0000000000..1cab4ce578 --- /dev/null +++ b/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, + }, + '*' + ) +}); \ No newline at end of file diff --git a/examples/sample-article/media/code/threejs/catenoid.js b/examples/sample-article/media/code/threejs/catenoid.js index 81680d0c3e..2e22c45b16 100644 --- a/examples/sample-article/media/code/threejs/catenoid.js +++ b/examples/sample-article/media/code/threejs/catenoid.js @@ -1,7 +1,7 @@ var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer( { antialias: true } ); - renderer.setSize( window.innerWidth, window.innerHeight ); + renderer.setSize( window.innerWidth, window.innerHeight - 5 ); renderer.setClearColor( 0xfff000, 1 ); // RAB edit 2021-08-10 // document.body.appendChild( renderer.domElement ); diff --git a/examples/sample-article/media/code/threejs/saddle.js b/examples/sample-article/media/code/threejs/saddle.js index d26f44b2ee..aebd5c41e8 100644 --- a/examples/sample-article/media/code/threejs/saddle.js +++ b/examples/sample-article/media/code/threejs/saddle.js @@ -14,6 +14,7 @@ // document.body.appendChild( renderer.domElement ); var renderDiv = document.getElementById("threejs-saddle"); renderDiv.appendChild( renderer.domElement ); + renderer.domElement.style.display = 'block'; // Prevents scroll bars var b = [{"x":-1.0, "y":-1.0, "z":-0.9993425378040762}, {"x":1.0, "y":1.0, "z":0.9993425378040762}]; // bounds diff --git a/examples/sample-article/publication.xml b/examples/sample-article/publication.xml index 4e2e5afebd..78a040484a 100644 --- a/examples/sample-article/publication.xml +++ b/examples/sample-article/publication.xml @@ -144,6 +144,13 @@ along with PreTeXt. If not, see . + + + + + + + diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml index e6e7d84d0f..2aca3ffa16 100644 --- a/examples/sample-article/sample-article.xml +++ b/examples/sample-article/sample-article.xml @@ -8361,15 +8361,15 @@ along with MathBook XML. If not, see .

Similar, but different, this demonstration of a graph layout uses Version 4 of the library. Technical notes:

This is adapted from a block by shimizu with a GPL license.

Graph Layout - - + +

Drag a vertex to a new location to see the graph adjust its layout.

 @@ -8400,12 +8400,13 @@ along with MathBook XML. If not, see .
  • We have adjusted the margins in an attempt to keep names visible on the right side, but without giving up too much space.
  • We have adjust the repelling force, and the collision buffer, to better fit the available space.
  • This example required its own CSS, which we have included as part of the interactive.
    • +
  • The aspect ratio of the interactive is set to slightly taller than that of the slate it contains. This accounts for the fact that the contents generated by the js/css in the slate occupy slightly too much vertical real estate.
  • The data collected from the Twitter analysis is contained in a JSON file, mention_network.json, and where the script loads that file, it has a hardcoded path. So this example is a bit brittle, should that file move.

    • Tweet mentions within the Welsh Assembly - +

    Hover on the name of an Assembly Member to concentrate on their tweet mentions.

    @@ -9013,7 +9014,7 @@ along with MathBook XML. If not, see .
    threejs catenoid surface, from n-Category Cafe - +
    @@ -9022,7 +9023,7 @@ along with MathBook XML. If not, see .
    threejs saddle by Sage - +
    @@ -9057,7 +9058,7 @@ along with MathBook XML. If not, see . DoenetML example - + @@ -9137,8 +9138,9 @@ along with MathBook XML. If not, see .
    - Interactive Elements, Server + Interactive Elements, Server & Layouts interactive elementsserver + interactive elementslayout embedded interactive elementsserver @@ -9238,7 +9240,81 @@ along with MathBook XML. If not, see .
    California. - + +
    + + + + Layout of Interactives + +

    In HTML, interactives are rendered in iframes, which can offer some layout challenges. The PreTeXt page has no direct control over the layout within the interactive. All it does is provide a fixed sized frame in which the interactive content can display itself. The width (a percentage) and aspect (a width:height ratio like 2.1:1 OR a number like 1.5) attributes on the interactive are the main tools to specify the dimensions. Below are three renderings of the same Google map using different widths/heights.

    + + + + + + + +

    If you know a particular interactive is designed to display at a particular pixel size, you can can specify a design-width like 300 to force exactly that width. Combine that with aspect to also force the height. The example below forces a size of 300x450.

    + +
    + Graph of ln(x^2+5)-3 + +
    + +

    What happens if there is not enough space to display the requested frame? That depends on the resize-behavior applied to the interactive. The default is fixed-height. In this case, the interactive's height will not change if the window becomes too small to display the full width of the interactive. Instead a horizontal scroll bar will appear. This can be seen in many of the samples in and this CircuitJS sample:

    + +
    + CircuitJS with resize-behavior="fixed-height" + + +
    + +

    The other option for resize-behavior is responsive. In this case, the interactive's aspect ratio will be maintained. If the width gets smaller, so will the height. This can be seen in the version below.

    + +
    + CircuitJS with resize-behavior="responsive" + + +
    + +

    The best behavior will be determined by the contents of the interactive. If the interactive knows how to dynamically size itself, "responsive" is likely the better option. If the interactive assumes that there is a certain amount of space and the contents will never resize themselves, "fixed-height" will likely work better.

    + +

    In addition to specifying the resize-behavior in a particular interactive, you can apply a document level default value in your pub file under publication/html/interactives. You can also specify different defaults for different types of interactives using sub elements of that. The publication.xml file for this Sample Article uses something like the following to have a based default of "responsive", but have specific types of interactives default to "fixed-height".

    + + + + + + + + + + + + + + ]]> + + +

    The code that generates content needs to make sure it does not overflow the available space or you will get scroll bars. Common culprits are canvas or svg elements that are not displayed as blocks or little bits of whitespace.

    + +

    If an interactive wants to request a change to the amount of vertical space available to it, it can pass a message to the PreTeXt page asking for a lti.frameResize. (It is also possible to request a different amount of horizontal space, but doing so is not guaranteed to work and is much more likely to result in breaking the overall page layout.) The simple demo below uses that process to allow for resizing. A resize request should trump the original aspect ratio.

    + +
    + Growable interactive fixed-height + +
    + +
    + Growable interactive responsive with % width + +
    + +
    + Growable interactive responsive and design-width +
    diff --git a/js/lti_iframe_resizer.js b/js/lti_iframe_resizer.js index 07db207c4e..be9755506d 100644 --- a/js/lti_iframe_resizer.js +++ b/js/lti_iframe_resizer.js @@ -33,8 +33,14 @@ window.addEventListener('message', function (event) { const iFrames = document.getElementsByTagName('iframe'); for(const iFrame of iFrames) { if(iFrame.contentWindow === event.source) { - if (edata.height) iFrame.height = edata.height; - if (edata.width) iFrame.width = edata.width; + if (edata.height) { + iFrame.height = edata.height; + iFrame.style.height = edata.height + 'px'; + } + if (edata.width) { + iFrame.width = edata.width; + iFrame.style.width = edata.width + 'px'; + } break; } } diff --git a/xsl/localizations/af-ZA.xml b/xsl/localizations/af-ZA.xml index 37851665ff..6004932bf3 100644 --- a/xsl/localizations/af-ZA.xml +++ b/xsl/localizations/af-ZA.xml @@ -276,4 +276,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/bg-BG.xml b/xsl/localizations/bg-BG.xml index f6963726c8..efcd60f9a5 100644 --- a/xsl/localizations/bg-BG.xml +++ b/xsl/localizations/bg-BG.xml @@ -300,4 +300,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/ca-ES.xml b/xsl/localizations/ca-ES.xml index 40a734ba55..42db4a5c58 100644 --- a/xsl/localizations/ca-ES.xml +++ b/xsl/localizations/ca-ES.xml @@ -279,4 +279,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/cs-CZ.xml b/xsl/localizations/cs-CZ.xml index 6d6eb3fe80..f27c9d196e 100644 --- a/xsl/localizations/cs-CZ.xml +++ b/xsl/localizations/cs-CZ.xml @@ -274,4 +274,5 @@ along with PreTeXt. If not, see . Tisk Zavřít + diff --git a/xsl/localizations/de-DE.xml b/xsl/localizations/de-DE.xml index efcf250b89..8e3c55a508 100644 --- a/xsl/localizations/de-DE.xml +++ b/xsl/localizations/de-DE.xml @@ -281,4 +281,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/en-US.xml b/xsl/localizations/en-US.xml index b92e767f70..dff4b98a88 100644 --- a/xsl/localizations/en-US.xml +++ b/xsl/localizations/en-US.xml @@ -333,5 +333,5 @@ along with PreTeXt. If not, see . Print preview Close - + Open in new tab diff --git a/xsl/localizations/es-ES.xml b/xsl/localizations/es-ES.xml index 6faede071c..98d3805fa1 100644 --- a/xsl/localizations/es-ES.xml +++ b/xsl/localizations/es-ES.xml @@ -280,4 +280,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/fi-FI.xml b/xsl/localizations/fi-FI.xml index 5dc2cc9cff..e0faaa317b 100644 --- a/xsl/localizations/fi-FI.xml +++ b/xsl/localizations/fi-FI.xml @@ -286,4 +286,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/fr-CA.xml b/xsl/localizations/fr-CA.xml index 51c3eb135b..141f242d88 100644 --- a/xsl/localizations/fr-CA.xml +++ b/xsl/localizations/fr-CA.xml @@ -270,4 +270,5 @@ along with PreTeXt. If not, see . Imprimer Fermer + diff --git a/xsl/localizations/fr-FR.xml b/xsl/localizations/fr-FR.xml index 9cce9adccf..66a252a3a4 100644 --- a/xsl/localizations/fr-FR.xml +++ b/xsl/localizations/fr-FR.xml @@ -272,4 +272,5 @@ along with PreTeXt. If not, see . Imprimer Fermer + diff --git a/xsl/localizations/hu-HU.xml b/xsl/localizations/hu-HU.xml index b4bcebd8c3..e6a8049c2f 100644 --- a/xsl/localizations/hu-HU.xml +++ b/xsl/localizations/hu-HU.xml @@ -274,4 +274,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/it-IT.xml b/xsl/localizations/it-IT.xml index 3f5db03d90..533ee1eb13 100644 --- a/xsl/localizations/it-IT.xml +++ b/xsl/localizations/it-IT.xml @@ -275,4 +275,5 @@ along with PreTeXt. If not, see . Stampa Anteprima di stampa Chiudi + diff --git a/xsl/localizations/ku-CKB.xml b/xsl/localizations/ku-CKB.xml index 6c4cb120ae..b409da3e46 100644 --- a/xsl/localizations/ku-CKB.xml +++ b/xsl/localizations/ku-CKB.xml @@ -319,4 +319,5 @@ along with PreTeXt. If not, see . پرنت + diff --git a/xsl/localizations/nl-NL.xml b/xsl/localizations/nl-NL.xml index cf2243ecb0..344d292f27 100644 --- a/xsl/localizations/nl-NL.xml +++ b/xsl/localizations/nl-NL.xml @@ -327,4 +327,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/pt-BR.xml b/xsl/localizations/pt-BR.xml index 41583978d0..9944a7d169 100644 --- a/xsl/localizations/pt-BR.xml +++ b/xsl/localizations/pt-BR.xml @@ -283,4 +283,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/pt-PT.xml b/xsl/localizations/pt-PT.xml index 96b064d96d..8ff423e81d 100644 --- a/xsl/localizations/pt-PT.xml +++ b/xsl/localizations/pt-PT.xml @@ -286,4 +286,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/zh-HANS.xml b/xsl/localizations/zh-HANS.xml index 74d2f15a59..0bbd7fecb1 100644 --- a/xsl/localizations/zh-HANS.xml +++ b/xsl/localizations/zh-HANS.xml @@ -316,4 +316,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/pretext-assembly.xsl b/xsl/pretext-assembly.xsl index 3b79ace5c2..eb0bef665f 100644 --- a/xsl/pretext-assembly.xsl +++ b/xsl/pretext-assembly.xsl @@ -1799,6 +1799,28 @@ along with PreTeXt. If not, see . + + + + + + + + + + desmos + geogebra + calcplot3d + circuitjs + iframe + unknown + + + + + + + diff --git a/xsl/pretext-common.xsl b/xsl/pretext-common.xsl index a264190e90..0870b84225 100644 --- a/xsl/pretext-common.xsl +++ b/xsl/pretext-common.xsl @@ -3082,31 +3082,40 @@ Book (with parts), "section" at level 3 - - - - - - + + + + + + + + + + + + + - + - + + + @@ -3118,7 +3127,7 @@ Book (with parts), "section" at level 3 - + diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl index 7487eb7c10..7ddf543e84 100644 --- a/xsl/pretext-html.xsl +++ b/xsl/pretext-html.xsl @@ -170,12 +170,13 @@ along with MathBook XML. If not, see . - - - - - - + + + + + + + @@ -6989,7 +6990,7 @@ along with MathBook XML. If not, see . -
    +
    @@ -9673,7 +9674,9 @@ along with MathBook XML. If not, see . - + + + @@ -9687,6 +9690,7 @@ along with MathBook XML. If not, see . + @@ -9704,7 +9708,29 @@ along with MathBook XML. If not, see .
    - +
    + +
    + + + + +
    + + + + + + + + + + + + + +
    +     @@ -9739,8 +9765,8 @@ along with MathBook XML. If not, see . @@ -9819,10 +9845,10 @@ along with MathBook XML. If not, see . - @@ -9856,7 +9882,7 @@ along with MathBook XML. If not, see . @@ -9890,7 +9916,7 @@ along with MathBook XML. If not, see . @@ -9913,7 +9939,7 @@ along with MathBook XML. If not, see . @@ -9922,7 +9948,7 @@ along with MathBook XML. If not, see . + + + + + + + + + +