library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

controller- =

Browse Source
This commit is contained in:
George Michael Brower 2014-09-09 15:53:30 -04:00
parent 64a7d0b630
commit ca14623507
34 changed files with 120 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -181,11 +181,11 @@ Since dat-gui is built using [Web Components]( todo ), you can also use HTML syn
```html ```html
<body> <body>
<controller-number min="-2" max="2" step="1" value="0"></controller-number> <dat-gui-number min="-2" max="2" step="1" value="0"></dat-gui-number>
<script> <script>
var controller = document.querySelector( 'controller-number' ); var controller = document.querySelector( 'dat-gui-number' );
controller.onChange( function() { controller.onChange( function() {
// react to UI changes ... // react to UI changes ...
@ -202,26 +202,26 @@ controller.onChange( function() {
dat-gui uses [Polymer]( todo ) under the hood to define custom elements. A dat-gui controller is just a [Polymer element]( todo ) with two important requirements: dat-gui uses [Polymer]( todo ) under the hood to define custom elements. A dat-gui controller is just a [Polymer element]( todo ) with two important requirements:
- Controllers must extend `<controller-base>`. - Controllers must extend `<dat-gui-base>`.
- Controllers must be associated with a data type. - Controllers must be associated with a data type.
Take for example this (simplified) source for dat-gui's `<controller-number>`: Take for example this (simplified) source for dat-gui's `<dat-gui-number>`:
```javascript ```javascript
Polymer( 'controller-number', { Polymer( 'dat-gui-number', {
// Define element ... // Define element ...
} ); } );
Gui.register( 'controller-number', function( value ) { Gui.register( 'dat-gui-number', function( value ) {
return typeof value == 'number'; return typeof value == 'number';
} ); } );
``` ```
`Gui.register` takes an element name and a test function. The test function tells dat-gui to add a `<controller-number>` to the panel when the user adds a variable whose type is `'number'`. `Gui.register` takes an element name and a test function. The test function tells dat-gui to add a `<dat-gui-number>` to the panel when the user adds a variable whose type is `'number'`.
A test function determines if a controller is appropriate for a given value. This example registers `<vector-controller>` for values that have properties `x`, `y` and `z`. A test function determines if a controller is appropriate for a given value. This example registers `<vector-controller>` for values that have properties `x`, `y` and `z`.

3
TODO.md
View File

@ -5,7 +5,8 @@ BUILD
REFACTOR REFACTOR
- [ ] controller-* => gui-* - [ ] kill strict
- [ ] controller-* => dat-gui-*
- [ ] gui.define* => gui.var* - [ ] gui.define* => gui.var*
- [ ] Gui.js => gui-panel => dat-gui - [ ] Gui.js => gui-panel => dat-gui

14
build/gui.html
View File

File diff suppressed because one or more lines are too long

14
build/gui.js
View File

File diff suppressed because one or more lines are too long

2
docs/style.styl
View File

@ -52,7 +52,7 @@ h3
#readme #readme
margin-right readme-margin margin-right readme-margin
gui-panel dat-gui
position fixed position fixed
width panel-width width panel-width
top 0px top 0px

16
elements/Gui.js
View File

@ -18,7 +18,7 @@
// Make domElement // Make domElement
this.panel = document.createElement( 'gui-panel' ); this.panel = document.createElement( 'dat-gui' );
this.panel.autoPlace = params.autoPlace !== false; this.panel.autoPlace = params.autoPlace !== false;
if ( this.panel.autoPlace ) { if ( this.panel.autoPlace ) {
@ -45,7 +45,7 @@
var controller; var controller;
if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) { if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) {
controller = document.createElement( 'controller-option' ); controller = document.createElement( 'dat-gui-option' );
} else { } else {
controller = Gui.getController( value ); controller = Gui.getController( value );
} }
@ -204,12 +204,12 @@
dat.dom.dom = function() {}; dat.dom.dom = function() {};
dat.controllers = {}; dat.controllers = {};
dat.controllers.Controller = constructor( 'controller-base' ); dat.controllers.Controller = constructor( 'dat-gui-base' );
dat.controllers.NumberController = constructor( 'controller-number' ); dat.controllers.NumberController = constructor( 'dat-gui-number' );
dat.controllers.FunctionController = constructor( 'controller-function' ); dat.controllers.FunctionController = constructor( 'dat-gui-function' );
dat.controllers.ColorController = constructor( 'controller-color' ); dat.controllers.ColorController = constructor( 'dat-gui-color' );
dat.controllers.BooleanController = constructor( 'controller-boolean' ); dat.controllers.BooleanController = constructor( 'dat-gui-boolean' );
dat.controllers.OptionController = constructor( 'controller-option' ); dat.controllers.OptionController = constructor( 'dat-gui-option' );
dat.controllers.NumberControllerBox = dat.controllers.NumberController; dat.controllers.NumberControllerBox = dat.controllers.NumberController;
dat.controllers.NumberControllerSlider = dat.controllers.NumberController; dat.controllers.NumberControllerSlider = dat.controllers.NumberController;

5
elements/controller-base/controller-base.html
View File

@ -1,5 +0,0 @@
<link rel="import" href="../../../polymer/polymer.html">
<script src="controller-base.js"></script>
<polymer-element name="controller-base" attributes="object path value"></polymer-element>

19
elements/controller-function/controller-function.html
View File

@ -1,19 +0,0 @@
<link rel="import" href="../controller-base/controller-base.html">
<script src="controller-function.js"></script>
<polymer-element
name="controller-function"
extends="controller-base"
>
<template>
<link rel="stylesheet" href="../shared/input.css">
<link rel="stylesheet" href="controller-function.css">
<div id="container"></div>
</template>
</polymer-element>

12
elements/controller-function/controller-function.js
View File

@ -1,12 +0,0 @@
/* globals Gui, Polymer */
Gui.register( 'controller-function', function( value ) {
return typeof value == 'function';
} );
Polymer( 'controller-function', {
} );

5
elements/dat-gui-base/dat-gui-base.html Normal file
View File

@ -0,0 +1,5 @@
<link rel="import" href="../../../polymer/polymer.html">
<script src="dat-gui-base.js"></script>
<polymer-element name="dat-gui-base" attributes="object path value"></polymer-element>

2
elements/controller-base/controller-base.js → elements/dat-gui-base/dat-gui-base.js
View File

@ -3,7 +3,7 @@
// [ ] onFinishChange() // [ ] onFinishChange()
Polymer( 'controller-base', { Polymer( 'dat-gui-base', {
ready: function() { ready: function() {

8
elements/controller-boolean/controller-boolean.html → elements/dat-gui-boolean/dat-gui-boolean.html
View File

@ -1,13 +1,13 @@
<link rel="import" href="../controller-base/controller-base.html"> <link rel="import" href="../dat-gui-base/dat-gui-base.html">
<script src="controller-boolean.js"></script> <script src="dat-gui-boolean.js"></script>
<polymer-element name="controller-boolean" extends="controller-base"> <polymer-element name="dat-gui-boolean" extends="dat-gui-base">
<template> <template>
<link rel="stylesheet" href="../shared/input.css"> <link rel="stylesheet" href="../shared/input.css">
<link rel="stylesheet" href="controller-boolean.css"> <link rel="stylesheet" href="dat-gui-boolean.css">
<div id="container" horizontal layout center on-tap="{{ toggle }}" class="value-{{ value }}"> <div id="container" horizontal layout center on-tap="{{ toggle }}" class="value-{{ value }}">

4
elements/controller-boolean/controller-boolean.js → elements/dat-gui-boolean/dat-gui-boolean.js
View File

@ -1,13 +1,13 @@
/* globals Gui, Polymer */ /* globals Gui, Polymer */
Gui.register( 'controller-boolean', function( value ) { Gui.register( 'dat-gui-boolean', function( value ) {
return typeof value == 'boolean'; return typeof value == 'boolean';
} ); } );
Polymer( 'controller-boolean', { Polymer( 'dat-gui-boolean', {
ready: function() { ready: function() {

0
elements/controller-boolean/controller-boolean.styl → elements/dat-gui-boolean/dat-gui-boolean.styl
View File

19
elements/dat-gui-function/dat-gui-function.html Normal file
View File

@ -0,0 +1,19 @@
<link rel="import" href="../dat-gui-base/dat-gui-base.html">
<script src="dat-gui-function.js"></script>
<polymer-element
name="dat-gui-function"
extends="dat-gui-base"
>
<template>
<link rel="stylesheet" href="../shared/input.css">
<link rel="stylesheet" href="dat-gui-function.css">
<div id="container"></div>
</template>
</polymer-element>

12
elements/dat-gui-function/dat-gui-function.js Normal file
View File

@ -0,0 +1,12 @@
/* globals Gui, Polymer */
Gui.register( 'dat-gui-function', function( value ) {
return typeof value == 'function';
} );
Polymer( 'dat-gui-function', {
} );

0
elements/controller-function/controller-function.styl → elements/dat-gui-function/dat-gui-function.styl
View File

10
elements/controller-number/controller-number.html → elements/dat-gui-number/dat-gui-number.html
View File

@ -1,17 +1,17 @@
<link rel="import" href="../controller-base/controller-base.html"> <link rel="import" href="../dat-gui-base/dat-gui-base.html">
<script src="controller-number.js"></script> <script src="dat-gui-number.js"></script>
<polymer-element <polymer-element
name="controller-number" name="dat-gui-number"
attributes="min max value step" attributes="min max value step"
extends="controller-base" extends="dat-gui-base"
> >
<template> <template>
<link rel="stylesheet" href="../shared/input.css"> <link rel="stylesheet" href="../shared/input.css">
<link rel="stylesheet" href="controller-number.css"> <link rel="stylesheet" href="dat-gui-number.css">
<div id="container" class="transition slider-{{ slider }}" horizontal layout center> <div id="container" class="transition slider-{{ slider }}" horizontal layout center>

4
elements/controller-number/controller-number.js → elements/dat-gui-number/dat-gui-number.js
View File

@ -3,13 +3,13 @@
// [ ] arrow keys // [ ] arrow keys
// [ ] min() max() step() commands of yore // [ ] min() max() step() commands of yore
Gui.register( 'controller-number', function( value ) { Gui.register( 'dat-gui-number', function( value ) {
return typeof value == 'number'; return typeof value == 'number';
} ); } );
Polymer( 'controller-number', { Polymer( 'dat-gui-number', {
value: 0, value: 0,
decimals: 3, decimals: 3,

0
elements/controller-number/controller-number.styl → elements/dat-gui-number/dat-gui-number.styl
View File

8
elements/controller-option/controller-option.html → elements/dat-gui-option/dat-gui-option.html
View File

@ -1,12 +1,12 @@
<link rel="import" href="../controller-base/controller-base.html"> <link rel="import" href="../dat-gui-base/dat-gui-base.html">
<script src="controller-option.js"></script> <script src="dat-gui-option.js"></script>
<polymer-element name="controller-option" extends="controller-base" attributes="options key"> <polymer-element name="dat-gui-option" extends="dat-gui-base" attributes="options key">
<template> <template>
<link rel="stylesheet" href="controller-option.css"> <link rel="stylesheet" href="dat-gui-option.css">
<div id="container" horizontal layout center> <div id="container" horizontal layout center>

2
elements/controller-option/controller-option.js → elements/dat-gui-option/dat-gui-option.js
View File

@ -1,7 +1,7 @@
/* globals Polymer, Object, Array */ /* globals Polymer, Object, Array */
Polymer( 'controller-option', { Polymer( 'dat-gui-option', {
key: null, key: null,

0
elements/controller-option/controller-option.styl → elements/dat-gui-option/dat-gui-option.styl
View File

10
elements/controller-string/controller-string.html → elements/dat-gui-string/dat-gui-string.html
View File

@ -1,16 +1,16 @@
<link rel="import" href="../controller-base/controller-base.html"> <link rel="import" href="../dat-gui-base/dat-gui-base.html">
<script src="controller-string.js"></script> <script src="dat-gui-string.js"></script>
<polymer-element <polymer-element
name="controller-string" name="dat-gui-string"
extends="controller-base" extends="dat-gui-base"
> >
<template> <template>
<link rel="stylesheet" href="../shared/input.css"> <link rel="stylesheet" href="../shared/input.css">
<link rel="stylesheet" href="controller-string.css"> <link rel="stylesheet" href="dat-gui-string.css">
<input id="input" type="text" value="{{ value }}" <input id="input" type="text" value="{{ value }}"
on-click="{{ click }}" on-click="{{ click }}"

4
elements/controller-string/controller-string.js → elements/dat-gui-string/dat-gui-string.js
View File

@ -1,13 +1,13 @@
/* globals Gui, Polymer */ /* globals Gui, Polymer */
Gui.register( 'controller-string', function( value ) { Gui.register( 'dat-gui-string', function( value ) {
return typeof value == 'string'; return typeof value == 'string';
} ); } );
Polymer( 'controller-string', { Polymer( 'dat-gui-string', {
click: function( e ) { click: function( e ) {

0
elements/controller-string/controller-string.styl → elements/dat-gui-string/dat-gui-string.styl
View File

6
elements/gui-panel/gui-panel.html → elements/dat-gui/dat-gui.html
View File

@ -3,12 +3,12 @@
<link rel="import" href="../gui-button/gui-button.html"> <link rel="import" href="../gui-button/gui-button.html">
<polymer-element <polymer-element
name="gui-panel" name="dat-gui"
attributes="docked autoplace open"> attributes="docked autoplace open">
<template> <template>
<link rel="stylesheet" href="gui-panel.css"> <link rel="stylesheet" href="dat-gui.css">
<div id="container" class="docked-{{ docked }} autoplace-{{ autoPlace }} open-{{ open }} touch-{{ touch }}" > <div id="container" class="docked-{{ docked }} autoplace-{{ autoPlace }} open-{{ open }} touch-{{ touch }}" >
@ -26,6 +26,6 @@
</template> </template>
<script src="gui-panel.js"></script> <script src="dat-gui.js"></script>
</polymer-element> </polymer-element>

2
elements/gui-panel/gui-panel.js → elements/dat-gui/dat-gui.js
View File

@ -3,7 +3,7 @@
// [ ] scrolling when docked // [ ] scrolling when docked
// [ ] scrolling when window short and not docked // [ ] scrolling when window short and not docked
Polymer( 'gui-panel', { Polymer( 'dat-gui', {
docked: false, docked: false,
open: true, open: true,

0
elements/gui-panel/gui-panel.styl → elements/dat-gui/dat-gui.styl
View File

2
examples/controller-custom/controller-custom.html
View File

@ -1,7 +1,7 @@
<link rel="import" href="../../../polymer/polymer.html"> <link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../elements/controller-number/controller-number.html"> <link rel="import" href="../../elements/controller-number/controller-number.html">
<polymer-element name="controller-vector" extends="controller-base"> <polymer-element name="controller-vector" extends="dat-gui-base">
<template> <template>
<controller-number id="x" object="{{ value }}" path="x" min="-1"></controller-number> <controller-number id="x" object="{{ value }}" path="x" min="-1"></controller-number>

4
examples/index.html
View File

@ -6,8 +6,8 @@
<title>dat-gui kitchen sink</title> <title>dat-gui kitchen sink</title>
<script src="../build/gui.js"></script> <!-- // <script src="../build/gui.js"></script> -->
<!-- <link rel="import" href="../gui.html"> --> <link rel="import" href="../gui.html">
<meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="viewport" content="width=device-width, user-scalable=no">

12
gui.html
View File

@ -4,12 +4,12 @@
<script src="elements/Gui.js"></script> <script src="elements/Gui.js"></script>
<!-- base elements --> <!-- base elements -->
<link rel="import" href="elements/gui-panel/gui-panel.html"> <link rel="import" href="elements/dat-gui/dat-gui.html">
<link rel="import" href="elements/gui-row/gui-row.html"> <link rel="import" href="elements/gui-row/gui-row.html">
<!-- controllers --> <!-- controllers -->
<link rel="import" href="elements/controller-number/controller-number.html"> <link rel="import" href="elements/dat-gui-number/dat-gui-number.html">
<link rel="import" href="elements/controller-string/controller-string.html"> <link rel="import" href="elements/dat-gui-string/dat-gui-string.html">
<link rel="import" href="elements/controller-boolean/controller-boolean.html"> <link rel="import" href="elements/dat-gui-boolean/dat-gui-boolean.html">
<link rel="import" href="elements/controller-function/controller-function.html"> <link rel="import" href="elements/dat-gui-function/dat-gui-function.html">
<link rel="import" href="elements/controller-option/controller-option.html"> <link rel="import" href="elements/dat-gui-option/dat-gui-option.html">

14
index.html
View File

@ -136,11 +136,11 @@ customContainer.appendChild(gui.domElement);
<p>Since dat-gui is built using <a href="todo">Web Components</a>, you can also use HTML syntax to add controllers to the page.</p> <p>Since dat-gui is built using <a href="todo">Web Components</a>, you can also use HTML syntax to add controllers to the page.</p>
<pre><code class="lang-html">&lt;body&gt; <pre><code class="lang-html">&lt;body&gt;
&lt;controller-number min=&quot;-2&quot; max=&quot;2&quot; step=&quot;1&quot; value=&quot;0&quot;&gt;&lt;/controller-number&gt; &lt;dat-gui-number min=&quot;-2&quot; max=&quot;2&quot; step=&quot;1&quot; value=&quot;0&quot;&gt;&lt;/dat-gui-number&gt;
&lt;script&gt; &lt;script&gt;
var controller = document.querySelector( &#39;controller-number&#39; ); var controller = document.querySelector( &#39;dat-gui-number&#39; );
controller.onChange( function() { controller.onChange( function() {
// react to UI changes ... // react to UI changes ...
@ -154,23 +154,23 @@ controller.onChange( function() {
<h3 id="defining-custom-controllers">Defining Custom Controllers</h3> <h3 id="defining-custom-controllers">Defining Custom Controllers</h3>
<p>dat-gui uses <a href="todo">Polymer</a> under the hood to define custom elements. A dat-gui controller is just a <a href="todo">Polymer element</a> with two important requirements:</p> <p>dat-gui uses <a href="todo">Polymer</a> under the hood to define custom elements. A dat-gui controller is just a <a href="todo">Polymer element</a> with two important requirements:</p>
<ul> <ul>
<li>Controllers must extend <code>&lt;controller-base&gt;</code>.</li> <li>Controllers must extend <code>&lt;dat-gui-base&gt;</code>.</li>
<li>Controllers must be associated with a data type.</li> <li>Controllers must be associated with a data type.</li>
</ul> </ul>
<p>Take for example this (simplified) source for dat-gui&#39;s <code>&lt;controller-number&gt;</code>:</p> <p>Take for example this (simplified) source for dat-gui&#39;s <code>&lt;dat-gui-number&gt;</code>:</p>
<pre><code class="lang-javascript">Polymer( &#39;controller-number&#39;, { <pre><code class="lang-javascript">Polymer( &#39;dat-gui-number&#39;, {
// Define element ... // Define element ...
} ); } );
Gui.register( &#39;controller-number&#39;, function( value ) { Gui.register( &#39;dat-gui-number&#39;, function( value ) {
return typeof value == &#39;number&#39;; return typeof value == &#39;number&#39;;
} ); } );
</code></pre> </code></pre>
<p><code>Gui.register</code> takes an element name and a test function. The test function tells dat-gui to add a <code>&lt;controller-number&gt;</code> to the panel when the user adds a variable whose type is <code>&#39;number&#39;</code>.</p> <p><code>Gui.register</code> takes an element name and a test function. The test function tells dat-gui to add a <code>&lt;dat-gui-number&gt;</code> to the panel when the user adds a variable whose type is <code>&#39;number&#39;</code>.</p>
<p>A test function determines if a controller is appropriate for a given value. This example registers <code>&lt;vector-controller&gt;</code> for values that have properties <code>x</code>, <code>y</code> and <code>z</code>.</p> <p>A test function determines if a controller is appropriate for a given value. This example registers <code>&lt;vector-controller&gt;</code> for values that have properties <code>x</code>, <code>y</code> and <code>z</code>.</p>
<pre><code class="lang-javascript">Gui.register( &#39;vector-controller&#39;, function( value ) { <pre><code class="lang-javascript">Gui.register( &#39;vector-controller&#39;, function( value ) {

12
tests/test.gui.js
View File

@ -30,13 +30,13 @@ describe( 'Gui', function() {
it( 'picks the right controller for the job', function() { it( 'picks the right controller for the job', function() {
expectController( 'controller-number', 1234 ); expectController( 'dat-gui-number', 1234 );
expectController( 'controller-string', 'string value' ); expectController( 'dat-gui-string', 'string value' );
expectController( 'controller-function', function(){} ); expectController( 'dat-gui-function', function(){} );
expectController( 'controller-boolean', true ); expectController( 'dat-gui-boolean', true );
expectController( 'controller-option', 'hey', [ 'hey', 'hi', 'ho' ] ); expectController( 'dat-gui-option', 'hey', [ 'hey', 'hi', 'ho' ] );
expectController( 'controller-option', 'a', { a: 'a', b: 'b', c: 'c' } ); expectController( 'dat-gui-option', 'a', { a: 'a', b: 'b', c: 'c' } );
// expectController( 'controller-color', '#00ff00' ); // expectController( 'controller-color', '#00ff00' );
// expectController( 'controller-color', '#aba' ); // expectController( 'controller-color', '#aba' );