Improves user-supplied values parsing and tag-colors.

diff --git a/lib/graph.co b/lib/graph.co
index 1bfcb1f..17d0356 100644 (file)
--- a/lib/graph.co
+++ b/lib/graph.co
@@ -32,22 +32,22 @@ GraphOptionList = exports.GraphOptionList = FieldList.extend do # {{{
         @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
+    # 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
 # }}}
 
 
@@ -89,14 +89,14 @@ GraphOptionView = exports.GraphOptionView = FieldView.extend do # {{{
     
     onClick: (evt) ->
         target = $ evt.target
-        console.log "#this.onClick()", target
+        # console.log "#this.onClick()", target
         @toggleCollapsed() if @$el.hasClass('collapsed') and not target.hasClass('close')
     
     toggleCollapsed: ->
         starting = @$el.hasClass 'collapsed' #@isCollapsed
         @$el.toggleClass 'collapsed'
         @isCollapsed = @$el.hasClass 'collapsed'
-        console.log "#this.toggleCollapsed!", starting, '->', @isCollapsed
+        # console.log "#this.toggleCollapsed!", starting, '->', @isCollapsed
         @trigger 'change:collapse', this
         this
     

diff --git a/lib/scaffold/model.co b/lib/scaffold/model.co
index af6a85f..48d3a71 100644 (file)
--- a/lib/scaffold/model.co
+++ b/lib/scaffold/model.co
@@ -97,25 +97,41 @@ Field = exports.Field = Backbone.Model.extend do # {{{
     
     
     getParser: (type) ->
-        type or= @get 'type'
-        t = _ type.toLowerCase()
-        
-        parser = op.toStr
-        if t.startsWith 'integer'
-            parser = op.toInt
-        if t.startsWith 'float'
-            parser = op.toFloat
-        if t.startsWith 'boolean'
-            parser = op.toBool
-        if t.startsWith 'object' or t.startsWith 'array'
-            parser = op.toObject
-        if t.startsWith 'function'
-            parser = (fn) -> eval "(#fn)"
-        
-        # TODO: handle 'or' by returning an array of parsers
-        parser
+        # XXX: handle 'or' by returning an array of parsers?
+        type = _ (type or @get 'type').toLowerCase()
+        for t of <[ Integer Float Boolean Object Array Function ]>
+            if type.startsWith t.toLowerCase()
+                console.log "parse#t ->", @["parse#t"] unless @["parse#t"]
+                return @["parse#t"]
+        @parseString
+    
+    parseString: (v) ->
+        if v? then op.toStr v else null
+    
+    parseInteger: (v) ->
+        r = op.toInt v
+        unless isNaN r then r else null
+    
+    parseFloat: (v) ->
+        r = op.toFloat v
+        unless isNaN r then r else null
+    
+    parseBoolean: (v) ->
+        op.toBool v
+    
+    parseArray: (v) ->
+        if v then op.toObject v else null
+    
+    parseObject: (v) ->
+        if v then op.toObject v else null
+    
+    parseFunction: (fn) ->
+        if fn and _.startswith String(fn), 'function'
+            try eval "(#fn)" catch err
+        else
+            null
+    
     
-        
     getValue: (def) ->
         @getParser() @get 'value', def
     

diff --git a/lib/scaffold/view.co b/lib/scaffold/view.co
index 332e289..4bb31f0 100644 (file)
--- a/lib/scaffold/view.co
+++ b/lib/scaffold/view.co
@@ -20,9 +20,10 @@ BaseView = exports.BaseView = Backbone.View.extend do # {{{
         @model.on 'change',  @render, this
         @model.on 'destroy', @remove, this
     
-    
     toTemplateLocals: ->
-        { $, _, op, @model, view:this } import @model.toJSON()
+        json = {value:v} = @model.toJSON()
+        json.value = JSON.stringify v if _.isArray(v) or _.isObject(v)
+        { $, _, op, @model, view:this } import json
     
     $template: (locals={}) ->
         $ @template @toTemplateLocals() import locals
@@ -86,7 +87,7 @@ FieldView = exports.FieldView = BaseView.extend do # {{{
         val     = @$el.find('.value').val()
         current = @model.get 'value'
         return if val is current
-        # console.log "#this.onUIChange( #current -> #val )"
+        console.log "#this.onUIChange( #current -> #val )"
         @model.setValue val, {+silent}
     
     render: ->

diff --git a/lib/template/graph-option.jade b/lib/template/graph-option.jade
index 07d2eb3..dec60ba 100644 (file)
--- a/lib/template/graph-option.jade
+++ b/lib/template/graph-option.jade
@@ -17,12 +17,13 @@ include browser-helpers
     .default(class=type_cls, title="Default: #{def} (#{type})") #{def}
     
     .desc
-        != (jade.filters || {}).markdown(desc)
+        != jade.filters.markdown(desc)
     
     //- .tags(data-toggle="collapse", data-target="##{option_id} .tags ul"): ul.collapse
     .tags
         for tag in tags
-            span.tag(class=_.domize('tag', tag)+' '+_.domize('category', model.getTagIndex(tag))) #{tag}
+            - var tag_cls = _.domize('tag',tag) + ' ' + _.domize('category',model.getTagIndex(tag))
+            span.tag(class=tag_cls) #{tag}
             |  
     .examples(data-toggle="collapse", data-target="##{option_id} .examples ul"): ul.collapse
         for example in examples

