diff --git a/src/commands/view/OpenLayers.js b/src/commands/view/OpenLayers.js index f2779ddb0..71f0709c6 100644 --- a/src/commands/view/OpenLayers.js +++ b/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(); } }; - }); \ No newline at end of file + }); diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index b07d9171f..4fcf3a5d6 100644 --- a/src/commands/view/SelectComponent.js +++ b/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'); } diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index af5d4eadb..fb64c6dba 100644 --- a/src/dom_components/model/Component.js +++ b/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(); diff --git a/src/dom_components/model/ComponentTableCell.js b/src/dom_components/model/ComponentTableCell.js index 93200da0c..de3bb9875 100644 --- a/src/dom_components/model/ComponentTableCell.js +++ b/src/dom_components/model/ComponentTableCell.js @@ -5,6 +5,7 @@ define(['./Component'], defaults: _.extend({}, Component.prototype.defaults, { tagName: 'td', + draggable: ['tr'], }), },{ diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 883ea5e07..fcf1b7ed5 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -15,6 +15,7 @@ define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'Dev changesCount: 0, storables: [], toLoad: [], + opened: {}, device: '', }, diff --git a/src/navigator/main.js b/src/navigator/main.js index 267bee87c..1e1bde861 100644 --- a/src/navigator/main.js +++ b/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 = { - collection : collection, - config : config, + var obj = { + collection: collection, + config: config, + opened: c.opened || {} }; // Check if sort is required if(config.sortable){ - var ItemSort = require('./view/ItemSort'); - obj.sorter = new ItemSort({config : config}); + var ItemSort = require('./view/ItemSort'); + 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; -}); \ No newline at end of file +}); diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js index 622491ac7..efc9c17a7 100644 --- a/src/navigator/view/ItemView.js +++ b/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.config = o.config; - this.em = o.config.em; - this.sorter = o.sorter || {}; - this.pfx = this.config.stylePrefix; + this.opt = o; + this.config = o.config; + this.em = o.config.em; + this.sorter = o.sorter || {}; + 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, - sorter : this.sorter, - parent : this.model + config: this.config, + sorter: this.sorter, + 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'); diff --git a/src/navigator/view/ItemsView.js b/src/navigator/view/ItemsView.js index 40f775a5d..51e8b391e 100644 --- a/src/navigator/view/ItemsView.js +++ b/src/navigator/view/ItemsView.js @@ -6,12 +6,12 @@ define(['backbone','./ItemView'], return Backbone.View.extend({ initialize: function(o) { - this.opt = o; - this.config = o.config; - this.preview = o.preview; - this.sorter = o.sorter || {}; - this.pfx = o.config.stylePrefix; - this.parent = o.parent; + this.opt = o; + this.config = o.config; + this.preview = o.preview; + this.sorter = o.sorter || {}; + this.pfx = o.config.stylePrefix; + 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; diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index 30426efe4..201098669 100644 --- a/src/utils/Sorter.js +++ b/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')) {