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

-!!! JsxGraph responsive Version 4 - 05/07/2022
+!!! JsxGraph responsive Version 5 - 23/05/2025 gmarbeuf
-!!! CSS hack padding-bottom instead aspect-ratio because not supported by old browser
+!!! CSS use aspect-ratio
-!!! works with jsxgraph 1.4.2
+!!! works with jsxgraph 1.11.1 (3D module)
-!!! options : max-width, min-width, resize (to resize points with the width of the applet),
+!!! options : max-width, min-width, center, nocssjs
+!!! resize is cancelled otherwise option jsxgraph full-screen doesn't work
-!!! center, nocssjs
+!!! scroll to add a horizontal scrolling bar (class wims_scrollable)
 !!! 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]);\
+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=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'});\
+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();}]);\
-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();}]);
+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
 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]
+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
 ### OPTIONS ###
 slib_option=$(slib_resp[2])
 ## scroll ##
 !if scroll iswordof $slib_option
-  slib_scroll=wims_scrollable
+  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
 ### 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_jsversion=responsive
   slib_out=$slib_out\
   <style>\
   div.jsxwrap_$slib_jsxbox{$slib_css_jsxwrap}\
   div.resp_$slib_jsxbox{\
-    height:0;\
-    padding-bottom:$slib_ratio%;\
+    aspect-ratio: $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);\
   <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="$slib_scroll jsxwrap_$slib_jsxbox jsxwrap">\
+  <div class="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>
+  </div>\
+  $slib_tagscroll2
 !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);\
+!reset slib_script slib_size slib_width slib_height 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
+!if $slib_jsversion=responsive
-  !reset slib_script slib_size slib_width slib_height slib_jsxbox slib_jsversion
+  !reset slib_ratio slib_board slib_option slib_tagscroll1 slib_tagscroll2 slib_nocssjs
-!else
-  !reset slib_script slib_size slib_width slib_height slib_jsxbox slib_ratio slib_board slib_jsversion slib_option
 !endif
+!reset slib_jsversion

Subversion Repositories wimsdev

(root)/trunk/wims/public_html/scripts/slib/geo2D/jsxgraph – Rev 17173 → 18587