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

merge

Browse Source
This commit is contained in:
Doug Fritz 2014-09-09 13:19:48 -07:00
commit bb66f53062
38 changed files with 145 additions and 117 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`.

2
TODO.md
View File

@ -8,6 +8,8 @@ REFACTOR
- [ ] controller-* => gui-* - [ ] controller-* => gui-*
- [x] gui.define* => gui.var* - [x] gui.define* => gui.var*
- [ ] Gui.js => gui-panel => dat-gui - [ ] Gui.js => gui-panel => dat-gui
- [x] controller-* => dat-gui-*
- [x] kill strict
PARITY PARITY

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
build/gui.shim.js
View File

@ -1 +1 @@
!function(n){"use strict";var t=function(){this.defined={}};t.ready=function(n){n()},t.prototype.define=function(n,t){return this.defined[n]=t,e},t.prototype.add=function(){return e};var i=function(){return this},e={on:i};n.Gui=t}(this); !function(n){var t=function(){this.defined={}};t.ready=function(n){n()},t.prototype.define=function(n,t){return this.defined[n]=t,e},t.prototype.add=function(){return e};var i=function(){return this},e={on:i};n.Gui=t}(this);

2
docs/main.js
View File

@ -1,5 +1,3 @@
'use strict';
Gui.ready( init ); Gui.ready( init );
function init() { function init() {

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

17
elements/Gui.js
View File

@ -1,7 +1,6 @@
( function( scope ) { ( function( scope ) {
/* globals Path */ /* globals Path */
'use strict';
var Gui = function( params ) { var Gui = function( params ) {
@ -18,7 +17,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 +44,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 +203,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

1
elements/gui-row/gui-row.js
View File

@ -1,5 +1,4 @@
/* globals Polymer */ /* globals Polymer */
'use strict';
Polymer( 'gui-row', { Polymer( 'gui-row', {

6
elements/shim.js
View File

@ -1,8 +1,14 @@
// Use gui.shim.js in production when you want to use dat.gui to recall values without any of the interface. // Use gui.shim.js in production when you want to use dat.gui to recall values without any of the interface.
( function( scope ) { ( function( scope ) {
<<<<<<< HEAD
'use strict'; 'use strict';
||||||| merged common ancestors
'use strict';
=======
>>>>>>> 8d86460ebde6d3dda4dec6e7783f0223fca59d00
var Gui = function() { var Gui = function() {
this.vars = {}; this.vars = {};

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>

12
examples/index.html
View File

@ -4,10 +4,22 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>dat-gui kitchen sink</title> <title>dat-gui kitchen sink</title>
<<<<<<< HEAD
<script src="../build/gui.js"></script> <script src="../build/gui.js"></script>
<!-- <link rel="import" href="../gui.html"> --> <!-- <link rel="import" href="../gui.html"> -->
||||||| merged common ancestors
<script src="../build/gui.js"></script>
<!-- <link rel="import" href="../gui.html"> -->
=======
<!-- // <script src="../build/gui.js"></script> -->
<link rel="import" href="../gui.html">
>>>>>>> 8d86460ebde6d3dda4dec6e7783f0223fca59d00
<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 ) {

16
tests/test.gui.js
View File

@ -30,13 +30,25 @@ describe( 'Gui', function() {
it( 'picks the right controller for the job', function() { it( 'picks the right controller for the job', function() {
<<<<<<< HEAD
expectController( 'controller-number', 1234 ); expectController( 'controller-number', 1234 );
expectController( 'controller-string', 'string value' ); expectController( 'controller-string', 'string value' );
expectController( 'controller-function', function() {} ); expectController( 'controller-function', function() {} );
expectController( 'controller-boolean', true ); expectController( 'controller-boolean', true );
||||||| merged common ancestors
expectController( 'controller-number', 1234 );
expectController( 'controller-string', 'string value' );
expectController( 'controller-function', function(){} );
expectController( 'controller-boolean', true );
=======
expectController( 'dat-gui-number', 1234 );
expectController( 'dat-gui-string', 'string value' );
expectController( 'dat-gui-function', function(){} );
expectController( 'dat-gui-boolean', true );
>>>>>>> 8d86460ebde6d3dda4dec6e7783f0223fca59d00
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' );