Deploying to gh-pages from @ c32b4ba 🚀

examples/js/index/index.js

@@ -243,8 +243,8 @@ function log(...args) {
   const lineNo = parseInt(logElem.dataset.lineNo || 1);
   const lines = logElem.textContent.split('\\n');
   lines.push(\`\${lineNo}: \${args.join(' ')}\`);
-  if (lines.length > 3) {
-    lines.shift();
+  if (lines.length > 5) {
+    lines.splice(0, lines.length - 5);
   }
   logElem.textContent = lines.join('\\n');
   logElem.dataset.lineNo = lineNo + 1;

examples/js/lots.js

@@ -47,6 +47,8 @@ const getListOfUIColorCSSVariableNames = (() => {
 })();
 getListOfUIColorCSSVariableNames();
 
+const range = (n, fn) => new Array(n).fill(0).map((_, i) => fn(i));
+
 // eslint-disable-next-line no-constant-condition
 if (false) {
   const s = {
@@ -228,6 +230,29 @@ if (showUI) {
 
 }
 
+if (showUI) {
+  const div = document.createElement('div');
+  uiElem.appendChild(div);
+  const gui = new GUI({parent: div, title: 'Disabled Folder'});
+
+  const folders = range(3, (i) => {
+    const settings = {
+      name: 'test',
+      speed: 45,
+      toggle: true,
+      animal: 'bird',
+    };
+    const folder = gui.addFolder(`folder:${i}`);
+    folder.add(settings, 'name');
+    folder.add(settings, 'speed', 0, 100);
+    folder.add(settings, 'toggle');
+    folder.add(settings, 'animal', ['bird', 'cat', 'dog']);
+    return folder;
+  });
+
+  folders[1].enable(false);
+}
+
 // Using Sliders
 if (showUI) {
   const div = document.createElement('div');

index.html

@@ -304,6 +304,8 @@ <h2>Canvas:</h2>
 const s = {
   period1: 1,
   period2: 4,
+  period3: 10,
+  period4: 40,
 };
 
 //gui.add(s, 'period1', 0, 5);
@@ -313,13 +315,22 @@ <h2>Canvas:</h2>
   waveData.shift();
   const v = performance.now() * 0.001;
   const s1 = Math.sin(v * s.period1);
-  const s2 = Math.sin(v * s.period2)
+  const s2 = Math.sin(v * s.period2);
   waveData.push(s1 + s2);
 }, 200);
 
+setInterval(() => {
+  waveData2.shift();
+  const v = performance.now() * 0.001;
+  const s1 = Math.sin(v * s.period3);
+  const s2 = Math.sin(v * s.period4);
+  waveData2.push(s1 + s2);
+}, 10);
+
   ">
     <pre><code class="language-javascript">
 const waveData = new Array(100).fill(0);
+const waveData2 = new Array(100).fill(0);
 
 const gui = new GUI();
 helpers.graph(
@@ -330,6 +341,14 @@ <h2>Canvas:</h2>
     max: +2,
     interval: 200,
   });
+helpers.graph(
+  gui.addCanvas('wave 2').canvas, 
+  waveData2,
+  {
+    min: -2,
+    max: +2,
+    interval: 10,
+  });
     </code></pre>
   </div>
 
@@ -502,9 +521,34 @@ <h2>TextNumbers:</h2>
     </code></pre>
   </div>
 
+  <!-- ============================================================ -->
+  <h2>Respond to changes:</h2>
+  <p>Get called when the user changes a value.</p>
+
+  <div data-example>
+    <pre><code class="language-javascript">
+const s = {
+  count: 123,
+  name: 'Buffy',
+  speed: 45,
+};
+
+const gui = new GUI();
+gui.add(s, 'count').onChange(logCount);
+gui.add(s, 'name').onChange(logName);
+gui.add(s, 'speed', 0, 100).onChange(logSpeed);
+gui.onChange(logAll);  // or folder
+
+function logCount(v) { log('count:', v); }
+function logName(v) { log('name:', v); }
+function logSpeed(v) { log('speed:', v); }
+function logAll() { log(JSON.stringify(s)); }
+    </code></pre>
+  </div>
+
   <!-- ============================================================ -->
   <h2>Listen:</h2>
-  <p>Listens for changes.</p>
+  <p>Listens for changes. (auto update)</p>
 
   <div data-example>
     <pre><code class="language-javascript">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "muigui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "A Simple GUI",
   "main": "dist/0.x/muigui.js",
   "module": "dist/0.x/muigui.module.js",

src/styles/muigui.css.js

@@ -150,6 +150,10 @@ export default {
   --value-color: var(--disabled-color) !important;
   --range-left-color: var(--disabled-color) !important;
 }
+/* this shouldn't be needed! */
+.muigui-disabled label {
+  color: var(--disabled-color) 
+}
 
 .muigui canvas,
 .muigui svg {