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

cross-browser frustration

Browse Source
This commit is contained in:
George Michael Brower 2014-09-02 13:13:35 -04:00
parent 9ab83a6fe3
commit 90e0776842
12 changed files with 157 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
build/gui.html
View File

@ -488,7 +488,6 @@ if(f)g=void 0;else if(f=g[this.name],!f)return void console.error("Cannot find f
overflow: hidden; overflow: hidden;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
text-overflow: ellipsis; text-overflow: ellipsis;
word-wrap: break-word;
} }
#comment { #comment {
line-height: 16px; line-height: 16px;
@ -705,7 +704,7 @@ Polymer('gui-panel', {
this.anon.values = {}; this.anon.values = {};
window.addEventListener( 'resize', this.checkHeight.bind( this ) ); // window.addEventListener( 'resize', this.checkHeight.bind( this ) );
}, },
@ -810,15 +809,15 @@ Polymer('gui-panel', {
this.open = !this.open; this.open = !this.open;
}, },
checkHeight: function() { // checkHeight: function() {
if ( window.innerHeight < this.$.controllers.offsetHeight ) { // if ( window.innerHeight < this.$.controllers.offsetHeight ) {
this.docked = true; // this.docked = true;
} else { // } else {
this.docked = false; // this.docked = false;
} // }
}, // },
// Legacy // Legacy
@ -1211,6 +1210,7 @@ Polymer( 'controller-number', {
} }
#track-container { #track-container {
height: 100%; height: 100%;
padding: 0 8px;
} }
#track { #track {
width: 100%; width: 100%;
@ -1263,16 +1263,14 @@ Polymer( 'controller-number', {
} }
input { input {
font: 10px 'Lucida Grande', sans-serif; font: 10px 'Lucida Grande', sans-serif;
color: #eee; color: #25a0d8;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
color: text-color;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
background: transparent; background: transparent;
border: 0; border: 0;
padding: 0; padding: 0;
outline: none; outline: none;
padding-left: 8px;
-webkit-transition: background-color 0.15s linear; -webkit-transition: background-color 0.15s linear;
-moz-transition: background-color 0.15s linear; -moz-transition: background-color 0.15s linear;
-o-transition: background-color 0.15s linear; -o-transition: background-color 0.15s linear;
@ -1288,7 +1286,6 @@ input:focus {
} }
.slider-true input { .slider-true input {
text-align: center; text-align: center;
margin-left: 8px;
width: 25%; width: 25%;
-webkit-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); -webkit-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
-moz-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); -moz-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1);
@ -1304,10 +1301,11 @@ input:focus {
width: 50%; width: 50%;
} }
.slider-false input { .slider-false input {
padding-left: 8px;
width: 100%; width: 100%;
} }
input::selection { input::selection {
background-color: #25a0d8; background-color: rgba(255,255,255,0.25);
} }
</style> </style>
@ -1354,16 +1352,14 @@ Polymer( 'controller-string', {
} }
input { input {
font: 10px 'Lucida Grande', sans-serif; font: 10px 'Lucida Grande', sans-serif;
color: #eee; color: #1ebd6e;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
color: text-color;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
background: transparent; background: transparent;
border: 0; border: 0;
padding: 0; padding: 0;
outline: none; outline: none;
padding-left: 8px;
-webkit-transition: background-color 0.15s linear; -webkit-transition: background-color 0.15s linear;
-moz-transition: background-color 0.15s linear; -moz-transition: background-color 0.15s linear;
-o-transition: background-color 0.15s linear; -o-transition: background-color 0.15s linear;
@ -1374,7 +1370,7 @@ input {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #1ebd6e; padding-left: 8px;
} }
input:hover, input:hover,
input:focus { input:focus {
@ -1403,21 +1399,16 @@ Polymer( 'controller-boolean', {
}, },
change: function() { toggle: function() {
this.value = this.$.input.checked;
}, console.log( 'hi' );
this.value = !this.value;
update: function() {
// should i really have to do this?
this.$.input.checked = this.value;
} }
}); });
</script> </script>
@ -1426,22 +1417,60 @@ Polymer( 'controller-boolean', {
<template> <template>
<style>#container, <style>#container {
#input {
cursor: pointer;
}
#container {
display: block;
height: 100%; height: 100%;
cursor: pointer;
padding-left: 8px;
} }
#input { #switch-track {
vertical-align: middle; width: 20px;
height: 8px;
background: rgba(255,255,255,0.25);
border-radius: 8px;
-webkit-transition: background 0.1s linear;
-moz-transition: background 0.1s linear;
-o-transition: background 0.1s linear;
-ms-transition: background 0.1s linear;
transition: background 0.1s linear;
}
#switch-knob {
height: 8px;
width: 8px;
border-radius: 8px;
background: #fff;
-webkit-transition: -webkit-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
-moz-transition: -moz-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
-o-transition: -o-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
-ms-transition: -ms-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
transition: transform 0.15s cubic-bezier(0.25, 0.25, 0, 1);
}
.value-true #switch-track {
background: #864694;
}
.value-true #switch-knob {
-webkit-transform: translate3d(12px, 0, 0);
-moz-transform: translate3d(12px, 0, 0);
-o-transform: translate3d(12px, 0, 0);
-ms-transform: translate3d(12px, 0, 0);
transform: translate3d(12px, 0, 0);
}
#text {
margin-left: 8px;
}
.value-false #text {
color: rgba(255,255,255,0.25);
} }
</style> </style>
<label for="input" id="container" horizontal="" layout="" center=""> <div id="container" horizontal="" layout="" center="" on-tap="{{ toggle }}" class="value-{{ value }}">
<input id="input" type="checkbox" checked?="{{ value }}" on-change="{{ change }}">
</label> <div id="switch-track">
<div id="switch-knob"></div>
</div>
<!-- <div id="text" >{{ value ? 'true' : 'false' }}</div> -->
</div>
</template> </template>

