cross-browser frustration

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 ) {
+    //     if ( window.innerHeight < this.$.controllers.offsetHeight ) {
-            this.docked = true;
+    //         this.docked = true;
-        } else { 
+    //     } else { 
-            this.docked = false;
+    //         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;
+        console.log( 'hi' );
-
+        this.value = !this.value;
-    },
-
-    update: function() {
-
-        // should i really have to do this?
-        this.$.input.checked = this.value;
 
     }
     
     
     
     
+
 });
 </script>
 
@@ -1426,22 +1417,60 @@ Polymer( 'controller-boolean', {
 
 <template>
 
-<style>#container,
+<style>#container {
-#input {
-  cursor: pointer;
-}
-#container {
-  display: block;
   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>
 
-<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>
 

demo.html

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

elements/controller-boolean/controller-boolean.html

@@ -9,9 +9,15 @@
 
 <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>
 

elements/controller-boolean/controller-boolean.js

@@ -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;
 
     }
     
     
     
     
+
 });

elements/controller-boolean/controller-boolean.styl

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

elements/controller-number/controller-number.styl

@@ -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;
 }

elements/controller-string/controller-string.styl

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

elements/gui-panel/gui-panel.js

@@ -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 ) {
+    //     if ( window.innerHeight < this.$.controllers.offsetHeight ) {
-            this.docked = true;
+    //         this.docked = true;
-        } else { 
+    //     } else { 
-            this.docked = false;
+    //         this.docked = false;
-        }
+    //     }
 
-    },
+    // },
 
 
     // Legacy

elements/gui-row/gui-row.styl

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

elements/shared.styl

@@ -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()
+input( color )
-    panel-font()
+    panel-font( color )
-    color: text-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

examples/index.html

@@ -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' );

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() {