Rev 16894 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed
Rev | Author | Line No. | Line |
---|---|---|---|
16894 | gmarbeuf | 1 | !!! JsxGraph responsive Version 4 - 05/07/2022 |
16584 | gmarbeuf | 2 | !!! CSS hack padding-bottom instead aspect-ratio because not supported by old browser |
3 | !!! works with jsxgraph 1.4.2 |
||
16857 | gmarbeuf | 4 | !!! options : max-width, min-width, resize (to resize points with the width of the applet), |
16833 | gmarbeuf | 5 | !!! center, nocssjs |
16857 | gmarbeuf | 6 | !!! Automatic research of the board's name if not indicated |
16894 | gmarbeuf | 7 | !!! New option : scroll to add a horizontal scrolling bar (class wims_scrollable) |
8 | !!! WARNING : with version 1.4.4 of jsxgraph, javascript updateSize function |
||
9 | !!! is needed even the option resize is not called with this line |
||
10 | !!! slib_board.resizeContainer(theWidth,theHeight); |
||
16584 | gmarbeuf | 11 | |
4904 | bpr | 12 | !if $wims_read_parm!=slib_header |
16584 | gmarbeuf | 13 | !goto proc |
4904 | bpr | 14 | !endif |
16584 | gmarbeuf | 15 | |
4904 | bpr | 16 | slib_require=jsxgraph |
16584 | gmarbeuf | 17 | slib_author=Bernadette,Perrin-Riou;Gilles, Marbeuf |
18 | |||
16894 | gmarbeuf | 19 | slib_example=jsxbox brd,[300 x 300,min=200px max=400px],var brd = JXG.JSXGraph.initBoard('jsxbox', {axis:true,originX: 150, originY: 150, unitX: 10, unitY: 10});p1 = brd.create('point', [-2,1]);p2 = brd.create('point', [0,function () { return p1.X();}]);brd.create('line',[p1,p2]);\ |
16857 | gmarbeuf | 20 | j1 brd1,[400x400,min=20% max=60% center resize],var brd1 = JXG.JSXGraph.initBoard('j1',{boundingbox: [-2.5, 6.5, 4, -7.5],axis: true,showCopyright: false,keepAspectRatio:true,moveTarget: document,zoom: {pinchHorizontal: false,pinchVertical: false,pinchSensitivity: 7,min: 0.5,max: 2,wheel: true,needShift: false},pan: {needTwoFingers: true,needShift: false}});var A = brd1.create('point', [2.5, 1],{face:'plus',size:10});var B = brd1.create('point', [-1.25, 0.5],{face:'cross',size:4});var C = brd1.create('point', [-1, -5],{face:'circle',size:4});var el = brd1.create('hyperbola', [A, B, C]);var el2 = brd1.create('circle', [A, B], {strokecolor:'#f0f'});\ |
21 | j2 brd2,[300x200,max=400px],var brd2 = JXG.JSXGraph.initBoard('j2',{boundingbox: [-6, 2, 6, -3],axis: true,showCopyright: false,zoom: {pinchHorizontal: false,pinchVertical: false,pinchSensitivity: 7,min: 0.5,max: 2,wheel: true,needShift: false},pan:{needTwoFingers: true,needShift:false}});var s = brd2.create('slider',[[-2,-2],[2,-2],[-6,5,6]]);var graph = brd2.create('functiongraph',[function(x){ return Math.sin(Math.pow(x,2));},-2,function(){return s.Value();}]); |
||
4904 | bpr | 22 | |
23 | !exit |
||
24 | |||
25 | :proc |
||
26 | |||
16857 | gmarbeuf | 27 | #### PARAM 1 : ID AND BOARD #### |
4904 | bpr | 28 | slib_jsxbox= $(wims_read_parm[1]) |
16857 | gmarbeuf | 29 | !distribute words $slib_jsxbox into slib_jsxbox,slib_board |
16584 | gmarbeuf | 30 | |
16857 | gmarbeuf | 31 | #### PARAM 2: ONLY SIZES OR SIZES AND OPTIONS #### |
16584 | gmarbeuf | 32 | slib_resp=$(wims_read_parm[2]) |
33 | |||
16857 | gmarbeuf | 34 | #### PARAM 3: #### |
35 | slib_script= $(wims_read_parm[3..-1]) |
||
16584 | gmarbeuf | 36 | |
37 | #### TO DETECT OLD (NO RESPONSIVE) AND NEW VERSION (RESPONSIVE) OF THE SLIB #### |
||
38 | slib_char1=!char 1 of $slib_resp |
||
39 | slib_char2=!char -1 of $slib_resp |
||
40 | !if ($slib_char1=[) and ($slib_char2=]) |
||
16862 | bpr | 41 | slib_jsversion=responsive |
16584 | gmarbeuf | 42 | !goto responsive |
43 | !else |
||
16862 | bpr | 44 | slib_jsversion=no_responsive |
16584 | gmarbeuf | 45 | !goto no_responsive |
46 | !endif |
||
47 | |||
48 | :no_responsive |
||
16857 | gmarbeuf | 49 | slib_size=!declosing $slib_resp |
50 | slib_size=!replace internal x by , in $slib_size |
||
51 | slib_width=!nospace $(slib_size[1]) px |
||
52 | slib_height=!nospace $(slib_size[2]) px |
||
53 | !goto result |
||
4904 | bpr | 54 | |
16584 | gmarbeuf | 55 | :responsive |
56 | slib_resp=!declosing $slib_resp |
||
57 | slib_size=$(slib_resp[1]) |
||
58 | slib_size=!replace internal x by , in $slib_size |
||
59 | slib_width=!nospace $(slib_size[1]) |
||
60 | slib_height=!nospace $(slib_size[2]) |
||
61 | slib_ratio=$[$slib_height*100/$slib_width] |
||
62 | |||
16857 | gmarbeuf | 63 | ### AUTOMATIC RESEARCH OF BOARD'S NAME ### |
64 | !if $slib_board=$empty |
||
65 | slib_tempbrd=$slib_script |
||
66 | slib_tempbrd=!replace internal initBoard by $ $@@@@$ $ in $slib_tempbrd |
||
67 | slib_tempbrd=!replace internal . by $ $ in $slib_tempbrd |
||
68 | slib_pos=!positionof word @@@@ in $slib_tempbrd |
||
69 | slib_tempbrd=!replace internal = by in $slib_tempbrd |
||
70 | slib_tempbrd=!words2items $slib_tempbrd |
||
71 | slib_tempbrd=!nonempty item $slib_tempbrd |
||
72 | slib_itempos=!positionof item @@@@ in $slib_tempbrd |
||
73 | slib_board=!item $[$slib_itempos-3] of $slib_tempbrd |
||
74 | !endif |
||
16584 | gmarbeuf | 75 | |
16857 | gmarbeuf | 76 | ### OPTIONS ### |
77 | slib_option=$(slib_resp[2]) |
||
16833 | gmarbeuf | 78 | |
16894 | gmarbeuf | 79 | ## scroll ## |
80 | !if scroll iswordof $slib_option |
||
81 | slib_scroll=wims_scrollable |
||
82 | !endif |
||
83 | |||
16857 | gmarbeuf | 84 | ## center ## |
16584 | gmarbeuf | 85 | !if center iswordof $slib_option |
16833 | gmarbeuf | 86 | slib_css_jsxwrap=margin:.5rem auto; |
16584 | gmarbeuf | 87 | !else |
16857 | gmarbeuf | 88 | slib_css_jsxwrap= |
16584 | gmarbeuf | 89 | !endif |
90 | |||
16857 | gmarbeuf | 91 | ## min and max width ## |
92 | ## user must add unit like px or % or ...## |
||
93 | slib_minwidth=!getopt min in $slib_option |
||
94 | slib_maxwidth=!getopt max in $slib_option |
||
16833 | gmarbeuf | 95 | |
16857 | gmarbeuf | 96 | !if $(slib_maxwidth) !=$empty |
97 | slib_css_jsxwrap=$slib_css_jsxwrap\ |
||
98 | max-width:$(slib_maxwidth); |
||
16833 | gmarbeuf | 99 | !endif |
16857 | gmarbeuf | 100 | !if $(slib_minwidth) !=$empty |
101 | slib_css_jsxwrap=$slib_css_jsxwrap\ |
||
102 | min-width:$slib_minwidth; |
||
16833 | gmarbeuf | 103 | !endif |
16584 | gmarbeuf | 104 | slib_css_jsxwrap=$slib_css_jsxwrap\ |
105 | height:auto; |
||
106 | |||
16857 | gmarbeuf | 107 | ### nocssjs ### |
108 | !if nocssjs iswordof $slib_option |
||
109 | slib_nocssjs=nocssjs |
||
110 | !endif |
||
111 | |||
112 | ## resize to resize the points with the width of the screen ## |
||
113 | ## REQUIRES THE BOARD'S NAME ## |
||
16894 | gmarbeuf | 114 | |
115 | |||
16584 | gmarbeuf | 116 | !goto result |
117 | |||
118 | :result |
||
119 | |||
16833 | gmarbeuf | 120 | !if $slib_nocssjs= |
17173 | bpr | 121 | slib_out=<link rel="stylesheet" href="scripts/js/jsxgraph/jsxgraph.css"> |
16833 | gmarbeuf | 122 | !endif |
16862 | bpr | 123 | !if $slib_jsversion=responsive |
16584 | gmarbeuf | 124 | slib_out=$slib_out\ |
125 | <style>\ |
||
126 | div.jsxwrap_$slib_jsxbox{$slib_css_jsxwrap}\ |
||
127 | div.resp_$slib_jsxbox{\ |
||
128 | height:0;\ |
||
129 | padding-bottom:$slib_ratio%;\ |
||
130 | box-sizing: border-box;\ |
||
16857 | gmarbeuf | 131 | /*width:100%;*/\ |
16584 | gmarbeuf | 132 | }\ |
133 | @media screen and (max-height:500px) {\ |
||
134 | div.resp_$slib_jsxbox{\ |
||
135 | margin:0 auto;\ |
||
136 | width: calc(100vmin - 2em);\ |
||
137 | height: calc(100vmin - 2em);\ |
||
138 | padding:0;\ |
||
139 | }\ |
||
140 | }\ |
||
141 | </style> |
||
142 | !endif |
||
16833 | gmarbeuf | 143 | !if $slib_nocssjs= |
144 | slib_out=$slib_out\ |
||
16860 | gmarbeuf | 145 | <script src="scripts/js/jsxgraph/jsxgraphcore.js" charset="utf-8"></script> |
16833 | gmarbeuf | 146 | !endif |
16862 | bpr | 147 | !if $slib_jsversion=no_responsive |
16584 | gmarbeuf | 148 | slib_out=$slib_out\ |
16883 | obado | 149 | <div class="wims_scrollable jsxwrap">\ |
16857 | gmarbeuf | 150 | <div id="$slib_jsxbox" class="jxgbox" style="width:$slib_width; height:$slib_height"></div>\ |
16584 | gmarbeuf | 151 | </div> |
152 | !else |
||
153 | slib_out=$slib_out\ |
||
16894 | gmarbeuf | 154 | <div class="$slib_scroll jsxwrap_$slib_jsxbox jsxwrap">\ |
16883 | obado | 155 | <div id="$slib_jsxbox" class="jxgbox resp_$slib_jsxbox"></div>\ |
156 | <canvas class="jsxg_placeholder" width="$slib_width" height="1"></canvas>\ |
||
16584 | gmarbeuf | 157 | </div> |
158 | !endif |
||
16894 | gmarbeuf | 159 | |
160 | slib_out=$slib_out\ |
||
161 | <script>\ |
||
162 | /*<![CDATA[*/\ |
||
163 | $slib_script\ |
||
164 | /*]]>*/\ |
||
165 | </script> |
||
166 | |||
167 | !if resize iswordof $slib_option |
||
16584 | gmarbeuf | 168 | slib_out=$slib_out\ |
169 | <script>\ |
||
16894 | gmarbeuf | 170 | document.addEventListener('load', updateSize_$slib_jsxbox);\ |
171 | window.addEventListener('resize', updateSize_$slib_jsxbox);\ |
||
172 | window.onload = function() {updateSize_$slib_jsxbox()};\ |
||
16584 | gmarbeuf | 173 | function updateSize_$slib_jsxbox() {\ |
174 | var myid=document.getElementById("$slib_jsxbox");\ |
||
175 | myid.style.width="";\ |
||
176 | myid.style.height="";\ |
||
177 | var theWidth=myid.getBoundingClientRect().width;\ |
||
178 | var theHeight=myid.getBoundingClientRect().height;\ |
||
16894 | gmarbeuf | 179 | /*$slib_board.resizeContainer(theWidth,theHeight);*/\ |
180 | if(theWidth < 400){\ |
||
181 | cellSize = theWidth/100;\ |
||
182 | for (elt in $slib_board.objects) {\ |
||
183 | if (JXG.isPoint($slib_board.objects[elt])) {\ |
||
184 | $slib_board.objects[elt].setAttribute({ size: cellSize.toFixed(0) });\ |
||
185 | }\ |
||
186 | }\ |
||
187 | }\ |
||
16584 | gmarbeuf | 188 | }\ |
189 | </script> |
||
190 | !endif |
||
191 | |||
16862 | bpr | 192 | !if $slib_jsversion=no_responsive |
193 | !reset slib_script slib_size slib_width slib_height slib_jsxbox slib_jsversion |
||
16584 | gmarbeuf | 194 | !else |
16862 | bpr | 195 | !reset slib_script slib_size slib_width slib_height slib_jsxbox slib_ratio slib_board slib_jsversion slib_option |
16584 | gmarbeuf | 196 | !endif |