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

2
demo.html
View File

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

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

@ -9,9 +9,15 @@
<link rel="stylesheet" href="controller-boolean.css">
<label for="input" id="container" horizontal layout center>
<input id="input" type="checkbox" checked?="{{ value }}" on-change="{{ change }}">
</label>
<div id="container" horizontal layout center on-tap="{{ toggle }}" class="value-{{ value }}">
<div id="switch-track">
<div id="switch-knob"></div>
</div>
<!-- <div id="text" >{{ value ? 'true' : 'false' }}</div> -->
</div>
</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;
},
update: function() {
// should i really have to do this?
this.$.input.checked = this.value;
console.log( 'hi' );
this.value = !this.value;
}
});

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

@ -1,15 +1,47 @@
@import '../shared';
#container, #input {
cursor: pointer;
}
height = 8px;
width = round( height * 2.5 );
border-radius = height;
#container {
display: block;
height: 100%;
// border: 1px solid red;
cursor: pointer;
padding-left: padding
}
#input {
// margin-top: 20px;
#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;
}
}

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

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

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

@ -4,7 +4,7 @@
height: 100%;
input
input();
input( string-color );
width: 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 = {};
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;
},
checkHeight: function() {
// checkHeight: function() {
if ( window.innerHeight < this.$.controllers.offsetHeight ) {
this.docked = true;
} else {
this.docked = false;
}
// if ( window.innerHeight < this.$.controllers.offsetHeight ) {
// this.docked = true;
// } else {
// this.docked = false;
// }
},
// },
// Legacy

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

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

12
elements/shared.styl
View File

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

4
examples/index.html
View File

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

13
gulpfile.js
View File

@ -21,7 +21,7 @@ var paths = {
js: 'elements/**/*.js',
};
function stylus( src, dest ) {
function css( src, dest ) {
gulp.src( src )
.pipe( stylus( { use: [ nib() ] } ) )
@ -31,7 +31,7 @@ function stylus( src, dest ) {
gulp.task( 'docs', function() {
stylus( 'docs/*.styl', 'docs' );
css( 'docs/*.styl', 'docs' );
var content = {
readme: marked( fs.readFileSync( 'README.md', 'utf8' ) )
@ -46,7 +46,7 @@ gulp.task( 'docs', 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() {