diff --git a/lib/util/op.co b/lib/util/op.co
index c7d3bfc..a47465b 100644 (file)
--- a/lib/util/op.co
+++ b/lib/util/op.co
@@ -57,7 +57,7 @@ module.exports = op =
     toInt       : (v) -> parseInt v
     toFloat     : (v) -> parseFloat v
     toStr       : (v) -> String v
-    toObject    : (v) -> JSON.parse v
+    toObject    : (v) -> if typeof v is 'string' then JSON.parse v else v
     
     # comparison
     cmp       : (x,y)  ->  if x < y then -1 else (if x > y then 1 else 0)

diff --git a/www/css/colors.styl b/www/css/colors.styl
index 82a3e5d..90f63c1 100644 (file)
--- a/www/css/colors.styl
+++ b/www/css/colors.styl
@@ -1,3 +1,13 @@
+/** Color Helpers **/
+
+invert($v)
+    hsla( 180deg * hue($v), 100% - saturation($v), 100% - lightness($v), alpha($v) )
+
+contrast_direction($v)
+    // ((lightness($v) * (100% - saturation($v))) < 50%) ? 1 : -1
+    (lightness($v) < 50%) ? 1 : -1
+
+
 /** Project Colors **/
 
 $dark               = #333
@@ -26,6 +36,8 @@ $hilite_lavender    = #9323FF
 
 $hilites = ($hilite_dkblue $hilite_sky $hilite_ltblue $hilite_steelblue $hilite_cyan $hilite_hurricane $hilite_tourquoise $hilite_green $hilite_lime $hilite_yellow $hilite_squash $hilite_orange $hilite_watermelon $hilite_red $hilite_pink $hilite_magenta $hilite_purple $hilite_periwinkle $hilite_lavender)
 
+$hilite_favs = ($hilite_dkblue $hilite_ltblue $hilite_cyan $hilite_lime $hilite_yellow $hilite_squash $hilite_red $hilite_magenta $hilite_purple)
+// colors: ["#FF0097", "#EF8158", "#83BB32", "#182B53", "#4596FF", "#553DC9", "#AD3238", "#00FFBC", "#F1D950"]
 
 
 /* background colors */
@@ -42,10 +54,3 @@ $foot_link      = #666
 $border_color   = #ccc
 
 
-/** 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 cdd2b77..8558dc5 100644 (file)
--- a/www/css/graph.styl
+++ b/www/css/graph.styl
@@ -1,5 +1,5 @@
-@import 'nib'
 @import 'colors'
+@import 'nib'
 
 section.graph
     .graph-label
@@ -58,14 +58,15 @@ section.graph
         //     border 1px solid #999
         
         .shortname
-            z-index -1
+            // z-index -1
             // absolute bottom 0.5em right 0.5em
             font-weight bold
             color white
         .name
+            display none
             font-weight bold
-            line-height 1.5
-            font-size 100%
+            // line-height 1.5
+            // font-size 100%
         .value
             width auto
             font-family menlo, monospace
@@ -82,20 +83,19 @@ section.graph
         .tags, .examples
             cursor pointer
         .tags
+            font-size 85%
             &::before
                 content "Tags: "
                 font-weight bold
-                font-size 85%
             .tag
                 margin 0.2em
                 line-height 1.5
                 padding 0.2em
-                font-size 85%
+                white-space nowrap
                 color white
                 background-color rgba(255,255,255, 0.15)
                 border-radius 5px
-                border 1px solid white
-                white-space nowrap
+                // border 1px solid white
         .examples
             display none
             &::before
@@ -124,19 +124,24 @@ section.graph
         
         /* Category Colors {{{ */
         for i in 0...length($hilites)
-            $bg_color = $hilites[i]
-            $fg_color = light($bg_color) ? $dark : $light
+            $bg_color    = $hilites[i]
+            $tag_color   = $bg_color + contrast_direction($bg_color) * 50%
+            $fg_color    = (lightness($bg_color) > 55%) ? $dark : $light
             
             &.category_{i}
                 color $fg_color
                 background-color $bg_color
+                // .shortname, .name, .close
+                //     color $tag_color
                 label, h1, h2, h3, .shortname, .name, .close
                     color $fg_color
             
-            .tag{i}
+            .tag.category_{i}
+                // border 1px solid $tag_color
+                // color $tag_color
+                // background-color $bg_color
                 color $fg_color
                 background-color $bg_color
-                border 1px solid $fg_color
         
     
     

diff --git a/www/css/layout.styl b/www/css/layout.styl
index ecf0063..39ef922 100644 (file)
--- a/www/css/layout.styl
+++ b/www/css/layout.styl
@@ -1,6 +1,6 @@
 @import 'nib'
 @import 'colors'
-@import 'text'
+
 
 
 header, footer, #content

diff --git a/www/css/text.styl b/www/css/text.styl
index 7d09a3f..889f999 100644 (file)
--- a/www/css/text.styl
+++ b/www/css/text.styl
@@ -1,6 +1,3 @@
-@import 'colors'
-
-
 $font_size     = 16px
 $fonts_body    = helvetica, arial, sans-serif
 $fonts_headers = "gotham rounded", "helvetica neue", helvetica, arial, sans-serif