luca 0.9.0 → 0.9.1

data/CHANGELOG

@@ -80,4 +80,7 @@
     Simply trigger enable:loadmask and disable:loadmask on any view where loadMask is set to true
 
 0.9.0
-  - Introducing Luca.components.CollectionView
+  - Introducing Luca.components.CollectionView
+
+0.9.1
+  - Bugfix Release

data/assets/javascripts/sandbox/application.coffee

@@ -2,7 +2,6 @@ Sandbox.Application = Luca.Application.extend
   name: 'sandbox_application'
   el: '#viewport'
   fluid: true
-
   topNav:'top_navigation'
 
   useKeyRouter: true
@@ -16,6 +15,7 @@ Sandbox.Application = Luca.Application.extend
     name: 'pages'
     components:[
       name: "main"
+      ctype: "panel"
       bodyTemplate: 'main'
     ,
       name :"class_browser"

data/assets/javascripts/sandbox/templates/main.luca

@@ -20,6 +20,7 @@
   .span4
     %h3 Component Driven Design
     %p Luca is a collection of common components needed to build large single page applications.  Twitter's Bootstrap is responsible for all of the styling, and Backbone.js is responsible for everything else.
+    %p Luca encourages a style of application design centered around building isolated components, and using framework helpers to glue them together in a very readable, declarative style.
 
   .span4
     %h3 Interchangeable

data/assets/stylesheets/sandbox/sandbox.scss

@@ -1,2 +1,34 @@
-#viewport {
-}
+#sample-component-wrapper {
+  border: 1px solid rgba(0,0,0,1);
+  box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.5);
+  padding: 5px;
+  height: 420px;
+  h1 {
+    width: 100%;
+    text-align: center;
+    padding-top: 8px;
+  }
+
+  #sample-component {
+    height: 100%;
+  }
+
+  #form-vew, #collection-view, #toolbar {
+    margin: 4px 0px;
+  }
+  #form-view {
+    background-color: rgba(200,0,0,0.5);
+    border: 1px solid rgba(200,0,0,1);
+    height: 18%;
+  }
+  #collection-view {
+    background-color: rgba(0,200,0,0.5);
+    border: 1px solid rgba(0,200,0,1);
+    height: 50%;
+  }
+  #toolbar {
+    background-color: rgba(0,0,200,0.5);
+    border: 1px solid rgba(0,0,200,1);
+    height: 18%;
+  }
+}

data/lib/luca/rails/version.rb

@@ -1,6 +1,6 @@
 module Luca
   module Rails
-    VERSION = "0.9.0"
+    VERSION = "0.9.1"
   end
 end
 

data/spec/components/fields/checkbox_array_spec.coffee

@@ -1,46 +1,12 @@
 describe 'The Checkbox Array Field', ->
-  
   beforeEach ->
-    @model = new Backbone.Model(item_ids: ["1"])
-    collection = new Luca.Collection
-    
-    @formView = new Luca.components.FormView
-      components:[
-        ctype: "checkbox_array"
-        name: 'item_ids'
-        collection: collection
-      ]
+    @collection = new Luca.Collection([id:"1",name:"jon"])
+    @field = new Luca.fields.CheckboxArray(collection: @collection)
 
-    @formView.render()
-    @formView.loadModel(@model)
-    
-    collection.reset([
-      id: "1", name: "Item1"
-    ,
-      id: "2", name: "Item2"
-    ,
-      id: "3", name: "Item3"
-    ])
-    
-    @field = @formView.getFields()[0]
-    
-  it "should create a checkbox array field", ->
-    expect(@formView.currentModel()).toEqual(@model)
-    expect(@field.selectedItems).toEqual(["1"])
+    $('body').append("<div id='jasmine-helper' style='display:none' />")
 
-  it "should render the list of checkboxes", ->
-    expect(@field.$el.html()).toContain("Item1")
-    expect(@field.$el.html()).toContain("Item2")
-    expect(@field.$el.html()).toContain("Item3")
+    $('#jasmine-helper').html( @field.render().el )
 
