comment rollovers

elements/controller-number/controller-number.js

@@ -17,10 +17,10 @@
 Polymer('controller-number', {
 
     min: 0,
-    max: 100,
+    max: 1,
+    value: 0,
     step: null,
     decimals: 3,
-    value: 50,
     
     ready: function() {
 

elements/controller-number/controller-number.styl

@@ -1,4 +1,4 @@
-@import 'shared';
+@import '../shared';
 
 fill-color = number-color
 track-color = light
@@ -12,7 +12,8 @@ knob-size = 6px
     display: block;
     font-size: 0;
     height: 100%;
-    user-select: none;
+    user-select: none;\
+
 }
 
 
@@ -81,7 +82,7 @@ input {
 
     height: track-height;
 
-    margin-left: 5px;
+    margin: 0 ( padding/2 );
     display: inline-block;
     background: transparent;
     border: 0;

elements/gui-panel/gui-panel.html

@@ -10,6 +10,7 @@
 
 <div>
     <content></content>
+    <div id="closeButton">&times;</div>
 </div>
 
 </template>

elements/gui-panel/gui-panel.js

@@ -9,11 +9,27 @@ Polymer('gui-panel', {
     add: function( object, property ) {
 
         var row = document.createElement( 'gui-row' );
-        row.name = property;
 
         var controller; 
 
-        if ( typeof object[ property ] == 'number' ) {
+
+
+        var value;
+
+        // gui.add( object, 'property' ...
+        if ( typeof object == 'object' ) {
+
+            value = object[ property ];
+        
+        // gui.add( 0, 'anonymous-value' ...
+        } else {
+
+            value = object;
+
+        }
+
+
+        if ( typeof value == 'number' ) {
 
             controller = document.createElement( 'controller-number' );
             
@@ -23,13 +39,22 @@ Polymer('gui-panel', {
 
         }
 
-        controller.object = object;
+        // gui.add( object, 'property' ...
-        controller.property = property;
+        if ( typeof object == 'object' ) {
+            controller.object = object;
+            controller.property = property;
+        } 
+
+        row.name = property;
 
         controller.name = function( name ) {
             row.name = name;
         };
 
+        controller.comment = function( comment ) {
+            row.comment = comment;
+        };
+
         row.appendChild( controller );
         this.appendChild( row );
 

elements/gui-panel/gui-panel.styl

@@ -1,6 +1,21 @@
+@import '../shared';
+
 :host {
+    
     position: absolute;
     top: 0;
     right: 20px;
-    width: 300px;
+    width: 270px;
+
+
+}
+
+#closeButton { 
+    
+    font();
+    font-size: 14px;
+    cursor: pointer;
+    background: #000;
+    text-align: center;
+    padding: padding*0.4 padding;
 }

elements/gui-row/gui-row.html

@@ -1,22 +1,43 @@
 <link rel="import" href="../../components/polymer/polymer.html">
 
-<polymer-element 
+<polymer-element name="gui-row" attributes="name comment">
-    name="gui-row" 
-    attributes="name">
 
 <template>
 
-<link rel="stylesheet" href="gui-row.css">
+<div>
+
+    <link rel="stylesheet" href="gui-row.css">
+
+    <div id="row" class="comment-{{ comment != null }}" layout horizontal center>
+        
+        <div 
+            id="name"
+            on-mouseover="{{ openComment }}"
+            on-mouseout="{{ closeComment }}"
+            >
+            <div id="nameInner">{{ name }}</div>
+        </div>
+
+        <div id="controller" flex>
+            <content></content>
+        </div>
 
-<div id="row" layout horizontal center>
-    <div id="name">{{ name }}</div>
-    <div id="controller" flex>
-        <content></content>
     </div>
+
+    <div id="comment" 
+            on-mouseover="{{ openComment }}"
+            on-mouseout="{{ closeComment }}"
+            class="open-{{ commentOpen }}" hidden?="{{ comment == null }}">
+        
+        <div id="commentInner">{{ comment }}</div>
+
+    </div>
+
 </div>
 
 </template>
 
+
 </div>
 
 <script src="gui-row.js"></script>

elements/gui-row/gui-row.js

@@ -1,7 +1,27 @@
+/*
+
+[ ] comment hover behavior
+
+*/
+
 Polymer('gui-row', {
 
+    comment: null,
+
+    commentOpen: false,
+
     ready: function() {
 
+
+
+    },
+
+    openComment: function() {
+        this.$.comment.style.height = this.$.commentInner.offsetHeight + 'px';
+    },
+
+    closeComment: function() {
+        this.$.comment.style.height = '';
     }
 
 });

elements/gui-row/gui-row.styl

@@ -1,20 +1,73 @@
-@import 'shared';
+@import '../shared';
+
+
+:host {
+
+    user-select: none;
+    background: #1a1a1a;
+
+    height: 100%;
+    width: 100%;
+    display: block;
+    
+    font();
+
+}
 
 #row { 
-    -webkit-text-select: none;
+
-    background: #1a1a1a;
+}
+
+#comment { 
+
+    line-height: 16px;
+    user-select: text;
+
+    background: #E0CF99;
+    height: 0;
+    color: #333;
+
+    
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: height 0.15s ease;
+    box-shadow: inset 0 2px 0 dark;
+
+}
+
+#commentInner {
+    padding: padding;
 }
 
 #name {
 
-    font();
-
     text-overflow: ellipsis;
     word-wrap: break-word;
     overflow: hidden;
-    width: 33%;
+    padding: 0 padding;
-    padding: 0 10px;
     box-sizing: border-box;
+    display: inline-block;
+    width: 40%;
+
+    height: 30px;
+    line-height: 30px;
+
+    cursor: default;
+
+    .comment-true & { 
+        cursor: pointer;
+    }
+
 }
 
+.comment-true #nameInner { 
 
+    display: inline-block;
+    border-bottom: 1px dotted light;
+    
+    &:after { 
+        content: ' ?';
+        color: light;
+    }
+
+}

elements/shared.styl

@@ -2,6 +2,8 @@
 
 number-color = #25a0d8
 
+padding = 10px
+
 ease = cubic-bezier( .25, .25, 0, 1 )
 
 light = rgba( 255, 255, 255, 0.25 )

index.js

@@ -1,21 +1,30 @@
 var object = { 
-    "listen4Free": 25,
+    "listen4Free": 0,
     "step": 10,
     "straddleZero": 0,
     "maxIsNegative": -2,
+    "hasComment": 0
 };
 
 // How do we kill polymer-ready ... 
 document.addEventListener( 'polymer-ready', function() {
 
     var gui = new GUI();
-    gui.add( object, 'listen4Free' );
-    gui.add( object, 'listen4Free' );
-    gui.add( object, 'listen4Free' );
-    gui.add( object, 'listen4Free' ).name( 'customName' );
-    gui.add( object, 'step', 0, 50, 5 );
-    gui.add( object, 'straddleZero', -1, 1, 0.01 );
     
-    var c = gui.add( object, 'maxIsNegative', -5, -2 );
+    gui.add( object, 'listen4Free' );
+    gui.add( object, 'listen4Free' );
+    gui.add( object, 'listen4Free' );
+    
+    gui.add( object, 'hasComment' ).comment( 'Hi there.' );
+
+    gui.add( -2, 'anonymousSlider', -5, -2 );
+
+    gui.add( object, 'listen4Free' ).name( 'customName' )
+
+    gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut, condimentum hendrerit purus. Cras a cursus ante. Integer nec nibh vitae lacus convallis viverra in at urna. Donec hendrerit convallis lacus, nec condimentum neque aliquam ac. Sed suscipit leo vel ligula condimentum scelerisque. Aliquam fermentum sagittis nisi vitae accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et dolor eros. Sed vel venenatis odio, quis porta mi. Ut sed commodo velit, in porta ante.' );
+
+    gui.add( object, 'straddleZero', -1, 1, 0.01 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. ' );;
+
+    gui.add( object, 'maxIsNegative', -5, -2 );
 
 });