Add the possibility to see the wrapper in layers

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.9.17",
+  "version": "0.9.18",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/commands/view/OpenLayers.js

@@ -4,10 +4,11 @@ module.exports = {
 
   run(em, sender) {
     if (!this.$layers) {
-      var collection = em.DomComponents.getComponent().get('components'),
-      config = em.getConfig(),
-      panels = em.Panels,
-      lyStylePfx = config.layers.stylePrefix || 'nv-';
+      var collection = em.DomComponents.getComponent().get('components');
+      var config = em.getConfig();
+      var pfx = config.stylePrefix;
+      var panels = em.Panels;
+      var lyStylePfx = config.layers.stylePrefix || 'nv-';
 
       config.layers.stylePrefix = config.stylePrefix + lyStylePfx;
       config.layers.pStylePrefix = config.stylePrefix;
@@ -22,7 +23,9 @@ module.exports = {
       else
         this.panel = panels.getPanel('views-container');
 
-      this.panel.set('appendContent', this.$layers).trigger('change:appendContent');
+      const toAppend = $(`<div class="${pfx}layers"></div>`);
+      toAppend.append(this.$layers);
+      this.panel.set('appendContent', toAppend).trigger('change:appendContent');
     }
     this.$layers.show();
   },

src/dom_components/config/config.js

@@ -3,22 +3,22 @@ module.exports = {
 
   wrapperId: 'wrapper',
 
+  wrapperName: 'Body',
+
   // Default wrapper configuration
   wrapper: {
-    //classes: ['body'],
     removable: false,
     copyable: false,
-    stylable: ['background','background-color','background-image', 'background-repeat','background-attachment','background-position'],
     draggable: false,
     badgable: false,
     components: [],
+    stylable: ['background','background-color','background-image',
+      'background-repeat','background-attachment','background-position'],
   },
 
   // Could be used for default components
   components: [],
 
-  rte: {},
-
   // Class for new image component
   imageCompClass  : 'fa fa-picture-o',
 
@@ -26,5 +26,7 @@ module.exports = {
   oAssetsOnCreate  : true,
 
   // List of void elements
-  voidElements: ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr'],
+  voidElements: ['area', 'base', 'br', 'col', 'embed', 'hr', 'img',
+    'input', 'keygen', 'link', 'menuitem', 'meta', 'param', 'source',
+    'track', 'wbr'],
 };

src/dom_components/index.js

@@ -170,6 +170,7 @@ module.exports = () => {
         em.on('change:selectedComponent', this.componentChanged, this);
       }
 
+      c.wrapper['custom-name'] = c.wrapperName;
       component = new Component(c.wrapper, {
         sm: em,
         config: c,

src/dom_components/model/Component.js

@@ -95,19 +95,15 @@ module.exports = Backbone.Model.extend(Styleable).extend({
       * }]
     */
     toolbar: null,
-
-    // TODO
-    previousModel: '',
-    mirror: '',
   },
 
   initialize(o, opt) {
     // Check void elements
     if(opt && opt.config && opt.config.voidElements.indexOf(this.get('tagName')) >= 0)
       this.set('void', true);
-
+    const em = opt ? opt.sm || {} : {};
     this.opt = opt;
-    this.sm = opt ? opt.sm || {} : {};
+    this.sm = em;
     this.config = o || {};
     this.defaultC = this.config.components || [];
     this.defaultCl = this.normalizeClasses(this.get('classes') || this.config.classes || []);

src/editor/model/Editor.js

@@ -336,16 +336,17 @@ module.exports = Backbone.Model.extend({
   /**
    * Select a component
    * @param  {Component|HTMLElement} el Component to select
+   * @param  {Object} opts Options, optional
    * @private
    */
-  setSelected(el) {
+  setSelected(el, opts = {}) {
     let model = el;
 
     if (el instanceof HTMLElement) {
       model = $(el).data('model');
     }
 
-    this.set('selectedComponent', model);
+    this.set('selectedComponent', model, opts);
   },
 
   /**

src/navigator/config/config.js

@@ -3,7 +3,9 @@ module.exports = {
   sortable: 1,
   hidable: 1,
   hideTextnode: 1,
-  containerId: 'navigator',
   itemClass: 'item',
   itemsClass: 'items',
+
+  // Indicates if the wrapper is visible in layers
+  showWrapper: 1,
 };

src/navigator/index.js

@@ -2,6 +2,7 @@ module.exports = () => {
   let itemsView;
   let config = {};
   const defaults = require('./config/config');
+  const ItemView = require('./view/ItemView');
   const ItemsView = require('./view/ItemsView');
 
   return {
@@ -15,11 +16,22 @@ module.exports = () => {
           config[name] = defaults[name];
       }
 
-      itemsView = new ItemsView({
-        collection,
+      let View = ItemsView;
+      const opened = opts.opened || {};
+      const options = {
         config,
-        opened: opts.opened || {}
-      });
+        opened
+      }
+
+      // Show wrapper if requested
+      if (config.showWrapper && collection.parent) {
+        View = ItemView;
+        options.model = collection.parent;
+      } else {
+        options.collection = collection
+      }
+
+      itemsView = new View(options);
       em && em.on('change:selectedComponent', this.componentChanged);
       this.componentChanged();
 
@@ -30,7 +42,11 @@ module.exports = () => {
      * Triggered when the selected component is changed
      * @private
      */
-    componentChanged() {
+    componentChanged(e, md, opts = {}) {
+      if (opts.fromLayers) {
+        return;
+      }
+
       const em = config.em;
       const opened = em.get('opened');
       const model = em.get('selectedComponent');

src/navigator/view/ItemView.js

@@ -31,7 +31,7 @@ module.exports = Backbone.View.extend({
     this.config = o.config;
     this.em = o.config.em;
     this.ppfx = this.em.get('Config').stylePrefix;
-    this.sorter = o.sorter || {};
+    this.sorter = o.sorter || '';
     this.pfx = this.config.stylePrefix;
     if(typeof this.model.get('open') == 'undefined')
       this.model.set('open',false);
@@ -101,11 +101,11 @@ module.exports = Backbone.View.extend({
     var model = this.model;
     if(model.get('open')){
       this.$el.addClass("open");
-      this.$caret.addClass('fa-chevron-down');
+      this.getCaret().addClass('fa-chevron-down');
       opened[model.cid] = model;
     }else{
       this.$el.removeClass("open");
-      this.$caret.removeClass('fa-chevron-down');
+      this.getCaret().removeClass('fa-chevron-down');
       delete opened[model.cid];
     }
   },
@@ -127,20 +127,10 @@ module.exports = Backbone.View.extend({
 
   /**
    * Handle component selection
-   * @return {[type]} [description]
    */
   handleSelect(e) {
     e.stopPropagation();
-    var em = this.em;
-
-    if(em){
-      var model = em.get('selectedComponent');
-      if(model){
-        model.set('status', '');
-      }
-      this.model.set('status', 'selected');
-      em.set('selectedComponent', this.model);
-    }
+    this.em && this.em.setSelected(this.model, {fromLayers: 1});
   },
 
   /**
@@ -148,9 +138,7 @@ module.exports = Backbone.View.extend({
    * @param	Event
    * */
   startSort(e) {
-    if (this.sorter) {
-      this.sorter.startSort(e.target);
-    }
+    this.sorter && this.sorter.startSort(e.target);
   },
 
   /**
@@ -254,6 +242,14 @@ module.exports = Backbone.View.extend({
     return count;
   },
 
+  getCaret() {
+    if (!this.caret) {
+      const pfx = this.pfx;
+      this.caret = this.$el.find(`> .${pfx}title-c > .${pfx}title > #${pfx}caret`);
+    }
+    return this.caret;
+  },
+
   render() {
     let model = this.model;
     var pfx = this.pfx;
@@ -284,7 +280,6 @@ module.exports = Backbone.View.extend({
       parent: model
     }).render().$el;
     this.$el.find('.'+ pfx +'children').html(this.$components);
-    this.$caret = this.$el.find('> .' + pfx + 'title-c > .' + pfx + 'title > #' + pfx + 'caret');
     if(!model.get('draggable') || !this.config.sortable){
     	this.$el.find('> #' + pfx + 'move').detach();
     }

src/navigator/view/ItemsView.js

@@ -30,9 +30,6 @@ module.exports = Backbone.View.extend({
 
     this.sorter = this.opt.sorter || '';
 
-    if(!this.parent)
-      this.className  += ' ' + this.pfx + this.config.containerId;
-
     // For the sorter
     this.$el.data('collection', this.collection);
 

src/styles/scss/_gjs_layers.scss

@@ -0,0 +1,125 @@
+
+.#{$nv-prefix}selected-parent {
+  border: 1px solid $colorYell;
+}
+
+.#{$nv-prefix}opac50{
+  @include opacity(0.50);
+}
+.#{$app-prefix}layers {
+  position:relative;
+  height: 100%;
+  ##{$nv-prefix}placeholder{
+    width: 100%;
+    position: absolute;
+    ##{$nv-prefix}plh-int{
+        height: 100%;
+        padding: 1px;
+        &.#{$nv-prefix}insert{
+          background-color: $colorGreen;
+        }
+    }
+  }
+  .#{$nv-prefix}item {
+    font-weight: lighter;
+    text-align: left;
+    position: relative;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  .#{$nv-prefix}item.#{$nv-prefix}hide {
+    @include opacity(0.55);
+  }
+  .#{$nv-prefix}item ##{$nv-prefix}counter {
+    font-size: 10px;
+    position: absolute;
+    right: 27px;
+    top: 9px;
+  }
+  .#{$nv-prefix}item ##{$nv-prefix}btn-eye{
+    @extend .btn;
+    height: auto !important; width: auto !important;
+    font-size: 13px;
+    left: 0; top: 0;
+    padding: 7px 5px 7px 10px;
+    position: absolute;
+    cursor:pointer;
+    z-index: 1;
+  }
+}
+
+.#{$nv-prefix}item ##{$nv-prefix}caret {
+  font-size: 7px;
+  width: 8px;
+  padding: 5px;
+  cursor: pointer;
+  @include opacity(0.7);
+
+  &:hover {
+    @include opacity(1);
+  }
+}
+
+.#{$nv-prefix}item .#{$nv-prefix}title-c {
+  @extend .#{$app-prefix}bg-main;
+}
+
+.#{$nv-prefix}title {
+  @extend .#{$app-prefix}category-title;
+
+  padding: 3px 10px 5px 30px;
+  display: flex;
+  align-items: center;
+}
+
+.#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{
+  border-left: 1px solid lighten($mainDkColor,2%);
+}
+.#{$nv-prefix}item > .#{$nv-prefix}children {
+  margin-left: 7px;
+  display: none;
+}
+.#{$nv-prefix}item.open > .#{$nv-prefix}children { display: block; }
+.#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before{ content:''; }
+.#{$nv-prefix}no-chld > ##{$nv-prefix}caret{ display:none; }
+.#{$nv-prefix}item > ##{$nv-prefix}move {
+  position: absolute;
+  cursor: move;
+  font-size: 12px;
+  right: 0; top: 0;
+  padding: 7px 10px 7px 5px;
+}
+/*
+.#{$nv-prefix}item{
+  &.#{$nv-prefix}selected{
+    border: 2px solid $colorBlue;
+  }
+}
+*/
+.#{$nv-prefix}selected .#{$nv-prefix}title {
+    background-color: rgba(255,255,255,0.1);
+}
+
+.#{$nv-prefix}nav-item-edit {
+  visibility: hidden;
+  padding: 5px;
+  font-size: 10px;
+  @include opacity(0.7);
+
+  &:hover {
+    @include opacity(1);
+  }
+}
+
+.#{$nv-prefix}title-c:hover {
+
+  .#{$nv-prefix}nav-item-edit {
+    visibility: visible;
+    cursor: pointer;
+  }
+}
+
+.#{$app-prefix}nav-comp-name {
+  padding: 5px;
+  box-sizing: content-box;
+  @extend .#{$app-prefix}no-user-select;
+}

src/styles/scss/main.scss

@@ -543,139 +543,6 @@ ol.example li.placeholder:before {position: absolute;}
 	}
 }
 
-
-/************* Navigator *************/
-
-.#{$nv-prefix}selected-parent {
-	border: 1px solid $colorYell;
-}
-
-.#{$nv-prefix}opac50{
-	@include opacity(0.50);
-}
-.#{$nv-prefix}navigator{
-	position:relative;
-	height: 100%;
-	##{$nv-prefix}placeholder{
-		width: 100%;
-		position: absolute;
-		##{$nv-prefix}plh-int{
-	    	height: 100%;
-	    	padding: 1px;
-	    	&.#{$nv-prefix}insert{
-	    		background-color: $colorGreen;
-	    	}
-		}
-	}
-	.#{$nv-prefix}item {
-		font-weight: lighter;
-		text-align: left;
-		position: relative;
-		background-color: rgba(0, 0, 0, 0.1);
-	}
-	.#{$nv-prefix}item.#{$nv-prefix}hide {
-	  @include opacity(0.55);
-	}
-	.#{$nv-prefix}item ##{$nv-prefix}counter {
-	  font-size: 10px;
-	  position: absolute;
-	  right: 27px;
-	  top: 9px;
-	}
-	.#{$nv-prefix}item ##{$nv-prefix}btn-eye{
-		@extend .btn;
-		height: auto !important; width: auto !important;
-		font-size: 13px;
-    left: 0; top: 0;
-    padding: 7px 5px 7px 10px;
-    position: absolute;
-    cursor:pointer;
-    z-index: 1;
-	}
-}
-
-.#{$nv-prefix}item ##{$nv-prefix}caret {
-  font-size: 7px;
-  width: 8px;
-  padding: 5px;
-  cursor: pointer;
-  @include opacity(0.7);
-
-  &:hover {
-    @include opacity(1);
-  }
-}
-
-.#{$nv-prefix}item .#{$nv-prefix}title-c {
-  @extend .#{$app-prefix}bg-main;
-}
-
-.#{$nv-prefix}title {
-  background-color: $mainDklColor;
-  font-size: 11px;
-  letter-spacing: 1px;
-  padding: 3px 10px 5px 30px;
-  border-bottom: 1px solid $mainDkColor;
-  border-top: 1px solid $mainLhColor;
-  display: flex;
-  align-items: center;
-}
-
-.#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{
-	border-left: 1px solid lighten($mainDkColor,2%);
-}
-.#{$nv-prefix}item > .#{$nv-prefix}children {
-  margin-left: 7px;
-  display: none;
-}
-.#{$nv-prefix}item.open > .#{$nv-prefix}children { display: block; }
-.#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before{ content:''; }
-.#{$nv-prefix}no-chld > ##{$nv-prefix}caret{ display:none; }
-.#{$nv-prefix}item > ##{$nv-prefix}move {
-	position: absolute;
-	cursor: move;
-  font-size: 12px;
-  right: 0; top: 0;
-  padding: 7px 10px 7px 5px;
-}
-/*
-.#{$nv-prefix}item{
-	&.#{$nv-prefix}selected{
-		border: 2px solid $colorBlue;
-	}
-}
-*/
-.#{$nv-prefix}selected .#{$nv-prefix}title {
-    background-color: rgba(255,255,255,0.1);
-}
-
-.#{$nv-prefix}nav-item-edit {
-  visibility: hidden;
-  padding: 5px;
-  font-size: 10px;
-  @include opacity(0.7);
-
-  &:hover {
-    @include opacity(1);
-  }
-}
-
-.#{$nv-prefix}title-c:hover {
-
-  .#{$nv-prefix}nav-item-edit {
-    visibility: visible;
-    cursor: pointer;
-  }
-}
-
-.#{$app-prefix}nav-comp-name {
-  padding: 5px;
-  box-sizing: content-box;
-  @extend .#{$app-prefix}no-user-select;
-}
-
-/************* END Navigator *************/
-
 /* pa-refresh pa-rocket pa-trash pa-columns pa-rotate-left/right */
 .btn.expand{ background-image: none;}
 
@@ -762,7 +629,9 @@ $lightBorder: rgba(255, 255, 255, 0.05);
 
 @import "gjs_blocks";
 
+/************* Navigator *************/
 
+@import "gjs_layers";
 
 /********* Class manager **********/
 $addBtnBg: lighten($mainDkColor, 10%);