Subversion Repositories wimsdev

Rev

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