Skip to content

Commit 150be29

Browse files
fwewf
1 parent 7e54275 commit 150be29

File tree

8 files changed

+148
-72
lines changed

8 files changed

+148
-72
lines changed

css/components/interactives/_other-iframe.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,10 @@
3131
}
3232

3333
+ .instructions { margin-top: .5em; }
34+
}
35+
36+
/* block allwos for exact sizing without lineheight causing
37+
sizing issues */
38+
canvas.interactive--slate {
39+
display: block;
3440
}
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
3+
<!-- This is the publication file for a newly generated PreTeXt book. -->
4+
<!-- By changing the values of attributes here, you can change how -->
5+
<!-- the output looks and functions. For the complete documentation -->
6+
<!-- of publication-file options, see -->
7+
<!-- https://pretextbook.org/doc/guide/html/publisher-file-reference.html -->
8+
9+
10+
11+
<publication>
12+
<!-- Set where external assets and generated assets will be -->
13+
<!-- stored or created. Directories are relative to the main -->
14+
<!-- source PreTeXt file -->
15+
<source>
16+
<!-- <directories external="assets" generated="generated"/> -->
17+
</source>
18+
19+
<numbering>
20+
<!-- the divisions element describes the numbering of divisions. -->
21+
<!-- @part-structure should be "decorative" or "structural", -->
22+
<!-- were the latter would restart numbering chapters within each -->
23+
<!-- part (this only matters if your book has parts). -->
24+
<!-- The attribute @chapter-start give the number of the first -->
25+
<!-- chapter. @level says how deep (chapter->section->subsection)-->
26+
<!-- numbering should appear. -->
27+
<!-- For use with a book organized by parts
28+
<divisions part-structure="decorative" chapter-start="1" level="3"/>
29+
-->
30+
<!-- The next elements say how the levels deep to break up the -->
31+
<!-- numbering of the respective elements. Can't be more than the -->
32+
<!-- @level on divisions above. -->
33+
<blocks level="2"/>
34+
<projects level="0"/>
35+
<equations level="1"/>
36+
<footnotes level="0"/>
37+
</numbering>
38+
39+
<!-- LaTeX specific options: set @print="yes" to get pdf set up -->
40+
<!-- for printing; set @sides="two" if the printing woudl be two- -->
41+
<!-- sided. The asymptote/@links set to "yes" would produce -->
42+
<!-- links the html version of asymptote graphics. -->
43+
<latex print="no" sides="one">
44+
<asymptote links="no"/>
45+
</latex>
46+
47+
<html>
48+
<!-- Whether to knowl a particular elements is set here -->
49+
<!-- Lots of elements have this possibility; see the guide -->
50+
<knowl remark="no" example="yes" proof="yes"/>
51+
<!-- Specify the theme for the HTML. -->
52+
<!-- See the guide for options -->
53+
<css theme="salem'"/>
54+
<!-- Magic IDs identify HTML pages to analytics services -->
55+
<!-- Presence implies relevant Javascript will be added -->
56+
<!-- StatCounter requires both values to be set -->
57+
<!-- <analytics google-gst="UA-0123456-1" statcounter-project="0123456" statcounter-security="0123456"/> -->
58+
<!-- Google search, via masthead textbox is switched on -->
59+
<!-- and associated with a Google account via CX number -->
60+
<!-- <search google-cx=""/> -->
61+
<!-- ***************************************************** -->
62+
</html>
63+
</publication>

examples/sample-article/media/code/threejs/catenoid.js

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

examples/sample-article/publication.xml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,10 @@ along with PreTeXt. If not, see <http://www.gnu.org/licenses/>.
127127
<!-- suggest how the text can be changed/specified.) -->
128128
<feedback href="http://example.com/not-implemented.html"><!-- My Button Text --></feedback>
129129
<interactives resize-behavior="responsive">
130-
<javascript resize-behavior="fixed"/>
131-
<sage resize-behavior="fixed"/>
132-
<circuitjs resize-behavior="fixed"/>
133-
<d3 resize-behavior="fixed"/>
130+
<javascript resize-behavior="fixed-height"/>
131+
<sage resize-behavior="fixed-height"/>
132+
<circuitjs resize-behavior="fixed-height"/>
133+
<d3 resize-behavior="fixed-height"/>
134134
</interactives>
135135
</html>
136136

