Automatically maps tags to colors.

diff --git a/lib/graph.co b/lib/graph.co
index eda01aa..1bfcb1f 100644 (file)
--- a/lib/graph.co
+++ b/lib/graph.co
@@ -22,8 +22,32 @@ GraphOption = exports.GraphOption = Field.extend do # {{{
 
 
 GraphOptionList = exports.GraphOptionList = FieldList.extend do # {{{
-    ctorName : 'GraphOptionList'
-    model    : GraphOption
+    ctorName   : 'GraphOptionList'
+    model      : GraphOption
+    categories : {}
+    
+    
+    initialize : ->
+        FieldList::initialize ...
+        @categories  = {}
+    
+    
+    reset: ->
+        FieldList::reset ...
+        console.log "#this.reset!"
+        
+        n = 0
+        cats = @categories
+        @forEach (field) ->
+            cat = field.get('tags', [])[0]
+            unless cats[cat]?
+                cats[cat] = n++
+            field.set 'category', "category_#{cats[cat]}", {+silent}
+        
+        setTimeout do
+            ~> _ _.pluck(@models, 'view') .invoke 'render'
+            10
+        this
 # }}}
 
 

diff --git a/lib/scaffold/model.co b/lib/scaffold/model.co
index 422de92..a98bd41 100644 (file)
--- a/lib/scaffold/model.co
+++ b/lib/scaffold/model.co
@@ -11,6 +11,7 @@ Field = exports.Field = Backbone.Model.extend do # {{{
     
     initialize: ->
         @set 'value', @get('default'), {+silent} if not @has 'value'
+        
         # console.log "#this.initialize!"
     
     defaults: ->
@@ -19,7 +20,6 @@ Field = exports.Field = Backbone.Model.extend do # {{{
             type     : 'String'
             default  : null
             desc     : ''
-            category : 'General'
             include  : 'diff'
             tags     : []
             examples : []

diff --git a/lib/template/graph-option.jade b/lib/template/graph-option.jade
index 01fae16..92fee6e 100644 (file)
--- a/lib/template/graph-option.jade
+++ b/lib/template/graph-option.jade
@@ -1,11 +1,11 @@
 include browser-helpers
 - var option_id    = _.domize('option', id);
 - var value_id     = _.domize('value', id);
-- var category_cls = _.domize('category', category);
+//- - var category_cls = _.domize('category', category);
 - var tags_cls     = tags.map(_.domize('tag')).join(' ');
 - var type_cls     = _.domize('type', type); 
 
-.field.option(id=option_id, class="#{category_cls} #{tags_cls}")
+.field.option(id=option_id, class="#{category} #{tags_cls}")
     a.close ×
     
     h3.shortname #{_.shortname(name)}
@@ -18,10 +18,12 @@ include browser-helpers
     .desc
         != (jade.filters || {}).markdown(desc)
     
-    .tags(data-toggle="collapse", data-target="ul"): ul.collapse
+    //- .tags(data-toggle="collapse", data-target="##{option_id} .tags ul"): ul.collapse
+    .tags
         for tag in tags
-            li.tag(class=_.domize('tag', tag)) #{tag}
-    .examples(data-toggle="collapse", data-target="ul"): ul.collapse
+            span.tag(class=_.domize('tag', tag)) #{tag}
+            |  
+    .examples(data-toggle="collapse", data-target="##{option_id} .examples ul"): ul.collapse
         for example in examples
             li.example
                 a(href="http://dygraphs.com/tests/#{example}.html", target="_blank") #{example}

diff --git a/www/css/colors.styl b/www/css/colors.styl
index 767a8cf..6fd557b 100644 (file)
--- a/www/css/colors.styl
+++ b/www/css/colors.styl
@@ -1,32 +1,46 @@
 /** Project Colors **/
 
+$dark           = #333
+$light          = #eee
+
+/* spot colors */
+$hilite_dkblue     = #182B53
+$hilite_ltblue     = #4596FF
+$hilite_steelblue  = #A6D9FF
+$hilite_teal       = #00FFBC
+$hilite_green      = #83BB32
+$hilite_lime       = #B1E43B
+$hilite_yellow     = #F1D950
+$hilite_squash     = #EF8158
+$hilite_orange     = #DC3522
+$hilite_red        = #AD3238
+$hilite_pink       = #FF87FF
+$hilite_magenta    = #FF0097
+$hilite_purple     = #553DC9
+$hilite_periwinkle = #9DA5FF
+
+
+$hilites = ($hilite_dkblue $hilite_ltblue $hilite_steelblue $hilite_teal $hilite_green $hilite_lime $hilite_yellow $hilite_squash $hilite_orange $hilite_red $hilite_pink $hilite_magenta $hilite_purple $hilite_periwinkle)
+
+
 /* background colors */
