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/doc/guide/publisher/publication-file.xml b/doc/guide/publisher/publication-file.xml index ee8fd11d55..4f94d7c6ce 100644 --- a/doc/guide/publisher/publication-file.xml +++ b/doc/guide/publisher/publication-file.xml @@ -905,6 +905,48 @@
  • yes: 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.

    • + + + Interactives Options + publisher optionshtml interactives + +

    + The + + /publication/html + + element can have an attribute design-width 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 600 (100% width is 600px). +

    + +

    + The + + /publication/html/interactives + + element can have an attribute resize-behavior that is used to control how interactives respond to window resizing. Possible values are: +

    + In addition to this global setting, you can add child elemements to + + /publication/html/interactives + + to set the resize behavior for specific types of interactives. Each child element should be named after the interactive type (e.g. geogebra or desmos) and have a resize-behavior 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: + +

    +
    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 454d6f9469..e59d447eab 100644 --- a/examples/sample-article/publication.xml +++ b/examples/sample-article/publication.xml @@ -152,6 +152,13 @@ along with PreTeXt. If not, see . + + + + + + + diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml index 30651a723a..be3a51d814 100644 --- a/examples/sample-article/sample-article.xml +++ b/examples/sample-article/sample-article.xml @@ -8515,15 +8515,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:

    • We have changed the size of the nodes, and their number, to fit in a smaller space.
      • -
    • The Javascript script uses introspection to size itself, which would be a good general practice.
      • +
    • The Javascript script uses introspection to size itself, which would be a good general practice. (Though it does not resize itself on window resize, only initial load.) The interactive also has the resize-behavior attribute set to responsive.

    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.

     @@ -8554,12 +8554,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.

    @@ -9172,7 +9173,7 @@ along with MathBook XML. If not, see .
    threejs catenoid surface, from n-Category Cafe - +
    @@ -9181,7 +9182,7 @@ along with MathBook XML. If not, see .
    threejs saddle by Sage - +
    @@ -9216,7 +9217,7 @@ along with MathBook XML. If not, see . DoenetML example - + @@ -9296,8 +9297,9 @@ along with MathBook XML. If not, see .
    - Interactive Elements, Server + Interactive Elements, Server & Layouts interactive elementsserver + interactive elementslayout embedded interactive elementsserver @@ -9397,7 +9399,65 @@ 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. You can also specify a different default for a specific types of interactive. See the PreTeXt guide for documentation, or the publication.xml file of this Sample Article for an example of configuring defaults.

    + +

    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 f507bd200a..d2122f831b 100644 --- a/xsl/localizations/af-ZA.xml +++ b/xsl/localizations/af-ZA.xml @@ -286,4 +286,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/bg-BG.xml b/xsl/localizations/bg-BG.xml index d94fd43482..9772d395b8 100644 --- a/xsl/localizations/bg-BG.xml +++ b/xsl/localizations/bg-BG.xml @@ -310,4 +310,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/ca-ES.xml b/xsl/localizations/ca-ES.xml index 02b6a82e61..f8aea6adba 100644 --- a/xsl/localizations/ca-ES.xml +++ b/xsl/localizations/ca-ES.xml @@ -289,4 +289,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/cs-CZ.xml b/xsl/localizations/cs-CZ.xml index 522d198359..98c3f79294 100644 --- a/xsl/localizations/cs-CZ.xml +++ b/xsl/localizations/cs-CZ.xml @@ -283,4 +283,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 2fce3db8cb..0a2690a192 100644 --- a/xsl/localizations/de-DE.xml +++ b/xsl/localizations/de-DE.xml @@ -291,4 +291,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/en-US.xml b/xsl/localizations/en-US.xml index dd7c53e6ac..03e115e1f6 100644 --- a/xsl/localizations/en-US.xml +++ b/xsl/localizations/en-US.xml @@ -348,5 +348,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 bb328f4921..5202a2c691 100644 --- a/xsl/localizations/es-ES.xml +++ b/xsl/localizations/es-ES.xml @@ -281,6 +281,11 @@ along with PreTeXt. If not, see . Reiniciar Arreglo Tamaño del papel + + + + + Opciones de impresión adicionales diff --git a/xsl/localizations/fi-FI.xml b/xsl/localizations/fi-FI.xml index 76689d8855..5739f0fbb1 100644 --- a/xsl/localizations/fi-FI.xml +++ b/xsl/localizations/fi-FI.xml @@ -296,4 +296,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/fr-CA.xml b/xsl/localizations/fr-CA.xml index afcc310fd2..34555949fa 100644 --- a/xsl/localizations/fr-CA.xml +++ b/xsl/localizations/fr-CA.xml @@ -276,4 +276,5 @@ along with PreTeXt. If not, see . Imprimer Aperçu avant impression Fermer + diff --git a/xsl/localizations/fr-FR.xml b/xsl/localizations/fr-FR.xml index 57efc086e7..f6b93d1eac 100644 --- a/xsl/localizations/fr-FR.xml +++ b/xsl/localizations/fr-FR.xml @@ -282,4 +282,5 @@ along with PreTeXt. If not, see . Imprimer Fermer + diff --git a/xsl/localizations/hu-HU.xml b/xsl/localizations/hu-HU.xml index a3169219d9..7e8c746c89 100644 --- a/xsl/localizations/hu-HU.xml +++ b/xsl/localizations/hu-HU.xml @@ -284,4 +284,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/it-IT.xml b/xsl/localizations/it-IT.xml index e6e2acc575..b7a10ba1b2 100644 --- a/xsl/localizations/it-IT.xml +++ b/xsl/localizations/it-IT.xml @@ -279,4 +279,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 f51d82dc2c..1cf29a498a 100644 --- a/xsl/localizations/ku-CKB.xml +++ b/xsl/localizations/ku-CKB.xml @@ -323,4 +323,5 @@ along with PreTeXt. If not, see . پرنت + diff --git a/xsl/localizations/nl-NL.xml b/xsl/localizations/nl-NL.xml index 16879a1da1..568064268c 100644 --- a/xsl/localizations/nl-NL.xml +++ b/xsl/localizations/nl-NL.xml @@ -334,4 +334,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/pt-BR.xml b/xsl/localizations/pt-BR.xml index 1d30451c0e..47564b2f8e 100644 --- a/xsl/localizations/pt-BR.xml +++ b/xsl/localizations/pt-BR.xml @@ -286,4 +286,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/pt-PT.xml b/xsl/localizations/pt-PT.xml index 4ee1003fbd..cc2a5203d1 100644 --- a/xsl/localizations/pt-PT.xml +++ b/xsl/localizations/pt-PT.xml @@ -296,4 +296,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/localizations/zh-HANS.xml b/xsl/localizations/zh-HANS.xml index 8878182de8..37e9dcf6f0 100644 --- a/xsl/localizations/zh-HANS.xml +++ b/xsl/localizations/zh-HANS.xml @@ -327,4 +327,5 @@ along with PreTeXt. If not, see . + diff --git a/xsl/pretext-assembly.xsl b/xsl/pretext-assembly.xsl index bb2f9d1583..70cc44caff 100644 --- a/xsl/pretext-assembly.xsl +++ b/xsl/pretext-assembly.xsl @@ -1813,6 +1813,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 aae6b530aa..b6724fba9a 100644 --- a/xsl/pretext-common.xsl +++ b/xsl/pretext-common.xsl @@ -2974,31 +2974,40 @@ Book (with parts), "section" at level 3 - - - - - - + + + + + + + + + + + + + - + - + + + @@ -3010,7 +3019,7 @@ Book (with parts), "section" at level 3 - + diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl index be650bf21b..7118911334 100644 --- a/xsl/pretext-html.xsl +++ b/xsl/pretext-html.xsl @@ -169,12 +169,13 @@ along with MathBook XML. If not, see . - - - - - - + + + + + + + @@ -6923,7 +6924,7 @@ along with MathBook XML. If not, see . -
    +
    @@ -9585,7 +9586,9 @@ along with MathBook XML. If not, see . - + + + @@ -9599,6 +9602,7 @@ along with MathBook XML. If not, see . + @@ -9635,7 +9639,29 @@ along with MathBook XML. If not, see . - +
    + +
    + + + + +
    + + + + + + + + + + + + + +
    +     @@ -9670,8 +9696,8 @@ along with MathBook XML. If not, see . @@ -9750,10 +9776,10 @@ along with MathBook XML. If not, see . -     @@ -9787,7 +9813,7 @@ along with MathBook XML. If not, see . @@ -9821,7 +9847,7 @@ along with MathBook XML. If not, see . @@ -9844,7 +9870,7 @@ along with MathBook XML. If not, see . @@ -9853,7 +9879,7 @@ along with MathBook XML. If not, see . + + + + + + + + + +