From 795307569a92ffc74d3a4e21b534587e607e5578 Mon Sep 17 00:00:00 2001
From: joyqat <joyqat@users.noreply.github.com>
Date: Fri, 7 Aug 2020 12:22:34 +0800
Subject: [PATCH] jsxgraph: use data-lang to specify graph size

---
 exampleSite/content/en/posts/test-jsxgraph.md | 15 ++++++++++++++-
 layouts/partials/script/single-script.html    | 12 +++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/exampleSite/content/en/posts/test-jsxgraph.md b/exampleSite/content/en/posts/test-jsxgraph.md
index 42c74b0..0f59f7a 100644
--- a/exampleSite/content/en/posts/test-jsxgraph.md
+++ b/exampleSite/content/en/posts/test-jsxgraph.md
@@ -16,6 +16,8 @@ libraries:
 image: images/feature1/graph.png
 ---
 Use `Shift` and `Mouse Left` to drag, `Shift` and `Mouse Scroll` to zoom.
+
+### Example 1
 ```jessiecode
 point(5, 5) <<id:'pt', name: 'point'>>;
 grid();
@@ -29,6 +31,7 @@ g = functiongraph(f);
 $board.setView([-10, 10, 10, -10]);
 ```
 
+### Example 2
 Point A will stay inside the circle.
 
 ```jessiecode
@@ -51,9 +54,10 @@ p.on('drag',function(){
 });
 ```
 
+### Example3
 This graph shows the properties of triangle. Drag the edges of triangle to observe changes.
 
-```jessiecode
+```jessiecode:400x400
 // code adapted from https://github.com/jsxgraph/JessieCode/blob/master/examples/euler.html
 cerise = <<
     strokeColor: '#901B77',
@@ -111,3 +115,12 @@ euler = line(H, S) << strokeWidth: 2, strokeColor:'#901B77' >>;
 
 $board.setView([-1.5, 2, 1.5, -1]);
 ```
+
+### Note
+You can specify height and weight in the language specifier. e.g.
+````markdown
+```jessiecode:400x300
+// codes...
+```
+````
+will change the graph size to width 400px and height 300px.
diff --git a/layouts/partials/script/single-script.html b/layouts/partials/script/single-script.html
index 55235f3..b3ab901 100644
--- a/layouts/partials/script/single-script.html
+++ b/layouts/partials/script/single-script.html
@@ -633,8 +633,18 @@
         board.jc = new JXG.JessieCode();
         board.jc.use(board);
         board.jc.parse(x.innerText);
+        
         board.resizeContainer(300,300);
-        index += 1;
+        var size = x.getAttribute('data-lang').split('x');
+        if (size && size.length == 2) {
+          var w = parseInt(size[0], 10);
+          var h = parseInt(size[0], 10);
+          if (!(isNaN(w) || isNaN(h))) {
+            board.resizeContainer(w, h);
+          }
+        }
+
+        index += 1;        
       });
     }
     {{ end }}