WebSVN – wimsdev – Diff – /trunk/wims/public_html/scripts/slib/geo2D/jsxgraph

-!!! JsxGraph responsive Version 3 - 23/06/2022
+!!! 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,[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]);\
+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
   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_nocssjs=nocssjs
 !endif
 ## resize to resize the points with the width of the screen ##
 ## REQUIRES THE BOARD'S NAME ##
-!if resize iswordof $slib_option
-  slib_js_resizePt=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) });\
-      }\
-    };\
-  }
-!else
-  slib_js_resizePt=
-!endif
 !goto result
 :result
 !if $slib_nocssjs=
       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
   <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="jsxwrap_$slib_jsxbox jsxwrap">\
+  <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 $slib_jsversion=responsive
+!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){\
-     $slib_js_resizePt\
+      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) });\
+        }\
+      }\
+    }\
   }\
-  document.addEventListener('load', updateSize_$slib_jsxbox);\
-  window.addEventListener('resize', updateSize_$slib_jsxbox);\
   </script>
 !endif
-slib_out=$slib_out\
-<script>\
-/*<![CDATA[*/\
-$slib_script\
-/*]]>*/\
-</script>
 !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

Subversion Repositories wimsdev

(root)/trunk/wims/public_html/scripts/slib/geo2D/jsxgraph – Rev 16883 → 16894