docs: use webWorkers in public docs.

dali-lab · Dec 18, 2023 · 0a03256 · 0a03256
1 parent d179495
commit 0a03256
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 28 deletions.
diff --git a/site/index.html b/site/index.html
@@ -96,6 +96,19 @@ <h1>
   </p>
 </div>
 
+<section>
+  <div class="container">Playground</div>
+</section>
+
+<p class="center-block">
+  <iframe src="https://codesandbox.io/embed/muddy-cdn-ibl5x?fontsize=14&hidenavigation=1&theme=light"
+          style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+          title="muddy-cdn-ibl5x"
+          allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+          sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  ></iframe>
+</p>
+
 <section>
   <div class="container">Installation & API</div>
 </section>
@@ -109,7 +122,7 @@ <h1>
     <pre><code>
       import functionPlot from 'function-plot'
       functionPlot({
-        // ..options
+        // ..options below
       })
     </code></pre>
 
@@ -124,18 +137,8 @@ <h1>
       Check out the docs generated with TypeDocs <a href="./docs/functions/default-1.html">API Docs</a>
     </p>
 
-
   </div>
 
-<p class="center-block">
-  <iframe src="https://codesandbox.io/embed/muddy-cdn-ibl5x?fontsize=14&hidenavigation=1&theme=light"
-          style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-          title="muddy-cdn-ibl5x"
-          allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-          sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-</p>
-
 <section>
   <div class="container">Examples</div>
 </section>

diff --git a/site/js/site.js b/site/js/site.js
@@ -1,8 +1,8 @@
-'use strict'
-$(document).on('markupLoaded', function () {
-  var functionPlot = window.functionPlot
-  var a, b, c
-  var f, fp
+document.addEventListener('markupLoaded', function () {
+  const functionPlot = window.functionPlot
+  let a, b, c
+
+  functionPlot.withWebWorkers(8)
 
   functionPlot({
     target: '#description-sample',
@@ -47,7 +47,9 @@ $(document).on('markupLoaded', function () {
     },
     data: [
       {
-        fn: 'sin(exp(x))'
+        fn: 'sin(exp(x))',
+        nSamples: 5000,
+        sampler: 'asyncInterval'
       }
     ]
   })
@@ -253,7 +255,7 @@ $(document).on('markupLoaded', function () {
    * type of axis to `log` inside the  `xAxis` option, note how this
    * change affects the way the functions are sampled
    */
-  var instance = functionPlot({
+  functionPlot({
     target: '#logarithmic',
     xAxis: {
       type: 'log',
@@ -573,15 +575,15 @@ $(document).on('markupLoaded', function () {
    *
    *    <button id="update" class="btn btn-primary">Update</button>
    */
-  var options = {
+  const options = {
     target: '#quadratic-update',
     data: [
       {
         fn: 'x'
       }
     ]
   }
-  $('#update').click(function () {
+  document.querySelector('#update').addEventListener('click', function () {
     if (!options.title) {
       // add a title, a tip and change the function to y = x * x
       options.title = 'hello world'

diff --git a/site/partials/examples.html b/site/partials/examples.html
@@ -149,7 +149,7 @@
 })</code></pre></div></div><div class="col-md-6 center-block demos"><span id="closed" class="graph"></span></div></div></div></div><div class="example"><div class="container"><div class="row"><div class="col-md-6"><div class="comment"><h3>Logarithmic scales</h3>
 <p>The type of each axis can be configured to be logarithmic by specifying the 
 type of axis to <code>log</code> inside the  <code>xAxis</code> option, note how this 
-change affects the way the functions are sampled</p></div><div class="code"><pre><code class="javascript">var instance = functionPlot({
+change affects the way the functions are sampled</p></div><div class="code"><pre><code class="javascript">functionPlot({
   target: '#logarithmic',
   xAxis: {
     type: 'log',
@@ -390,15 +390,15 @@
 b.addLink(a, c)
 c.addLink(a, b)</code></pre></div></div><div class="col-md-6 center-block demos"><span id="linked-a-multiple" class="graph"></span><span id="linked-b-multiple" class="graph"></span><span id="linked-c-multiple" class="graph"></span></div></div></div></div><div class="example"><div class="container"><div class="row"><div class="col-md-6"><div class="comment"><h3>Update</h3>
 <p>To update a graphic one needs to call <code>functionPlot</code> on the same target 
-element with <em>any</em> object that is configured properly</p></div><div class="code"><pre><code class="javascript">var options = {
+element with <em>any</em> object that is configured properly</p></div><div class="code"><pre><code class="javascript">const options = {
   target: '#quadratic-update',
   data: [
     {
       fn: 'x'
     }
   ]
 }
-$('#update').click(function () {
+document.querySelector('#update').addEventListener('click', function () {
   if (!options.title) {
     // add a title, a tip and change the function to y = x * x
     options.title = 'hello world'

diff --git a/site/playground.html b/site/playground.html
@@ -20,12 +20,10 @@
 functionPlot.withWebWorkers(8)
 functionPlot({
   target: '#playground',
-  width: window.innerWidth,
-  height: window.innerHeight,
+  // width: window.innerWidth,
+  // height: window.innerHeight,
   data: [
-    { fn: 'x^2', nSamples: 5000, sampler: 'asyncInterval' },
-    { fn: 'sin(x)', nSamples: 5000, sampler: 'asyncInterval' },
-    { fn: '1/x', nSamples: 5000, sampler: 'asyncInterval' },
+    { fn: 'sin(exp(x))', nSamples: 5000, sampler: 'asyncInterval' },
   ]
 })
 </script>