Add functionality to disable folders

examples/kitchen-sink/kitchen-sink.js

@@ -176,7 +176,7 @@ function getDepth( g ) {
 	return depth;
 }
 
-make( { title: 'Disable' }, gui => {
+make( { title: 'Disable Controllers' }, gui => {
 
 	gui.add( { Number: 0 }, 'Number' ).disable().enable();
 	gui.add( { Number: 0 }, 'Number' ).disable();
@@ -199,6 +199,15 @@ make( { title: 'Disable' }, gui => {
 	gui.addColor( { Color: 0xaa00ff }, 'Color' ).disable().enable();
 	gui.addColor( { Color: 0xaa00ff }, 'Color' ).disable();
 
+	const folder = gui.addFolder( 'Disable Folders' );
+	folder.add( { Number: 0 }, 'Number' );
+	folder.disable();
+
+} );
+
+make( { title: 'Disable Root' }, gui => {
+	gui.add( { Number: 0 }, 'Number' );
+	gui.disable();
 } );
 
 make( { title: 'Listen' }, gui => {

src/Controller.js

@@ -1,5 +1,7 @@
 /** @module Controller */
 
+import { disableItem, showItem } from './utils/itemUtils';
+
 /**
  * Base class for all controllers.
  */
@@ -227,16 +229,7 @@ export default class Controller {
 	 * controller.disable( !controller._disabled ); // toggle
 	 */
 	disable( disabled = true ) {
-
-		if ( disabled === this._disabled ) return this;
-
-		this._disabled = disabled;
-
-		this.domElement.classList.toggle( 'disabled', disabled );
-		this.$disable.toggleAttribute( 'disabled', disabled );
-
-		return this;
-
+		return disableItem( this, disabled );
 	}
 
 	/**
@@ -249,13 +242,7 @@ export default class Controller {
 	 * controller.show( controller._hidden ); // toggle
 	 */
 	show( show = true ) {
-
-		this._hidden = !show;
-
-		this.domElement.style.display = this._hidden ? 'none' : '';
-
-		return this;
-
+		return showItem( this, show );
 	}
 
 	/**

src/GUI.js

@@ -10,6 +10,7 @@ import StringController from './StringController';
 
 import stylesheet from 'stylesheet';
 import _injectStyles from './utils/injectStyles';
+import { disableItem, showItem } from './utils/itemUtils';
 
 let stylesInjected = false;
 
@@ -90,6 +91,12 @@ export default class GUI {
 		 */
 		this.folders = [];
 
+		/**
+		 * Used to determine if the GUI is disabled. * Use `gui.disable( true|false )` to modify this value.
+		 * @type {boolean}
+		 */
+		this._disabled = false;
+
 		/**
 		 * Used to determine if the GUI is closed. Use `gui.open()` or `gui.close()` to change this.
 		 * @type {boolean}
@@ -394,6 +401,34 @@ export default class GUI {
 
 	}
 
+	/**
+	 * Enables this GUI.
+	 * @param {boolean} enabled
+	 * @returns {this}
+	 * @example
+	 * gui.enable();
+	 * gui.enable( false ); // disable
+	 * gui.enable( gui._disabled ); // toggle
+	 */
+	enable( enabled = true ) {
+		return this.disable( !enabled );
+	}
+
+	/**
+	 * Disables this GUI.
+	 * @param {boolean} disabled
+	 * @returns {this}
+	 * @example
+	 * gui.disable();
+	 * gui.disable( false ); // enable
+	 * gui.disable( !gui._disabled ); // toggle
+	 */
+	disable( disabled = true ) {
+		if ( disabled ) this.close();
+
+		return disableItem( this, disabled );
+	}
+
 	/**
 	 * Closes the GUI.
 	 * @returns {this}
@@ -418,13 +453,7 @@ export default class GUI {
 	 * gui.show( gui._hidden ); // toggle
 	 */
 	show( show = true ) {
-
-		this._hidden = !show;
-
-		this.domElement.style.display = this._hidden ? 'none' : '';
-
-		return this;
-
+		return showItem( this, show );
 	}
 
 	/**

src/utils/itemUtils.js

@@ -0,0 +1,18 @@
+export function disableItem( item, disabled ) {
+	if ( disabled === item._disabled ) return item;
+
+	item._disabled = disabled;
+
+	item.domElement.classList.toggle( 'disabled', disabled );
+	item.domElement.toggleAttribute( 'disabled', disabled );
+
+	return item;
+}
+
+export function showItem( item, show ) {
+	item._hidden = !show;
+
+	item.domElement.style.display = item._hidden ? 'none' : '';
+
+	return item;
+}

style/base.scss

@@ -1,3 +1,5 @@
+@import 'shared';
+
 @mixin touch-vars {
 
 	@media (pointer: coarse) {
@@ -62,6 +64,8 @@
 		}
 	}
 
+	@include can-disable;
+
 	// "Theme" properties
 	// -------------------------------------------------------------------------
 

style/controllers.scss

@@ -1,4 +1,4 @@
-@import 'hover';
+@import 'shared';
 
 .lil-gui {
 	.controller {
@@ -7,12 +7,7 @@
 		padding: 0 var(--padding);
 		margin: var(--spacing) 0;
 
-		&.disabled {
-			opacity: 0.5;
-			&, & * {
-				pointer-events: none !important;
-			}
-		}
+		@include can-disable;
 
 		// > is used here to avoid styling FunctionController's .name,
 		// which gets put inside of its widget.

style/hierarchy.scss

@@ -1,4 +1,4 @@
-@import 'hover';
+@import 'shared';
 
 .lil-gui {
 	.title {

style/inputs.scss

@@ -1,4 +1,4 @@
-@import 'hover';
+@import 'shared';
 
 .lil-gui {
 	input {

style/hover.scss → style/shared.scss

@@ -13,3 +13,12 @@
 		}
 	}
 }
+
+@mixin can-disable {
+	&.disabled {
+		opacity: 0.5;
+		&, & * {
+			pointer-events: none !important;
+		}
+	}
+}