Refactor Navigator and move there components status update

index.html

@@ -1329,7 +1329,8 @@ <h1 class="heading">Insert title here</h1>
     })
 
     editor.on('block:drag:stop', function(model) {
-      editor.select(model);
+      console.log(model);
+      model && editor.select(model);
     });
 
     editor.render();

src/commands/view/OpenLayers.js

@@ -3,7 +3,7 @@ var Layers = require('navigator');
 module.exports = {
 
   run(em, sender) {
-    if(!this.$layers) {
+    if (!this.$layers) {
       var collection = em.DomComponents.getComponent().get('components'),
       config = em.getConfig(),
       panels = em.Panels,
@@ -13,7 +13,7 @@ module.exports = {
       config.layers.pStylePrefix = config.stylePrefix;
       config.layers.em 	= em.editor;
       config.layers.opened = em.editor.get('opened');
-      var layers = new Layers(collection, config.layers);
+      var layers = new Layers().init(collection, config.layers);
       this.$layers = layers.render();
 
       // Check if panel exists otherwise crate it

src/commands/view/SelectComponent.js

@@ -304,38 +304,10 @@ module.exports = {
    * */
   onSelect(e, el) {
     e.stopPropagation();
-    //var md = this.editorModel.get('selectedComponent');
-    //this.cleanPrevious(md);
-    //var $el = $(el);
-    //var nMd = $el.data('model');
     var model = $(el).data('model');
 
     if (model) {
-      /*
-      var em = this.em;
-      var mirror = nMd.get('mirror');
-      nMd = mirror ? mirror : nMd;
-
-      // Close all opened components inside Navigator
-      var opened = 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);
       this.editor.select(model);
-      //nMd.set('status','selected');
       this.showFixedElementOffset(el);
       this.hideElementOffset();
       this.hideHighlighter();

src/navigator/index.js

@@ -1,27 +1,54 @@
-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];
-  }
+module.exports = () => {
+  let itemsView;
+  let config = {};
+  const defaults = require('./config/config');
+  const ItemsView = require('./view/ItemsView');
+
+  return {
+    init(collection, opts) {
+      config = opts || config;
+      const em = config.em;
+
+      // Set default options
+      for (var name in defaults) {
+        if (!(name in config))
+          config[name] = defaults[name];
+      }
+
+      itemsView = new ItemsView({
+        collection,
+        config,
+        opened: opts.opened || {}
+      });
+      em && em.on('change:selectedComponent', this.componentChanged);
+      this.componentChanged();
+
+      return this;
+    },
+
+    /**
+     * Triggered when the selected component is changed
+     * @private
+     */
+    componentChanged() {
+      const em = config.em;
+      const opened = em.get('opened');
+      const model = em.get('selectedComponent');
+      let parent = model && model.collection ? model.collection.parent : null;
 
-  var obj = {
-    collection,
-    config,
-    opened: c.opened || {}
-  };
+      for (let cid in opened) {
+        opened[cid].set('open', 0);
+      }
 
-  this.ItemsView = new ItemsView(obj);
-}
+      while (parent) {
+        parent.set('open', 1);
+        opened[parent.cid] = parent;
+        parent = parent.collection ? parent.collection.parent : null;
+      }
+    },
 
-Navigator.prototype  = {
     render() {
-      return this.ItemsView.render().$el;
+      return itemsView.render().$el;
     },
+  }
 };
-
-module.exports = Navigator;