diff --git a/src/style_manager/config/config.js b/src/style_manager/config/config.js index bbda994af..1492d844e 100644 --- a/src/style_manager/config/config.js +++ b/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', diff --git a/src/style_manager/index.js b/src/style_manager/index.js index 800ff6b10..bd9e2bdc3 100644 --- a/src/style_manager/index.js +++ b/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 diff --git a/src/style_manager/view/SectorsView.js b/src/style_manager/view/SectorsView.js index 065f63c45..0f0e82e02 100644 --- a/src/style_manager/view/SectorsView.js +++ b/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; } });