0.13.0

.eslintrc.yml

@@ -48,16 +48,16 @@ rules:
   jsdoc/require-description: warn
   jsdoc/tag-lines: [ warn, any ]
 overrides:
-  - files: [ rollup.config.js, scripts/**/*.js ]
+  - files: [ rollup.config.js, scripts/**/*.js, tests/**/*.js ]
     env:
       node: true
     parserOptions:
       ecmaVersion: 9
-  - files: [ rollup.config.js, scripts/**/*.js, examples/**/*.js ]
+  - files: [ rollup.config.js, scripts/**/*.js, tests/**/*.js, examples/**/*.js ]
     rules:
       no-console: off
       max-len: off
       jsdoc/require-description: off
-  - files: [ scripts/test.js ]
+  - files: [ tests/*.test.js ]
     rules:
       no-console: warn

Changelog.md

@@ -1,3 +1,13 @@
+# 0.13.0
+
+28.56kb, 8.24kb gzipped
+
+- Added support for `onFinishChange`.
+- The error message when `gui.add` fails is easier to read.
+- `gui.load` ignores empty objects instead of failing.
+- Fixed a bug that caused mouse wheels to change values too slowly.
+- Reverted `listen()` fix from 0.11.0. ([Note](https://github.com/georgealways/lil-gui/pull/11/files#r748852628))
+
 # 0.12.0
 
 28.11kb, 8.24kb gzipped

Guide.md

@@ -177,6 +177,12 @@ gui.add( params, 'foo' ).onChange( value => {
 } );
 ```
 
+The `onFinishChange` handler fires after a controller changes and loses focus. This comes in handy if you're using a slow function with a controller that produces continuous change events (like numbers or colors for example). 
+
+```js
+gui.add( params, 'mySlider', 0, 1 ).onFinishChange( complexFunction );
+```
+
 ### Global Change Handlers
 
 GUI also provides an `onChange` handler that fires after changes to any of its children.

Migrating.md

@@ -61,5 +61,3 @@ The other differences in color handling are fairly minor:
 - "Presets" and `gui.remember()` are gone in favor of `save/load()`, which also removes 
 mention of `localStorage`.
 - `gui.hide/show/hideAll()` and the <key>H</key> to hide hotkey.
-- `onFinishChange`. The method is left as an `onChange` synonym for backwards 
-compatibility.

README.md

@@ -2,7 +2,7 @@
 
 Makes a floating panel for controllers on the web. Works as a drop-in replacement for dat.gui.
 
-[**Homepage**](https://lil-gui.georgealways.com/) • [**Basic Demo**](https://lil-gui.georgealways.com/examples/basic/) • [Examples](https://lil-gui.georgealways.com/#Examples) • [Guide](https://lil-gui.georgealways.com/#Guide) • [API](https://lil-gui.georgealways.com/#API) • [Source](https://github.com/georgealways/lil-gui)
+[**Homepage**](https://lil-gui.georgealways.com/) • [**Basic Demo**](https://lil-gui.georgealways.com/examples/basic/) • [Examples](https://lil-gui.georgealways.com/#Examples) • [Guide](https://lil-gui.georgealways.com/#Guide) • [API](https://lil-gui.georgealways.com/#API) • [GitHub](https://github.com/georgealways/lil-gui)
 
 ```js
 import GUI from 'lil-gui'; 

TODO

@@ -1,10 +1,39 @@
-[ ] feels like a lot of uneccessary { passive: false }, esp numbercontroller
-[ ] unit test for import/export recursive=false
-[ ] unit test for number box vertical drag
+0.14
 
-[ ] number slider should blur input on mousewheel
-[ ] close() should accept a parameter like disable() for symmetry with open() ?
-[ ] show()/hide(), ._hidden, hideKey: 'h'
+[ ] GUI.onFinishChange (branch: undo)
+[ ] ios negative numbers (branch: typenumber)
+	the spec for inputmode=decimal doesn't mandate a negative sign
+	only way to default to a keyboard with numbers, decimals and a negative sign
+	on ios is with input[type=number]. i hate unstyling that thing
+
+0.13
+
+[-] test color malform/edge cases
+	current behavior is fine imo, don't want to bloat it with error message strings
+[x] test reset color arr/obj
+
+[x] revert the change check in listen().
+	i thought this was needed to keep controllers interactive because of
+	a three.js example "webgl_clipping_advanced" -- there was a checkbox that is
+	deliberately uncheckable and i thought listen() was causing this
+
+[-] function controller on(finish)change?
+[-] close() should accept a parameter like disable() for symmetry with open()
+[x] onFinishChange on reset
+[x] load should return this
+[x] load should call onfinishchange
+
+[-] mousewheel/slider key modifiers
+	would require keeping track of a cumulative delta like vertical drag
+[-] show()/hide(), ._hidden, hideKey: 'h' ?
+	rarely find myself needing anything more than gui.domElement.style.display = 'none';
+
+[x] better gui.add/addColor failure message
+	too many ways addColor can fail, just gonna let it yell at you for now
+[x] unit test for number box vertical drag
+
+[x] number slider should blur input on mousewheel
+[x] no more passive false
 
 [x] i'd like to make it easier to find/view the built source.
 	[x] @VERSION swapout for guide in cdn example
@@ -49,7 +78,8 @@ homepage
 OTHER
 	[x] i don't like how some anchors are inside h1/2/3 and some aren't. if they're all above the 
 		header in question i don't need --anchor offset. they only hafta be inside the header for .md
-	[ ] order of properties (not methods) in API is kinda wonky
+	[-] order of properties (not methods) in API is kinda wonky
+		no it's not it's a-z$_
 	[x] main api toc columns are ugly
 	[x] !! update anchor positions on resize
 
@@ -237,7 +267,6 @@ archive
 	will try again
 	[x] i like it
 
-
 [x] move kitchen sink from homepage to panopticon.
 	(that should be a simple demo) 
 

examples/kitchen-sink/index.html

@@ -47,7 +47,10 @@
 			string: 'lil-gui',
 			number: 0.5,
 			color: '#aa00ff',
-			function() { alert( 'hi' ); }
+			hide() {
+				autoPlaceGUI.domElement.style.display = 'none';
+				location.hash = '#hide';
+			}
 		};
 
 		const autoPlaceGUI = new GUI( { title: 'autoPlace' } );
@@ -57,7 +60,7 @@
 		autoPlaceGUI.add( myObject, 'string' );
 		autoPlaceGUI.add( myObject, 'number', 0, 1 );
 		autoPlaceGUI.addColor( myObject, 'color' );
-		autoPlaceGUI.add( myObject, 'function' );
+		autoPlaceGUI.add( myObject, 'hide' );
 
 		const container = document.getElementById( 'container' );
 
@@ -67,6 +70,10 @@
 			}
 		}
 
+		if ( location.hash === '#hide' ) {
+			myObject.hide();
+		}
+
 		/**
 		 * @param {object} options
 		 * @param {function(GUI)} callback
@@ -218,8 +225,8 @@
 			gui.add( { Options: 'a' }, 'Options', ['a', 'b', 'c'] ).disable().enable();
 			gui.add( { Options: 'a' }, 'Options', ['a', 'b', 'c'] ).disable();
 
-			gui.add( { func() { console.log( 'hi' ) } }, 'func' ).name('Function').disable().enable();
-			gui.add( { func() { console.log( 'hi' ) } }, 'func' ).name('Function').disable();
+			gui.add( { func() { console.log( 'hi' ) } }, 'func' ).name( 'Function' ).disable().enable();
+			gui.add( { func() { console.log( 'hi' ) } }, 'func' ).name( 'Function' ).disable();
 
 			gui.addColor( { Color: 0xaa00ff }, 'Color' ).disable().enable();
 			gui.addColor( { Color: 0xaa00ff }, 'Color' ).disable();
@@ -267,6 +274,42 @@
 
 		} );
 
+		make( { title: 'onChange' }, gui => {
+
+			const tallies = { onChange: 0, onFinishChange: 0 };
+
+			function change() {
+				console.log( this.property + ' onChange' );
+				tallies.onChange++;
+			}
+
+			function finishChange() {
+				console.log( this.property + ' onFinishChange' );
+				tallies.onFinishChange++;
+			}
+
+			let folder;
+
+			folder = gui.addFolder('Tallies');
+			folder.add( tallies, 'onChange' ).disable().listen();
+			folder.add( tallies, 'onFinishChange' ).disable().listen();
+
+			gui.add( { Number: 0 }, 'Number' ).onChange( change ).onFinishChange( finishChange );
+
+			gui.add( { Slider: 0 }, 'Slider', 0, 1 ).onChange( change ).onFinishChange( finishChange );
+
+			gui.add( { String: 'foo' }, 'String' ).onChange( change ).onFinishChange( finishChange );
+
+			gui.add( { Boolean: true }, 'Boolean' ).onChange( change ).onFinishChange( finishChange );
+
+			gui.add( { Options: 'a' }, 'Options', ['a', 'b', 'c'] ).onChange( change ).onFinishChange( finishChange );
+
+			gui.add( { func() { console.log( 'hi' ) } }, 'func' ).onChange( change ).onFinishChange( finishChange );
+
+			gui.addColor( { Color: 0xaa00ff }, 'Color' ).onChange( change ).onFinishChange( finishChange );
+
+		} );
+
 		make( { title: 'Customization' }, gui => {
 
 			const pre = document.createElement( 'pre' );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lil-gui",
-  "version": "0.12.0",
+  "version": "0.13.0-dev",
   "author": {
     "name": "George Michael Brower"
   },
@@ -20,7 +20,7 @@
     "rollup": "rollup -c",
     "lint": "eslint .",
     "icons": "node -r esm scripts/icons.js",
-    "test": "node -r esm scripts/test.js",
+    "test": "node -r esm tests/utils/runner.js",
     "api": "node -r esm scripts/api.js --write",
     "homepage": "node -r esm scripts/homepage.js",
     "server": "browser-sync start -s -f '$npm_package_main' 'index.html' 'examples' --no-open --no-notify --no-ui --no-ghost-mode --no-inject-changes",

scripts/api.js

@@ -38,6 +38,8 @@ jsdoc.explainSync( { files: JSDOC_INPUT } )
 
 function transform( v ) {
 
+	if ( v.access === 'protected' ) return;
+
 	forEachRecursive( v, ( object, key, value ) => {
 
 		if ( typeof value === 'string' ) {

scripts/dev.js

@@ -27,7 +27,7 @@ dev( {
 	'test': {
 		onchange: [
 			pkg.module,
-			'scripts/test*'
+			'tests/**/*.js'
 		],
 		flag: '--soft-fail',
 		color: 'yellow'

