From b2236731642cdd86897444ce542cc46ec883e782 Mon Sep 17 00:00:00 2001 From: dsc Date: Thu, 23 Feb 2012 22:10:14 -0800 Subject: [PATCH] Improves user-supplied values parsing and tag-colors. --- lib/graph.co | 36 ++++++++++++++-------------- lib/scaffold/model.co | 52 ++++++++++++++++++++++++++-------------- lib/scaffold/view.co | 7 +++-- lib/template/graph-option.jade | 5 ++- lib/util/op.co | 2 +- msc/dygraph-options/process.py | 14 ++++++++-- www/css/colors.styl | 19 +++++++++----- www/css/graph.styl | 29 +++++++++++++--------- www/css/layout.styl | 2 +- www/css/text.styl | 3 -- 10 files changed, 101 insertions(+), 68 deletions(-) diff --git a/lib/graph.co b/lib/graph.co index 1bfcb1f..17d0356 100644 --- 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 --- 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 --- 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 --- 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 --- 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/msc/dygraph-options/process.py b/msc/dygraph-options/process.py index 2847072..8824a5a 100755 --- a/msc/dygraph-options/process.py +++ b/msc/dygraph-options/process.py @@ -2,9 +2,17 @@ # -*- coding: utf-8 -*- import json -from lessly.data.yaml_omap import yaml, OrderedDict -from bunch import * -from lessly.misc import keystringer +try: + from bunch import * + from lessly.data.yaml_omap import yaml, OrderedDict + from lessly.misc import keystringer + from lessly.strings import split_camel +except ImportError: + print "You'll need to install some stuff. Try:" + print " pip install bunch" + print " pip install git://github.com/dsc/py-lessly.git" + print + raise diff --git a/www/css/colors.styl b/www/css/colors.styl index 82a3e5d..90f63c1 100644 --- 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 --- 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 --- 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 --- 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 -- 1.7.0.4