Add `appendTo` option to StyleManager

src/style_manager/config/config.js

@@ -3,6 +3,10 @@ module.exports = {
 
   sectors: [],
 
+  // Specify the element to use as a container, string (query) or HTMLElement
+  // With the empty value, nothing will be rendered
+  appendTo: '',
+
   // Text to show in case no element selected
   textNoElement: 'Select an element before using Style Manager',
 

src/style_manager/index.js

@@ -38,6 +38,8 @@
  * }
  * ...
  */
+import { isElement } from 'underscore';
+
 module.exports = () => {
   var c = {},
     defaults = require('./config/config'),
@@ -87,6 +89,15 @@ module.exports = () => {
       return this;
     },
 
+    postRender() {
+      const elTo = this.getConfig().appendTo;
+
+      if (elTo) {
+        const el = isElement(elTo) ? elTo : document.querySelector(elTo);
+        el.appendChild(this.render());
+      }
+    },
+
     /**
      * Add new sector to the collection. If the sector with the same id already exists,
      * that one will be returned

src/style_manager/view/SectorsView.js

@@ -3,10 +3,12 @@ import { extend } from 'underscore';
 const SectorView = require('./SectorView');
 
 module.exports = Backbone.View.extend({
-  initialize(o) {
-    this.config = o.config || {};
-    this.pfx = this.config.stylePrefix || '';
+  initialize(o = {}) {
+    const config = o.config || {};
+    this.pfx = config.stylePrefix || '';
+    this.ppfx = config.pStylePrefix || '';
     this.target = o.target || {};
+    this.config = config;
 
     // The target that will emit events for properties
     const target = {};
@@ -117,15 +119,14 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
-    var fragment = document.createDocumentFragment();
-    this.$el.empty();
-
-    this.collection.each(function(model) {
-      this.addToCollection(model, fragment);
-    }, this);
-
-    this.$el.attr('id', this.pfx + 'sectors');
-    this.$el.append(fragment);
+    const frag = document.createDocumentFragment();
+    const $el = this.$el;
+    const pfx = this.pfx;
+    const ppfx = this.ppfx;
+    $el.empty();
+    this.collection.each(model => this.addToCollection(model, frag));
+    $el.append(frag);
+    $el.addClass(`${pfx}sectors ${ppfx}one-bg ${ppfx}two-color`);
     return this;
   }
 });