From: dsc <dsc@less.ly>
Date: Wed, 22 Feb 2012 18:05:14 +0000 (-0800)
Subject: Allows collapsing of options.
X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=381a3d45e030ae8ef1e8c5b3f57df09ef917f5c3;p=kraken-ui.git

Allows collapsing of options.
---

diff --git a/lib/graph.co b/lib/graph.co
index 338c8e2..4b1ee61 100644
--- a/lib/graph.co
+++ b/lib/graph.co
@@ -17,25 +17,32 @@ GraphOption = exports.GraphOption = Field.extend do # {{{
 GraphOptionList = exports.GraphOptionList = FieldList.extend do # {{{
     ctorName : 'GraphOptionList'
     model    : GraphOption
-    # initialize : ->
-    #     console.log "#this.initialize!"
-    #     FieldList::initialize ...
 # }}}
 
 
+/**
+ * The view for a single configurable option.
+ */
 GraphOptionView = exports.GraphOptionView = FieldView.extend do # {{{
     ctorName  : 'GraphOptionView'
     tagName   : 'div'
     className : 'field option'
     template  : require 'kraken/template/graph-option'
     
+    isCollapsed : true
+    
     events :
-        'blur .value'   : 'update'
-        'submit .value' : 'update'
+        'blur .value'                   : 'update'
+        'submit .value'                 : 'update'
     
-    # initialize: ->
-    #     # console.log "#this.initialize!"
-    #     FieldView::initialize ...
+    
+    initialize: ->
+        # console.log "#this.initialize!"
+        FieldView::initialize ...
+        @$el.on 'click', (evt) ~>
+            target = $ evt.target
+            @toggleCollapsed() if @el is evt.target or not target.is '.value, label, input'
+        
     
     update: ->
         val     = @$el.find('.value').val()
@@ -46,7 +53,16 @@ GraphOptionView = exports.GraphOptionView = FieldView.extend do # {{{
         @model.setValue val, {+silent}
     
     render: ->
-        @$el.html @template @model.toJSON()
+        outer = $ @template @model.toJSON()
+        @$el.html outer.html()
+            .attr do
+                id    : outer.attr 'id'
+                class : outer.attr('class') + if @isCollapsed then ' collapsed' else ''
+        this
+    
+    toggleCollapsed: ->
+        @$el.toggleClass 'collapsed'
+        @isCollapsed = @$el.hasClass 'collapsed'
         this
     
 # }}}
@@ -58,9 +74,25 @@ GraphOptionsScaffold = exports.GraphOptionsScaffold = Scaffold.extend do # {{{
     className      : 'options scaffold'
     collectionType : GraphOptionList
     subviewType    : GraphOptionView
+    
+    # initialize : ->
+    #     Scaffold::initialize ...
+    #     @$el.isotope do
+    #         itemSelector    : '.field.option'
+    #         layoutMode      : 'masonry'
+    #         masonry         : columnWidth : 10
+    #         animationEngine : 'jquery'
+    #     
+    
 # }}}
 
 
+
+
+/**
+ * Represents a Graph, including its charting options, dataset, annotations, and all
+ * other settings for both its content and presentation.
+ */
 GraphModel = exports.GraphModel = Backbone.Model.extend do # {{{
     ctorName : 'GraphModel'
     urlRoot  : '/graphs'
diff --git a/lib/scaffold.co b/lib/scaffold.co
index ad06730..7bf758f 100644
--- a/lib/scaffold.co
+++ b/lib/scaffold.co
@@ -97,6 +97,7 @@ FieldView = exports.FieldView = Backbone.View.extend do # {{{
     
     initialize: ->
         # console.log "#this.initialize!"
+        @model.view = this
         @$el.data { model:@model, view:this }
         @model.on 'change',  @render, this
         @model.on 'destroy', @remove, this
@@ -110,7 +111,9 @@ FieldView = exports.FieldView = Backbone.View.extend do # {{{
     
     render: ->
         if @template
-            @$el.html @template @model.toJSON()
+            t = $ @template @model.toJSON()
+            @$el.html t.html()
+                .attr { id:t.attr('id'), class:t.attr('class') }
             return this
         
         return @remove() if @model.get 'hidden'
@@ -147,21 +150,22 @@ Scaffold = exports.Scaffold = Backbone.View.extend do # {{{
     
     initialize: ->
         _.bindAll this, 'addOne', 'addAll'
