Subversion Repositories wimsdev

!!! JsxGraph responsive Version 4 - 05/07/2022

!!! CSS hack padding-bottom instead aspect-ratio because not supported by old browser

!!! works with jsxgraph 1.4.2

!!! options : max-width, min-width, resize (to resize points with the width of the applet),

!!! center, nocssjs

!!! Automatic research of the board's name if not indicated

!!! New option : scroll to add a horizontal scrolling bar (class wims_scrollable)

!!! WARNING : with version 1.4.4 of jsxgraph, javascript updateSize function

!!! is needed even the option resize is not called with this line

!!! slib_board.resizeContainer(theWidth,theHeight);

!if $wims_read_parm!=slib_header

 !goto proc

!endif

slib_require=jsxgraph

slib_author=Bernadette,Perrin-Riou;Gilles, Marbeuf

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]);\

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'});\

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();}]);

!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_height*100/$slib_width]

### 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_scroll=wims_scrollable

!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

## resize to resize the points with the width of the screen ##

## REQUIRES THE BOARD'S NAME ##

!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{\

    height:0;\

    padding-bottom:$slib_ratio%;\

    box-sizing: border-box;\

    /*width:100%;*/\

  }\

  @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\

  <div class="$slib_scroll jsxwrap_$slib_jsxbox jsxwrap">\

    <div id="$slib_jsxbox" class="jxgbox resp_$slib_jsxbox"></div>\

    <canvas class="jsxg_placeholder" width="$slib_width" height="1"></canvas>\

  </div>

!endif

slib_out=$slib_out\

<script>\

/*<![CDATA[*/\

$slib_script\

/*]]>*/\

</script>

!if resize iswordof $slib_option

  slib_out=$slib_out\

  <script>\

  document.addEventListener('load', updateSize_$slib_jsxbox);\

  window.addEventListener('resize', updateSize_$slib_jsxbox);\

  window.onload = function() {updateSize_$slib_jsxbox()};\

  function updateSize_$slib_jsxbox() {\

     var myid=document.getElementById("$slib_jsxbox");\

     myid.style.width="";\

     myid.style.height="";\

     var theWidth=myid.getBoundingClientRect().width;\

     var theHeight=myid.getBoundingClientRect().height;\

     /*$slib_board.resizeContainer(theWidth,theHeight);*/\

     if(theWidth < 400){\

      cellSize = theWidth/100;\

      for (elt in $slib_board.objects) {\

        if (JXG.isPoint($slib_board.objects[elt])) {\

          $slib_board.objects[elt].setAttribute({ size: cellSize.toFixed(0) });\

        }\

      }\

    }\

  }\

  </script>

!endif

!if $slib_jsversion=no_responsive

  !reset slib_script slib_size slib_width slib_height slib_jsxbox slib_jsversion

!else

  !reset slib_script slib_size slib_width slib_height slib_jsxbox slib_ratio slib_board slib_jsversion slib_option

!endif