examples/sample-article/sample-article.xml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8221,7 +8221,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
82218221
<figure xml:id="figure-simple-eigenvector">
82228222
<caption>A simple eigenvector demonstration</caption>
82238223

8224-
<interactive xml:id="interactive-simple-eigenvector" platform="javascript" width="60%" source="code/austin/figures.js code/austin/simple-ev.js" preview="preview/simple-eigenvector-preview.jpg">
8224+
<interactive xml:id="interactive-simple-eigenvector" platform="javascript" width="60%" aspect-ratio="1:1" source="code/austin/figures.js code/austin/simple-ev.js" resize-behavior="fixed-height" preview="preview/simple-eigenvector-preview.jpg">
82258225
<slate xml:id="eigenvector" surface="canvas"/>
82268226
<instructions>
82278227
<p>Let <m>\vec{x}</m> be represented by the red arrow, and <m>A\vec{x}</m> by the grey arrow, for some particular <m>2\times 2</m> matrix <m>A</m>. Drag the <em>tip</em> of the red arrow to see the grey arrow change.</p>
@@ -8402,7 +8402,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
84028402

84038403
<figure xml:id="figure-interactive-slopes">
84048404
<caption>Tangent and secant slopes</caption>
8405-
<interactive xml:id="interactive-slopes" platform="javascript" width="100%" aspect="6:8" source="https://code.jquery.com/jquery-1.11.3.min.js https://d3js.org/d3.v3.min.js https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.2.1/math.min.js code/mcclure/slope.js" css="code/mcclure/slope.css">
8405+
<interactive xml:id="interactive-slopes" platform="javascript" width="100%" aspect="6:8.1" source="https://code.jquery.com/jquery-1.11.3.min.js https://d3js.org/d3.v3.min.js https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.2.1/math.min.js code/mcclure/slope.js" css="code/mcclure/slope.css">
84068406
<!-- intro text, plus curve radio buttons -->
84078407
<slate xml:id="function-list" surface="html" aspect="6:2">
84088408
<div class="p" xmlns="http://www.w3.org/1999/xhtml">
@@ -8990,7 +8990,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
89908990

89918991
<figure xml:id="figure-threejs-catenoid-surface">
89928992
<caption><c>threejs</c> catenoid surface, from <m>n</m>-Category Cafe</caption>
8993-
<interactive xml:id="interactive-threejs-catenoid-surface" platform="javascript" width="75%" aspect="2:1" source="https://cdn.rawgit.com/mrdoob/three.js/r80/build/three.min.js https://cdn.rawgit.com/mrdoob/three.js/r80/examples/js/controls/OrbitControls.js code/threejs/catenoid.js">
8993+
<interactive xml:id="interactive-threejs-catenoid-surface" platform="javascript" width="75%" aspect="2:1" source="https://cdn.rawgit.com/mrdoob/three.js/r80/build/three.min.js https://cdn.rawgit.com/mrdoob/three.js/r80/examples/js/controls/OrbitControls.js code/threejs/catenoid.js" resize-behavior="responsive">
89948994
<slate xml:id="threejs-catenoid-surface" surface="div" aspect="2:1"/>
89958995
</interactive>
89968996
</figure>

xsl/pretext-common.xsl

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3094,20 +3094,38 @@ Book (with parts), "section" at level 3
30943094
<!-- elsewhere, and these are are pure text templates -->
30953095
<!-- NB 3D "sageplot" needs an "iframe" with pixels for size -->
30963096
<xsl:template match="slate|audio|video|interactive|image[asymptote]|image[sageplot]" mode="get-width-pixels">
3097+
<xsl:variable name="local-design-width-pixels">
3098+
<xsl:choose>
3099+
<xsl:when test="@design-width-pixels">
3100+
<xsl:value-of select="@design-width-pixels" />
3101+
</xsl:when>
3102+
<xsl:otherwise>
3103+
<xsl:value-of select="$design-width-pixels" />
3104+
</xsl:otherwise>
3105+
</xsl:choose>
3106+
</xsl:variable>
30973107
<xsl:variable name="width-percent">
30983108
<xsl:apply-templates select="." mode="get-width-percentage" />
30993109
</xsl:variable>
31003110
<xsl:variable name="width-fraction">
31013111
<xsl:value-of select="substring-before($width-percent,'%') div 100" />
31023112
</xsl:variable>
3103-
<xsl:value-of select="round($design-width-pixels * $width-fraction)" />
3113+
<xsl:value-of select="round($local-design-width-pixels * $width-fraction)" />
31043114
</xsl:template>
31053115

