initial progress on adding thead, tbody, and tfoot 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,7 +5,7 @@ module.exports = Component.extend({
   defaults: _.extend({}, Component.prototype.defaults, {
       type: 'table',
       tagName: 'table',
-      droppable: ['tr', 'tbody', 'thead', 'tfoot'],
+      droppable: ['tbody', 'thead', 'tfoot'],
       columns: 3,
       rows: 2,
       /*
@@ -65,7 +65,7 @@ module.exports = Component.extend({
         rowsColl.push(model);
       }
     });
-    components.reset(rowsColl);
+    // TODO: create tbody element if it doesn't exist? components.reset(rowsColl);
   },
 
 },{

src/dom_components/model/ComponentTableBody.js

@@ -0,0 +1,29 @@
+var Component = require('./Component');
+
+module.exports = Component.extend({
+
+  defaults: _.extend({}, Component.prototype.defaults, {
+    type: 'tbody',
+    tagName: 'tbody',
+    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 == 'TBODY'){
+      result = {type: 'tbody'};
+    }
+    return result;
+  },
+
+});

src/dom_components/model/ComponentTableFoot.js

@@ -0,0 +1,29 @@
+var Component = require('./Component');
+
+module.exports = Component.extend({
+
+  defaults: _.extend({}, Component.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 Component = require('./Component');
+
+module.exports = Component.extend({
+
+  defaults: _.extend({}, Component.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/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({});