Fix how the asset manager is rendered #45

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.4.20",
+  "version": "0.4.21",
   "author": "Artur Arseniev",
   "homepage": "http://grapesjs.com",
   "main": [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.4.20",
+  "version": "0.4.21",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/asset_manager/main.js

@@ -35,207 +35,207 @@
  */
 define(function(require) {
 
-	return function() {
-		var c = {},
-			Assets = require('./model/Assets'),
-			AssetsView = require('./view/AssetsView'),
-			FileUpload = require('./view/FileUploader'),
-			assets, am, fu;
-
-	  return {
-
-	  	/**
-	  	 * Name of the module
-	  	 * @type {String}
-	  	 * @private
-	  	 */
-	  	name: 'AssetManager',
-
-	  	/**
-	  	 * Mandatory for the storage manager
-	  	 * @type {String}
-	  	 * @private
-	  	 */
-	  	storageKey: 'assets',
-
-	  	/**
-	  	 * Initialize module
-	  	 * @param {Object} config Configurations
-	  	 * @private
-	  	 */
-	  	init: function(config){
-	  		c = config || {};
-	  		var defaults = require('./config/config');
-
-	  		for (var name in defaults) {
-					if (!(name in c))
-						c[name] = defaults[name];
-				}
-
-				var ppfx = c.pStylePrefix;
-				if(ppfx)
-					c.stylePrefix = ppfx + c.stylePrefix;
-
-	  		assets = new Assets(c.assets);
-				var obj = {
-					collection: assets,
-					config: c,
-				};
-				am = new AssetsView(obj);
-	  		fu = new FileUpload(obj);
-	  		return this;
-	  	},
-
-			/**
-			 * Add new asset/s to the collection. URLs are supposed to be unique
-			 * @param {string|Object|Array<string>|Array<Object>} asset URL strings or an objects representing the resource.
-			 * @return {Model}
-			 * @example
-			 * // In case of strings, would be interpreted as images
-			 * assetManager.add('http://img.jpg');
-			 * assetManager.add(['http://img.jpg', './path/to/img.png']);
-			 *
-			 * // Using objects you could indicate the type and other meta informations
-			 * assetManager.add({
-			 * 	src: 'http://img.jpg',
-			 * 	//type: 'image',	//image is default
-			 * 	height: 300,
-			 *	width: 200,
-			 * });
-			 * assetManager.add([{
-			 * 	src: 'http://img.jpg',
-			 * },{
-			 * 	src: './path/to/img.png',
-			 * }]);
-			 */
-			add: function(asset){
-				return assets.add(asset);
-			},
-
-			/**
-			 * Returns the asset by URL
-			 * @param  {string} src URL of the asset
-			 * @return {Object} Object representing the asset
-			 * @example
-			 * var asset = assetManager.get('http://img.jpg');
-			 */
-			get: function(src){
-				return assets.where({src: src})[0];
-			},
-
-			/**
-			 * Return all assets
-			 * @return {Collection}
-			 */
-			getAll: function(){
-				return assets;
-			},
-
-			/**
-			 * Remove the asset by its URL
-			 * @param  {string} src URL of the asset
-			 * @return {this}
-			 * @example
-			 * assetManager.remove('http://img.jpg');
-			 */
-			remove: function(src){
-				var asset = this.get(src);
-				this.getAll().remove(asset);
-				return this;
-			},
-
-			/**
-			 * Store assets data to the selected storage
-			 * @param {Boolean} noStore If true, won't store
-			 * @return {Object} Data to store
-			 * @example
-			 * var assets = assetManager.store();
-			 */
-			store: function(noStore){
-				var obj = {};
-				var assets = JSON.stringify(this.getAll().toJSON());
-				obj[this.storageKey] = assets;
-				if(!noStore && c.stm)
-					c.stm.store(obj);
-				return obj;
-			},
-
-			/**
-			 * Load data from the passed object, if the object is empty will try to fetch them
-			 * autonomously from the storage manager.
-			 * The fetched data will be added to the collection
-			 * @param {Object} data Object of data to load
-			 * @return {Object} Loaded assets
-			 * @example
-			 * var assets = assetManager.load();
-			 * // The format below will be used by the editor model
-			 * // to load automatically all the stuff
-			 * var assets = assetManager.load({
-			 * 	assets: [...]
-			 * });
-			 *
-			 */
-			load: function(data){
-				var d = data || '';
-				var name = this.storageKey;
-				if(!d && c.stm)
-					d = c.stm.load(name);
-				var assets = [];
-				try{
-					assets = JSON.parse(d[name]);
-				}catch(err){}
-				this.getAll().add(assets);
-				return assets;
-			},
-
-			/**
-			 * Render assets
-			 * @param  {Boolean} f 	Force to render, otherwise cached version will be returned
-			 * @return {HTMLElement}
-			 * @private
-			 */
-			render: function(f){
-				if(!this.rendered || f)
-					this.rendered	= am.render().$el.add(fu.render().$el);
-				return	this.rendered;
-			},
-
-			//-------
-
-			/**
-			 * Set new target
-			 * @param	{Object}	m Model
-			 * @private
-			 * */
-			setTarget: function(m){
-				am.collection.target = m;
-			},
-
-			/**
-			 * Set callback after asset was selected
-			 * @param	{Object}	f Callback function
-			 * @private
-			 * */
-			onSelect: function(f){
-				am.collection.onSelect = f;
-			},
-
-			/**
-			 * Set callback to fire when the asset is clicked
-			 * @param {function} func
-			 */
-			onClick: function(func) {
-				c.onClick = func;
-			},
-
-			/**
-			 * Set callback to fire when the asset is double clicked
-			 * @param {function} func
-			 */
-			onDblClick: function(func) {
-				c.onDblClick = func;
-			},
-
-		};
-	};
+  return function() {
+    var c = {},
+    Assets = require('./model/Assets'),
+    AssetsView = require('./view/AssetsView'),
+    FileUpload = require('./view/FileUploader'),
+    assets, am, fu;
+
+    return {
+
+      /**
+       * Name of the module
+       * @type {String}
+       * @private
+       */
+      name: 'AssetManager',
+
+      /**
+       * Mandatory for the storage manager
+       * @type {String}
+       * @private
+       */
+      storageKey: 'assets',
+
+      /**
+       * Initialize module
+       * @param {Object} config Configurations
+       * @private
+       */
+      init: function(config){
+        c = config || {};
+        var defaults = require('./config/config');
+
+        for (var name in defaults) {
+          if (!(name in c))
+            c[name] = defaults[name];
+        }
+
+        var ppfx = c.pStylePrefix;
+        if(ppfx)
+          c.stylePrefix = ppfx + c.stylePrefix;
+
+        assets = new Assets(c.assets);
+        var obj = {
+          collection: assets,
+          config: c,
+        };
+        am = new AssetsView(obj);
+        fu = new FileUpload(obj);
+        return this;
+      },
+
+      /**
+       * Add new asset/s to the collection. URLs are supposed to be unique
+       * @param {string|Object|Array<string>|Array<Object>} asset URL strings or an objects representing the resource.
+       * @return {Model}
+       * @example
+       * // In case of strings, would be interpreted as images
+       * assetManager.add('http://img.jpg');
+       * assetManager.add(['http://img.jpg', './path/to/img.png']);
+       *
+       * // Using objects you could indicate the type and other meta informations
+       * assetManager.add({
+       * 	src: 'http://img.jpg',
+       * 	//type: 'image',	//image is default
+       * 	height: 300,
+       *	width: 200,
+       * });
+       * assetManager.add([{
+       * 	src: 'http://img.jpg',
+       * },{
+       * 	src: './path/to/img.png',
+       * }]);
+       */
+      add: function(asset){
+        return assets.add(asset);
+      },
+
+      /**
+       * Returns the asset by URL
+       * @param  {string} src URL of the asset
+       * @return {Object} Object representing the asset
+       * @example
+       * var asset = assetManager.get('http://img.jpg');
+       */
+      get: function(src){
+        return assets.where({src: src})[0];
+      },
+
+      /**
+       * Return all assets
+       * @return {Collection}
+       */
+      getAll: function(){
+        return assets;
+      },
+
+      /**
+       * Remove the asset by its URL
+       * @param  {string} src URL of the asset
+       * @return {this}
+       * @example
+       * assetManager.remove('http://img.jpg');
+       */
+      remove: function(src){
+        var asset = this.get(src);
+        this.getAll().remove(asset);
+        return this;
+      },
+
+      /**
+       * Store assets data to the selected storage
+       * @param {Boolean} noStore If true, won't store
+       * @return {Object} Data to store
+       * @example
+       * var assets = assetManager.store();
+       */
+      store: function(noStore){
+        var obj = {};
+        var assets = JSON.stringify(this.getAll().toJSON());
+        obj[this.storageKey] = assets;
+        if(!noStore && c.stm)
+          c.stm.store(obj);
+        return obj;
+      },
+
+      /**
+       * Load data from the passed object, if the object is empty will try to fetch them
+       * autonomously from the storage manager.
+       * The fetched data will be added to the collection
+       * @param {Object} data Object of data to load
+       * @return {Object} Loaded assets
+       * @example
+       * var assets = assetManager.load();
+       * // The format below will be used by the editor model
+       * // to load automatically all the stuff
+       * var assets = assetManager.load({
+       * 	assets: [...]
+       * });
+       *
+       */
+      load: function(data){
+        var d = data || '';
+        var name = this.storageKey;
+        if(!d && c.stm)
+          d = c.stm.load(name);
+        var assets = [];
+        try{
+          assets = JSON.parse(d[name]);
+        }catch(err){}
+        this.getAll().add(assets);
+        return assets;
+      },
+
+      /**
+       * Render assets
+       * @param  {Boolean} f 	Force to render, otherwise cached version will be returned
+       * @return {HTMLElement}
+       * @private
+       */
+      render: function(f){
+        if(!this.rendered || f)
+          this.rendered	= am.render().$el.add(fu.render().$el);
+        return	this.rendered;
+      },
+
+      //-------
+
+      /**
+       * Set new target
+       * @param	{Object}	m Model
+       * @private
+       * */
+      setTarget: function(m){
+        am.collection.target = m;
+      },
+
+      /**
+       * Set callback after asset was selected
+       * @param	{Object}	f Callback function
+       * @private
+       * */
+      onSelect: function(f){
+        am.collection.onSelect = f;
+      },
+
+      /**
+       * Set callback to fire when the asset is clicked
+       * @param {function} func
+       */
+      onClick: function(func) {
+        c.onClick = func;
+      },
+
+      /**
+       * Set callback to fire when the asset is double clicked
+       * @param {function} func
+       */
+      onDblClick: function(func) {
+        c.onDblClick = func;
+      },
+
+    };
+  };
 });

src/asset_manager/view/AssetView.js

@@ -1,18 +1,14 @@
-define(['backbone'],
-	function (Backbone) {
-	/**
-	 * @class AssetView
-	 * */
-	return Backbone.View.extend({
+define(['backbone'], function (Backbone) {
 
-		initialize: function(o) {
-			this.options 		= o;
-			this.config			= o.config || {};
-			this.pfx				= this.config.stylePrefix || '';
-			this.ppfx				= this.config.pStylePrefix || '';
-			this.className	= this.pfx + 'asset';
-			this.listenTo( this.model, 'destroy remove', this.remove );
-		},
+  return Backbone.View.extend({
+    initialize: function(o) {
+      this.options = o;
+      this.config = o.config || {};
+      this.pfx = this.config.stylePrefix || '';
+      this.ppfx = this.config.pStylePrefix || '';
+      this.className = this.pfx + 'asset';
+      this.listenTo( this.model, 'destroy remove', this.remove);
+    },
+  });
 
-	});
 });

src/commands/view/OpenAssets.js

@@ -1,25 +1,24 @@
 define(function() {
-	return {
 
-		run: function(editor, sender, opts) {
-			var opt = opts || {};
-			var config = editor.getConfig();
-			var modal = editor.Modal;
-			var assetManager = editor.AssetManager;
-			assetManager.onClick(opt.onClick);
-			assetManager.onDblClick(opt.onDblClick);
+  return {
 
-			// old API
-			assetManager.setTarget(opt.target);
-			assetManager.onSelect(opt.onSelect);
+    run: function(editor, sender, opts) {
+      var opt = opts || {};
+      var config = editor.getConfig();
+      var modal = editor.Modal;
+      var assetManager = editor.AssetManager;
 
-			if (modal) {
-				modal.setTitle(opt.modalTitle || 'Select image');
-				modal.setContent('');
-				modal.setContent(assetManager.render(1));
-				modal.open();
-			}
-		},
+      assetManager.onClick(opt.onClick);
+      assetManager.onDblClick(opt.onDblClick);
 
-	};
+      // old API
+      assetManager.setTarget(opt.target);
+      assetManager.onSelect(opt.onSelect);
+
+      modal.setTitle(opt.modalTitle || 'Select image');
+      modal.setContent(assetManager.render());
+      modal.open();
+    },
+
+  };
 });

src/modal_dialog/main.js

@@ -15,12 +15,12 @@
  * @module Modal
  */
 define(function(require) {
-	return function() {
-		var c = {},
-		defaults = require('./config/config'),
-		ModalM = require('./model/Modal'),
-		ModalView	= require('./view/ModalView');
-		var model, modal;
+  return function() {
+    var c = {},
+    defaults = require('./config/config'),
+    ModalM = require('./model/Modal'),
+    ModalView	= require('./view/ModalView');
+    var model, modal;
 
 	  return {
 
@@ -39,24 +39,24 @@ define(function(require) {
       init: function(config) {
         c = config || {};
         for (var name in defaults) {
-					if (!(name in c))
-						c[name] = defaults[name];
-				}
+          if (!(name in c))
+            c[name] = defaults[name];
+        }
 
-				var ppfx = c.pStylePrefix;
-				if(ppfx)
-					c.stylePrefix = ppfx + c.stylePrefix;
+        var ppfx = c.pStylePrefix;
+        if(ppfx)
+          c.stylePrefix = ppfx + c.stylePrefix;
 
-				model = new ModalM(c);
-			  modal = new ModalView({
-					model: model,
-				  config: c,
-				});
+        model = new ModalM(c);
+        modal = new ModalView({
+          model: model,
+          config: c,
+        });
 
         if(c.em)
-  				c.em.on('loaded', function(){
-  					this.render().appendTo(c.em.config.el || 'body');
-  				}, this);
+          c.em.on('loaded', function(){
+            this.render().appendTo(c.em.config.el || 'body');
+          }, this);
 
         return this;
       },
@@ -94,10 +94,10 @@ define(function(require) {
        * @example
        * modal.setTitle('New title');
        */
-			setTitle: function(title){
+      setTitle: function(title){
         model.set('title', title);
         return this;
-			},
+      },
 
       /**
        * Returns the title of the modal window
@@ -114,10 +114,11 @@ define(function(require) {
        * @example
        * modal.setContent('<div>Some HTML content</div>');
        */
-			setContent: function(content){
-				model.set('content', content);
+      setContent: function(content){
+        model.set('content', ' ');
+        model.set('content', content);
         return this;
-			},
+      },
 
       /**
        * Get the content of the modal window
@@ -127,14 +128,14 @@ define(function(require) {
         return model.get('content');
       },
 
-			/**
-			 * Returns content element
-			 * @return {HTMLElement}
+      /**
+       * Returns content element
+       * @return {HTMLElement}
        * @private
-			 */
-			getContentEl: function(){
-				return modal.getContent().get(0);
-			},
+       */
+      getContentEl: function(){
+        return modal.getContent().get(0);
+      },
 
       /**
        * Returns modal model
@@ -153,6 +154,6 @@ define(function(require) {
       render: function(){
         return modal.render().$el;
       }
-		};
-	};
-});
+    };
+  };
+});

src/modal_dialog/model/Modal.js

@@ -1,12 +1,9 @@
-define(['backbone'],
-	function(Backbone) {
-		return Backbone.Model.extend({
-
-			defaults: {
-				title: '',
-				content: '',
-				open: false,
-			}
-
+define(['backbone'], function(Backbone) {
+    return Backbone.Model.extend({
+      defaults: {
+        title: '',
+        content: '',
+        open: false,
+      }
     });
-	});
+});

src/modal_dialog/template/modal.html

@@ -1,11 +1,12 @@
 <div class="<%= pfx %>dialog">
-	<div class="<%= pfx %>header">
-		<div class="<%= pfx %>title"><%= title %></div>
-		<div class="<%= pfx %>btn-close">&Cross;</div>
-	</div>
-	<div class="<%= pfx %>content">
-		<div id="<%= pfx %>c"> <%= content %> </div>
-		<div style="clear:both"></div>
-	</div>
+  <div class="<%= pfx %>header">
+    <div class="<%= pfx %>title"><%= title %></div>
+    <div class="<%= pfx %>btn-close">&Cross;</div>
+  </div>
+  <div class="<%= pfx %>content">
+    <div id="<%= pfx %>c"> <%= content %> </div>
+    <div style="clear:both"></div>
+  </div>
 </div>
-<div class="<%= pfx %>backlayer"></div>
+<div class="<%= pfx %>backlayer"></div>
+<div class="<%= pfx %>collector" style="display: none"></div>

src/modal_dialog/view/ModalView.js

@@ -20,12 +20,23 @@ define(['backbone', 'text!./../template/modal.html'],
 				this.delegateEvents();
 			},
 
+			/**
+			 * Returns collector element
+			 * @return {HTMLElement}
+			 * @private
+			 */
+			getCollector: function(){
+				if(!this.$collector)
+					this.$collector = this.$el.find('.'+this.pfx+'collector');
+				return this.$collector;
+			},
+
 			/**
 			 * Returns content element
 			 * @return {HTMLElement}
 			 * @private
 			 */
-			getContent: function(){
+			getContent: function() {
 				if(!this.$content)
 					this.$content	= this.$el.find('.'+this.pfx+'content #'+this.pfx+'c');
 				return this.$content;
@@ -36,7 +47,7 @@ define(['backbone', 'text!./../template/modal.html'],
 			 * @return {HTMLElement}
 			 * @private
 			 */
-			getTitle: function(){
+			getTitle: function() {
 				if(!this.$title)
 					this.$title	= this.$el.find('.'+this.pfx+'title');
 				return this.$title.get(0);
@@ -46,10 +57,10 @@ define(['backbone', 'text!./../template/modal.html'],
 			 * Update content
 			 * @private
 			 * */
-			updateContent: function(){
+			updateContent: function() {
 				var content = this.getContent();
-				if(content)
-					content.html(this.model.get('content'));
+				this.getCollector().append(content.children());
+				content.html(this.model.get('content'));
 			},
 
 			/**
@@ -85,7 +96,7 @@ define(['backbone', 'text!./../template/modal.html'],
 			 * Show modal
 			 * @private
 			 * */
-			show: function(){
+			 show: function(){
 				this.model.set('open', 1);
 			},
 

styles/css/main.css

@@ -2638,7 +2638,8 @@ $fontColorActive: #4f8ef7;
 .gjs-checker-bg, .checker-bg, .gjs-sm-sector .gjs-sm-property .gjs-sm-layer > #gjs-sm-preview-box, .gjs-clm-tags .gjs-sm-property .gjs-sm-layer > #gjs-sm-preview-box {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=="); }
 
-.gjs-no-user-select, .gjs-nav-comp-name {
+.gjs-no-user-select, .gjs-grabbing,
+.gjs-grabbing *, .gjs-nav-comp-name {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

styles/scss/main.scss

@@ -177,6 +177,8 @@ $fontV: 20;//random(1000)
 
 .#{$app-prefix}grabbing,
 .#{$app-prefix}grabbing * {
+  @extend .#{$app-prefix}no-user-select;
+
   cursor: grabbing !important;
   cursor: -webkit-grabbing !important;
 }