31063116
<!-- Square by default, when asked. Can override -->
31073117
<xsl:template match="slate|audio|video|interactive|image[asymptote]|image[sageplot]" mode="get-height-pixels">
31083118
<xsl:param name="default-aspect" select="'1:1'" />
3109-
<xsl:param name="local-design-width-pixels" select="$design-width-pixels" />
3110-
3119+
<xsl:variable name="local-design-width-pixels">
3120+
<xsl:choose>
3121+
<xsl:when test="@design-width-pixels">
3122+
<xsl:value-of select="@design-width-pixels" />
3123+
</xsl:when>
3124+
<xsl:otherwise>
3125+
<xsl:value-of select="$design-width-pixels" />
3126+
</xsl:otherwise>
3127+
</xsl:choose>
3128+
</xsl:variable>
31113129
<xsl:variable name="width-percent">
31123130
<xsl:apply-templates select="." mode="get-width-percentage" />
31133131
</xsl:variable>

xsl/pretext-html.xsl

Lines changed: 38 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -9689,7 +9689,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
96899689
<iframe src="https://www.desmos.com/calculator/{@desmos}">
96909690
<xsl:apply-templates select="." mode="html-id-attribute"/>
96919691
<xsl:apply-templates select="." mode="iframe-dark-mode-attribute" />
9692-
<xsl:apply-templates select="." mode="get-interactive-sizing-styles" />
9692+
<xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
96939693
</iframe>
96949694
</xsl:template>
96959695

@@ -9771,7 +9771,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
97719771
<iframe src="https://www.geogebra.org/material/iframe/id/{@geogebra}/scaleContainerClass/interactive-iframe-container/width/{$ggbMaterialWidth}/height/{$ggbMaterialHeight}/allowUpscale/true/autoHeight/true/border/888888/smb/false/stb/{$ggbToolBar}/stbh/{$ggbToolBar}/ai/{$ggbAlgebraInput}/asb/false/sri/{$ggbResetIcon}/rc/false/ld/false/sdz/{$ggbShiftDragZoom}/ctl/false">
97729772
<xsl:apply-templates select="." mode="html-id-attribute"/>
97739773
<xsl:apply-templates select="." mode="iframe-dark-mode-attribute" />
9774-
<xsl:apply-templates select="." mode="get-interactive-sizing-styles" />
9774+
<xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
97759775
</iframe>
97769776
</xsl:template>
97779777

