Add table row and column

index.html

@@ -15,7 +15,6 @@
 		<div id="gjs" style="height:0px; overflow:hidden">
 			<header class="header-banner">
 				<div class="container-width">
-					<!--
 					<table>
 						<thead>
 							<tr> <th>Header1</th> <th>Header2</th> <th>Header3</th> </tr>
@@ -26,6 +25,14 @@
 							<tr> <td>Row31</td> <td>Row32</td> <td>Row33</td> </tr>
 						</tbody>
 					</table>
+					<br/>
+					<br/>
+					<table>
+							<tr> <td>Row11</td> <td>Row12</td> <td>Row13</td> </tr>
+							<tr> <td>Row21</td> <td>Row22</td> <td>Row23</td> </tr>
+							<tr> <td>Row31</td> <td>Row32</td> <td>Row33</td> </tr>
+					</table>
+					<!--
 					<iframe class="iframe" src="http://player.vimeo.com/video/2?&controls=0&loop=1&color=ff0000"></iframe>
 					<iframe class="iframe" src="https://maps.google.com/maps?&q=London, UK&z=11&t=q&output=embed"></iframe>
 				-->

src/dom_components/main.js

@@ -42,6 +42,18 @@ define(function(require) {
 		ComponentView = require('./view/ComponentView');
 		var component, componentView;
 		var defaultTypes = {
+			'cell': {
+				model: require('./model/ComponentTableCell'),
+				view: require('./view/ComponentTableCellView'),
+			},
+			'row': {
+				model: require('./model/ComponentTableRow'),
+				view: require('./view/ComponentTableRowView'),
+			},
+			'table': {
+				model: require('./model/ComponentTable'),
+				view: require('./view/ComponentTableView'),
+			},
 			'map': {
 				model: require('./model/ComponentMap'),
 				view: require('./view/ComponentMapView'),

src/dom_components/model/Component.js

@@ -8,8 +8,15 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 				type: '',
 				editable: false,
 				removable: true,
+
+				// Indicates if it's possible to drag the component inside other
+				// TODO: Indicate an array of selectors where it could be dropped inside
 				draggable: true,
+
+				// Indicates if it's possible to drop other components inside
+				// TODO: Indicate an array of selectors which could be dropped inside
 				droppable: true,
+
 				badgable: true,
 				stylable: true,
 				copyable: true,

src/dom_components/model/ComponentTableCell.js

@@ -0,0 +1,29 @@
+define(['./ComponentText'],
+	function (Component) {
+
+		return Component.extend({
+
+			defaults: _.extend({}, Component.prototype.defaults, {
+					tagName: 'td',
+			}),
+
+		},{
+
+			/**
+			 * 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: function(el) {
+				var result = '';
+				if(el.tagName == 'TD'){
+					result = {type: 'cell'};
+				}
+				return result;
+			},
+
+		});
+});

src/dom_components/model/ComponentTableRow.js

@@ -0,0 +1,30 @@
+define(['./Component'],
+	function (Component) {
+
+		return Component.extend({
+
+			defaults: _.extend({}, Component.prototype.defaults, {
+					tagName: 'tr',
+					draggable: false
+			}),
+
+		},{
+
+			/**
+			 * 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: function(el) {
+				var result = '';
+				if(el.tagName == 'TR'){
+					result = {type: 'row'};
+				}
+				return result;
+			},
+
+		});
+});

src/dom_components/view/ComponentTableCellView.js

@@ -0,0 +1,6 @@
+define(['backbone', './ComponentTextView'],
+	function (Backbone, ComponentView) {
+
+	return ComponentView.extend({
+	});
+});

src/dom_components/view/ComponentTableRowView.js

@@ -0,0 +1,6 @@
+define(['backbone', './ComponentView'],
+	function (Backbone, ComponentView) {
+
+	return ComponentView.extend({
+	});
+});