mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
cross-browser frustration
This commit is contained in:
George Michael Brower
parent
9ab83a6fe3
commit
90e0776842
105
build/gui.html
105
build/gui.html
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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,7 +4,7 @@
|
||||
height: 100%;
|
||||
|
||||
input
|
||||
input();
|
||||
input( string-color );
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: string-color;
|
||||
padding-left: padding
|
||||
@ -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
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
// word-wrap: break-word;
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
13
gulpfile.js
@ -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() {
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user