@@ -9805,7 +9805,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
98059805
<xsl:variable name="full-url" select="concat($cp3d-endpoint, '?', @calcplot3d)" />
98069806
<iframe src="{$full-url}">
98079807
<xsl:apply-templates select="." mode="html-id-attribute"/>
9808-
<xsl:apply-templates select="." mode="get-interactive-sizing-styles" />
9808+
<xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
98099809
<xsl:apply-templates select="." mode="iframe-dark-mode-attribute" />
98109810
</iframe>
98119811
</xsl:template>
@@ -9839,7 +9839,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
98399839
</xsl:variable>
98409840
<iframe src="https://www.falstad.com/circuit/circuitjs.html?cct='{$url-string}'">
98419841
<xsl:apply-templates select="." mode="html-id-attribute"/>
9842-
<xsl:apply-templates select="." mode="get-interactive-sizing-styles" />
9842+
<xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
98439843
<xsl:apply-templates select="." mode="iframe-dark-mode-attribute" />
98449844
</iframe>
98459845
</xsl:template>
@@ -9862,7 +9862,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
98629862
</xsl:variable>
98639863
<iframe src="{$location}">
98649864
<xsl:apply-templates select="." mode="html-id-attribute"/>
9865-
<xsl:apply-templates select="." mode="get-interactive-sizing-styles" />
9865+
<xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
98669866
<xsl:apply-templates select="." mode="iframe-dark-mode-attribute" />
98679867
</iframe>
98689868
</xsl:template>
@@ -9871,7 +9871,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
98719871
<xsl:template match="interactive[@platform]" mode="iframe-interactive">
98729872
<iframe>
98739873
<xsl:apply-templates select="." mode="html-id-attribute"/>
9874-
<xsl:apply-templates select="." mode="get-interactive-sizing-styles" />
9874+
<xsl:apply-templates select="." mode="interactive-sizing-style-attribute" />
98759875
<xsl:attribute name="src">
98769876
<xsl:apply-templates select="." mode="iframe-filename" />
98779877
</xsl:attribute>
@@ -9917,8 +9917,9 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
99179917
<xsl:call-template name="latex-macros"/>
99189918
<div>
99199919
<!-- the actual interactive bit -->
9920-
<xsl:apply-templates select="." mode="get-interactive-sizing-styles" />
9920+
<!-- <xsl:apply-templates select="." mode="interactive-sizing-style-attribute" /> -->
99219921
<!-- <xsl:apply-templates select="." mode="size-pixels-style-attribute" /> -->
9922+
99229923
<!-- stack, else use a layout -->
99239924
<xsl:apply-templates select="slate|sidebyside|sbsgroup" />
99249925
<!-- accumulate script tags *after* HTML elements -->
@@ -10048,7 +10049,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
1004810049
<xsl:attribute name="id">
1004910050
<xsl:value-of select="@xml:id" />
1005010051
</xsl:attribute>
10051-
<xsl:apply-templates select="." mode="size-pixels-style-attribute" />
10052+
<!-- <xsl:apply-templates select="." mode="size-pixels-style-attribute" /> -->
1005210053
</div>
1005310054
</xsl:template>
1005410055

@@ -10071,15 +10072,15 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
1007110072
</xsl:template>
1007210073

1007310074
<xsl:template match="slate[@surface = 'canvas']">
10074-
<!-- display:block allows precise sizes, without -->
10075-
<!-- having inline content with extra line height, -->
10076-
<!-- or whatever, inducing scroll bars -->
10077-
<canvas style="display:block">
10075+
<canvas>
1007810076
<xsl:attribute name="id">
1007910077
<xsl:value-of select="@xml:id" />
1008010078
</xsl:attribute>
1008110079
<xsl:apply-templates select="." mode="size-pixels-attributes" />
10082-
<!-- <xsl:apply-templates select="." mode="get-interactive-sizing-styles" /> -->
10080+
<!-- <xsl:apply-templates select="." mode="interactive-sizing-style-attribute" /> -->
10081+
<xsl:attribute name="class">
10082+
<xsl:text>interactive--slate</xsl:text>
10083+
</xsl:attribute>
1008310084
</canvas>
1008410085
</xsl:template>
1008510086

@@ -10455,32 +10456,19 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
1045510456
</xsl:template>
1045610457