-  it "should check off each checkbox in the collection that is selected", ->
-    expect(@field.$el.find("input[value='1']")[0].checked).toBeTruthy()
-    expect(@field.$el.find("input[value='2']")[0].checked).toBeFalsy()
-    expect(@field.$el.find("input[value='3']")[0].checked).toBeFalsy()
-  
-  it "should update the form model's attribute to be an array of selected items on click", ->
-    checkbox = $(@field.$el.find("input[value='2']")[0])
-    checkbox.prop("checked", true)
-    checkbox.click()
+  it "should render checkboxes", ->
+    expect( @field.checkboxesRendered ).toEqual true
 
-    expect(@field.getModel().get('item_ids')).toEqual(["1", "2"])

data/spec/core/view_spec.coffee

@@ -83,7 +83,7 @@ describe "Deferrable Rendering", ->
     @fetchSpy   = sinon.spy()
     @customSpy  = sinon.spy()
 
-    @collection = new Luca.Collection
+    @collection = new Luca.Collection [],
       url: "/models"
       fetch: @fetchSpy
       custom: @customSpy

data/src/components/collection_view.coffee

@@ -25,7 +25,7 @@ _.def("Luca.components.CollectionView").extends("Luca.components.Panel").with
     unless @collection?
       throw "Collection Views must specify a collection"
 
-    unless @itemTemplate? || @itemRenderer?
+    unless @itemTemplate? || @itemRenderer? || @itemProperty?
       throw "Collection Views must specify an item template or item renderer function"
 
     Luca.components.Panel::initialize.apply(@, arguments)
@@ -38,7 +38,6 @@ _.def("Luca.components.CollectionView").extends("Luca.components.Panel").with
   attributesForItem: (item)->
     _.extend {}, class: @itemClassName, "data-index": item.index
 
-  # expects an item object, which contains the
   contentForItem: (item={})->
     if @itemTemplate? and templateFn = Luca.template(@itemTemplate)
       content = templateFn.call(@, item)
@@ -46,7 +45,8 @@ _.def("Luca.components.CollectionView").extends("Luca.components.Panel").with
     if @itemRenderer? and _.isFunction( @itemRenderer )
       content = @itemRenderer.call(@, item)
 
-    content || ""
+    if @itemProperty
+      content = if _.isFunction(@itemProperty) then @itemProperty() else (item.model.get(@itemProperty) || item.model[ @itemProperty ])
 
   makeItem: (model, index)->
     item = if @prepareItem? then @prepareItem.call(@, model, index) else (model:model, index: index)
@@ -54,7 +54,10 @@ _.def("Luca.components.CollectionView").extends("Luca.components.Panel").with
     make(@itemTagName, @attributesForItem(item), @contentForItem(item))
 
   getModels: ()->
-    @collection.models
+    if @collection?.query and (@filter || @filterOptions)
+      @collection.query(@filter, @filterOptions)
+    else
+      @collection.models
 
   refresh: ()->
     panel = @

data/src/components/fields/checkbox_array.coffee

@@ -1,14 +1,19 @@
+make = Luca.View::make
+
 _.def('Luca.fields.CheckboxArray').extends('Luca.core.Field').with
+  version: 2
 
   template: "fields/checkbox_array"
 
   events:
     "click input" : "clickHandler"
 
+  selectedItems: []
+
   initialize: (@options={})->
     _.extend @, @options
     _.extend @, Luca.modules.Deferrable
-    _.bindAll @, "populateCheckboxes", "clickHandler", "_updateModel"
+    _.bindAll @, "renderCheckboxes", "clickHandler", "checkSelected"
 
     Luca.core.Field::initialize.apply @, arguments
 
