no message

This commit is contained in:
George Michael Brower 2014-08-21 13:20:06 -04:00
parent a6854f4e69
commit 2d2f4ee888
46 changed files with 21371 additions and 205 deletions

2
.gitignore vendored
View File

@ -1,4 +1,2 @@
build
components
node_modules
*.css

10
README.html Normal file
View File

@ -0,0 +1,10 @@
<h1 id="dat-gui">dat.gui</h1>
<p>Quickly configurable controllers for the web. </p>
<h2 id="usage">Usage</h2>
<p>Include </p>
<pre><code class="lang-html">&lt;script src=&quot;gui.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>With very little code, dat.GUI creates an interface that you can use to modify variables.</p>
<pre><code class="lang-javascript">var gui = new dat.gui();
gui.add( object, &#39;someNumber&#39;, 0, 1 );
</code></pre>

19
README.md Normal file
View File

@ -0,0 +1,19 @@
# dat.gui
Quickly configurable controllers for the web.
## Usage
Include
```html
<script src="gui.js"></script>
```
With very little code, dat gui creates an interface that you can use to modify variables.
```javascript
var gui = new dat.gui();
gui.add( object, 'someNumber', 0, 1 );
```

1187
build/gui.html Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,19 @@
{
"name": "core-component-page",
"private": true,
"dependencies": {
"platform": "Polymer/platform#>=0.3.0 <1.0.0",
"polymer": "Polymer/polymer#>=0.3.0 <1.0.0"
},
"homepage": "https://github.com/Polymer/core-component-page",
"version": "0.3.5",
"_release": "0.3.5",
"_resolution": {
"type": "version",
"tag": "0.3.5",
"commit": "87617aa1282994eecf5f1f57ef149155ed96f7f1"
},
"_source": "git://github.com/Polymer/core-component-page.git",
"_target": ">=0.3.0 <1.0.0",
"_originalSource": "Polymer/core-component-page"
}

View File

@ -0,0 +1,6 @@
core-component-page
===================
See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-component-page) for more information.
Note: this is the vulcanized version of [`core-component-page-dev`](https://github.com/Polymer/core-component-page-dev) (the source).

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

@ -0,0 +1,8 @@
{
"name": "core-component-page",
"private": true,
"dependencies": {
"platform": "Polymer/platform#>=0.3.0 <1.0.0",
"polymer": "Polymer/polymer#>=0.3.0 <1.0.0"
}
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,23 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<script src="../platform/platform.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="core-component-page.html">
</head>
<body unresolved>
<core-component-page></core-component-page>
</body>
</html>

View File

@ -0,0 +1,22 @@
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<script src="../platform/platform.js"></script>
<link rel="import" href="../core-component-page/core-component-page.html">
</head>
<body unresolved>
<core-component-page></core-component-page>
</body>
</html>

View File

@ -0,0 +1,26 @@
{
"name": "platform",
"main": "platform.js",
"homepage": "https://github.com/Polymer/platform",
"authors": [
"The Polymer Authors"
],
"description": "Integrate platform polyfills: load, build, test",
"keywords": [
"polymer",
"web",
"components"
],
"license": "BSD",
"private": true,
"version": "0.3.5",
"_release": "0.3.5",
"_resolution": {
"type": "version",
"tag": "0.3.5",
"commit": "413707498b62d2c66f923dcac6809d56e7d6dab6"
},
"_source": "git://github.com/Polymer/platform.git",
"_target": ">=0.3.0 <1.0.0",
"_originalSource": "Polymer/platform"
}

View File

@ -0,0 +1,6 @@
Platform
========
Aggregated polyfills the Polymer platform.
[![Analytics](https://ga-beacon.appspot.com/UA-39334307-2/Polymer/platform/README)](https://github.com/igrigorik/ga-beacon)

View File

@ -0,0 +1,16 @@
{
"name": "platform",
"main": "platform.js",
"homepage": "https://github.com/Polymer/platform",
"authors": [
"The Polymer Authors"
],
"description": "Integrate platform polyfills: load, build, test",
"keywords": [
"polymer",
"web",
"components"
],
"license": "BSD",
"private": true
}

View File

@ -0,0 +1,39 @@
BUILD LOG
---------
Build Time: 2014-08-07T17:12:14
NODEJS INFORMATION
==================
nodejs: v0.10.28
chai: 1.9.1
grunt: 0.4.4
grunt-audit: 0.0.3
grunt-concat-sourcemap: 0.4.1
grunt-contrib-concat: 0.4.0
grunt-contrib-uglify: 0.5.0
grunt-contrib-yuidoc: 0.5.2
grunt-karma: 0.8.3
karma: 0.12.14
karma-crbot-reporter: 0.0.4
karma-firefox-launcher: 0.1.3
karma-ie-launcher: 0.1.5
karma-mocha: 0.1.4
karma-safari-launcher: 0.1.1
karma-script-launcher: 0.1.0
mocha: 1.20.1
Platform: 0.3.5
REPO REVISIONS
==============
CustomElements: 7fb280cb30f9fe26ed60c0fdb75a1eebe4c9dab1
HTMLImports: fe9a92700b7a0bc7a9d582f4767ab23ec195a423
NodeBind: c47bc1b40d1cf0123b29620820a7111471e83ff3
ShadowDOM: c4da63735ba6c00a7d6af5c1b118f84bd6a2e114
TemplateBinding: f11e2e7faa074f54e711f5abb40e278f3005500d
WeakMap: 6662df5cb7146707238b08e7a65cf70056ae516a
observe-js: 08b8dfa21bf49d9ac60bc495e77a0bfa57f84cde
platform-dev: e1453ea29013959ee3e1f893eaf97806629631dc
BUILD HASHES
============
build/platform.js: d4d1dc11321913bf930bb5109da0b5ed434c0a00

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,19 @@
{
"name": "polymer",
"private": true,
"dependencies": {
"platform": "Polymer/platform#>=0.3.0 <1.0.0",
"core-component-page": "Polymer/core-component-page#>=0.3.0 <1.0.0"
},
"homepage": "https://github.com/Polymer/polymer",
"version": "0.3.5",
"_release": "0.3.5",
"_resolution": {
"type": "version",
"tag": "0.3.5",
"commit": "a09a0e689fdeab11b53b41eaed033781733bf1eb"
},
"_source": "git://github.com/Polymer/polymer.git",
"_target": "~0.3.5",
"_originalSource": "Polymer/polymer"
}

View File

@ -0,0 +1,17 @@
# Polymer
[![Analytics](https://ga-beacon.appspot.com/UA-39334307-2/Polymer/polymer/README)](https://github.com/igrigorik/ga-beacon)
Build Status: [http://build.chromium.org/p/client.polymer/waterfall](http://build.chromium.org/p/client.polymer/waterfall)
## Brief Overview
For more detailed info goto [http://polymer-project.org/](http://polymer-project.org/).
Polymer is a new type of library for the web, designed to leverage the existing browser infrastructure to provide the encapsulation and extendability currently only available in JS libraries.
Polymer is based on a set of future technologies, including [Shadow DOM](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html), [Custom Elements](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html) and Model Driven Views. Currently these technologies are implemented as polyfills or shims, but as browsers adopt these features natively, the platform code that drives Polymer evacipates, leaving only the value-adds.
## Tools & Testing
For running tests or building minified files, consult the [tooling information](http://www.polymer-project.org/resources/tooling-strategy.html).

View File

@ -0,0 +1,8 @@
{
"name": "polymer",
"private": true,
"dependencies": {
"platform": "Polymer/platform#>=0.3.0 <1.0.0",
"core-component-page": "Polymer/core-component-page#>=0.3.0 <1.0.0"
}
}

View File

@ -0,0 +1,33 @@
BUILD LOG
---------
Build Time: 2014-08-07T17:12:22
NODEJS INFORMATION
==================
nodejs: v0.10.28
chai: 1.9.1
grunt: 0.4.4
grunt-audit: 0.0.3
grunt-contrib-uglify: 0.4.0
grunt-contrib-yuidoc: 0.5.2
grunt-karma: 0.8.3
grunt-string-replace: 0.2.7
karma: 0.12.14
karma-crbot-reporter: 0.0.4
karma-firefox-launcher: 0.1.3
karma-ie-launcher: 0.1.5
karma-mocha: 0.1.3
karma-safari-launcher: 0.1.1
karma-script-launcher: 0.1.0
mocha: 1.18.2
Polymer: 0.3.5
REPO REVISIONS
==============
polymer-expressions: 529532103a215b641d4efd607536ce87ec7723f6
polymer-gestures: 725191c5457b6e96c37a9db852e943fe3b40635f
polymer-dev: 56417b55d75f0a69d19e313c218c86b23c1daf18
BUILD HASHES
============
build/polymer.js: d1d70d03f791f2808e9dad16dc0e43bcbbd25c2d

View File

@ -0,0 +1,278 @@
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<style shim-shadowdom>
/*******************************
Flex Layout
*******************************/
html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
html /deep/ [layout][horizontal] {
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
html /deep/ [layout][horizontal][reverse] {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
html /deep/ [layout][vertical] {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
html /deep/ [layout][vertical][reverse] {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
html /deep/ [layout][wrap] {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
html /deep/ [layout][wrap-reverse] {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
html /deep/ [flex] {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
html /deep/ [flex][auto] {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
html /deep/ [flex][none] {
-ms-flex: none;
-webkit-flex: none;
flex: none;
}
html /deep/ [flex][one] {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
html /deep/ [flex][two] {
-ms-flex: 2;
-webkit-flex: 2;
flex: 2;
}
html /deep/ [flex][three] {
-ms-flex: 3;
-webkit-flex: 3;
flex: 3;
}
html /deep/ [flex][four] {
-ms-flex: 4;
-webkit-flex: 4;
flex: 4;
}
html /deep/ [flex][five] {
-ms-flex: 5;
-webkit-flex: 5;
flex: 5;
}
html /deep/ [flex][six] {
-ms-flex: 6;
-webkit-flex: 6;
flex: 6;
}
html /deep/ [flex][seven] {
-ms-flex: 7;
-webkit-flex: 7;
flex: 7;
}
html /deep/ [flex][eight] {
-ms-flex: 8;
-webkit-flex: 8;
flex: 8;
}
html /deep/ [flex][nine] {
-ms-flex: 9;
-webkit-flex: 9;
flex: 9;
}
html /deep/ [flex][ten] {
-ms-flex: 10;
-webkit-flex: 10;
flex: 10;
}
html /deep/ [flex][eleven] {
-ms-flex: 11;
-webkit-flex: 11;
flex: 11;
}
html /deep/ [flex][twelve] {
-ms-flex: 12;
-webkit-flex: 12;
flex: 12;
}
/* alignment in cross axis */
html /deep/ [layout][start] {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
html /deep/ [layout][center], html /deep/ [layout][center-center] {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
html /deep/ [layout][end] {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
/* alignment in main axis */
html /deep/ [layout][start-justified] {
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
html /deep/ [layout][center-justified], html /deep/ [layout][center-center] {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
html /deep/ [layout][end-justified] {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
html /deep/ [layout][around-justified] {
-ms-flex-pack: around;
-webkit-justify-content: space-around;
justify-content: space-around;
}
html /deep/ [layout][justified] {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/* self alignment */
html /deep/ [self-start] {
-ms-align-self: flex-start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
html /deep/ [self-center] {
-ms-align-self: center;
-webkit-align-self: center;
align-self: center;
}
html /deep/ [self-end] {
-ms-align-self: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
}
html /deep/ [self-stretch] {
-ms-align-self: stretch;
-webkit-align-self: stretch;
align-self: stretch;
}
/*******************************
Other Layout
*******************************/
html /deep/ [block] {
display: block;
}
/* ie support for hidden */
html /deep/ [hidden] {
display: none !important;
}
html /deep/ [relative] {
position: relative;
}
html /deep/ [fit] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
body[fullbleed] {
margin: 0;
height: 100vh;
}
/*******************************
Other
*******************************/
html /deep/ [segment], html /deep/ segment {
display: block;
position: relative;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin: 1em 0.5em;
padding: 1em;
background-color: white;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
border-radius: 5px 5px 5px 5px;
}
</style>

View File

@ -0,0 +1,13 @@
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="layout.html">
<script src="polymer.js"></script>
<!--<link rel="import" href="../polymer-dev/polymer.html">-->

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

84
elements/Gui.js Normal file
View File

@ -0,0 +1,84 @@
(function( scope ) {
var Gui = function() {
var panel = document.createElement( 'gui-panel' );
document.body.appendChild( panel );
return panel;
};
// Register custom controllers
// -------------------------------
var controllers = {};
Gui.register = function( elementName, test ) {
controllers[ elementName ] = test;
};
// Returns a controller based on a value
// -------------------------------
Gui.getController = function( value ) {
for ( var type in controllers ) {
var test = controllers[ type ];
if ( test( value ) ) {
return document.createElement( type );
}
}
};
// Old namespaces
// -------------------------------
var dat = {};
dat.gui = {};
dat.gui.GUI = Gui;
dat.GUI = dat.gui.GUI;
dat.color = {};
dat.color.Color = function() {};
dat.dom = {};
dat.dom.dom = function() {};
dat.controllers = {};
dat.controllers.Controller = constructor( 'controller-base' );
dat.controllers.NumberController = constructor( 'controller-number' );
dat.controllers.FunctionController = constructor( 'controller-function' );
dat.controllers.ColorController = constructor( 'controller-color' );
dat.controllers.BooleanController = constructor( 'controller-boolean' );
dat.controllers.OptionController = constructor( 'controller-option' );
dat.controllers.NumberControllerBox = dat.controllers.NumberController;
dat.controllers.NumberControllerSlider = dat.controllers.NumberController;
function constructor( elementName ) {
return function( object, path ) {
var el = document.createElement( elementName );
el.watch( object, path );
return el;
};
}
// Export
// -------------------------------
scope.dat = dat;
scope.Gui = Gui;
})( this );

View File

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

View File

@ -7,18 +7,24 @@
Polymer('controller-base', {
value: null,
object: null,
property: null,
ready: function() {
var _this = this;
this.update();
},
bind: function() {
update: function() {},
init: function() {},
// Observers
// -------------------------------
watch: function( object, path ) {
this.object = object;
this.path = path;
if ( this._observer ) {
this._observer.close();
@ -27,51 +33,23 @@ Polymer('controller-base', {
var _this = this;
this._observer = new PathObserver( this.object, this.property );
this._observer = new PathObserver( this.object, this.path );
this._observer.open( function( newValue ) {
_this.value = newValue;
} );
this.value = this.object[ this.property ];
},
update: function() {},
listen: function() {
console.warn( 'controller.listen() is deprecated. All controllers are listened for free.' );
},
// Observers
// -------------------------------
objectChanged: function( oldObject, newObject ) {
if ( newObject && this.property ) {
this.bind();
}
},
propertyChanged: function( oldProperty, newProperty ) {
if ( newProperty && this.object ) {
this.bind();
}
this.value = this.object[ this.path ];
},
valueChanged: function() {
if ( this.object && this.property ) {
this.object[ this.property ] = this.value;
if ( this._observer ) {
Path.get( this.path ).setValueFrom( this.object, this.value );
}
this.update();
@ -84,6 +62,30 @@ Polymer('controller-base', {
map: function( x, a, b, c, d ) {
return ( x - a ) / ( b - a ) * ( d - c ) + c;
},
// Legacy
// -------------------------------
listen: function() {
console.warn( 'controller.listen() is deprecated. All controllers are listened for free.' );
return this;
},
getValue: function() {
return this.value;
},
setValue: function( v ) {
this.value = v;
}
});

View File

@ -13,7 +13,7 @@
<link rel="stylesheet" href="controller-number.css">
<div id="container" class="transition" horizontal layout center>
<div id="container" class="transition slider-{{ slider }}" horizontal layout center>
<div id="track-container"
on-down="{{ down }}"
@ -22,6 +22,7 @@
on-tracky="{{ tracky }}"
on-trackstart="{{ trackstart }}"
horizontal layout center
hidden?="{{ !slider }}"
flex>
<div id="track">

View File

@ -14,13 +14,21 @@
*/
Polymer('controller-number', {
Gui.register( 'controller-number', function( value ) {
return typeof value == 'number';
} );
Polymer( 'controller-number', {
min: 0,
max: 1,
value: 0,
step: null,
decimals: 3,
computed: {
slider: 'min !== undefined && max !== undefined'
},
ready: function() {
@ -38,30 +46,46 @@ Polymer('controller-number', {
},
init: function( min, max, step ) {
this.min = min;
this.max = max;
this.step = step;
},
// Observers
// -------------------------------
valueChanged: function() {
valueChanged: function( newValue ) {
if ( this.step !== null ) {
if ( this.step !== undefined ) {
this.value = Math.round( this.value / this.step ) * this.step;
}
if ( this.min !== undefined ) {
this.value = Math.max( this.value, this.min );
}
if ( this.max !== undefined ) {
this.value = Math.min( this.value, this.max );
}
this.super();
},
minChanged: function() {
this.value = Math.max( this.value, this.min );
this.update();
},
maxChanged: function() {
this.value = Math.min( this.value, this.max );
this.update();
},
update: function() {
@ -122,30 +146,40 @@ Polymer('controller-number', {
// -------------------------------
click: function( e ) {
this.$.input.select();
},
down: function( e ) {
e.preventDefault();
this._rect = this.$.track.getBoundingClientRect();
if ( !this._alt ) this.value = this.valueFromX( e.x );
},
up: function( e ) {
// this.$.container.classList.add( 'transition' );
},
trackstart: function( e ) {
// this.$.container.classList.remove( 'transition' );
this._dragFriction = 1;
},
trackx: function( e ) {
if ( this.step == null ) {
if ( this.step === undefined ) {
var dv = this.valueFromDX( e.ddx );
if ( this._alt ) dv /= 10;
this.value += dv * this._dragFriction;
} else {
@ -162,16 +196,21 @@ Polymer('controller-number', {
},
blur: function( e ) {
var v = parseFloat( this.$.input.value );
if ( v === v ) {
this.value = v;
}
},
keydown: function( e ) {
if ( e.keyCode == 13 ) {
this.$.input.blur();
}
},
@ -180,7 +219,7 @@ Polymer('controller-number', {
truncate: function( v ) {
if ( v % 1 !== 0 && this.decimals !== null ) {
if ( v % 1 !== 0 && this.decimals !== undefined ) {
return this.limitDecimals( v, this.decimals );
} else {
return v;
@ -210,11 +249,15 @@ Polymer('controller-number', {
},
valueFromX: function( x ) {
return this.map( x, this._rect.left, this._rect.right, this.min, this.max );
},
valueFromDX: function( dx ) {
return this.map( dx, 0, this._rect.width, 0, this.max - this.min );
}
});

View File

@ -12,7 +12,7 @@ knob-size = 6px
display: block;
font-size: 0;
height: 100%;
user-select: none;\
user-select: none;
}
#track-container {
@ -80,23 +80,28 @@ input {
height: track-height;
margin: 0 ( padding/2 );
display: inline-block;
background: transparent;
border: 0;
text-align: center;
outline: none;
width: 20%;
.slider-true & {
margin-left: padding;
width: 100%;
width: 22%;
transition: width 0.2s ease;
}
input:hover {
&:hover {
width: 28%;
}
}
input:focus {
&:focus {
width: 50%;
}
}
}
input::selection {

View File

@ -0,0 +1,34 @@
<link rel="import" href="../../components/polymer/polymer.html">
<link rel="import" href="../controller-number/controller-number.html">
<polymer-element name="controller-vector" extends="controller-base">
<template>
<controller-number id="x" object="{{ value }}" path="x" min="-1"></controller-number>
<controller-number id="y" object="{{ value }}" path="y" min="-1"></controller-number>
<controller-number id="z" object="{{ value }}" path="z" min="-2"></controller-number>
</template>
<script>
Gui.register( 'controller-vector', function( value ) {
return value instanceof THREE.Vector3;
} );
Polymer('controller-vector', {
ready: function() {
},
init: function() {
}
});
</script>
</polymer-element>

View File

@ -1,16 +1,17 @@
<link rel="import" href="../../components/polymer/polymer.html">
<link rel="import" href="../gui-row/gui-row.html">
<polymer-element
name="gui-panel"
constructor="GUI">
attributes="docked">
<template>
<link rel="stylesheet" href="gui-panel.css">
<div>
<div id="container" class="docked-{{ docked }}">
<content></content>
<div id="closeButton">&times;</div>
<div id="closeButton" hidden?="{{ docked }}">&times;</div>
</div>
</template>

View File

@ -1,53 +1,53 @@
Polymer('gui-panel', {
docked: false,
ready: function() {
document.body.appendChild( this );
this.anon.values = {};
},
add: function( object, property ) {
anon: function( name, initialValue ) {
if ( arguments.length == 1 ) {
return this.anon.values[ name ];
}
var args = [ this.anon.values, name ];
args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
this.anon.values[ name ] = initialValue;
return this.add.apply( this, args );
},
add: function( object, path ) {
// Make controller
var value = Path.get( path ).getValueFrom( object );
if ( value == null || value == undefined ) {
return console.error( object + ' doesn\'t have a value for path "' + path + '".' );
}
var args = Array.prototype.slice.call( arguments, 2 );
var controller = Gui.getController( value, args );
if ( !controller ) {
return console.error( 'Unrecognized type: ', value );
}
controller.watch( object, path )
controller.init.apply( controller, args );
// Make row
var row = document.createElement( 'gui-row' );
var controller;
var value;
// gui.add( object, 'property' ...
if ( typeof object == 'object' ) {
value = object[ property ];
// gui.add( 0, 'anonymous-value' ...
} else {
value = object;
}
if ( typeof value == 'number' ) {
controller = document.createElement( 'controller-number' );
if ( arguments[ 2 ] !== undefined ) controller.min = arguments[ 2 ];
if ( arguments[ 3 ] !== undefined ) controller.max = arguments[ 3 ];
if ( arguments[ 4 ] !== undefined ) controller.step = arguments[ 4 ];
}
// gui.add( object, 'property' ...
if ( typeof object == 'object' ) {
controller.object = object;
controller.property = property;
} else {
controller.value = value;
}
row.name = property;
row.name = path;
controller.name = function( name ) {
row.name = name;

View File

@ -1,20 +1,29 @@
@import '../shared';
:host {
position: absolute;
top: 0;
right: 20px;
width: 270px;
}
#closeButton {
font();
font-size: 14px;
cursor: pointer;
background: #000;
text-align: center;
padding: padding*0.4 padding;
}
#container {
background: #1a1a1a;
position: fixed;
top: 0;
width: 270px;
&.docked-false {
right: 20px;
}
&.docked-true {
right: 0;
bottom: 0;
}
}

View File

@ -24,8 +24,7 @@
</div>
<div id="comment"
class="open-{{ commentOpen }}" hidden?="{{ comment == null }}">
<div id="comment" class="open-{{ commentOpen }}" hidden?="{{ comment == null }}">
<div id="commentInner">{{ comment }}</div>

View File

@ -4,9 +4,7 @@
:host {
user-select: none;
background: #1a1a1a;
height: 100%;
width: 100%;
display: block;

15
gui.html Normal file
View File

@ -0,0 +1,15 @@
<!-- platform -->
<script src="components/platform/platform.js"></script>
<!-- font -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto" type="text/css">
<!-- src -->
<script src="elements/Gui.js"></script>
<!-- elements -->
<link rel="import" href="elements/gui-panel/gui-panel.html">
<link rel="import" href="elements/gui-row/gui-row.html">
<link rel="import" href="elements/controller-number/controller-number.html">
<link rel="import" href="elements/custom-example/controller-custom.html">

View File

@ -1,48 +1,64 @@
/*
[ ] build without polymer bundled
[ ] build without platform bundled
*/
var gulp = require( 'gulp' ),
stylus = require( 'gulp-stylus' ),
nib = require( 'nib' ),
watch = require( 'gulp-watch' ),
vulcan = require( 'gulp-vulcanize' );
$ = require( 'gulp-load-plugins' )( { 'pattern': '*' } ); // need the star for nib ...
var paths = {
style: 'elements/**/*.styl'
main: 'gui.html',
css: 'elements/**/*.styl',
html: 'elements/**/*.html',
js: 'elements/**/*.js',
tests: 'tests/*'
}
function compileCSS( files ) {
return files
.pipe( stylus( { use: [ nib() ] } ) )
gulp.task( 'css', function() {
gulp.src( paths.css )
.pipe( $.stylus( { use: [ $.nib() ] } ) )
.pipe( gulp.dest( 'elements' ) );
}
gulp.task( 'styles', function() {
compileCSS( gulp.src( paths.style ) );
} );
gulp.task( 'vulcanize', function() {
gulp.src( 'index.html' )
.pipe( vulcan( {
gulp.src( paths.main )
.pipe( $.vulcanize( {
dest: 'build',
inline: true,
strip: true
inline: true
// strip: true
} ) );
} );
gulp.task( 'watch', function() {
gulp.task( 'readme', function() {
gulp.src( 'README.md' ).pipe( $.markdown() ).pipe( gulp.dest( './' ) );
} );
gulp.task( 'test', function() {
return gulp.src( 'tests/legacy.html' ).pipe( $.qunit() );
} );
gulp.task( 'build', [ 'css', 'vulcanize', 'test' ] );
gulp.task( 'default', function() {
gulp.watch( [ paths.css ], [ 'css', 'vulcanize' ] );
gulp.watch( [ paths.js, paths.main, paths.html ], [ 'vulcanize', 'test' ] );
// gulp.watch( [ paths.tests, 'test' ] ); // not working?
gulp.watch( [ 'README.md' ], [ 'readme' ] );
watch( { glob: paths.style }, compileCSS );
} );
gulp.task( 'default', [ 'styles', 'vulcanize' ]);

View File

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="import" href="build/index.html">
</head>
<body>
<script src="index.js"></script>
</body>
</html>

View File

@ -2,16 +2,52 @@
<html lang="en">
<head>
<script src="components/platform/platform.js"></script>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto" type="text/css">
<link rel="import" href="elements/gui-panel/gui-panel.html">
<link rel="import" href="elements/gui-row/gui-row.html">
<link rel="import" href="elements/controller-number/controller-number.html">
<!-- <link rel="import" href="build/gui.html"> -->
<link rel="import" href="gui.html">
</head>
<body>
<script src="index.js"></script>
<script>
var object = {
"listen4Free": 332,
"zeroTo1": 0,
"step": 10,
"straddleZero": 0,
"maxIsNegative": -2,
"hasComment": 0
};
// How do we kill polymer-ready ...
document.addEventListener( 'polymer-ready', function() {
var gui = new dat.GUI();
// gui.docked = true;
gui.add( object, 'listen4Free' );
gui.add( object, 'listen4Free' );
gui.add( object, 'listen4Free' );
gui.add( object, 'zeroTo1', 0, 1 );
gui.add( object, 'hasComment' ).comment( 'Hi there.' );
gui.add( object, 'listen4Free' ).name( 'customName' )
gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut, condimentum hendrerit purus. Cras a cursus ante. Integer nec nibh vitae lacus convallis viverra in at urna. Donec hendrerit convallis lacus, nec condimentum neque aliquam ac. Sed suscipit leo vel ligula condimentum scelerisque. Aliquam fermentum sagittis nisi vitae accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et dolor eros. Sed vel venenatis odio, quis porta mi. Ut sed commodo velit, in porta ante.' );
gui.add( object, 'straddleZero', -1, 1, 0.01 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. ' );
gui.add( object, 'maxIsNegative', -5, -2 );
gui.anon( 'anonymousSlider', 0, -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');
// gui.add( 32, 'beats', 1, 64, 1 ).comment( 'The number of beats in the song.');
// gui.add( 0, 'loops', -2, 2, 1 ).comment( 'The number of times the gif loops in a cycle.' );
// gui.add( 0, 'start', -2, 2, 1 ).comment( 'The frame of the gif where the song should start.' );
});
</script>
</body>
</html>

View File

@ -1,34 +0,0 @@
var object = {
"listen4Free": 0,
"step": 10,
"straddleZero": 0,
"maxIsNegative": -2,
"hasComment": 0
};
// How do we kill polymer-ready ...
document.addEventListener( 'polymer-ready', function() {
var gui = new GUI();
gui.add( object, 'listen4Free' );
gui.add( object, 'listen4Free' );
gui.add( object, 'listen4Free' );
gui.add( object, 'hasComment' ).comment( 'Hi there.' );
gui.add( -2, 'anonymousSlider', -5, -2 );
gui.add( object, 'listen4Free' ).name( 'customName' )
// gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut, condimentum hendrerit purus. Cras a cursus ante. Integer nec nibh vitae lacus convallis viverra in at urna. Donec hendrerit convallis lacus, nec condimentum neque aliquam ac. Sed suscipit leo vel ligula condimentum scelerisque. Aliquam fermentum sagittis nisi vitae accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et dolor eros. Sed vel venenatis odio, quis porta mi. Ut sed commodo velit, in porta ante.' );
gui.add( object, 'straddleZero', -1, 1, 0.01 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. ' );;
gui.add( object, 'maxIsNegative', -5, -2 );
// gui.add( 32, 'beats', 1, 64, 1 ).comment( 'The number of beats in the song.');
// gui.add( 0, 'loops', -2, 2, 1 ).comment( 'The number of times the gif loops in a cycle.' );
// gui.add( 0, 'start', -2, 2, 1 ).comment( 'The frame of the gif where the song should start.' );
});

View File

@ -3,6 +3,10 @@
"version": "0.0.0",
"devDependencies": {
"gulp": "^3.8.7",
"gulp-connect": "^2.0.6",
"gulp-load-plugins": "^0.5.3",
"gulp-markdown": "^1.0.0",
"gulp-qunit": "^0.3.3",
"gulp-stylus": "^1.3.0",
"gulp-vulcanize": "^1.0.0",
"gulp-watch": "^0.6.9",

9046
tests/jquery.js vendored Normal file

File diff suppressed because it is too large Load Diff

1427
tests/legacy.html Normal file

File diff suppressed because it is too large Load Diff

1587
tests/qunit.js Normal file

File diff suppressed because it is too large Load Diff