Show/Hide noAssets only when necessary

package.json

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

src/asset_manager/config/config.js

@@ -4,7 +4,7 @@ module.exports =  {
 
   // Content to add where there is no assets to show
   // eg. 'No <b>assets</b> here, drag to upload'
-  noAssets: '',
+  noAssets: 'No assets',
 
   // Style prefix
   stylePrefix: 'am-',

src/asset_manager/view/AssetsView.js

@@ -37,9 +37,11 @@ module.exports = Backbone.View.extend({
     this.config = o.config;
     this.pfx = this.config.stylePrefix || '';
     this.ppfx = this.config.pStylePrefix || '';
-    this.listenTo(this.collection, 'add', this.addToAsset );
-    this.listenTo(this.collection, 'deselectAll', this.deselectAll);
-    this.listenTo(this.collection, 'reset', this.render);
+    const coll = this.collection;
+    this.listenTo(coll, 'reset', this.render);
+    this.listenTo(coll, 'add', this.addToAsset);
+    this.listenTo(coll, 'remove', this.removedAsset);
+    this.listenTo(coll, 'deselectAll', this.deselectAll);
   },
 
   /**
@@ -89,11 +91,25 @@ module.exports = Backbone.View.extend({
     return this.inputUrl;
   },
 
+  /**
+   * Triggered when an asset is removed
+   * @param {Asset} model Removed asset
+   * @private
+   */
+  removedAsset(model) {
+    if (!this.collection.length) {
+      this.toggleNoAssets();
+    }
+  },
+
   /**
    * Add asset to collection
    * @private
    * */
   addToAsset(model) {
+    if (this.collection.length == 1) {
+      this.toggleNoAssets(1);
+    }
     this.addAsset(model);
   },
 
@@ -126,6 +142,21 @@ module.exports = Backbone.View.extend({
     return rendered;
   },
 
+  /**
+   * Checks if to show noAssets
+   * @param {Boolean} hide
+   * @private
+   */
+  toggleNoAssets(hide) {
+    const assetsEl = this.$el.find(`.${this.pfx}assets`);
+
+    if (hide) {
+      assetsEl.empty();
+    } else {
+      assetsEl.append(this.config.noAssets);
+    }
+  },
+
   /**
    * Deselect all assets
    * @private
@@ -138,15 +169,15 @@ module.exports = Backbone.View.extend({
   render() {
     const pfx = this.pfx;
     const ppfx = this.ppfx;
-    const noAssets = this.config.noAssets;
+    //const noAssets = this.config.noAssets;
     const fuRendered = this.options.fu.render().el;
     const fragment = document.createDocumentFragment();
     this.$el.empty();
     this.collection.each((model) => this.addAsset(model, fragment));
     this.$el.append(fuRendered).append(this.template(this));
     this.el.className = `${ppfx}asset-manager`;
-    const assetsEl = this.$el.find(`.${pfx}assets`);
-    assetsEl.append(fragment.childNodes.length ? fragment : noAssets);
+    this.toggleNoAssets(this.collection.length);
+    this.$el.find(`.${pfx}assets`).append(fragment);
     return this;
   }
 });