@@ -17,7 +22,6 @@ _.def('Luca.fields.CheckboxArray').extends('Luca.core.Field').with
     @label ||= @name
     @valueField ||= "id"
     @displayField ||= "name"
-    @selectedItems = []
 
   afterInitialize: (@options={})->
     try
@@ -25,41 +29,76 @@ _.def('Luca.fields.CheckboxArray').extends('Luca.core.Field').with
     catch e
       console.log "Error Configuring Collection", @, e.message
 
-    @collection.bind "reset", @populateCheckboxes
+    cbArray = @
 
-  afterRender: ()->
-    if @collection?.length > 0
-      @populateCheckboxes()
+    if @collection.length > 0
+      @renderCheckboxes()
     else
-      @collection.trigger("reset")
+      @defer("renderCheckboxes").until(@collection,"reset")
 
   clickHandler: (event)->
-    checkbox = event.target
-    if checkbox.checked
-      @selectedItems.push(checkbox.value)
+    checkbox = $(event.target)
+
+    if checkbox.prop('checked')
+      @selectedItems.push( checkbox.val() )
     else
-      if @selectedItems.indexOf(checkbox.value) isnt -1
-        @selectedItems = _.without(@selectedItems, [checkbox.value])
+      if _( @selectedItems ).include( checkbox.val() )
+        @selectedItems = _( @selectedItems ).without( checkbox.val() )
 
-    @_updateModel()
+  controls: ()->
+    @$('.controls')
 
-  populateCheckboxes: ()->
-    controls = $(@el).find('.controls')
-    controls.empty()
-    unless _.isUndefined(@getModel())
-      @selectedItems = @getModel().get(@name)
+  renderCheckboxes: ()->
+    @controls().empty()
+    @selectedItems = []
 
     @collection.each (model)=>
       value = model.get(@valueField)
       label = model.get(@displayField)
-      input_id = _.uniqueId('field')
-      controls.append(Luca.templates["fields/checkbox_array_item"]({label: label, value: value, input_id: input_id, input_name: @input_name}))
+      input_id = _.uniqueId("#{ @cid }_checkbox")
+
+      inputElement = make("input",type:"checkbox",name:@input_name,value:value,id: input_id)
+      element = make("label", {for:input_id}, inputElement)
+
+      $( element ).append(" #{ label }")
+      @controls().append( element )
+
+    @trigger("checkboxes:rendered", @checkboxesRendered = true)
+    @
+
+  uncheckAll: ()->
+    @allFields().prop('checked', false)
 
-      @$("##{input_id}").attr("checked", "checked") unless _( @selectedItems ).indexOf(value) is -1
+  allFields: ()->
+    @controls().find("input[type='checkbox']")
+
+  checkSelected: (items)->
+    @selectedItems = items if items?
+
+    @uncheckAll()
+
+    for value in @selectedItems
+      checkbox = @controls().find("input[value='#{ value }']")
+      checkbox.prop('checked', true)
+
+    @selectedItems
+
+  getValue: ()->
+    @$(field).val() for field in @allFields() when @$(field).prop('checked')
+
+  setValue: (items)->
+    @selectedItems = items
+
+    if @checkboxesRendered is true
+      @checkSelected(items)
+    else
+      cbArray = @
+      @defer ()->
+        cbArray.checkSelected(items)
+      .until("checkboxes:rendered")
 
-    $(@container).append(@$el)
+  getValues: ()->
+    @getValue()
 
-  _updateModel: ()->
-    attributes = {}
-    attributes[@name] = @selectedItems
-    @getModel().set(attributes)
+  setValues: (items)->
+    @setValue(items)

data/src/framework.coffee

@@ -20,7 +20,7 @@
     return fallback()
 
 _.extend Luca,
-  VERSION: "0.9.0"
+  VERSION: "0.9.1"
   core: {}
   containers: {}
   components: {}

data/src/templates/fields/checkbox_array.luca

