From 4ede1c66fcc7a907ee773f4aa864ef0fb073d7b8 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Wed, 7 Feb 2018 08:13:52 +0100
Subject: [PATCH] Add `appendTo` option to SelectorManager

---
 src/selector_manager/config/config.js      |  4 ++++
 src/selector_manager/index.js              | 15 ++++++++++++++-
 src/selector_manager/view/ClassTagsView.js | 16 +++++++++-------
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/selector_manager/config/config.js b/src/selector_manager/config/config.js
index 8bad09938..38c1181e2 100644
--- a/src/selector_manager/config/config.js
+++ b/src/selector_manager/config/config.js
@@ -2,6 +2,10 @@ module.exports = {
   // Style prefix
   stylePrefix: 'clm-',
 
+  // Specify the element to use as a container, string (query) or HTMLElement
+  // With the empty value, nothing will be rendered
+  appendTo: '',
+
   // Default selectors
   selectors: [],
 
diff --git a/src/selector_manager/index.js b/src/selector_manager/index.js
index 7b3cf3484..f369d57eb 100644
--- a/src/selector_manager/index.js
+++ b/src/selector_manager/index.js
@@ -49,7 +49,7 @@
  * }
  */
 
-import { isString } from 'underscore';
+import { isString, isElement } from 'underscore';
 
 module.exports = config => {
   var c = config || {},
@@ -71,6 +71,10 @@ module.exports = config => {
      */
     name: 'SelectorManager',
 
+    getConfig() {
+      return c;
+    },
+
     /**
      * Initialize module. Automatically called with a new instance of the editor
      * @param {Object} config Configurations
@@ -103,6 +107,15 @@ module.exports = config => {
       return this;
     },
 
+    postRender() {
+      const elTo = this.getConfig().appendTo;
+
+      if (elTo) {
+        const el = isElement(elTo) ? elTo : document.querySelector(elTo);
+        el.appendChild(this.render([]));
+      }
+    },
+
     /**
      * Add a new selector to collection if it's not already exists. Class type is a default one
      * @param {String} name Selector name
diff --git a/src/selector_manager/view/ClassTagsView.js b/src/selector_manager/view/ClassTagsView.js
index a00019e7f..aa7756f90 100644
--- a/src/selector_manager/view/ClassTagsView.js
+++ b/src/selector_manager/view/ClassTagsView.js
@@ -303,8 +303,10 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
+    const ppfx = this.ppfx;
     const config = this.config;
-    this.$el.html(
+    const $el = this.$el;
+    $el.html(
       this.template({
         selectedLabel: config.selectedLabel,
         statesLabel: config.statesLabel,
@@ -313,14 +315,14 @@ module.exports = Backbone.View.extend({
         ppfx: this.ppfx
       })
     );
-    this.$input = this.$el.find('input#' + this.newInputId);
-    this.$addBtn = this.$el.find('#' + this.addBtnId);
-    this.$classes = this.$el.find('#' + this.pfx + 'tags-c');
-    this.$states = this.$el.find('#' + this.stateInputId);
-    this.$statesC = this.$el.find('#' + this.stateInputC);
+    this.$input = $el.find('input#' + this.newInputId);
+    this.$addBtn = $el.find('#' + this.addBtnId);
+    this.$classes = $el.find('#' + this.pfx + 'tags-c');
+    this.$states = $el.find('#' + this.stateInputId);
+    this.$statesC = $el.find('#' + this.stateInputC);
     this.$states.append(this.getStateOptions());
     this.renderClasses();
-    this.$el.attr('class', this.className);
+    $el.attr('class', `${this.className} ${ppfx}one-bg ${ppfx}two-color`);
     return this;
   }
 });