-$main_bgcolor   = #fff
-$page_bgcolor   = #eee
+$main_bgcolor   = white
+$page_bgcolor   = $light
 $foot_bgcolor   = #3b3b3b
 
 /* text & link colors */
-$body_text      = #333
+$body_text      = $dark
 $foot_text      = #505050
 $body_link      = #2d588f
 $foot_link      = #666
 
 $border_color   = #ccc
 
-/* spot colors */
-$hilite_dkblue  = #182B53
-$hilite_ltblue  = #4596FF
-$hilite_teal    = #00FFBC
-$hilite_green   = #B1E43B
-$hilite_yellow  = #F1D950
-$hilite_orange  = #EF8158
-$hilite_red     = #AD3238
-$hilite_pink    = #FF0097
-$hilite_purple  = #553DC9
-
 
 /** Color Helpers **/
 
 invert($v)
     hsla( 180deg * hue($v), 100% - saturation($v), 100% - lightness($v), alpha($v) )
 
+
+

diff --git a/www/css/graph.styl b/www/css/graph.styl
index 4dc32bf..30f4b2c 100644 (file)
--- a/www/css/graph.styl
+++ b/www/css/graph.styl
@@ -21,6 +21,7 @@ section.graph
     
     .field.option
         float left
+        z-index 3
         padding 0.5em
         margin 0.5em
         width 200px
@@ -31,29 +32,34 @@ section.graph
         background-color #ccc
         font-size 90%
         
+        *
+            position relative
+        
         .close
             z-index 10
-            absolute top 0.5em right 0.5em
+            // absolute top 0.5em right 0.5em
+            absolute top 0.25em right 0.25em
+            cursor pointer
+            
             width 1em
             height 1em
-            
-            opacity 1
-            color rgba(51,51,51, 0.4)
             text-align center
-            border 1px solid #afafaf
-            border-radius 50%
-            background-color #ccc
+            // border-radius 50%
             
-            text-decoration none
-            cursor pointer
+            // text-decoration none
+            // border 1px solid #afafaf
+            // background-color #ccc
+            
+            // opacity 1
+            // color rgba(51,51,51, 0.4)
         
-        .close:hover
-            color rgba(51,51,51, 1)
-            border 1px solid #999
+        // .close:hover
+        //     color rgba(51,51,51, 1)
+        //     border 1px solid #999
         
         .shortname
             z-index -1
-            absolute bottom 0.5em right 0.5em
+            // absolute bottom 0.5em right 0.5em
             font-weight bold
             color white
         .name
@@ -62,34 +68,52 @@ section.graph
             font-size 100%
         .value
             width auto
+            font-family menlo, monospace
         .type
             &::before
                 content "Type: "
+                font-weight bold
         .default
             &::before
                 content "Default: "
+                font-weight bold
         .desc
             position relative
+        .tags, .examples
+            cursor pointer
         .tags
             &::before
-                content "Tags"
-            ul
-                display none
+                content "Tags: "
+                font-weight bold
+                font-size 85%
             .tag
-                position relative
+                margin 0.2em
+                line-height 1.5
+                padding 0.2em
+                font-size 85%
+                color white
+                background-color rgba(255,255,255, 0.15)
+                border-radius 5px
+                border 1px solid white
+                white-space nowrap
         .examples
+            display none
             &::before
                 content "Examples"
+                font-weight bold
             .example
                 position relative
         
         
         &.collapsed
+            z-index 2
             width auto
             min-width 50px
             min-height 2em
+            
             line-height 2em
             text-align center
+            cursor pointer
             
             *
                 display none
@@ -97,3 +121,25 @@ section.graph
                 display inline
                 position static
         
+        
+        /* Category Colors {{{ */
+        for i in 0...length($hilites)
+            &.category_{i}
+                $bg_color = $hilites[i]
+                $fg_color = light($bg_color) ? $dark : $light
+                
+                background-color $bg_color
+                color $fg_color
+                label, h1, h2, h3, .shortname, .name, .close
+                    color $fg_color
+        
+    
+    
+    
+    
+    
+    // }}}
+
+
+
+