-        # @subviews = []
+        @subviews = []
         
         CollectionType = @collectionType
-        @collection or= new CollectionType
+        @model = @collection or= new CollectionType
         @collection.on 'add',   @addOne
         @collection.on 'reset', @addAll
-        # @collection.on 'all',   @render
         
         @$el.data { model:@collection, view:this } .addClass @className
     
     
     addOne: (field) ->
+        _.remove @subviews, field.view if field.view
+        
         SubviewType = @subviewType
         view = new SubviewType model:field
-        # @subviews.push view
+        @subviews.push view
         @$el.append view.render().el
         view
     
@@ -171,7 +175,18 @@ Scaffold = exports.Scaffold = Backbone.View.extend do # {{{
         @collection.each @addOne
         this
     
-    toString: ->
-        "#{@ctorName}(collection=#{@collection})"
+    get: (id) ->
+        @collection.get id
+    
+    at: (idx) ->
+        @collection.at idx
+    
+    pluck: (prop) ->
+        @collection.pluck prop
+    
+    values: ->
+        @collection.values()
+    
+    toString: -> "#{@ctorName}(collection=#{@collection})"
 # }}}
 
diff --git a/lib/template/graph-option.jade b/lib/template/graph-option.jade
index ae531cd..0da61a1 100644
--- a/lib/template/graph-option.jade
+++ b/lib/template/graph-option.jade
@@ -2,9 +2,10 @@
 - 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);
+- var type_cls     = _.domize('type', type); 
 
 .field.option(id=_.domize('option', id), class="#{category_cls} #{tags_cls}")
+    h3.shortname #{_.shortname(name)}
     label.name(for=value_id) #{name}
     input.value(type="text", id=value_id, name=name, value=value)
     
diff --git a/lib/underscore/object.co b/lib/underscore/object.co
index 621fa14..e61b765 100644
--- a/lib/underscore/object.co
+++ b/lib/underscore/object.co
@@ -2,6 +2,20 @@ _ = require 'underscore'
 
 _obj = do
     /**
+     * In-place removal of a value from an Array or Object.
+     */
+    remove: (obj, v) ->
+        values = [].slice.call arguments, 1
+        if _.isArray obj
+            for v of values
+                idx = obj.indexOf v
+                obj.splice idx, 1 if idx is not -1
+        else
+            for k, v in obj
+                delete obj[k] if -1 is not values.indexOf v
+        obj
+    
+    /**
      * Searches a heirarchical object for a given subkey specified in dotted-property syntax.
      * @param {Object} base The object to serve as the root of the property-chain.
      * @param {Array|String} chain The property-chain to lookup.
diff --git a/lib/underscore/string.co b/lib/underscore/string.co
index f0d50f7..d83013e 100644
--- a/lib/underscore/string.co
+++ b/lib/underscore/string.co
@@ -37,6 +37,19 @@ _string = do
         else
             "#{key}_#{_str.trim _str.underscored(value), '_'}"
     
+    shortname: (s) ->
+        return s if s.length <= 6
+        parts = _ s
+            .chain()
+                .underscored()
+                .trim '_'
+            .value()
+            .replace /_+/g, '_'
+            .split '_'
+            .map -> _.capitalize it.slice 0, 2
+        return s if parts.length is 1 #and s.length <= 8
+        parts.shift().toLowerCase() + parts.join('')
+    
 
 _string import do
     dropLeft  : _string.ldrop
diff --git a/www/css/graph.styl b/www/css/graph.styl
index 4bd91d8..bb36172 100644
--- a/www/css/graph.styl
+++ b/www/css/graph.styl
@@ -1,4 +1,50 @@
 @import 'nib'
 @import 'colors'
 
-
+section.graph
+    .graph-label
+        position relative
+    
+    .viewport
+        position relative
+    
+    form.details
+        position relative
+    
+    fieldset.options
+        legend
+            position relative
+    
+    .field.option
+        padding 0.5em
+        margin 0.5em
+        
+        .shortname
+            display none
+        .value
+            position relative
+        .type
+            position relative
+        .default
+            position relative
+        .desc
+            position relative
+        .tags
+            .tag
+                position relative
+        .examples
+            .example
+                position relative
+        
+        
+        &.collapsed
+            float left
+            min-width 2em
+            min-height 2em
+            background-color #ccc
+            
+            *
+                display none
+            .shortname
+                display inline
+