Merge pull request #606 from ryandeba/thead-tbody-tfoot #563

Add new table components

src/dom_components/index.js

@@ -57,6 +57,21 @@ module.exports = () => {
       model: require('./model/ComponentTable'),
       view: require('./view/ComponentTableView'),
     },
+    {
+      id: 'thead',
+      model: require('./model/ComponentTableHead'),
+      view: require('./view/ComponentTableHeadView'),
+    },
+    {
+      id: 'tbody',
+      model: require('./model/ComponentTableBody'),
+      view: require('./view/ComponentTableBodyView'),
+    },
+    {
+      id: 'tfoot',
+      model: require('./model/ComponentTableFoot'),
+      view: require('./view/ComponentTableFootView'),
+    },
     {
       id: 'map',
       model: require('./model/ComponentMap'),

src/dom_components/model/ComponentTable.js

@@ -5,20 +5,7 @@ module.exports = Component.extend({
   defaults: _.extend({}, Component.prototype.defaults, {
       type: 'table',
       tagName: 'table',
-      droppable: ['tr', 'tbody', 'thead', 'tfoot'],
-      columns: 3,
-      rows: 2,
-      /*
-      traits: [{
-        label: 'Columns',
-        name: 'columns',
-        changeProp: 1,
-      },{
-        label: 'Rows',
-        name: 'rows',
-        changeProp: 1,
-      }]
-      */
+      droppable: ['tbody', 'thead', 'tfoot'],
   }),
 
   initialize(o, opt) {
@@ -29,43 +16,8 @@ module.exports = Component.extend({
 
     // Init components if empty
     if(!components.length){
-      var rowsToAdd = [];
-
-      while(rows--){
-        var columnsToAdd = [];
-        var clm = columns;
-
-        while (clm--) {
-          columnsToAdd.push({
-            type: 'cell',
-            classes: ['cell']
-          });
-        }
-
-        rowsToAdd.push({
-          type: 'row',
-          classes: ['row'],
-          components: columnsToAdd
-        });
-      }
-      components.add(rowsToAdd);
+      components.add({type: 'tbody'});
     }
-
-    // Clean table from non rows
-    var rowsColl = [];
-    components.each(model => {
-      if(model.get('type') != 'row'){
-        model.get('components').each(row => {
-          if(row.get('type') == 'row'){
-            row.collection = components;
-            rowsColl.push(row);
-          }
-        });
-      }else{
-        rowsColl.push(model);
-      }
-    });
-    components.reset(rowsColl);
   },
 
 },{

src/dom_components/model/ComponentTableBody.js

@@ -0,0 +1,62 @@
+var Component = require('./Component');
+
+module.exports = Component.extend({
+
+  defaults: _.extend({}, Component.prototype.defaults, {
+    type: 'tbody',
+    tagName: 'tbody',
+    droppable: ['tr'],
+    columns: 1,
+    rows: 1,
+  }),
+
+  initialize(o, opt) {
+    Component.prototype.initialize.apply(this, arguments);
+    var components = this.get('components');
+    var rows = this.get('rows');
+    var columns = this.get('columns');
+
+    // Init components if empty
+    if(!components.length){
+      var rowsToAdd = [];
+
+      while(rows--){
+        var columnsToAdd = [];
+        var clm = columns;
+
+        while (clm--) {
+          columnsToAdd.push({
+            type: 'cell',
+            classes: ['cell']
+          });
+        }
+
+        rowsToAdd.push({
+          type: 'row',
+          classes: ['row'],
+          components: columnsToAdd
+        });
+      }
+      components.add(rowsToAdd);
+    }
+  },
+
+},{
+
+  /**
+   * Detect if the passed element is a valid component.
+   * In case the element is valid an object abstracted
+   * from the element will be returned
+   * @param {HTMLElement}
+   * @return {Object}
+   * @private
+   */
+  isComponent(el) {
+    var result = '';
+    if(el.tagName == 'TBODY'){
+      result = {type: 'tbody'};
+    }
+    return result;
+  },
+
+});

src/dom_components/model/ComponentTableFoot.js

@@ -0,0 +1,29 @@
+var ComponentTableBody = require('./ComponentTableBody');
+
+module.exports = ComponentTableBody.extend({
+
+  defaults: _.extend({}, ComponentTableBody.prototype.defaults, {
+    type: 'tfoot',
+    tagName: 'tfoot',
+    droppable: ['tr']
+  }),
+
+},{
+
+  /**
+   * Detect if the passed element is a valid component.
+   * In case the element is valid an object abstracted
+   * from the element will be returned
+   * @param {HTMLElement}
+   * @return {Object}
+   * @private
+   */
+  isComponent(el) {
+    var result = '';
+    if(el.tagName == 'TFOOT'){
+      result = {type: 'tfoot'};
+    }
+    return result;
+  },
+
+});

src/dom_components/model/ComponentTableHead.js

@@ -0,0 +1,29 @@
+var ComponentTableBody = require('./ComponentTableBody');
+
+module.exports = ComponentTableBody.extend({
+
+  defaults: _.extend({}, ComponentTableBody.prototype.defaults, {
+    type: 'thead',
+    tagName: 'thead',
+    droppable: ['tr']
+  }),
+
+},{
+
+  /**
+   * Detect if the passed element is a valid component.
+   * In case the element is valid an object abstracted
+   * from the element will be returned
+   * @param {HTMLElement}
+   * @return {Object}
+   * @private
+   */
+  isComponent(el) {
+    var result = '';
+    if(el.tagName == 'THEAD'){
+      result = {type: 'thead'};
+    }
+    return result;
+  },
+
+});

src/dom_components/model/ComponentTableRow.js

@@ -5,7 +5,6 @@ module.exports = Component.extend({
   defaults: _.extend({}, Component.prototype.defaults, {
       type: 'row',
       tagName: 'tr',
-      draggable: ['table', 'tbody', 'thead'],
       droppable: ['th', 'td']
   }),
 

src/dom_components/view/ComponentTableBodyView.js

@@ -0,0 +1,4 @@
+var Backbone = require('backbone');
+var ComponentView = require('./ComponentView');
+
+module.exports = ComponentView.extend({});

src/dom_components/view/ComponentTableFootView.js

@@ -0,0 +1,4 @@
+var Backbone = require('backbone');
+var ComponentView = require('./ComponentView');
+
+module.exports = ComponentView.extend({});

src/dom_components/view/ComponentTableHeadView.js

@@ -0,0 +1,4 @@
+var Backbone = require('backbone');
+var ComponentView = require('./ComponentView');
+
+module.exports = ComponentView.extend({});