@@ -1,5 +1,4 @@
-.form-horizontal
-  .control-group
-    %label{:for=>"<%= input_id %>"}
-      <%= label %>
-    .controls
+.control-group
+  %label{:for=>"<%= input_id %>"}
+    <%= label %>
+  .controls

data/vendor/assets/javascripts/luca-ui-base.js

@@ -18,7 +18,7 @@
   };
 
   _.extend(Luca, {
-    VERSION: "0.9.0",
+    VERSION: "0.9.1",
     core: {},
     containers: {},
     components: {},
@@ -1427,7 +1427,7 @@
 }).call(this);
 (function() {
   Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/checkbox_array"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'form-horizontal\'>\n  <div class=\'control-group\'>\n    <label for=\'', input_id ,'\'>\n      ', label ,'\n    </label>\n    <div class=\'controls\'></div>\n  </div>\n</div>\n');}return __p.join('');};
+  Luca.templates["fields/checkbox_array"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'control-group\'>\n  <label for=\'', input_id ,'\'>\n    ', label ,'\n  </label>\n  <div class=\'controls\'></div>\n</div>\n');}return __p.join('');};
 }).call(this);
 (function() {
   Luca.templates || (Luca.templates = {});

data/vendor/assets/javascripts/luca-ui-spec.js

@@ -18,7 +18,7 @@
   };
 
   _.extend(Luca, {
-    VERSION: "0.9.0",
+    VERSION: "0.9.1",
     core: {},
     containers: {},
     components: {},
@@ -1427,7 +1427,7 @@
 }).call(this);
 (function() {
   Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/checkbox_array"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'form-horizontal\'>\n  <div class=\'control-group\'>\n    <label for=\'', input_id ,'\'>\n      ', label ,'\n    </label>\n    <div class=\'controls\'></div>\n  </div>\n</div>\n');}return __p.join('');};
+  Luca.templates["fields/checkbox_array"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'control-group\'>\n  <label for=\'', input_id ,'\'>\n    ', label ,'\n  </label>\n  <div class=\'controls\'></div>\n</div>\n');}return __p.join('');};
 }).call(this);
 (function() {
   Luca.templates || (Luca.templates = {});
@@ -2736,7 +2736,7 @@
       if (this.collection == null) {
         throw "Collection Views must specify a collection";
       }
-      if (!((this.itemTemplate != null) || (this.itemRenderer != null))) {
+      if (!((this.itemTemplate != null) || (this.itemRenderer != null) || (this.itemProperty != null))) {
         throw "Collection Views must specify an item template or item renderer function";
       }
       Luca.components.Panel.prototype.initialize.apply(this, arguments);
@@ -2761,7 +2761,9 @@
       if ((this.itemRenderer != null) && _.isFunction(this.itemRenderer)) {
         content = this.itemRenderer.call(this, item);
       }
-      return content || "";
+      if (this.itemProperty) {
+        return content = _.isFunction(this.itemProperty) ? this.itemProperty() : item.model.get(this.itemProperty) || item.model[this.itemProperty];
+      }
     },
     makeItem: function(model, index) {
       var item;
@@ -2772,7 +2774,12 @@
       return make(this.itemTagName, this.attributesForItem(item), this.contentForItem(item));
     },
     getModels: function() {
-      return this.collection.models;
+      var _ref;
+      if (((_ref = this.collection) != null ? _ref.query : void 0) && (this.filter || this.filterOptions)) {
+        return this.collection.query(this.filter, this.filterOptions);
+      } else {
+        return this.collection.models;
+      }
     },
     refresh: function() {
       var panel;
@@ -2882,84 +2889,127 @@
 
 }).call(this);
 (function() {
+  var make;
+
+  make = Luca.View.prototype.make;
 
   _.def('Luca.fields.CheckboxArray')["extends"]('Luca.core.Field')["with"]({
+    version: 2,
     template: "fields/checkbox_array",
     events: {
       "click input": "clickHandler"
     },
+    selectedItems: [],
     initialize: function(options) {
       this.options = options != null ? options : {};
       _.extend(this, this.options);
       _.extend(this, Luca.modules.Deferrable);
-      _.bindAll(this, "populateCheckboxes", "clickHandler", "_updateModel");
+      _.bindAll(this, "renderCheckboxes", "clickHandler", "checkSelected");
       Luca.core.Field.prototype.initialize.apply(this, arguments);
       this.input_id || (this.input_id = _.uniqueId('field'));
       this.input_name || (this.input_name = this.name);
       this.label || (this.label = this.name);
       this.valueField || (this.valueField = "id");
-      this.displayField || (this.displayField = "name");
-      return this.selectedItems = [];
+      return this.displayField || (this.displayField = "name");
     },
     afterInitialize: function(options) {
+      var cbArray;
       this.options = options != null ? options : {};
       try {
         this.configure_collection();
       } catch (e) {
         console.log("Error Configuring Collection", this, e.message);
       }
-      return this.collection.bind("reset", this.populateCheckboxes);
-    },
-    afterRender: function() {
-      var _ref;
-      if (((_ref = this.collection) != null ? _ref.length : void 0) > 0) {
-        return this.populateCheckboxes();
+      cbArray = this;
+      if (this.collection.length > 0) {
+        return this.renderCheckboxes();
       } else {
-        return this.collection.trigger("reset");
+        return this.defer("renderCheckboxes").until(this.collection, "reset");
       }
     },
     clickHandler: function(event) {
       var checkbox;
-      checkbox = event.target;
-      if (checkbox.checked) {
-        this.selectedItems.push(checkbox.value);
+      checkbox = $(event.target);
+      if (checkbox.prop('checked')) {
+        return this.selectedItems.push(checkbox.val());
       } else {
-        if (this.selectedItems.indexOf(checkbox.value) !== -1) {
-          this.selectedItems = _.without(this.selectedItems, [checkbox.value]);
+        if (_(this.selectedItems).include(checkbox.val())) {
+          return this.selectedItems = _(this.selectedItems).without(checkbox.val());
         }
       }
-      return this._updateModel();
     },
-    populateCheckboxes: function() {
-      var controls,
-        _this = this;
-      controls = $(this.el).find('.controls');
-      controls.empty();
-      if (!_.isUndefined(this.getModel())) {
-        this.selectedItems = this.getModel().get(this.name);
-      }
+    controls: function() {
+      return this.$('.controls');
+    },
+    renderCheckboxes: function() {
+      var _this = this;
+      this.controls().empty();
+      this.selectedItems = [];
       this.collection.each(function(model) {
-        var input_id, label, value;
+        var element, inputElement, input_id, label, value;
         value = model.get(_this.valueField);
         label = model.get(_this.displayField);
-        input_id = _.uniqueId('field');
-        controls.append(Luca.templates["fields/checkbox_array_item"]({
-          label: label,
+        input_id = _.uniqueId("" + _this.cid + "_checkbox");
+        inputElement = make("input", {
+          type: "checkbox",
+          name: _this.input_name,
           value: value,
-          input_id: input_id,
-          input_name: _this.input_name
-        }));
-        if (_(_this.selectedItems).indexOf(value) !== -1) {
-          return _this.$("#" + input_id).attr("checked", "checked");
-        }
+          id: input_id
+        });
+        element = make("label", {
+          "for": input_id
+        }, inputElement);
+        $(element).append(" " + label);
+        return _this.controls().append(element);
       });
-      return $(this.container).append(this.$el);
+      this.trigger("checkboxes:rendered", this.checkboxesRendered = true);
+      return this;
+    },
+    uncheckAll: function() {
+      return this.allFields().prop('checked', false);
     },
-    _updateModel: function() {
-      var attributes;
-      attributes = {};
-      attributes[this.name] = this.selectedItems;
-      return this.getModel().set(attributes);
+    allFields: function() {
+      return this.controls().find("input[type='checkbox']");
+    },
+    checkSelected: function(items) {
+      var checkbox, value, _i, _len, _ref;
+      if (items != null) this.selectedItems = items;
+      this.uncheckAll();
+      _ref = this.selectedItems;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        value = _ref[_i];
+        checkbox = this.controls().find("input[value='" + value + "']");
+        checkbox.prop('checked', true);
+      }
+      return this.selectedItems;
+    },
+    getValue: function() {
+      var field, _i, _len, _ref, _results;
+      _ref = this.allFields();
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        field = _ref[_i];
+        if (this.$(field).prop('checked')) _results.push(this.$(field).val());
+      }
+      return _results;
+    },
+    setValue: function(items) {
+      var cbArray;
+      this.selectedItems = items;
+      if (this.checkboxesRendered === true) {
+        return this.checkSelected(items);
+      } else {
+        cbArray = this;
+        return this.defer(function() {
+          return cbArray.checkSelected(items);
+        }).until("checkboxes:rendered");
+      }
+    },
+    getValues: function() {
+      return this.getValue();
+    },
+    setValues: function(items) {
+      return this.setValue(items);
     }
   });
 
@@ -4082,56 +4132,20 @@
 
   describe('The Checkbox Array Field', function() {
     beforeEach(function() {
-      var collection;
-      this.model = new Backbone.Model({
-        item_ids: ["1"]
-      });
-      collection = new Luca.Collection;
-      this.formView = new Luca.components.FormView({
-        components: [
-          {
-            ctype: "checkbox_array",
-            name: 'item_ids',
-            collection: collection
-          }
-        ]
-      });
-      this.formView.render();
-      this.formView.loadModel(this.model);
-      collection.reset([
+      this.collection = new Luca.Collection([
         {
           id: "1",
-          name: "Item1"
-        }, {
-          id: "2",
-          name: "Item2"
-        }, {
-          id: "3",
-          name: "Item3"
+          name: "jon"
         }
       ]);
-      return this.field = this.formView.getFields()[0];
-    });
-    it("should create a checkbox array field", function() {
-      expect(this.formView.currentModel()).toEqual(this.model);
-      return expect(this.field.selectedItems).toEqual(["1"]);
-    });
-    it("should render the list of checkboxes", function() {
-      expect(this.field.$el.html()).toContain("Item1");
-      expect(this.field.$el.html()).toContain("Item2");
-      return expect(this.field.$el.html()).toContain("Item3");
-    });
-    it("should check off each checkbox in the collection that is selected", function() {
-      expect(this.field.$el.find("input[value='1']")[0].checked).toBeTruthy();
-      expect(this.field.$el.find("input[value='2']")[0].checked).toBeFalsy();
-      return expect(this.field.$el.find("input[value='3']")[0].checked).toBeFalsy();
+      this.field = new Luca.fields.CheckboxArray({
+        collection: this.collection
+      });
+      $('body').append("<div id='jasmine-helper' style='display:none' />");
+      return $('#jasmine-helper').html(this.field.render().el);
     });
-    return it("should update the form model's attribute to be an array of selected items on click", function() {
-      var checkbox;
-      checkbox = $(this.field.$el.find("input[value='2']")[0]);
-      checkbox.prop("checked", true);
-      checkbox.click();
-      return expect(this.field.getModel().get('item_ids')).toEqual(["1", "2"]);
+    return it("should render checkboxes", function() {
+      return expect(this.field.checkboxesRendered).toEqual(true);
     });
   });
 
@@ -5022,7 +5036,7 @@
     beforeEach(function() {
       this.fetchSpy = sinon.spy();
       this.customSpy = sinon.spy();
-      this.collection = new Luca.Collection({
+      this.collection = new Luca.Collection([], {
         url: "/models",
         fetch: this.fetchSpy,
         custom: this.customSpy,