scripts/homepage.hbs.html

@@ -447,6 +447,15 @@
 			margin: 0;
 		}
 
+		@media (max-width: 1200px) {
+
+			.autoPlace {
+				opacity: 0;
+				pointer-events: none;
+			}
+
+		}
+
 		/* small desktop */
 
 		@media (max-width: 958px) {
@@ -478,12 +487,6 @@
 				padding: 0 1rem;
 			}
 
-			.autoPlace {
-				opacity: 0;
-				pointer-events: none;
-				transition: none !important;
-			}
-
 		}
 
 		/* mobile */
@@ -569,7 +572,7 @@
 				}
 				hidden = passed;
 			}
-			document.addEventListener( 'scroll', onScroll, { passive: false } );
+			document.addEventListener( 'scroll', onScroll );
 			onScroll();
 
 			// Delay transition class so we don't see a fadeout flash on load
@@ -662,7 +665,7 @@
 				activeLink.scrollIntoView( { block: 'nearest' } );
 			}
 
-			document.addEventListener( 'scroll', onScroll, { passive: true } );
+			document.addEventListener( 'scroll', onScroll );
 			window.addEventListener( 'resize', debounce( updateAnchorPositions ) );
 
 			requestAnimationFrame( () => {
@@ -835,7 +838,7 @@
 
 		} );
 
-		example( 16, ( gui, code ) => {
+		example( 17, ( gui, code ) => {
 
 			const params = { feedback: 0 };
 
@@ -850,7 +853,7 @@
 
 		} );
 
-		example( 17, ( gui, code ) => {
+		example( 18, ( gui, code ) => {
 
 			let saved = {};
 
@@ -968,7 +971,7 @@ <h2><a href="#API">API</a></h2>
 			<section id="section-readme">
 				{{{ readme }}}
 
-				<a href="{{ builds.module }}">Built source</a> • 
+				<a href="{{ builds.module }}">Built Source</a> • 
 				<a href="{{ builds.moduleMin }}">Minified</a> = <strong>{{ sizeMin }}kb</strong>, {{ sizeGzip }}kb gzipped
 
 			</section>