2
demo.html
View File

@ -8,8 +8,6 @@
<link rel="import" href="gui.html"> <link rel="import" href="gui.html">
</style>
</head> </head>
<body> <body>

12
elements/controller-boolean/controller-boolean.html
View File

@ -9,9 +9,15 @@
<link rel="stylesheet" href="controller-boolean.css"> <link rel="stylesheet" href="controller-boolean.css">
<label for="input" id="container" horizontal layout center> <div id="container" horizontal layout center on-tap="{{ toggle }}" class="value-{{ value }}">
<input id="input" type="checkbox" checked?="{{ value }}" on-change="{{ change }}">
</label> <div id="switch-track">
<div id="switch-knob"></div>
</div>
<!-- <div id="text" >{{ value ? 'true' : 'false' }}</div> -->
</div>
</template> </template>

13
elements/controller-boolean/controller-boolean.js
View File

@ -11,20 +11,15 @@ Polymer( 'controller-boolean', {
}, },
change: function() { toggle: function() {
this.value = this.$.input.checked;
}, console.log( 'hi' );
this.value = !this.value;
update: function() {
// should i really have to do this?
this.$.input.checked = this.value;
} }
}); });

48
elements/controller-boolean/controller-boolean.styl
View File

@ -1,15 +1,47 @@
@import '../shared'; @import '../shared';
#container, #input { height = 8px;
cursor: pointer; width = round( height * 2.5 );
} border-radius = height;
#container { #container {
display: block;
height: 100%; height: 100%;
// border: 1px solid red; cursor: pointer;
padding-left: padding
}
#switch-track {
width: width;
height: height;
background: light;
border-radius: border-radius;
transition: background 0.1s linear;
}
#switch-knob {
height: height;
width: height;
border-radius: border-radius;
background: white;
transition: transform 0.15s ease;
}
.value-true {
#switch-track {
background: boolean-color;
}
#switch-knob {
transform: translate3d( width - height, 0, 0 );
}
}
#text {
margin-left: padding;
.value-true & {
// color: boolean-color;
}
.value-false & {
color: light;
}
} }
#input {
// margin-top: 20px;
}

16
elements/controller-number/controller-number.styl
View File

