Merge branch 'develop'

changelog.md

@@ -1,3 +1,8 @@
+## 0.15.1
+
+- Fixed a bug preventing folders from being removed with `Remove()`.
+- There was an issue introduced by 0.15.0 where the guify-container covers all content and has a higher z-index than the content underneath, eating all touch/click events. To fix this, the z-index of guify-container is now unset, and the sub-elements are given the z-index that guify-container used to get (9999).
+
 ## 0.15.0
 
 - POTENTIALLY BREAKING CHANGE: Modified the way the GUI elements are constructed internally. If you're modifying the internals in your CSS, make sure everything looks right!

contributing.md

@@ -0,0 +1,5 @@
+# Contributing
+
+All work on this library is done against the `develop` branch, which gets merged into `main` when a new release is ready. Accordingly, if you'd like to contribute to Guify, please work off of the `develop` branch.
+
+This isn't strictly necessary, but please make sure you're not introducing any new ESLint warnings. If you're on VS Code, you can install the ESLint plugin to make this easier, or you can run it from the command line with `npm run lint`.

package.json

@@ -2,16 +2,19 @@
   "//": "--------------- Script Info --------------- ",
   "name": "guify",
   "author": "Jonathan Cole <[email protected]>",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "A simple GUI for inspecting and changing JS variables",
   "keywords": [
     "gui",
+    "ui",
     "inspect",
     "inspector",
     "bind",
-    "ui",
+    "binding",
     "project",
-    "creative coding"
+    "creative coding",
+    "p5",
+    "three"
   ],
   "repository": {
     "type": "git",
@@ -26,11 +29,11 @@
   "scripts": {
     "build:prod": "webpack --mode=production",
     "build:dev": "webpack --mode=development --progress",
+    "buildall": "npm-run-all build:prod build:dev",
     "build:dev:watch": "webpack --mode=development --progress --watch",
     "serve": "webpack serve --mode=development",
     "develop": "npm-run-all --parallel build:dev:watch serve",
     "test": "mocha --require @babel/register --colors ./test/*.spec.js",
-    "buildall": "npm-run-all build:prod build:dev",
     "prepublish": "npm run-script buildall",
     "ci": "npm run-script buildall",
     "lint": "eslint ."

readme.md

@@ -1,39 +1,70 @@
 # guify
 
 <p align="center">
-    <img src="https://raw.githubusercontent.com/colejd/guify/main/docs/Guify.png" width="80%">
+    <img src="./.meta-files/images/Hero-Screenshot.png" width="80%">
 </p>
 <p align="center">
     <a href="https://badge.fury.io/js/guify"><img src="https://badge.fury.io/js/guify.svg" alt="npm version" height="18"></a>
 </p>
 
 <p align="center">
     <a href="https://jons.website/projects/guify">Demo</a>
+    |
+    <a href="/docs/api.md">Docs</a>
 </p>
 
-Guify provides you a simple GUI for your JS code. I made this because there wasn't anything really good for quick GUI creation for things like [three.js](https://threejs.org/) or [p5.js](https://p5js.org/) projects.
+Guify is a runtime JS library that gives you a simple way to build a GUI for your JS projects. It pairs very well with [three.js](https://threejs.org/) and [p5.js](https://p5js.org/). Consider it an opinionated take on [dat.GUI](https://github.com/dataarts/dat.gui).
 
-Guify gives you toast notifications, as well as an optional header bar to give your project a "web app" look. Each component of the GUI can be bound to a variable so you don't have to manually poll its state.
+Here are the big features:
 
-Guify is designed to be accessibility-friendly, but I don't have a good way to test it. If something doesn't work for you, please file an issue and I'll do my best to help!
-
-[Check out the React version!](https://github.com/dbismut/react-guify)
+* Bind any UI component to any variable. Guify supports arbitrary text inputs, colors, ranges, file inputs, booleans, and more.
+* Guify is easy to graft onto any page and integrate with your existing JS code. Just point your components at the variables you already have:
+    ```js
+    var someVariable = 0;
+    guify.Register([{
+        {
+            type: 'range',
+            object: this, property: 'someProperty',
+            label: 'Some Property',
+            min: 0, max: 20, step: 1
+        },
+    }])
+    ```
+* Give it that "web app" look with an optional header bar and easy toast notifications.
+* Style it however you'd like. You can use one of three built-in themes, or build your own to get exactly the look you want.
 
+---
 
 ## Installation
-`npm install --save guify`, or copy `guify.js` from [`/lib`](/lib).
 
+Below are some common ways to integrate Guify with your setup.
 
-## Usage
-For browser projects, you can use the transpiled version in [`/lib`](/lib).
-If you're working with ES6 (for example, in a Node project), you can
-use the files at [`/src`](/src) directly.
+### Quick Start (Browser)
+
+To integrate on an existing page, you can use the transpiled version in [`/lib`](/lib), either by including it with your files or using a CDN:
+
+```html
+<script src="https://unpkg.com/[email protected]/lib/guify.min.js"></script>
+```
+
+This adds a `guify` function at the global level, which you can use to construct the GUI. For example:
+
+```html
+<script src="https://unpkg.com/[email protected]/lib/guify.min.js"></script>
+
+<script>
+    var gui = new guify({ ... })
+    gui.register([ ... ])
+</script>
+```
+
+See the <a href="#Usage">Usage guide</a> below for more details. [example.html](/example/index.html) also demonstrates this pattern.
 
-The API can be found at [/docs/api.md](/docs/api.md).
+### Quick Start (NPM)
 
+First, install with NPM: `npm install --save guify`
 
-### Quick Start
-First import using either `require` or ES6 imports:
+Then you can import using either `require` or `import` depending on your preference:
 ```js
 // ES6
 import guify from 'guify'
@@ -43,39 +74,81 @@ let guify = require('guify');
 ```
 
 Then you can make a quick GUI this way:
+```js
+var gui = new guify({ ... });
+gui.Register([ ... ]);
+```
+
+See the <a href="#Usage">Usage guide</a> below for more details.
+
+### Quick Start (React)
+
+Check out the unofficial [React port](https://github.com/dbismut/react-guify).
+
+---
+
+## Usage
+
+Once you have Guify available to construct in your project, make a `guify` instance:
+
 ```js
 var gui = new guify({
     title: "Some Title",
-    align: 'right',
-    theme: 'light'
 });
+```
+
+The various controls in Guify are called "components". You can feed component definitions to Guify as follows:
 
+```js
 gui.Register([
-    {
+    { // A slider representing a value between 0 and 20
         type: 'range', label: 'Range',
-        min: 0, max: 20, step: 1
+        min: 0, max: 20, step: 1,
+        onChange: (value) => {
+            console.log(value);
+        }
     },
     {
-        type: 'button', label: 'Button'
+        type: 'button', label: 'Button',
+        action: () => {
+            console.log('Button clicked!');
+        }
     },
     {
-        type: 'checkbox', label: 'Checkbox'
+        type: 'checkbox', label: 'Checkbox',
+        onChange: (value) => {
+            console.log(value);
+        }
     }
 ]);
 ```
 
-See [example.html](/example/index.html) for a more complete example.
+You can also bind components representing a value to your JS variables instead of using an `onChange()` handler. For example:
+
+```js
+var someNumber = 10;
+gui.Register([
+    { // A slider representing `someNumber`, constrained between 0 and 20.
+        type: 'range', label: 'Range',
+        min: 0, max: 20, step: 1,
+        object: this, property: 'someNumber'
+    },
+```
+
+There are many points of customization here. See the docs at [/docs/api.md](/docs/api.md). A much more robust example can also be found at [example.html](/example/index.html).
 
 
 ### Building This Package
-If you want to build this package, you can run `npm install` and then `npm run build`, which will create `/lib/guify.min.js`.
+If you want to build this package, you can run `npm install` and then `npm run build:prod`, which will create `/lib/guify.min.js`.
 
 NPM commands:
 
 - `build:prod`: Creates `/lib/guify.min.js`, the default script used by this package.
 - `build:dev`: Creates `/lib/guify.js`.
 - `develop`: Runs `build:dev` and serves the `/example` directory as a static web page.
 
+---
+
 ## Changelog
 See [changelog.md](/changelog.md).
 
@@ -89,5 +162,6 @@ This package is largely based on [control-panel](https://github.com/freeman-lab/
 For setting this up, I used [webpack-library-starter](https://github.com/krasimir/webpack-library-starter).
 
 ## Alternatives
-- [Dat.GUI](https://github.com/dataarts/dat.gui)
+- [dat.GUI](https://github.com/dataarts/dat.gui)
 - [Control-Panel](https://github.com/freeman-lab/control-panel)
+- [Oui](https://github.com/wearekuva/oui)

src/components/public/folder.js

@@ -73,6 +73,12 @@ export default class Folder extends ComponentBase {
             this.folderContainer.classList.add("guify-folder-closed");
             this.arrow.innerHTML = "▸"; // Right triangle
         }
+    }
 
+    Remove() {
+        if (this.folderContainer) {
+            this.folderContainer.parentNode.removeChild(this.folderContainer);
+        }
+        super.Remove();
     }
 }

src/gui.css

@@ -5,6 +5,10 @@
     left: 0;
     width: 100%;
     height: 100%;
+}
+
+/* Sub-elements of guify-container should appear over anything else. */
+.guify-container > * {
     z-index: 9999;
 }