add new feature: jsxgraph

data/lib.toml

@@ -62,6 +62,9 @@
   sri = "sha256-dsvC/UolMujQ/UQ7lVeJ7Q/FV3BSzWO0rc8iz1rqHQo="
   url = "https://cdn.jsdelivr.net/npm/typewriter-effect@2.13.1/dist/core.js"
 
+[js.jsxgraph]
+  sri = "sha256-vSFHJZi3+DbmVrl8xDFCHPI3jy9n7sbvlISCPqpVFrQ="
+  url = "https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraphcore.js"
 
 
 
@@ -74,6 +77,9 @@
   sri = "sha256-On01v36B8LRDuL2tqhqs7Gb3Cm/NIpsLFy4OarOodUA="
   url = "https://cdn.jsdelivr.net/npm/@rokt33r/js-sequence-diagrams@2.0.6-2/dist/sequence-diagram-min.css"
 
+[css.jsxgraph]
+  sri = "sha256-TiPwINPr/OB7izwBT0o+kJo/HchaLj6ln7fZpOzgXQU="
+  url = "https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraph.css"
 
 
 

exampleSite/content/en/posts/test-jsxgraph.md

@@ -0,0 +1,30 @@
+---
+title: "jsxgraph support"
+date: 2020-08-03T14:00:00+08:00
+description: "Dynamic Mathematics with JavaScript"
+draft: false
+enableToc: false
+enableTocContent: false
+tags:
+- 
+series:
+-
+categories:
+- diagram
+libraries:
+- jsxgraph
+image: images/feature1/graph.png
+---
+
+```jessiecode
+point(5, 5) <<id:'pt', name: 'point'>>;
+grid();
+axis([0,0],[0,1]);
+axis([0,0],[1,0]);
+
+a = slider([1, 3], [6, 3], [0, 5, 10]) <<name: 'arg'>>;
+f = function (x) {return 7*exp(-V(a)*x^2)*cos(6*PI*x);};
+g = functiongraph(f);
+
+$board.setView([-10, 10, 10, -10]);
+```

layouts/partials/script/single-script.html

@@ -71,6 +71,11 @@
   <script defer src="{{ $js.viz_render.url }}" integrity="{{ $js.viz_render.sri }}" crossorigin="anonymous"></script>
 {{ end }}
 
+{{ if in .Params.Libraries "jsxgraph" }}
+  <script defer src="{{ $js.jsxgraph.url }}" integrity="{{ $js.jsxgraph.sri }}" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="{{ $css.jsxgraph.url }}" integrity="{{ $css.jsxgraph.sri }}" crossorigin="anonymous" />
+{{ end }}
+
 <script>
   'use strict';
 
@@ -611,5 +616,27 @@
     }
     // =================================================================
     
+    {{ if in .Params.Libraries "jsxgraph" }} {
+      var chartPrefix = "language-jessiecode";
+      var index = 0;
+
+      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function (x) {
+        x.style.display = 'none'
+        x.parentNode.style.backgroundColor = "transparent"
+        var node0 = document.createElement('div');
+        node0.id = 'jsxgraph' + index;
+        node0.classList += 'jxgbox';
+        
+        x.parentNode.insertBefore(node0, x);
+
+        var board = JXG.JSXGraph.initBoard(node0.id, {showCopyright: false, zoom: true, pan: true});
+        board.jc = new JXG.JessieCode();
+        board.jc.use(board);
+        board.jc.parse(x.innerText);
+        board.resizeContainer(300,300);
+        index += 1;
+      });
+    }
+    {{ end }}
   }
 </script>