Merge pull request #18 from georgealways/dev

0.14.0

Changelog.md

@@ -1,3 +1,12 @@
+# 0.14.0
+
+29.04kb, 8.31kb gzipped
+
+- Added `gui.onFinishChange` for symmetry with `gui.onChange`.
+- Added a `d.ts` file for TypeScript users.
+- Fixed a bug that stopped iOS users from typing negative numbers. ([Note](https://github.com/georgealways/lil-gui/pull/16))
+- Minor CSS fixes.
+
 # 0.13.0
 
 28.56kb, 8.24kb gzipped

Guide.md

@@ -23,14 +23,14 @@ For quick sketches, you can import lil-gui directly from a CDN.
 
 ```html
 <script type="module">
-import GUI from '//cdn.jsdelivr.net/npm/lil-gui@VERSION/+esm';
+import GUI from 'https://cdn.jsdelivr.net/npm/lil-gui@VERSION/+esm';
 </script>
 ```
 
 The library is also available in UMD format under the namespace `lil`.
 
 ```html
-<script src="//cdn.jsdelivr.net/npm/lil-gui@VERSION"></script>
+<script src="https://cdn.jsdelivr.net/npm/lil-gui@VERSION"></script>
 <script>
 var GUI = lil.GUI;
 </script>
@@ -202,6 +202,8 @@ gui.onChange( event => {
 `GUI.onChange` events bubble upward. A handler applied to the root GUI will fire after every change. 
 Handlers applied to folders will only be called after changes to that folder or its descendents.
 
+`GUI.onFinishChange` works just like `GUI.onChange`, but it only fires at the end of change events.
+
 ### Listening and Updating
 
 If a value controlled by the GUI is changed in code anywhere outside of the GUI, the new value won't

TODO

@@ -1,11 +1,21 @@
 0.14
 
-[ ] GUI.onFinishChange (branch: undo)
-[ ] ios negative numbers (branch: typenumber)
+[x] GUI.onFinishChange (branch: undo)
+[x] 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
 
+[-] -webkit-tap-highlight is still on boolean and option
+	but there's no :active style on either without it (branch: mobileactivestates)
+
+[-] button text-transform: none
+	this was there to compensate for a very broad css selector in the three.js 
+	examples while developing, shouldn't be there.
+	well, in truth there's a bunch of 'resets' in the .lil-gui { selector too
+
+[-] move --string-color and --number-color to inputs.scss
+
 0.13
 
 [-] test color malform/edge cases

examples/kitchen-sink/index.html

@@ -308,6 +308,10 @@
 
 			gui.addColor( { Color: 0xaa00ff }, 'Color' ).onChange( change ).onFinishChange( finishChange );
 
+			gui.onFinishChange( e => {
+				console.log( 'gui.onFinishChange', e );
+			} );
+
 		} );
 
 		make( { title: 'Customization' }, gui => {

package.json

@@ -1,31 +1,34 @@
 {
   "name": "lil-gui",
-  "version": "0.13.0",
+  "version": "0.14.0-dev",
   "author": {
     "name": "George Michael Brower"
   },
   "description": "Makes a floating panel for controllers on the web.",
   "homepage": "https://lil-gui.georgealways.com",
   "module": "dist/lil-gui.esm.js",
   "main": "dist/lil-gui.umd.js",
+  "types": "dist/lil-gui.esm.d.ts",
   "config": {
     "style": "dist/lil-gui.css",
     "styleMin": "dist/lil-gui.min.css"
   },
   "scripts": {
     "build": "npm run icons && npm run sass && npm run sass:min && npm run rollup",
     "build:all": "npm run build && npm run api && npm run homepage",
-    "sass": "sass style/index.scss $npm_package_config_style --no-source-map --no-charset",
-    "sass:min": "sass style/index.scss $npm_package_config_styleMin --no-charset --no-source-map --style=compressed",
+    "sass": "sass style/index.scss dist/lil-gui.css --no-charset --no-source-map",
+    "sass:min": "sass style/index.scss dist/lil-gui.min.css --no-charset --no-source-map --style=compressed",
     "rollup": "rollup -c",
     "lint": "eslint .",
     "icons": "node -r esm scripts/icons.js",
     "test": "node -r esm tests/utils/runner.js",
     "api": "node -r esm scripts/api.js --write",
+    "types": "tsc dist/lil-gui.esm.js --declaration --allowJs --emitDeclarationOnly --outDir dist",
     "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",
+    "server": "browser-sync start -s -f 'dist' 'index.html' 'examples' --no-open --no-notify --no-ui --no-ghost-mode --no-inject-changes",
+    "clean": "rimraf -rf dist/*",
     "preversion": "npm run build && npm test",
-    "prepublishOnly": "npm run build && npm test",
+    "prepublishOnly": "npm run clean && npm run build && npm run types && npm test",
     "dev": "npm run build:all && node -r esm scripts/dev.js"
   },
   "files": [
@@ -43,9 +46,11 @@
     "jsdoc-api": "^5.0.2",
     "markdown-it": "^9.1.0",
     "onchange": "^6.0.0",
+    "rimraf": "^3.0.2",
     "rollup": "^1.17.0",
     "sass": "^1.22.10",
     "terser": "^4.3.8",
+    "typescript": "^4.5.2",
     "webfont": "^11.2.26"
   },
   "eslintIgnore": [

scripts/api.js

@@ -254,7 +254,7 @@ function paramsToSignature( params ) {
 		.map( singleParamToSignature )
 		.join( ', ' );
 
-	return `( ${paramList} )`;
+	return `( ${paramList} )`;
 
 }
 

scripts/homepage.hbs.html

@@ -22,10 +22,10 @@
 			--link: #005dcc;
 			--pre-code: #d1d0cc;
 			--inline-code: #926501;
-			--code-number: #73c6ee;
-			--code-string: #a3c04a;
-			--code-literal: #db80c7;
-			--code-special: #6ed3d3;
+			--code-number: #6cb2e3;
+			--code-string: #a6bf5c;
+			--code-literal: #bd75cb;
+			--code-special: #80d3c7;
 			--code-comment: #84858a;
 			--pre-background: #372d39;
 			--toc-width: 210px;
@@ -972,7 +972,7 @@ <h2><a href="#API">API</a></h2>
 				{{{ readme }}}
 
 				<a href="{{ builds.module }}">Built Source</a> • 
-				<a href="{{ builds.moduleMin }}">Minified</a> = <strong>{{ sizeMin }}kb</strong>, {{ sizeGzip }}kb gzipped
+				<a href="{{ builds.moduleMin }}">Minified</a> = {{ sizeMin }}kb, <strong>{{ sizeGzip }}kb</strong> gzipped
 
 			</section>
 
@@ -987,7 +987,7 @@ <h1>Examples</h1>
 							Hot Swap</a> - Replaces dat.gui across all three.js example pages. Except for a
 						few, this was done just by replacing the import URL.</li>
 					<li><a href="https://lil-gui-pixi.georgealways.com/tools/demo/">PixiJS Filters Demo Hot Swap</a> -
-						Replacing a very long dat.gui.</li>
+						Replaces a very long dat.gui.</li>
 				</ul>
 			</section>
 

scripts/homepage.js

@@ -47,8 +47,8 @@ guide = guide.replace( /^## ([\s\S]*?)$/gm, function( _, heading ) {
 
 } );
 
-// include version in CDN examples, bad form to use bare/latest
-guide = guide.replace( /@VERSION/g, '@' + pkg.version );
+// include major & minor version in CDN examples, bad form to use bare/latest
+guide = guide.replace( /@VERSION/g, '@' + pkg.version.substring( 0, pkg.version.lastIndexOf( '.' ) ) );
 
 // API.md
 // -----------------------------------------------------------------------------

src/Controller.js

@@ -166,8 +166,14 @@ export default class Controller {
 	 */
 	_callOnFinishChange() {
 
-		if ( this._changed && this._onFinishChange !== undefined ) {
-			this._onFinishChange.call( this, this.getValue() );
+		if ( this._changed ) {
+
+			this.parent._callOnFinishChange( this );
+
+			if ( this._onFinishChange !== undefined ) {
+				this._onFinishChange.call( this, this.getValue() );
+			}
+
 		}
 
 		this._changed = false;

src/GUI.js

@@ -488,6 +488,39 @@ export default class GUI {
 		}
 	}
 
+	/**
+	 * Pass a function to be called whenever a controller in this GUI has finished changing.
+	 * @param {function({object:object, property:string, value:any, controller:Controller})} callback
+	 * @returns {this}
+	 * @example
+	 * gui.onFinishChange( event => {
+	 * 	event.object     // object that was modified
+	 * 	event.property   // string, name of property
+	 * 	event.value      // new value of controller
+	 * 	event.controller // controller that was modified
+	 * } );
+	 */
+	onFinishChange( callback ) {
+		this._onFinishChange = callback;
+		return this;
+	}
+
+	_callOnFinishChange( controller ) {
+
+		if ( this.parent ) {
+			this.parent._callOnFinishChange( controller );
+		}
+
+		if ( this._onFinishChange !== undefined ) {
+			this._onFinishChange.call( this, {
+				object: controller.object,
+				property: controller.property,
+				value: controller.getValue(),
+				controller
+			} );
+		}
+	}
+
 	/**
 	 * Destroys all DOM elements and event listeners associated with this GUI
 	 */

src/NumberController.js

@@ -56,8 +56,8 @@ export default class NumberController extends Controller {
 	_initInput() {
 
 		this.$input = document.createElement( 'input' );
-		this.$input.setAttribute( 'type', 'text' );
-		this.$input.setAttribute( 'inputmode', 'decimal' );
+		this.$input.setAttribute( 'type', 'number' );
+		this.$input.setAttribute( 'step', 'any' );
 		this.$input.setAttribute( 'aria-labelledby', this.$name.id );
 
 		this.$widget.appendChild( this.$input );

style/controllers.scss

@@ -14,7 +14,9 @@
 			}
 		}
 
-		.name {
+		// > is used here to avoid styling FunctionController's .name,
+		// which gets put inside of its widget.
+		> .name {
 			min-width: var(--name-width);
 			flex-shrink: 0;
 			white-space: pre;
@@ -31,11 +33,6 @@
 		}
 	}
 
-	.controller.function .name {
-		line-height: unset;
-		padding: 0;
-	}
-
 	.controller.string input {
 		color: var(--string-color);
 	}
@@ -57,10 +54,7 @@
 					position: absolute;
 					border-radius: var(--widget-border-radius);
 					border: 1px solid #fff9;
-					left: 0;
-					right: 0;
-					top: 0;
-					bottom: 0;
+					inset: 0;
 				}
 			}
 		}
@@ -114,9 +108,7 @@
 				font-family: 'lil-gui';
 				content: '↕';
 				position: absolute;
-				top: 0;
-				right: 0;
-				bottom: 0;
+				inset: 0 0 0 auto;
 				padding-right: 0.375em;
 			}
 		}