mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
init
This commit is contained in:
George Michael Brower
commit
0f3d0f85b7
23
bower.json
Normal file
23
bower.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "polymer-gui",
|
||||
"version": "0.0.0",
|
||||
"description": "Attempt at revamping dat.gui with Polymyer.",
|
||||
"keywords": [
|
||||
"gui"
|
||||
],
|
||||
"authors": [
|
||||
"George Michael Brower"
|
||||
],
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#~0.3.5"
|
||||
}
|
||||
}
|
||||
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.0 <1.0.0",
|
||||
"_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
55
index.html
Normal file
55
index.html
Normal file
@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
|
||||
<script src="components/platform/platform.js"></script>
|
||||
<link rel="import" href="number.html">
|
||||
|
||||
</head>
|
||||
<body touch-action="auto" style="background: #e74400">
|
||||
|
||||
<!-- Added via DOM -->
|
||||
<gui-number></gui-number>
|
||||
<gui-number min="-1" max="1" value="0"></gui-number>
|
||||
<gui-number min="-1" max="2" value="0"></gui-number>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var object = { 'x': 0 };
|
||||
|
||||
document.addEventListener('polymer-ready',function() {
|
||||
|
||||
// Added via JavaScript
|
||||
|
||||
var test1 = new NumberController();
|
||||
test1.min = 0;
|
||||
test1.max = 60;
|
||||
test1.value = 50;
|
||||
|
||||
document.body.appendChild( test1 );
|
||||
|
||||
Object.observe( object, function(changes) {
|
||||
changes.forEach( function( c ) {
|
||||
if ( c.name == 'x' ) {
|
||||
console.log( 'object.x was changed to ' + c.object.x );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
var test2 = new NumberController();
|
||||
test2.object = object
|
||||
test2.property = 'x';
|
||||
|
||||
document.body.appendChild( test2 );
|
||||
|
||||
window.test2 = test2;
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
269
number.html
Normal file
269
number.html
Normal file
@ -0,0 +1,269 @@
|
||||
<link rel="import" href="components/polymer/polymer.html">
|
||||
|
||||
<polymer-element name="gui-number" attributes="min max value step" constructor="NumberController">
|
||||
|
||||
<template>
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
-webkit-text-select: none;
|
||||
font-size: 0;
|
||||
margin-bottom: 2px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
:host * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#track-container {
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#track {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
height: 10px;
|
||||
margin-right: 2px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
background: rgba( 0, 0, 0, 0.1 );
|
||||
opacity: 0.9;
|
||||
-webkit-transition: opacity 0.2s ease-out;
|
||||
}
|
||||
|
||||
#fill {
|
||||
height: 8px;
|
||||
margin-top: 1px;
|
||||
margin-left: 1px;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
pointer-events: none;
|
||||
opacity: 0.9;
|
||||
-webkit-transition: opacity 0.2s ease-out;
|
||||
}
|
||||
|
||||
#container:hover #fill,
|
||||
#container:hover #track {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#container.transition #knob {
|
||||
-webkit-transition: left 0.1s ease-out;
|
||||
}
|
||||
|
||||
#container.transition #fill {
|
||||
-webkit-transition: width 0.1s ease-out;
|
||||
}
|
||||
|
||||
#knob {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #fff;
|
||||
border-radius: 100%;
|
||||
margin-left: -6px;
|
||||
margin-top: -1px;
|
||||
box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.2 );
|
||||
}
|
||||
|
||||
.straddle-zero #knob {
|
||||
}
|
||||
|
||||
.negative #knob,
|
||||
.negative #fill {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
font: bold 10px sans-serif;
|
||||
color: #fff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div id="container" horizontal layout>
|
||||
|
||||
<div id="track-container"
|
||||
on-down="{{ down }}"
|
||||
on-trackx="{{ trackx }}"
|
||||
on-trackstart="{{ trackstart }}"
|
||||
flex>
|
||||
|
||||
<div id="track">
|
||||
|
||||
<div id="fill">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="knob">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<input type="text" value="{{ value }}">
|
||||
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
Polymer('gui-number', {
|
||||
|
||||
min: 0,
|
||||
max: 100,
|
||||
|
||||
step: 1,
|
||||
|
||||
value: 50,
|
||||
|
||||
object: null,
|
||||
property: null,
|
||||
|
||||
ready: function() {
|
||||
|
||||
var _this = this;
|
||||
|
||||
window.addEventListener( 'keydown', function( e ) {
|
||||
if ( e.keyCode == 18 ) _this._alt = true;
|
||||
}, false );
|
||||
|
||||
window.addEventListener( 'keyup', function( e ) {
|
||||
if ( e.keyCode == 18 ) _this._alt = false;
|
||||
}, false );
|
||||
|
||||
this.update();
|
||||
|
||||
},
|
||||
|
||||
objectChanged: function() {
|
||||
if ( this.property ) {
|
||||
this._boundToObject = true;
|
||||
this.value = this.object[ this.property ];
|
||||
}
|
||||
},
|
||||
|
||||
propertyChanged: function() {
|
||||
if ( this.object ) {
|
||||
this._boundToObject = true;
|
||||
this.value = this.object[ this.property ];
|
||||
}
|
||||
},
|
||||
|
||||
valueChanged: function() {
|
||||
this.value = Math.max( this.value, this.min );
|
||||
this.value = Math.min( this.value, this.max );
|
||||
if ( this._boundToObject ) this.object[ this.property ] = this.value;
|
||||
this.update();
|
||||
},
|
||||
|
||||
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() {
|
||||
|
||||
var ratio = this.map( this.value, this.min, this.max, 0, 1 );
|
||||
|
||||
if ( this.min < 0 && this.max > 0 ) {
|
||||
|
||||
this.$.container.classList.add( 'straddle-zero' );
|
||||
|
||||
var zero = this.map( 0, this.min, this.max, 0, 1 );
|
||||
|
||||
if ( this.value >= 0 ) {
|
||||
|
||||
this.$.fill.style.left = zero * 100 + '%';
|
||||
this.$.fill.style.width = (ratio - zero) * 100 + '%';
|
||||
this.$.fill.style.right = '';
|
||||
|
||||
} else {
|
||||
|
||||
this.$.fill.style.left = '';
|
||||
this.$.fill.style.width = (zero - ratio) * 100 + '%';
|
||||
this.$.fill.style.right = ( 1 - zero ) * 100 + '%';
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
this.$.container.classList.remove( 'straddle-zero' );
|
||||
|
||||
this.$.fill.style.left = 0;
|
||||
this.$.fill.style.width = ratio * 100 + '%';
|
||||
this.$.fill.style.right = '';
|
||||
|
||||
}
|
||||
|
||||
this.$.knob.style.left = ratio * 100 + '%';
|
||||
|
||||
this.$.container.classList.toggle( 'positive', this.value >= 0 );
|
||||
this.$.container.classList.toggle( 'negative', this.value < 0 );
|
||||
|
||||
},
|
||||
|
||||
// Events
|
||||
// -------------------------------
|
||||
|
||||
down: function( e ) {
|
||||
e.preventDefault();
|
||||
this.$.container.classList.add( 'transition' );
|
||||
this._rect = this.$.track.getBoundingClientRect();
|
||||
if ( !this._alt ) this.setValueFromX( e.x );
|
||||
},
|
||||
|
||||
trackstart: function( e ) {
|
||||
this.$.container.classList.remove( 'transition' );
|
||||
},
|
||||
|
||||
trackx: function( e ) {
|
||||
var dv = this.setValueFromDX( e.ddx );
|
||||
if ( this._alt ) dv /= 10;
|
||||
this.value += dv;
|
||||
},
|
||||
|
||||
|
||||
// Helpers
|
||||
// -------------------------------
|
||||
|
||||
setValueFromX: function( x ) {
|
||||
this.value = this.map( x, this._rect.left, this._rect.right, this.min, this.max );
|
||||
},
|
||||
|
||||
setValueFromDX: function( dx ) {
|
||||
return this.map( dx, 0, this._rect.width, 0, this.max - this.min );
|
||||
},
|
||||
|
||||
map: function( x, a, b, c, d ) {
|
||||
return ( x - a ) / ( b - a ) * ( d - c ) + c;
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</polymer-element>
|
||||
Loading…
Reference in New Issue
Block a user