From 593c04d72066db2364178a8edbc0f3b20d1af91e Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 15 Nov 2016 14:18:04 +0100
Subject: [PATCH] Add table row and column

---
 index.html                                    |  9 +++++-
 src/dom_components/main.js                    | 12 ++++++++
 src/dom_components/model/Component.js         |  7 +++++
 .../model/ComponentTableCell.js               | 29 ++++++++++++++++++
 src/dom_components/model/ComponentTableRow.js | 30 +++++++++++++++++++
 .../view/ComponentTableCellView.js            |  6 ++++
 .../view/ComponentTableRowView.js             |  6 ++++
 7 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 src/dom_components/model/ComponentTableCell.js
 create mode 100644 src/dom_components/model/ComponentTableRow.js
 create mode 100644 src/dom_components/view/ComponentTableCellView.js
 create mode 100644 src/dom_components/view/ComponentTableRowView.js

diff --git a/index.html b/index.html
index 20f68b03b..ada522b3f 100755
--- a/index.html
+++ b/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>
 				-->
diff --git a/src/dom_components/main.js b/src/dom_components/main.js
index 284c42bd6..d1009c502 100644
--- a/src/dom_components/main.js
+++ b/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'),
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 10ca4db78..af5d4eadb 100644
--- a/src/dom_components/model/Component.js
+++ b/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,
diff --git a/src/dom_components/model/ComponentTableCell.js b/src/dom_components/model/ComponentTableCell.js
new file mode 100644
index 000000000..b630ce672
--- /dev/null
+++ b/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;
+			},
+
+		});
+});
diff --git a/src/dom_components/model/ComponentTableRow.js b/src/dom_components/model/ComponentTableRow.js
new file mode 100644
index 000000000..dba60d162
--- /dev/null
+++ b/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;
+			},
+
+		});
+});
diff --git a/src/dom_components/view/ComponentTableCellView.js b/src/dom_components/view/ComponentTableCellView.js
new file mode 100644
index 000000000..0b90016a9
--- /dev/null
+++ b/src/dom_components/view/ComponentTableCellView.js
@@ -0,0 +1,6 @@
+define(['backbone', './ComponentTextView'],
+	function (Backbone, ComponentView) {
+
+	return ComponentView.extend({
+	});
+});
diff --git a/src/dom_components/view/ComponentTableRowView.js b/src/dom_components/view/ComponentTableRowView.js
new file mode 100644
index 000000000..5626864bd
--- /dev/null
+++ b/src/dom_components/view/ComponentTableRowView.js
@@ -0,0 +1,6 @@
+define(['backbone', './ComponentView'],
+	function (Backbone, ComponentView) {
+
+	return ComponentView.extend({
+	});
+});