Subversion Repositories wimsdev

!!! JsxGraph responsive Version 5 - 23/05/2025 gmarbeuf
!!! CSS use aspect-ratio
!!! works with jsxgraph 1.11.1 (3D module)
!!! options : max-width, min-width, center, nocssjs
!!! resize is cancelled otherwise option jsxgraph full-screen doesn't work
!!! scroll to add a horizontal scrolling bar (class wims_scrollable)
!!! Automatic research of the board's name if not indicated

!if $wims_read_parm!=slib_header
 !goto proc
!endif

slib_require=jsxgraph
slib_author=Bernadette,Perrin-Riou;Gilles, Marbeuf

slib_example=jsxbox brd,[300x300,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]);\
j1 brd1,[400x400,min=20% max=50% center],var brd1=JXG.JSXGraph.initBoard('j1',{boundingbox:[-2.5,6.5,4,-7.5],axis:true,showCopyright:false,keepAspectRatio:true,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'});\
j2 brd2,[300x200,max=400px],var brd2=JXG.JSXGraph.initBoard('j2',{boundingbox:[-6,2,6,-3],axis:true,showCopyright:false,showFullscreen:true,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();}]);\
j3 brd3,[400x400,min=300px max=500px center],var brd3=JXG.JSXGraph.initBoard('j3',{boundingbox:[-8,8,8,-8],pan:{enabled:true,needTwoFingers:true,needShift:true},keepaspectratio:false,axis:false,showFullscreen:true});var view=brd3.create('view3d',[[-6,-3],[8,8],[[-5,5],[-5,5],[-5,5]]],{projection:'parallel',az:{slider:{visible:true,point1:{pos:[5,-4]},point2:{pos:[5,4]},label:{anchorX:'middle'}}},el:{slider:{visible:true,point1:{pos:[6,-5]},point2:{pos:[6,3]},label:{anchorX:'middle'}}}});var A=view.create('point3d',[-5,0,1],{size:5});var B=view.create('point3d',[3,1,2],{size:5});var C=view.create('point3d',[1,-2,3],{size:5});var D=view.create('polygon3d',[A,B,C],{highlight:false,gradient:'linear',gradientSecondColor:'white',fillColor:'blue',borders:{strokecolor:'blue',strokeWidth:1}});

!exit

:proc

#### PARAM 1 : ID AND BOARD ####
slib_jsxbox= $(wims_read_parm[1])
!distribute words $slib_jsxbox into slib_jsxbox,slib_board

#### PARAM 2: ONLY SIZES OR SIZES AND OPTIONS ####
slib_resp=$(wims_read_parm[2])

#### PARAM 3:  ####
slib_script= $(wims_read_parm[3..-1])

#### TO DETECT OLD (NO RESPONSIVE) AND NEW VERSION (RESPONSIVE) OF THE SLIB ####
slib_char1=!char 1 of $slib_resp
slib_char2=!char -1 of $slib_resp
!if ($slib_char1=[) and ($slib_char2=])
  slib_jsversion=responsive
  !goto responsive
!else
  slib_jsversion=no_responsive
  !goto no_responsive
!endif

:no_responsive
slib_size=!declosing $slib_resp
slib_size=!replace internal x by , in $slib_size
slib_width=!nospace $(slib_size[1]) px
slib_height=!nospace $(slib_size[2]) px
!goto result

:responsive
slib_resp=!declosing $slib_resp
slib_size=$(slib_resp[1])
slib_size=!replace internal x by , in $slib_size
slib_width=!nospace $(slib_size[1])
slib_height=!nospace $(slib_size[2])
slib_ratio=$slib_width/$slib_height

### AUTOMATIC RESEARCH OF BOARD'S NAME ###
!if $slib_board=$empty
  slib_tempbrd=$slib_script
  slib_tempbrd=!replace internal initBoard by $ $@@@@$ $ in $slib_tempbrd
  slib_tempbrd=!replace internal . by $ $ in $slib_tempbrd
  slib_pos=!positionof word @@@@ in $slib_tempbrd
  slib_tempbrd=!replace internal = by  in $slib_tempbrd
  slib_tempbrd=!words2items $slib_tempbrd
  slib_tempbrd=!nonempty item $slib_tempbrd
  slib_itempos=!positionof item @@@@ in $slib_tempbrd
  slib_board=!item $[$slib_itempos-3] of $slib_tempbrd
!endif

### OPTIONS ###
slib_option=$(slib_resp[2])

## scroll ##
!if scroll iswordof $slib_option
  slib_tagscroll1=<div class="wims_scrollable">
  slib_tagscroll2=</div>
!else
  slib_tagscroll1=
  slib_tagscroll2=
!endif

## center ##
!if center iswordof $slib_option
  slib_css_jsxwrap=margin:.5rem auto;
!else
  slib_css_jsxwrap=
!endif

## min and max width ##
## user must add unit like px or % or ...##
slib_minwidth=!getopt min in $slib_option
slib_maxwidth=!getopt max in $slib_option

!if $(slib_maxwidth) !=$empty
  slib_css_jsxwrap=$slib_css_jsxwrap\
  max-width:$(slib_maxwidth);
!endif
!if $(slib_minwidth) !=$empty
  slib_css_jsxwrap=$slib_css_jsxwrap\
  min-width:$slib_minwidth;
!endif
slib_css_jsxwrap=$slib_css_jsxwrap\
height:auto;

### nocssjs ###
!if nocssjs iswordof $slib_option
  slib_nocssjs=nocssjs
!endif

!goto result

:result

!if $slib_nocssjs=
  slib_out=<link rel="stylesheet" href="scripts/js/jsxgraph/jsxgraph.css">
!endif
!if $slib_jsversion=responsive
  slib_out=$slib_out\
  <style>\
  div.jsxwrap_$slib_jsxbox{$slib_css_jsxwrap}\
  div.resp_$slib_jsxbox{\
    aspect-ratio: $slib_ratio;\
    box-sizing: border-box;\
  }\
  @media screen and (max-height:500px) {\
    div.resp_$slib_jsxbox{\
      margin:0 auto;\
      width: calc(100vmin - 2em);\
      height: calc(100vmin - 2em);\
      padding:0;\
    }\
  }\
  </style>
!endif
!if $slib_nocssjs=
  slib_out=$slib_out\
  <script src="scripts/js/jsxgraph/jsxgraphcore.js" charset="utf-8"></script>
!endif
!if $slib_jsversion=no_responsive
  slib_out=$slib_out\
  <div class="wims_scrollable jsxwrap">\
    <div id="$slib_jsxbox" class="jxgbox" style="width:$slib_width; height:$slib_height"></div>\
  </div>
!else
  slib_out=$slib_out\
  $slib_tagscroll1\
  <div class="jsxwrap_$slib_jsxbox jsxwrap">\
    <div id="$slib_jsxbox" class="jxgbox resp_$slib_jsxbox"></div>\
  </div>\
  $slib_tagscroll2
!endif

slib_out=$slib_out\
<script>\
/*<![CDATA[*/\
$slib_script\
/*]]>*/\
</script>

!reset slib_script slib_size slib_width slib_height slib_jsxbox
!if $slib_jsversion=responsive
  !reset slib_ratio slib_board slib_option slib_tagscroll1 slib_tagscroll2 slib_nocssjs
!endif
!reset slib_jsversion