Merge branch 'master' of github.com:viebel/klipse

viebel · 752acc28630c32475b636f640be4aca0ba71e8f3 · viebel committed Mar 25, 2017 · Mar 25, 2017 · 752acc2
2 parents 61a45fb + 71164c7
commit 752acc28630c32475b636f640be4aca0ba71e8f3
Unified Split

Showing with 121 additions and 1 deletion.

+3 −1 README.md

+65 −0 resources/public/plot-dbg.html

+50 −0 src/klipse/lang/function_plot.cljs

+1 −0 src/klipse/run/all.cljs

+1 −0 src/klipse/run/plugin/plugin.cljs

+1 −0 src/klipse/run/plugin_prod/plugin.cljs
diff --git a/README.md b/README.md
@@ -92,6 +92,8 @@ And here are detailed explanations about [a javascript live code editor in a blo
 Here is the [full interactive guide](https://book.klipse.tech/interactive_clojure[script]_code_snippets.html
 ) of the klipse `clojure` snippets.
 
+You can manipulate the DOM inside KLIPSE: here is a [tutorial](http://read.klipse.tech/manipulating-the-dom-with-klipse-2/).
+
 
 
 ```html
@@ -284,7 +286,7 @@ To change the style of the Klipse plugin's borders and the console output, you'l
 
 You can see an example of styling Klipse in `demos/styling`. And here is a [live demo](http://htmlpreview.github.io/?https://raw.githubusercontent.com/viebel/klipse/master/demos/styling/klipse.html)
 
-## Community
+## Klipse Community
 
 Here are a couple of examples of blogs using the klipse plugin:
 
diff --git a/resources/public/plot-dbg.html b/resources/public/plot-dbg.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="UTF-8">
+    <title>KLIPSE: a simple and elegant online cljs compiler and evaluator</title>
+    <link rel='shortcut icon' type='image/x-icon' href='img/klipse.png' />
+    <link rel="stylesheet" type="text/css" href="css/codemirror.css">
+  </head>
+  <body>
+
+
+    <pre><code class="plot">
+{
+   xAxis: {
+    type: 'log',
+    domain: [0.01, 1]
+  },
+  yAxis: {
+    domain: [-100, 100] 
+  },
+  grid: true,
+  data: [{
+    fn: '1/x * cos(1/x)',
+    // to make it look like a definite integral
+    closed: true
+  }]
+}	
+    </code></pre>
+
+
+    <p>Another plot </p>
+    <pre><code class="plot">
+{
+  target: '#built-in-eval-function',
+  data: [{
+    // force the use of builtIn math
+    graphType: 'polyline',
+    fn: function (scope) {
+      // scope.x = Number
+      var x = scope.x
+      return x * 2 + 4
+    }
+  }, {
+    fnType: 'polar',
+    graphType: 'polyline',
+    r: function (scope) {
+      // scope.theta = number
+      var r0 = 0
+      var a = 1
+      var gamma = 0
+      return r0 * Math.cos(scope.theta - gamma) +
+        Math.sqrt(a * a - r0 * r0 * Math.pow(Math.sin(scope.theta - gamma), 2))
+    }
+  }]
+}
+    </code></pre>
+<script>
+  window.klipse_settings = {
+  selector_plot: '.plot',
+  selector_eval_js: '.js',
+  };
+</script>
+<script src="/fig/js/klipse.fig.js"></script>
+</body>
+</html>
diff --git a/src/klipse/lang/function_plot.cljs b/src/klipse/lang/function_plot.cljs
@@ -0,0 +1,50 @@
+(ns klipse.lang.function-plot
+  (:use-macros [purnam.core :only [? ! !>]])
+  (:require-macros
+   [gadjett.core :as gadjett :refer [dbg]]
+   [cljs.core.async.macros :refer [go]])
+  (:require
+   [goog.dom :as gdom]
+   [klipse.utils :refer [add-script-tag!]]
+   [clojure.string :as string]
+   [klipse.lang.javascript :refer [str-eval-js-async]]
+   [cljs.core.async :refer [chan close! <! put!]]
+   [klipse.common.registry :refer [codemirror-mode-src register-mode scripts-src]]))
+
+
+(defn draw-chart [data-js container-id]
+  (let [chart-constructor (? js/google.visualization.ChartWrapper)
+        chart-wrapper (new chart-constructor data-js)]
+    (!> chart-wrapper.draw)))
+
+(defn parse-js-object [s]
+  ;; we don't want to use JSON.parse in order to allow non-quoted keys
+  ;; Might be better to find a js object parser that will give more details when the parsing fails
+  (try (js/eval (str "(" s ")"))
+       (catch :default e
+         (throw "Invalid JSON"))))
+
+(defn render* [src {:keys [container container-id] :as opts}]
+  (try
+    (let [data (parse-js-object src)]
+      (aset data "target" (str "#" container-id))
+      (!> js/window.functionPlot data))
+    (catch :default e
+      (gdom/setTextContent container (str e)))))
+
+(defn render [src {:keys [container] :as opts}]
+  (go
+    (gdom/setTextContent container "")
+    (render* src opts)))
+
+
+(def opts {:editor-in-mode "application/json"
+           :editor-out-mode "text"
+           :eval-fn render
+           :no-result true
+           :min-eval-idle-msec 400
+           :external-scripts [#_"http://cdnjs.cloudflare.com/ajax/libs/mathjs/3.10.0/math.min.js" (codemirror-mode-src "javascript") (scripts-src "function-plot-with-d3.js")]
+           :comment-str "//"})
+ 
+(register-mode "function-plot" "selector_plot" opts)
+
diff --git a/src/klipse/run/all.cljs b/src/klipse/run/all.cljs
@@ -4,6 +4,7 @@
             klipse.lang.reagent
             klipse.lang.javascript
             klipse.lang.google-charts
+            klipse.lang.function-plot
             klipse.lang.lua
             klipse.lang.oblivion
             klipse.lang.ruby
diff --git a/src/klipse/run/plugin/plugin.cljs b/src/klipse/run/plugin/plugin.cljs
@@ -2,6 +2,7 @@
   (:require klipse.core
             klipse.lang.javascript
             klipse.lang.google-charts
+            klipse.lang.function-plot
             klipse.lang.lua
             klipse.lang.oblivion            
             klipse.lang.js-compile
diff --git a/src/klipse/run/plugin_prod/plugin.cljs b/src/klipse/run/plugin_prod/plugin.cljs
@@ -2,6 +2,7 @@
   (:require klipse.core
             klipse.lang.javascript
             klipse.lang.google-charts
+            klipse.lang.function-plot
             klipse.lang.lua
             klipse.lang.oblivion            
             klipse.lang.js-compile