mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
no message
This commit is contained in:
George Michael Brower
parent
a6854f4e69
commit
2d2f4ee888
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,4 +1,2 @@
|
|||||||
build
|
|
||||||
components
|
|
||||||
node_modules
|
node_modules
|
||||||
*.css
|
*.css
|
||||||
10
README.html
Normal file
10
README.html
Normal 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"><script src="gui.js"></script>
|
||||||
|
</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, 'someNumber', 0, 1 );
|
||||||
|
</code></pre>
|
||||||
19
README.md
Normal file
19
README.md
Normal 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
1187
build/gui.html
Normal file
File diff suppressed because one or more lines are too long
19
components/core-component-page/.bower.json
Normal file
19
components/core-component-page/.bower.json
Normal 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"
|
||||||
|
}
|
||||||
6
components/core-component-page/README.md
Normal file
6
components/core-component-page/README.md
Normal 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).
|
||||||
BIN
components/core-component-page/bowager-logo.png
Normal file
BIN
components/core-component-page/bowager-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
8
components/core-component-page/bower.json
Normal file
8
components/core-component-page/bower.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
7124
components/core-component-page/core-component-page.html
Normal file
7124
components/core-component-page/core-component-page.html
Normal file
File diff suppressed because it is too large
Load Diff
23
components/core-component-page/demo.html
Normal file
23
components/core-component-page/demo.html
Normal 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>
|
||||||
22
components/core-component-page/index.html
Normal file
22
components/core-component-page/index.html
Normal 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>
|
||||||
26
components/platform/.bower.json
Normal file
26
components/platform/.bower.json
Normal 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"
|
||||||
|
}
|
||||||
6
components/platform/README.md
Normal file
6
components/platform/README.md
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
Platform
|
||||||
|
========
|
||||||
|
|
||||||
|
Aggregated polyfills the Polymer platform.
|
||||||
|
|
||||||
|
[](https://github.com/igrigorik/ga-beacon)
|
||||||
16
components/platform/bower.json
Normal file
16
components/platform/bower.json
Normal 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
|
||||||
|
}
|
||||||
39
components/platform/build.log
Normal file
39
components/platform/build.log
Normal 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
|
||||||
17
components/platform/platform.js
Normal file
17
components/platform/platform.js
Normal file
File diff suppressed because one or more lines are too long
1
components/platform/platform.js.map
Normal file
1
components/platform/platform.js.map
Normal file
File diff suppressed because one or more lines are too long
19
components/polymer/.bower.json
Normal file
19
components/polymer/.bower.json
Normal 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"
|
||||||
|
}
|
||||||
17
components/polymer/README.md
Normal file
17
components/polymer/README.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
# Polymer
|
||||||
|
|
||||||
|
[](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).
|
||||||
8
components/polymer/bower.json
Normal file
8
components/polymer/bower.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
33
components/polymer/build.log
Normal file
33
components/polymer/build.log
Normal 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
|
||||||
278
components/polymer/layout.html
Normal file
278
components/polymer/layout.html
Normal 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>
|
||||||
13
components/polymer/polymer.html
Normal file
13
components/polymer/polymer.html
Normal 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">-->
|
||||||
14
components/polymer/polymer.js
Normal file
14
components/polymer/polymer.js
Normal file
File diff suppressed because one or more lines are too long
1
components/polymer/polymer.js.map
Normal file
1
components/polymer/polymer.js.map
Normal file
File diff suppressed because one or more lines are too long
84
elements/Gui.js
Normal file
84
elements/Gui.js
Normal 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 );
|
||||||
@ -1,3 +1,5 @@
|
|||||||
<link rel="import" href="../../components/polymer/polymer.html">
|
<link rel="import" href="../../components/polymer/polymer.html">
|
||||||
|
|
||||||
<script src="controller-base.js"></script>
|
<script src="controller-base.js"></script>
|
||||||
<polymer-element name="controller-base"></polymer-element>
|
|
||||||
|
<polymer-element name="controller-base" attributes="object path"></polymer-element>
|
||||||
@ -7,18 +7,24 @@
|
|||||||
|
|
||||||
Polymer('controller-base', {
|
Polymer('controller-base', {
|
||||||
|
|
||||||
value: null,
|
|
||||||
object: null,
|
|
||||||
property: null,
|
|
||||||
|
|
||||||
ready: function() {
|
ready: function() {
|
||||||
|
|
||||||
var _this = this;
|
|
||||||
this.update();
|
this.update();
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
bind: function() {
|
update: function() {},
|
||||||
|
|
||||||
|
init: function() {},
|
||||||
|
|
||||||
|
|
||||||
|
// Observers
|
||||||
|
// -------------------------------
|
||||||
|
|
||||||
|
watch: function( object, path ) {
|
||||||
|
|
||||||
|
this.object = object;
|
||||||
|
this.path = path;
|
||||||
|
|
||||||
if ( this._observer ) {
|
if ( this._observer ) {
|
||||||
this._observer.close();
|
this._observer.close();
|
||||||
@ -27,51 +33,23 @@ Polymer('controller-base', {
|
|||||||
|
|
||||||
var _this = this;
|
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._observer.open( function( newValue ) {
|
||||||
|
|
||||||
_this.value = newValue;
|
_this.value = newValue;
|
||||||
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
this.value = this.object[ this.path ];
|
||||||
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();
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
valueChanged: function() {
|
valueChanged: function() {
|
||||||
|
|
||||||
if ( this.object && this.property ) {
|
if ( this._observer ) {
|
||||||
this.object[ this.property ] = this.value;
|
|
||||||
|
Path.get( this.path ).setValueFrom( this.object, this.value );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.update();
|
this.update();
|
||||||
@ -84,6 +62,30 @@ Polymer('controller-base', {
|
|||||||
|
|
||||||
map: function( x, a, b, c, d ) {
|
map: function( x, a, b, c, d ) {
|
||||||
return ( x - a ) / ( b - a ) * ( d - c ) + c;
|
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;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<link rel="stylesheet" href="controller-number.css">
|
<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"
|
<div id="track-container"
|
||||||
on-down="{{ down }}"
|
on-down="{{ down }}"
|
||||||
@ -22,6 +22,7 @@
|
|||||||
on-tracky="{{ tracky }}"
|
on-tracky="{{ tracky }}"
|
||||||
on-trackstart="{{ trackstart }}"
|
on-trackstart="{{ trackstart }}"
|
||||||
horizontal layout center
|
horizontal layout center
|
||||||
|
hidden?="{{ !slider }}"
|
||||||
flex>
|
flex>
|
||||||
|
|
||||||
<div id="track">
|
<div id="track">
|
||||||
|
|||||||
@ -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,
|
value: 0,
|
||||||
step: null,
|
|
||||||
decimals: 3,
|
decimals: 3,
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
slider: 'min !== undefined && max !== undefined'
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
ready: function() {
|
ready: function() {
|
||||||
|
|
||||||
@ -38,30 +46,46 @@ Polymer('controller-number', {
|
|||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
init: function( min, max, step ) {
|
||||||
|
|
||||||
|
this.min = min;
|
||||||
|
this.max = max;
|
||||||
|
this.step = step;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
// Observers
|
// Observers
|
||||||
// -------------------------------
|
// -------------------------------
|
||||||
|
|
||||||
valueChanged: function() {
|
valueChanged: function( newValue ) {
|
||||||
|
|
||||||
if ( this.step !== null ) {
|
if ( this.step !== undefined ) {
|
||||||
this.value = Math.round( this.value / this.step ) * this.step;
|
this.value = Math.round( this.value / this.step ) * this.step;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if ( this.min !== undefined ) {
|
||||||
this.value = Math.max( this.value, this.min );
|
this.value = Math.max( this.value, this.min );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( this.max !== undefined ) {
|
||||||
this.value = Math.min( this.value, this.max );
|
this.value = Math.min( this.value, this.max );
|
||||||
|
}
|
||||||
|
|
||||||
this.super();
|
this.super();
|
||||||
},
|
},
|
||||||
|
|
||||||
minChanged: function() {
|
minChanged: function() {
|
||||||
|
|
||||||
this.value = Math.max( this.value, this.min );
|
this.value = Math.max( this.value, this.min );
|
||||||
this.update();
|
this.update();
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
maxChanged: function() {
|
maxChanged: function() {
|
||||||
|
|
||||||
this.value = Math.min( this.value, this.max );
|
this.value = Math.min( this.value, this.max );
|
||||||
this.update();
|
this.update();
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
update: function() {
|
update: function() {
|
||||||
@ -122,30 +146,40 @@ Polymer('controller-number', {
|
|||||||
// -------------------------------
|
// -------------------------------
|
||||||
|
|
||||||
click: function( e ) {
|
click: function( e ) {
|
||||||
|
|
||||||
this.$.input.select();
|
this.$.input.select();
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
down: function( e ) {
|
down: function( e ) {
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this._rect = this.$.track.getBoundingClientRect();
|
this._rect = this.$.track.getBoundingClientRect();
|
||||||
if ( !this._alt ) this.value = this.valueFromX( e.x );
|
if ( !this._alt ) this.value = this.valueFromX( e.x );
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
up: function( e ) {
|
up: function( e ) {
|
||||||
|
|
||||||
// this.$.container.classList.add( 'transition' );
|
// this.$.container.classList.add( 'transition' );
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
trackstart: function( e ) {
|
trackstart: function( e ) {
|
||||||
|
|
||||||
// this.$.container.classList.remove( 'transition' );
|
// this.$.container.classList.remove( 'transition' );
|
||||||
this._dragFriction = 1;
|
this._dragFriction = 1;
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
trackx: function( e ) {
|
trackx: function( e ) {
|
||||||
|
|
||||||
if ( this.step == null ) {
|
if ( this.step === undefined ) {
|
||||||
|
|
||||||
var dv = this.valueFromDX( e.ddx );
|
var dv = this.valueFromDX( e.ddx );
|
||||||
|
|
||||||
if ( this._alt ) dv /= 10;
|
if ( this._alt ) dv /= 10;
|
||||||
|
|
||||||
this.value += dv * this._dragFriction;
|
this.value += dv * this._dragFriction;
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
@ -162,16 +196,21 @@ Polymer('controller-number', {
|
|||||||
},
|
},
|
||||||
|
|
||||||
blur: function( e ) {
|
blur: function( e ) {
|
||||||
|
|
||||||
var v = parseFloat( this.$.input.value );
|
var v = parseFloat( this.$.input.value );
|
||||||
|
|
||||||
if ( v === v ) {
|
if ( v === v ) {
|
||||||
this.value = v;
|
this.value = v;
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
keydown: function( e ) {
|
keydown: function( e ) {
|
||||||
|
|
||||||
if ( e.keyCode == 13 ) {
|
if ( e.keyCode == 13 ) {
|
||||||
this.$.input.blur();
|
this.$.input.blur();
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
@ -180,7 +219,7 @@ Polymer('controller-number', {
|
|||||||
|
|
||||||
truncate: function( v ) {
|
truncate: function( v ) {
|
||||||
|
|
||||||
if ( v % 1 !== 0 && this.decimals !== null ) {
|
if ( v % 1 !== 0 && this.decimals !== undefined ) {
|
||||||
return this.limitDecimals( v, this.decimals );
|
return this.limitDecimals( v, this.decimals );
|
||||||
} else {
|
} else {
|
||||||
return v;
|
return v;
|
||||||
@ -210,11 +249,15 @@ Polymer('controller-number', {
|
|||||||
},
|
},
|
||||||
|
|
||||||
valueFromX: function( x ) {
|
valueFromX: function( x ) {
|
||||||
|
|
||||||
return this.map( x, this._rect.left, this._rect.right, this.min, this.max );
|
return this.map( x, this._rect.left, this._rect.right, this.min, this.max );
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
valueFromDX: function( dx ) {
|
valueFromDX: function( dx ) {
|
||||||
|
|
||||||
return this.map( dx, 0, this._rect.width, 0, this.max - this.min );
|
return this.map( dx, 0, this._rect.width, 0, this.max - this.min );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
@ -12,7 +12,7 @@ knob-size = 6px
|
|||||||
display: block;
|
display: block;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
user-select: none;\
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#track-container {
|
#track-container {
|
||||||
@ -80,23 +80,28 @@ input {
|
|||||||
|
|
||||||
height: track-height;
|
height: track-height;
|
||||||
|
|
||||||
margin: 0 ( padding/2 );
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
text-align: center;
|
|
||||||
outline: none;
|
outline: none;
|
||||||
width: 20%;
|
|
||||||
|
.slider-true & {
|
||||||
|
|
||||||
|
margin-left: padding;
|
||||||
|
width: 100%;
|
||||||
|
width: 22%;
|
||||||
transition: width 0.2s ease;
|
transition: width 0.2s ease;
|
||||||
|
|
||||||
}
|
&:hover {
|
||||||
|
|
||||||
input:hover {
|
|
||||||
width: 28%;
|
width: 28%;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus {
|
&:focus {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input::selection {
|
input::selection {
|
||||||
|
|||||||
34
elements/custom-example/controller-custom.html
Normal file
34
elements/custom-example/controller-custom.html
Normal 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>
|
||||||
@ -1,16 +1,17 @@
|
|||||||
<link rel="import" href="../../components/polymer/polymer.html">
|
<link rel="import" href="../../components/polymer/polymer.html">
|
||||||
|
<link rel="import" href="../gui-row/gui-row.html">
|
||||||
|
|
||||||
<polymer-element
|
<polymer-element
|
||||||
name="gui-panel"
|
name="gui-panel"
|
||||||
constructor="GUI">
|
attributes="docked">
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<link rel="stylesheet" href="gui-panel.css">
|
<link rel="stylesheet" href="gui-panel.css">
|
||||||
|
|
||||||
<div>
|
<div id="container" class="docked-{{ docked }}">
|
||||||
<content></content>
|
<content></content>
|
||||||
<div id="closeButton">×</div>
|
<div id="closeButton" hidden?="{{ docked }}">×</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,53 +1,53 @@
|
|||||||
Polymer('gui-panel', {
|
Polymer('gui-panel', {
|
||||||
|
|
||||||
|
docked: false,
|
||||||
|
|
||||||
ready: function() {
|
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 row = document.createElement( 'gui-row' );
|
||||||
|
row.name = path;
|
||||||
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;
|
|
||||||
|
|
||||||
controller.name = function( name ) {
|
controller.name = function( name ) {
|
||||||
row.name = name;
|
row.name = name;
|
||||||
|
|||||||
@ -1,20 +1,29 @@
|
|||||||
@import '../shared';
|
@import '../shared';
|
||||||
|
|
||||||
:host {
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 20px;
|
|
||||||
width: 270px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#closeButton {
|
#closeButton {
|
||||||
|
|
||||||
font();
|
font();
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #000;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: padding*0.4 padding;
|
padding: padding*0.4 padding;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
|
||||||
|
background: #1a1a1a;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 270px;
|
||||||
|
|
||||||
|
&.docked-false {
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.docked-true {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -24,8 +24,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="comment"
|
<div id="comment" class="open-{{ commentOpen }}" hidden?="{{ comment == null }}">
|
||||||
class="open-{{ commentOpen }}" hidden?="{{ comment == null }}">
|
|
||||||
|
|
||||||
<div id="commentInner">{{ comment }}</div>
|
<div id="commentInner">{{ comment }}</div>
|
||||||
|
|
||||||
|
|||||||
@ -4,9 +4,7 @@
|
|||||||
:host {
|
:host {
|
||||||
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background: #1a1a1a;
|
|
||||||
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
|
|||||||
15
gui.html
Normal file
15
gui.html
Normal 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">
|
||||||
60
gulpfile.js
60
gulpfile.js
@ -1,48 +1,64 @@
|
|||||||
/*
|
/*
|
||||||
|
|
||||||
[ ] build without polymer bundled
|
[ ] build without platform bundled
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var gulp = require( 'gulp' ),
|
var gulp = require( 'gulp' ),
|
||||||
stylus = require( 'gulp-stylus' ),
|
$ = require( 'gulp-load-plugins' )( { 'pattern': '*' } ); // need the star for nib ...
|
||||||
nib = require( 'nib' ),
|
|
||||||
watch = require( 'gulp-watch' ),
|
|
||||||
vulcan = require( 'gulp-vulcanize' );
|
|
||||||
|
|
||||||
var paths = {
|
var paths = {
|
||||||
style: 'elements/**/*.styl'
|
main: 'gui.html',
|
||||||
|
css: 'elements/**/*.styl',
|
||||||
|
html: 'elements/**/*.html',
|
||||||
|
js: 'elements/**/*.js',
|
||||||
|
tests: 'tests/*'
|
||||||
}
|
}
|
||||||
|
|
||||||
function compileCSS( files ) {
|
gulp.task( 'css', function() {
|
||||||
return files
|
|
||||||
.pipe( stylus( { use: [ nib() ] } ) )
|
gulp.src( paths.css )
|
||||||
|
.pipe( $.stylus( { use: [ $.nib() ] } ) )
|
||||||
.pipe( gulp.dest( 'elements' ) );
|
.pipe( gulp.dest( 'elements' ) );
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
gulp.task( 'styles', function() {
|
|
||||||
|
|
||||||
compileCSS( gulp.src( paths.style ) );
|
|
||||||
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
gulp.task( 'vulcanize', function() {
|
gulp.task( 'vulcanize', function() {
|
||||||
|
|
||||||
gulp.src( 'index.html' )
|
gulp.src( paths.main )
|
||||||
.pipe( vulcan( {
|
.pipe( $.vulcanize( {
|
||||||
dest: 'build',
|
dest: 'build',
|
||||||
inline: true,
|
inline: true
|
||||||
strip: 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' ]);
|
|
||||||
|
|||||||
@ -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>
|
|
||||||
48
index.html
48
index.html
@ -2,16 +2,52 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<script src="components/platform/platform.js"></script>
|
<!-- <link rel="import" href="build/gui.html"> -->
|
||||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto" type="text/css">
|
<link rel="import" href="gui.html">
|
||||||
<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">
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
34
index.js
34
index.js
@ -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.' );
|
|
||||||
|
|
||||||
});
|
|
||||||
@ -3,6 +3,10 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"gulp": "^3.8.7",
|
"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-stylus": "^1.3.0",
|
||||||
"gulp-vulcanize": "^1.0.0",
|
"gulp-vulcanize": "^1.0.0",
|
||||||
"gulp-watch": "^0.6.9",
|
"gulp-watch": "^0.6.9",
|
||||||
|
|||||||
9046
tests/jquery.js
vendored
Normal file
9046
tests/jquery.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1427
tests/legacy.html
Normal file
1427
tests/legacy.html
Normal file
File diff suppressed because it is too large
Load Diff
1587
tests/qunit.js
Normal file
1587
tests/qunit.js
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user