1045710458
<!-- Sizing styles for interactives -->
10458-
<!-- Two major modes based on how to resize: responsive or fixed -->
10459-
<!-- fixed applies aspect ratio at build as css height -->
10459+
<!-- Two major modes based on how to resize: responsive or fixed-height -->
10460+
<!-- fixed-height applies aspect ratio at build as css height -->
1046010461
<!-- responsive dynamically applies aspect ratio via css -->
10461-
<xsl:template match="interactive" mode="get-interactive-sizing-styles">
10462+
<xsl:template match="interactive" mode="interactive-sizing-style-attribute">
1046210463
<xsl:variable name="resize-behavior">
1046310464
<xsl:apply-templates select="." mode="get-resize-behavior"/>
1046410465
</xsl:variable>
10465-
<!-- width in either mode will either come from supplied design-width -->
10466-
<!-- or be calculated from width % and global design-width -->
10467-
<xsl:variable name="has-design-width" select="@design-width != ''"/>
10468-
<xsl:variable name="width-pixels">
10469-
<xsl:choose>
10470-
<xsl:when test="$has-design-width">
10471-
<xsl:value-of select="@design-width"/>
10472-
</xsl:when>
10473-
<xsl:otherwise>
10474-
<xsl:apply-templates select="." mode="get-width-pixels"/>
10475-
</xsl:otherwise>
10476-
</xsl:choose>
10477-
</xsl:variable>
1047810466
<xsl:attribute name="style">
1047910467
<xsl:choose>
1048010468
<xsl:when test="$resize-behavior = 'responsive'">
1048110469
<xsl:text>max-width: </xsl:text>
1048210470
<xsl:choose>
10483-
<xsl:when test="$has-design-width">
10471+
<xsl:when test="@design-width != ''">
1048410472
<xsl:value-of select="@design-width"/>
1048510473
<xsl:text>px; </xsl:text>
1048610474
</xsl:when>
@@ -10497,35 +10485,23 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
1049710485
<xsl:text>;</xsl:text>
1049810486
</xsl:when>
1049910487
<xsl:otherwise>
10500-
<!-- resize-behavior: fixed -->
10488+
<!-- resize-behavior: fixed-height -->
1050110489
<xsl:text>width:</xsl:text>
10502-
<xsl:choose>
10503-
<xsl:when test="$has-design-width">
10504-
<xsl:value-of select="@design-width"/>
10505-
</xsl:when>
10506-
<xsl:otherwise>
10507-
<xsl:apply-templates select="." mode="get-width-pixels"/>
10508-
</xsl:otherwise>
10509-
</xsl:choose>
10490+
<xsl:apply-templates select="." mode="get-width-pixels"/>
1051010491
<xsl:text>px;</xsl:text>
10511-
<xsl:text>max-width: 100%;</xsl:text>
10492+
<!-- <xsl:text>max-width: 100%;</xsl:text> -->
1051210493
<xsl:text>height:</xsl:text>
10513-
<xsl:choose>
10514-
<xsl:when test="$has-design-width">
10515-
<xsl:apply-templates select="." mode="get-height-pixels">
10516-
<xsl:with-param name="local-design-width-pixels" select="@design-width"/>
10517-
</xsl:apply-templates>
10518-
</xsl:when>
10519-
<xsl:otherwise>
10520-
<xsl:apply-templates select="." mode="get-height-pixels"/>
10521-
</xsl:otherwise>
10522-
</xsl:choose>
10494+
<xsl:apply-templates select="." mode="get-height-pixels"/>
1052310495
<xsl:text>px;</xsl:text>
1052410496
</xsl:otherwise>
1052510497
</xsl:choose>
1052610498
</xsl:attribute>
1052710499
</xsl:template>
1052810500

10501+
<xsl:template match="slate" mode="interactive-sizing-style-attribute">
10502+
<xsl:apply-templates select="ancestor::interactive" mode="interactive-sizing-style-attribute"/>
10503+
</xsl:template>
10504+
1052910505
<xsl:template match="interactive" mode="get-resize-behavior">
1053010506
<xsl:variable name="platform" select="@interactive-platform"/>
1053110507
<xsl:choose>
@@ -10541,6 +10517,18 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
1054110517
</xsl:choose>
1054210518
</xsl:template>
1054310519

10520+
<xsl:template match="slate" mode="get-resize-behavior">
10521+
<xsl:choose>
10522+
<xsl:when test="@resize-behavior != ''">
10523+
<xsl:value-of select="@resize-behavior"/>
10524+
</xsl:when>
10525+
<xsl:otherwise>
10526+
<xsl:varaible name="container" select="ancestor::interactive"/>
10527+
<xsl:apply-templates select="$container/@interactive-platform" mode="get-resize-behavior"/>
10528+
</xsl:otherwise>
10529+
</xsl:choose>
10530+
</xsl:template>
10531+
1054410532
<!-- Next two utilities write attributes, so cannot go in -common -->
1054510533

1054610534
<!-- iframes, etc, need size as a pair of attributes in pixels -->

0 commit comments

Comments
 (0)