Change `el` option with `appendTo` inside Layers

src/navigator/config/config.js

@@ -1,9 +1,9 @@
 module.exports = {
-  stylePrefix: 'nv-',
+  stylePrefix: '',
 
-  // Specify where to render layers on init, string (query) or HTMLElement
-  // With the empty value, layers won't be visible
-  el: '',
+  // Specify the element to use as layers container, string (query) or HTMLElement
+  // With the empty value, layers won't be rendered automatically
+  appendTo: '',
 
   // Enable/Disable globally the possibility to sort layers
   sortable: 1,

src/navigator/index.js

@@ -1,6 +1,7 @@
 import defaults from './config/config';
 import ItemView from './view/ItemView';
 import ItemsView from './view/ItemsView';
+import { isElement } from 'underscore';
 
 module.exports = () => {
   let em;
@@ -13,6 +14,7 @@ module.exports = () => {
 
     init(opts = {}) {
       config = { ...defaults, ...opts };
+      config.stylePrefix = opts.pStylePrefix;
       em = config.em;
 
       return this;
@@ -24,7 +26,6 @@ module.exports = () => {
       const options = {
         level: 0,
         config,
-        el: config.el,
         opened: config.opened || {}
       };
 
@@ -41,6 +42,15 @@ module.exports = () => {
       this.componentChanged();
     },
 
+    postRender() {
+      const elTo = config.appendTo;
+
+      if (elTo) {
+        const el = isElement(elTo) ? elTo : document.querySelector(elTo);
+        el.appendChild(this.render());
+      }
+    },
+
     /**
      * Return the view of layers
      * @return {View}
@@ -67,12 +77,8 @@ module.exports = () => {
       }
     },
 
-    postRender() {
-      console.log('post render navigator', config);
-    },
-
     render() {
-      return layers.render().$el;
+      return layers.render().el;
     }
   };
 };