Add dynamic navigator

src/commands/view/OpenLayers.js

@@ -15,6 +15,7 @@ define(['Navigator'], function(Layers) {
 
 					config.layers.stylePrefix = config.stylePrefix + lyStylePfx;
 					config.layers.em 	= em.editor;
+					config.layers.opened = em.editor.get('opened');
 					var layers = new Layers(collection, config.layers);
 					this.$layers = layers.render();
 
@@ -35,4 +36,4 @@ define(['Navigator'], function(Layers) {
 					this.$layers.hide();
 			}
 		};
-	});
+	});

src/commands/view/SelectComponent.js

@@ -126,6 +126,7 @@ define(function() {
 				}
 				var pos = this.getElementPos(trg);
 			  this.updateBadge(trg, pos);
+				// Not mirrored
 			  this.updateHighlighter(trg, pos);
 			},
 
@@ -188,7 +189,7 @@ define(function() {
 			 * @param {Object} pos Position object
 			 * @private
 			 */
-			updateHighlighter: function(el, pos){
+			updateHighlighter: function(el, pos) {
 				if(!this.hl)
 					this.hl = $(this.canvas.getHighlighter());
 				this.hl.css({
@@ -212,6 +213,22 @@ define(function() {
 				var $el = $(el);
 				var nMd = $el.data('model');
 				if(nMd){
+					var mirror = nMd.get('mirror');
+					nMd = mirror ? mirror : nMd;
+
+					// Close all opened components inside Navigator
+					var opened = this.em.get('opened');
+					for (var cid in opened){
+						var m = opened[cid];
+						m.set('open', 0);
+					}
+					var parent = nMd.collection ? nMd.collection.parent : null;
+					while(parent){
+						parent.set('open', 1);
+						opened[parent.cid] = parent;
+						parent = parent.collection ? parent.collection.parent : null;
+					}
+
 					this.editorModel.set('selectedComponent', nMd);
 					nMd.set('status','selected');
 				}

src/dom_components/model/Component.js

@@ -17,6 +17,7 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 				// TODO: Indicate an array of selectors which could be dropped inside
 				droppable: true,
 
+				mirror: '',
 				badgable: true,
 				stylable: true,
 				copyable: true,
@@ -41,6 +42,7 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 				this.defaultC = this.config.components || [];
 				this.defaultCl = this.normalizeClasses(this.get('classes') || this.config.classes || []);
 				this.components	= new Components(this.defaultC, opt);
+				this.components.parent = this;
 				this.set('components', this.components);
 				this.set('classes', new Selectors(this.defaultCl));
 				var traits = new Traits();

src/dom_components/model/ComponentTableCell.js

@@ -5,6 +5,7 @@ define(['./Component'],
 
 			defaults: _.extend({}, Component.prototype.defaults, {
 					tagName: 'td',
+					draggable: ['tr'],
 			}),
 
 		},{

src/editor/model/Editor.js

@@ -15,6 +15,7 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev
 				changesCount:	0,
 				storables: [],
 				toLoad: [],
+				opened: {},
 				device: '',
 			},
 

src/navigator/main.js

@@ -1,33 +1,29 @@
 define(function(require) {
-	/**
-	 * @class Navigator
-	 * @param {Object} Collection
-	 * @param {Object} Configurations
- 	 * */
-	function Navigator(collection, c)
-	{
-		var config		= c,
-			defaults		= require('./config/config'),
-			ItemsView		= require('./view/ItemsView');
 
-	    // Set default options
+	function Navigator(collection, c) {
+		var config = c,
+			defaults = require('./config/config'),
+			ItemsView = require('./view/ItemsView');
+
+	  // Set default options
 		for (var name in defaults) {
 			if (!(name in config))
 				config[name] = defaults[name];
 		}
 
-		var obj			= {
+		var obj = {
-		    	collection	: collection,
+			collection: collection,
-		    	config			: config,
+			config: config,
+			opened: c.opened || {}
 		};
 
 		// Check if sort is required
 		if(config.sortable){
-			var ItemSort	= require('./view/ItemSort');
+			var ItemSort = require('./view/ItemSort');
-			obj.sorter		= new ItemSort({config : config});
+			obj.sorter = new ItemSort({config : config});
 		}
 
-	    this.ItemsView	= new ItemsView(obj);
+	  this.ItemsView = new ItemsView(obj);
 	}
 
 	Navigator.prototype	= {
@@ -37,4 +33,4 @@ define(function(require) {
 	};
 
 	return Navigator;
-});
+});

src/navigator/view/ItemView.js

@@ -9,11 +9,11 @@ define(['backbone', 'text!./../template/item.html','require'],
 		template: _.template(ItemTemplate),
 
 		initialize: function(o){
-			this.opt 			= o;
+			this.opt = o;
-			this.config		= o.config;
+			this.config = o.config;
-			this.em 			= o.config.em;
+			this.em = o.config.em;
-			this.sorter		= o.sorter || {};
+			this.sorter = o.sorter || {};
-			this.pfx			= this.config.stylePrefix;
+			this.pfx = this.config.stylePrefix;
 			if(typeof this.model.get('open') == 'undefined')
 				this.model.set('open',false);
 			this.listenTo(this.model.components, 'remove add change reset', this.checkChildren);
@@ -40,12 +40,16 @@ define(['backbone', 'text!./../template/item.html','require'],
 		 * @return void
 		 * */
 		updateOpening: function (){
-			if(this.model.get('open')){
+			var opened = this.opt.opened || {};
+			var model = this.model;
+			if(model.get('open')){
 				this.$el.addClass("open");
 				this.$caret.addClass('fa-chevron-down');
+				opened[model.cid] = model;
 			}else{
 				this.$el.removeClass("open");
 				this.$caret.removeClass('fa-chevron-down');
+				delete opened[model.cid];
 			}
 		},
 
@@ -209,11 +213,12 @@ define(['backbone', 'text!./../template/item.html','require'],
 			}));
 			if(typeof ItemsView == 'undefined')
 				ItemsView = require('./ItemsView');
-			this.$components	= new ItemsView({
+			this.$components = new ItemsView({
 				collection 	: this.model.components,
-				config		: this.config,
+				config: this.config,
-				sorter		: this.sorter,
+				sorter: this.sorter,
-				parent		: this.model
+				opened: this.opt.opened,
+				parent: this.model
 			}).render().$el;
 			this.$el.find('.'+ pfx +'children').html(this.$components);
 			this.$caret = this.$el.find('> .' + pfx + 'title-c > .' + pfx + 'title > #' + pfx + 'caret');

src/navigator/view/ItemsView.js

@@ -6,12 +6,12 @@ define(['backbone','./ItemView'],
 	return Backbone.View.extend({
 
 		initialize: function(o) {
-			this.opt 			= o;
+			this.opt = o;
-			this.config		= o.config;
+			this.config = o.config;
-			this.preview	= o.preview;
+			this.preview = o.preview;
-			this.sorter		= o.sorter || {};
+			this.sorter = o.sorter || {};
-			this.pfx			= o.config.stylePrefix;
+			this.pfx = o.config.stylePrefix;
-			this.parent		= o.parent;
+			this.parent = o.parent;
 			this.listenTo(this.collection, 'add', this.addTo);
 			this.listenTo(this.collection, 'reset resetNavigator', this.render);
 			this.className 	= this.pfx + 'items';
@@ -48,6 +48,7 @@ define(['backbone','./ItemView'],
 				config: this.config,
 				sorter: this.sorter,
 				isCountable: this.isCountable,
+				opened: this.opt.opened,
 			});
 			var rendered	= view.render().el;
 

src/utils/Sorter.js

@@ -243,7 +243,7 @@ define(['backbone'],
                 return;
         }
         switch (el.tagName) {
-            case 'TR':
+            case 'TR': case 'TBODY': case 'THEAD': case 'TFOOT':
                 return true;
         }
         switch ($el.css('display')) {