From: dsc Date: Mon, 20 Feb 2012 20:02:56 +0000 (-0800) Subject: Subclasses Scaffold models and views to implement Graph & GraphOption specific behavi... X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=ae9c90d80c8ec9af0d2946d87c4df3244f933855;p=kraken-ui.git Subclasses Scaffold models and views to implement Graph & GraphOption specific behavior. I fully intend to reuse the Scaffold :) --- diff --git a/lib/graph.co b/lib/graph.co index 0d109d3..7b8c845 100644 --- a/lib/graph.co +++ b/lib/graph.co @@ -7,27 +7,35 @@ _ = require 'kraken/underscore' * Field with graph-option-specific handling for validation, parsing, tags, etc. */ GraphOption = exports.GraphOption = Field.extend do # {{{ - initialize : -> - Field..initialize ... + ctorName : 'GraphOption' + # initialize : -> + # # console.log "#this.initialize!" + # Field::initialize ... # }}} GraphOptionList = exports.GraphOptionList = FieldList.extend do # {{{ - model : GraphOption - # initialize : -> FieldList..initialize ... + ctorName : 'GraphOptionList' + model : GraphOption + # initialize : -> + # console.log "#this.initialize!" + # FieldList::initialize ... # }}} GraphOptionView = exports.GraphOptionView = FieldView.extend do # {{{ - tagName : 'form' - className : 'field graph_option' - template : require 'kraken/template/graph-option' + ctorName : 'GraphOptionView' + tagName : 'div' + className : 'field option' + template : require 'kraken/template/graph-option' events : - 'blur .value' : 'update' + 'blur .value' : 'update' + 'submit .value' : 'update' - initialize: -> - FieldView..initialize ... + # initialize: -> + # # console.log "#this.initialize!" + # FieldView::initialize ... update: -> val = @$el.find('.value').val() @@ -41,23 +49,21 @@ GraphOptionView = exports.GraphOptionView = FieldView.extend do # {{{ @$el.html @template @model.toJSON() this - toString: -> "GraphOptionView(#{@model.id})" - # }}} GraphOptionsScaffold = exports.GraphOptionsScaffold = Scaffold.extend do # {{{ + ctorName : 'GraphOptionsScaffold' className : 'options scaffold' collectionType : GraphOptionList subviewType : GraphOptionView - - toString: -> "GraphOptionsScaffold()" # }}} GraphModel = exports.GraphModel = Backbone.Model.extend do # {{{ - urlRoot : '/graphs' + ctorName : 'GraphModel' + urlRoot : '/graphs' initialize : -> name = @get 'name' @@ -67,20 +73,23 @@ GraphModel = exports.GraphModel = Backbone.Model.extend do # {{{ defaults : -> { name : 'Kraken Graph' - dataset : 'data/page_views_by_language.csv' + dataset : '/data/page_views_by_language.csv' options : {} } + + toString: -> "#{@ctorName}(id=#{@id}, name=#{@get 'name'}, dataset=#{@get 'dataset'})" # }}} Graph = exports.Graph = Backbone.View.extend do # {{{ + ctorName : 'Graph' tagName : 'section' className : 'graph' template : require 'kraken/template/graph' events: - 'keypress input' : 'onKeypress' - 'submit form.settings' : 'onSubmit' + 'keypress form.options .value' : 'onKeypress' + 'submit form.options' : 'onSubmit' initialize : (o={}) -> @@ -99,13 +108,12 @@ Graph = exports.Graph = Backbone.View.extend do # {{{ chartOptions: (values) -> - options = @scaffold.collection - - # @chartOptions 'label', 'label value!' + # Handle @chartOptions k, v if arguments.length > 1 [k, v] = arguments values = { "#k": v } + options = @scaffold.collection if values for k, v in values options.get(k)?.setValue v @@ -118,29 +126,29 @@ Graph = exports.Graph = Backbone.View.extend do # {{{ # Remove old style, as it confuses dygraph after options update @viewport.attr 'style', '' + console.log "#this" console.log do - 'viewport.{ width=%s, height=%s, style=%s }' + " .viewport.{ width=%s, height=%s, style=%s }" @viewport.css('width') @viewport.css('height') @viewport.attr 'style' - console.log 'options:', JSON.stringify @chartOptions() + console.log ' .options:', JSON.stringify @chartOptions() @chart?.destroy() @chart = new Dygraph do @viewport.0 - 'data/page_views_by_language.csv' + @model.get 'dataset' @chartOptions() onKeypress: (evt) -> $(evt.target).submit() if evt.keyCode is 13 onSubmit: -> - console.log 'Graph.onSubmit!' + console.log "#this.onSubmit!" @render() false - toString: -> - "Graph()" + toString: -> "#{@ctorName}(#{@model})" # }}} diff --git a/lib/main.co b/lib/main.co index 6e54704..e456144 100644 --- a/lib/main.co +++ b/lib/main.co @@ -1,7 +1,10 @@ _ = require 'kraken/underscore' -{ Field, FieldList, FieldView, Scaffold +{ Field, FieldList, FieldView, Scaffold } = require 'kraken/scaffold' -{Graph} = require 'kraken/graph' +{ Graph, GraphModel, + GraphOption, GraphOptionList, GraphOptionView, + GraphOptionsScaffold, +} = require 'kraken/graph' diff --git a/lib/scaffold.co b/lib/scaffold.co index b8f6cc0..ad06730 100644 --- a/lib/scaffold.co +++ b/lib/scaffold.co @@ -4,10 +4,12 @@ op = require 'kraken/util/op' Field = exports.Field = Backbone.Model.extend do # {{{ + ctorName : 'Field' idAttribute : 'name' initialize: -> @set 'value', @get('default'), {+silent} if not @has 'value' + # console.log "#this.initialize!" defaults: -> { @@ -57,10 +59,16 @@ Field = exports.Field = Backbone.Model.extend do # {{{ isDefault: -> @get('value') is @get('default') + toJSON: -> + {id:@id} import do + _.clone(@attributes) import { value:@getValue(), def:@get('default') } + + toString: -> "#{@ctorName}(id=#{@id}, value=#{@get 'value'})" # }}} FieldList = exports.FieldList = Backbone.Collection.extend do # {{{ + ctorName : 'FieldList' model : Field /** @@ -72,6 +80,7 @@ FieldList = exports.FieldList = Backbone.Collection.extend do # {{{ @models.filter -> not it.isDefault() -> [ it.get('name'), it.getValue() ] + toString: -> "#{@ctorName}(length=#{@length})" # }}} @@ -82,22 +91,21 @@ FieldView = exports.FieldView = Backbone.View.extend do # {{{ className : 'field' events : - 'blur .value' : 'update' - 'submit .value' : 'update' - + 'blur .value' : 'onUIChange' + 'submit .value' : 'onUIChange' initialize: -> + # console.log "#this.initialize!" @$el.data { model:@model, view:this } @model.on 'change', @render, this @model.on 'destroy', @remove, this - update: -> + onUIChange: -> val = @$el.find('.value').val() current = @model.get 'value' return if val is current - - console.log "#this.update( #current -> #val )" + console.log "#this.onUIChange( #current -> #val )" @model.setValue val, {+silent} render: -> @@ -119,16 +127,9 @@ FieldView = exports.FieldView = Backbone.View.extend do # {{{ @$el.find '.value' .val @model.get 'value' this - remove: -> - @$el.remove() - this - - clear: -> - @model.destroy() - this - - toString: -> - "FieldView(#{@model.id})" + remove : -> @$el.remove(); this + clear : -> @model.destroy(); this + toString : -> "#{@ctorName}(model=#{@model})" # }}} @@ -154,9 +155,7 @@ Scaffold = exports.Scaffold = Backbone.View.extend do # {{{ @collection.on 'reset', @addAll # @collection.on 'all', @render - @$el.addClass @className - .data { model:@collection, view:this } - .attr { action:'/save', method:'get' } + @$el.data { model:@collection, view:this } .addClass @className addOne: (field) -> @@ -173,6 +172,6 @@ Scaffold = exports.Scaffold = Backbone.View.extend do # {{{ this toString: -> - "Scaffold()" + "#{@ctorName}(collection=#{@collection})" # }}} diff --git a/lib/server/server.co b/lib/server/server.co index c52a44d..1c15833 100755 --- a/lib/server/server.co +++ b/lib/server/server.co @@ -104,13 +104,13 @@ app.get '/:type/:action', (req, res, next) -> + exports import { CWD, WWW, VAR, STATIC, PORT, LOG_LEVEL, NODE_ENV, VERSION, app, module, require, } - mainfile = path.basename require.main?.filename if require.main is module or 'Cokefile' is mainfile app.start() diff --git a/lib/template/graph-option.jade b/lib/template/graph-option.jade index e69de29..ae531cd 100644 --- a/lib/template/graph-option.jade +++ b/lib/template/graph-option.jade @@ -0,0 +1,25 @@ +- var _ = require('kraken/underscore'); +- var value_id = _.domize('value', id); +- var category_cls = _.domize('category', category); +- var tags_cls = tags.map(_.domize('tag')).join(' '); +- var type_cls = _.domize('type', type); + +.field.option(id=_.domize('option', id), class="#{category_cls} #{tags_cls}") + label.name(for=value_id) #{name} + input.value(type="text", id=value_id, name=name, value=value) + + .type(class=type_cls) #{type} + .default(class=type_cls) #{def} + + .desc + #{desc} + //- != jade.filters.markdown(desc) + + .tags: ul + for tag in tags + li.tag(class=_.domize('tag', tag)) #{tag} + .examples: ul + for example in examples + li.example + a(href="http://dygraphs.com/tests/#{example}.html", target="_blank") #{example} + diff --git a/lib/template/graph.jade b/lib/template/graph.jade index 43d6443..7dd5df7 100644 --- a/lib/template/graph.jade +++ b/lib/template/graph.jade @@ -1,3 +1,4 @@ +- var _ = require('kraken/underscore'); section.graph(id=id) .graph-label .viewport diff --git a/lib/template/index.co b/lib/template/index.co new file mode 100644 index 0000000..e69de29 diff --git a/lib/underscore/string.co b/lib/underscore/string.co index 122d492..f0d50f7 100644 --- a/lib/underscore/string.co +++ b/lib/underscore/string.co @@ -28,6 +28,15 @@ _string = do while s and s is not starting s + # Converts to snake_case, concatenates the key-value pair (with '_'), normalizing _'s. + # If only a key is given, domize auto-curries and waits for a second argument. + domize : (key='', value='') -> + key = _str.trim _str.underscored(key), '_' + if arguments.length <= 1 + arguments.callee.bind this, key + else + "#{key}_#{_str.trim _str.underscored(value), '_'}" + _string import do dropLeft : _string.ldrop