From e43b36bc1be2dec06087f436d81468f5c3576f88 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Wed, 7 Feb 2018 08:34:27 +0100
Subject: [PATCH] Make the panel be another element via `el` attribute

---
 src/panels/view/PanelView.js  | 12 ++++++------
 src/panels/view/PanelsView.js | 32 +++++++++++++++++---------------
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/panels/view/PanelView.js b/src/panels/view/PanelView.js
index d28ba457f..b0b1b96aa 100644
--- a/src/panels/view/PanelView.js
+++ b/src/panels/view/PanelView.js
@@ -85,20 +85,20 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
-    const el = this.$el;
-    const pfx = this.ppfx;
-    el.attr('class', `${this.className} ${pfx}one-bg`);
-    this.id && el.attr('id', this.id);
+    const $el = this.$el;
+    const ppfx = this.ppfx;
+    const cls = `${this.className} ${this.id} ${ppfx}one-bg`;
+    $el.addClass(cls);
 
     if (this.buttons.length) {
       var buttons = new ButtonsView({
         collection: this.buttons,
         config: this.config
       });
-      el.append(buttons.render().el);
+      $el.append(buttons.render().el);
     }
 
-    el.append(this.model.get('content'));
+    $el.append(this.model.get('content'));
     return this;
   }
 });
diff --git a/src/panels/view/PanelsView.js b/src/panels/view/PanelsView.js
index 3ed5cf045..58be5862d 100644
--- a/src/panels/view/PanelsView.js
+++ b/src/panels/view/PanelsView.js
@@ -32,15 +32,20 @@ module.exports = Backbone.View.extend({
    * @private
    * */
   addToCollection(model, fragmentEl) {
-    var fragment = fragmentEl || null;
-    var view = new PanelView({
+    const fragment = fragmentEl || null;
+    const config = this.config;
+    const el = model.get('el');
+    const view = new PanelView({
+      el,
       model,
-      config: this.config
+      config
     });
-    var rendered = view.render().el;
-    var appendTo = model.get('appendTo');
+    const rendered = view.render().el;
+    const appendTo = model.get('appendTo');
 
-    if (appendTo) {
+    // Do nothing if the panel was requested to be another element
+    if (el) {
+    } else if (appendTo) {
       var appendEl = document.querySelector(appendTo);
       appendEl.appendChild(rendered);
     } else {
@@ -56,15 +61,12 @@ 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.append(fragment);
-    this.$el.attr('class', this.className);
+    const $el = this.$el;
+    const frag = document.createDocumentFragment();
+    $el.empty();
+    this.collection.each(model => this.addToCollection(model, frag));
+    $el.append(frag);
+    $el.attr('class', this.className);
     return this;
   }
 });