@ -1,8 +1,5 @@
@import '../shared'; @import '../shared';
fill-color = number-color
track-color = light
track-size = 1px; track-size = 1px;
fill-size = 1px; fill-size = 1px;
knob-size = 6px knob-size = 6px
@ -13,6 +10,7 @@ knob-size = 6px
#track-container { #track-container {
height: 100%; height: 100%;
padding: 0 padding;
} }
#track { #track {
@ -21,7 +19,7 @@ knob-size = 6px
border-radius: track-size; border-radius: track-size;
display: inline-block; display: inline-block;
position: relative; position: relative;
background: track-color; background: light;
} }
#fill { #fill {
@ -30,7 +28,7 @@ knob-size = 6px
margin-left: 1px; margin-left: 1px;
border-radius: fill-size; border-radius: fill-size;
position: absolute; position: absolute;
background: fill-color; background: number-color;
pointer-events: none; pointer-events: none;
} }
@ -48,7 +46,7 @@ knob-size = 6px
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
background-color: fill-color; background-color: number-color;
border-radius: 100%; border-radius: 100%;
} }
@ -71,12 +69,11 @@ knob-size = 6px
input { input {
input() input( number-color );
.slider-true & { .slider-true & {
text-align: center; text-align: center;
margin-left: padding;
width: 25%; width: 25%;
transition: width 0.2s ease; transition: width 0.2s ease;
padding: 0; padding: 0;
@ -95,11 +92,12 @@ input {
.slider-false & { .slider-false & {
// border-bottom: 1px solid number-color; // border-bottom: 1px solid number-color;
padding-left: padding
width: 100%; width: 100%;
} }
} }
input::selection { input::selection {
background-color: number-color; background-color: light;
} }

4
elements/controller-string/controller-string.styl
View File

@ -4,7 +4,7 @@
height: 100%; height: 100%;
input input
input(); input( string-color );
width: 100%; width: 100%;
height: 100%; height: 100%;
color: string-color; padding-left: padding

16
elements/gui-panel/gui-panel.js
View File

@ -13,7 +13,7 @@ Polymer('gui-panel', {
this.anon.values = {}; this.anon.values = {};
window.addEventListener( 'resize', this.checkHeight.bind( this ) ); // window.addEventListener( 'resize', this.checkHeight.bind( this ) );
}, },
@ -118,15 +118,15 @@ Polymer('gui-panel', {
this.open = !this.open; this.open = !this.open;
}, },
checkHeight: function() { // checkHeight: function() {
if ( window.innerHeight < this.$.controllers.offsetHeight ) { // if ( window.innerHeight < this.$.controllers.offsetHeight ) {
this.docked = true; // this.docked = true;
} else { // } else {
this.docked = false; // this.docked = false;
} // }
}, // },
// Legacy // Legacy

2
elements/gui-row/gui-row.styl
View File

@ -49,7 +49,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
word-wrap: break-word; // word-wrap: break-word;

14
elements/shared.styl
View File

@ -18,6 +18,7 @@ font-color = #eee
panel-color = #1a1a1a panel-color = #1a1a1a
number-color = #25A0D8 number-color = #25A0D8
boolean-color = #864694
string-color = #1EBD6E string-color = #1EBD6E
padding = 8px padding = 8px
@ -31,21 +32,20 @@ dark = rgba( 0, 0, 0, 0.1 );
// common // common
panel-font() panel-font( color = font-color )
font: 10px 'Lucida Grande', sans-serif; font: 10px 'Lucida Grande', sans-serif;
color: font-color; color: color;
-webkit-font-smoothing: antialiased; if ( light( color ) )
-webkit-font-smoothing: antialiased;
input() input( color )
panel-font() panel-font( color )
color: text-color;
height: 100%; height: 100%;
display: inline-block; display: inline-block;
background: transparent; background: transparent;
border: 0; border: 0;
padding: 0; padding: 0;
outline: none; outline: none;
padding-left: padding;
transition: background-color 0.15s linear; transition: background-color 0.15s linear;
box-sizing: border-box; box-sizing: border-box;
&:hover, &:focus &:hover, &:focus

4
examples/index.html
View File

@ -22,6 +22,7 @@
<script> <script>
var object = { var object = {
"boolean": false,
"listen4Free": 332, "listen4Free": 332,
"zeroTo1": 0, "zeroTo1": 0,
"step": 10, "step": 10,
@ -40,10 +41,11 @@
gui.docked = true; gui.docked = true;
gui.add( gui, 'docked' ); gui.add( gui, 'docked' );
var r = gui.add( gui, 'open' );
var r = gui.add( gui, 'open' );
gui.add( r.row, 'name' ); gui.add( r.row, 'name' );
gui.add( object, 'boolean' );
gui.add( object, 'listen4Free' ); gui.add( object, 'listen4Free' );
gui.add( object, 'listen4Free' ); gui.add( object, 'listen4Free' );

13
gulpfile.js
View File

@ -21,7 +21,7 @@ var paths = {
js: 'elements/**/*.js', js: 'elements/**/*.js',
}; };
function stylus( src, dest ) { function css( src, dest ) {
gulp.src( src ) gulp.src( src )
.pipe( stylus( { use: [ nib() ] } ) ) .pipe( stylus( { use: [ nib() ] } ) )
@ -31,7 +31,7 @@ function stylus( src, dest ) {
gulp.task( 'docs', function() { gulp.task( 'docs', function() {
stylus( 'docs/*.styl', 'docs' ); css( 'docs/*.styl', 'docs' );
var content = { var content = {
readme: marked( fs.readFileSync( 'README.md', 'utf8' ) ) readme: marked( fs.readFileSync( 'README.md', 'utf8' ) )
@ -46,7 +46,7 @@ gulp.task( 'docs', function() {
gulp.task( 'css', function() { gulp.task( 'css', function() {
stylus( paths.css, 'elements' ); css( paths.css, 'elements' );
} ); } );
@ -76,7 +76,12 @@ gulp.task( 'test', function( done ) {
} ); } );
gulp.task( 'build', [ 'css', 'vulcanize', 'test', 'docs' ] ); gulp.task( 'build', [
'css',
'vulcanize',
// 'test',
'docs'
] );
gulp.task( 'default', function() { gulp.task( 'default', function() {