Add Open Assets command and refactor component image

src/asset_manager/main.js

@@ -5,6 +5,8 @@
  * * [remove](#remove)
  * * [store](#store)
  * * [load](#load)
+ * * [onClick](#onClick)
+ * * [onDblClick](#onDblClick)
  *
  * Before using this methods you should get first the module from the editor instance, in this way:
  *
@@ -218,6 +220,22 @@ define(function(require) {
 				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/AssetImageView.js

@@ -3,8 +3,8 @@ define(['./AssetView','text!./../template/assetImage.html'],
 	return AssetView.extend({
 
 		events:{
-			'click' 			: 'selected',
-			'dblclick' 		: 'chosen',
+			'click': 'handleClick',
+			'dblclick': 'handleDblClick',
 		},
 
 		template: _.template(assetTemplate),
@@ -17,25 +17,39 @@ define(['./AssetView','text!./../template/assetImage.html'],
 		},
 
 		/**
-		 * Trigger when asset is been selected
+		 * Trigger when the asset is clicked
 		 * @private
 		 * */
-		selected: function(){
-			this.model.collection.trigger('deselectAll');
+		handleClick: function() {
+			var onClick = this.config.onClick;
+			var model = this.model;
+			model.collection.trigger('deselectAll');
 			this.$el.addClass(this.pfx + 'highlight');
 
-			this.updateTarget(this.model.get('src'));
+			if (typeof onClick === 'function') {
+				onClick(model);
+			} else {
+				this.updateTarget(model.get('src'));
+			}
 		},
 
 		/**
-		 * Trigger when asset is been chosen (double clicked)
+		 * Trigger when the asset is double clicked
 		 * @private
 		 * */
-		chosen: function(){
-			this.updateTarget(this.model.get('src'));
-			var f				=  this.model.collection.onSelect;
-			if(f && typeof f == 'function'){
-				f(this.model);
+		handleDblClick: function() {
+			var onDblClick = this.config.onDblClick;
+			var model = this.model;
+
+			if (typeof onDblClick === 'function') {
+				onDblClick(model);
+			} else {
+				this.updateTarget(model.get('src'));
+			}
+
+			var onSelect = model.collection.onSelect;
+			if(typeof onSelect == 'function'){
+				onSelect(this.model);
 			}
 		},
 
@@ -45,9 +59,9 @@ define(['./AssetView','text!./../template/assetImage.html'],
 		 * @private
 		 * */
 		updateTarget: function(v){
-			var target			= this.model.collection.target;
-			if(target && target.set){
-				var attr		= _.clone( target.get('attributes') );
+			var target = this.model.collection.target;
+			if(target && target.set) {
+				var attr = _.clone( target.get('attributes') );
 				target.set('attributes', attr );
 				target.set('src', v );
 			}
@@ -63,18 +77,18 @@ define(['./AssetView','text!./../template/assetImage.html'],
 		},
 
 		render : function(){
-			var name 	= this.model.get('name'),
-				dim  	= this.model.get('width') && this.model.get('height') ?
+			var name = this.model.get('name'),
+				dim = this.model.get('width') && this.model.get('height') ?
 							this.model.get('width')+' x '+this.model.get('height') : '';
-			name		= name ? name : this.model.get('src').split("/").pop();
-			name 		= name && name.length > 30 ? name.substring(0, 30)+'...' : name;
-			dim		 	= dim ? dim + (this.model.get('unitDim') ? this.model.get('unitDim') : ' px' ) : '';
+			name = name ? name : this.model.get('src').split("/").pop();
+			name = name && name.length > 30 ? name.substring(0, 30)+'...' : name;
+			dim = dim ? dim + (this.model.get('unitDim') ? this.model.get('unitDim') : ' px' ) : '';
 			this.$el.html( this.template({
-				name: 	name,
-				src: 	this.model.get('src'),
-				dim:	dim,
-				pfx:	this.pfx,
-				ppfx:	this.ppfx
+				name: name,
+				src: this.model.get('src'),
+				dim: dim,
+				pfx: this.pfx,
+				ppfx: this.ppfx
 			}));
 			this.$el.attr('class', this.className);
 			return this;

src/commands/main.js

@@ -98,6 +98,7 @@ define(function(require) {
 				defaultCommands['open-sm'] = require('./view/OpenStyleManager');
 				defaultCommands['open-tm'] = require('./view/OpenTraitManager');
 				defaultCommands['open-blocks'] = require('./view/OpenBlocks');
+				defaultCommands['open-assets'] = require('./view/OpenAssets');
 				defaultCommands.fullscreen = require('./view/Fullscreen');
 				defaultCommands.preview = require('./view/Preview');
 				//this.defaultCommands['resize-comp'] 	= require('./view/ResizeComponent');

src/commands/view/OpenAssets.js

@@ -0,0 +1,25 @@
+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);
+
+			// old API
+			assetManager.setTarget(opt.target);
+			assetManager.onSelect(opt.onSelect);
+
+			if (modal) {
+				modal.setTitle(opt.modalTitle || 'Select image');
+				modal.setContent('');
+				modal.setContent(assetManager.render(1));
+				modal.open();
+			}
+		},
+
+	};
+});

src/demo.js

@@ -66,7 +66,7 @@ require(['config/require-config'], function() {
 													}
 												}],
 			},
-/*
+
 			assetManager: {
 				storageType			: '',
 				storeOnChange		: true,
@@ -84,7 +84,7 @@ require(['config/require-config'], function() {
 					      				   { type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
 				      				   ]
 			},
-*/
+
 
 			styleManager : {
 				sectors: [{

src/dom_components/view/ComponentImageView.js

@@ -6,13 +6,13 @@ define(['backbone', './ComponentView'],
 		tagName: 'img',
 
 		events: {
-				'dblclick' 	: 'openModal',
+			'dblclick': 'openModal',
 		},
 
 		initialize: function(o){
 			ComponentView.prototype.initialize.apply(this, arguments);
-			this.listenTo( this.model, 'change:src', this.updateSrc);
-			this.listenTo( this.model, 'dblclick active', this.openModal);
+			this.listenTo(this.model, 'change:src', this.updateSrc);
+			this.listenTo(this.model, 'dblclick active', this.openModal);
 			this.classEmpty = this.ppfx + 'plh-image';
 
 			if(this.config.modal)
@@ -40,16 +40,17 @@ define(['backbone', './ComponentView'],
 		 * @param	{Object}	e	Event
 		 * @private
 		 * */
-		openModal: function(e){
-			var that	= this;
-			if(this.modal && this.am){
-				this.modal.setTitle('Select image');
-				this.modal.setContent(this.am.render(1));
-				this.am.setTarget(this.model);
-				this.modal.open();
-				this.am.onSelect(function(){
-					that.modal.close();
-					that.am.setTarget(null);
+		openModal: function(e) {
+			var em = this.opts.config.em;
+			var editor = em ? em.get('Editor') : '';
+
+			if(editor) {
+				editor.runCommand('open-assets', {
+					target: this.model,
+					onSelect: function() {
+						editor.Modal.close();
+						editor.AssetManager.setTarget(null);
+					}
 				});
 			}
 		},

src/dom_components/view/ComponentView.js

@@ -19,11 +19,11 @@ define(['backbone', './ComponentsView'],
 				this.components = this.model.get('components');
 				this.attr = this.model.get("attributes");
 				this.classe = this.attr.class || [];
-				this.listenTo(this.model, 'destroy remove', 	this.remove);
-				this.listenTo(this.model, 'change:style', 		this.updateStyle);
+				this.listenTo(this.model, 'destroy remove', this.remove);
+				this.listenTo(this.model, 'change:style', this.updateStyle);
 				this.listenTo(this.model, 'change:attributes', this.updateAttributes);
-				this.listenTo(this.model, 'change:status', 		this.updateStatus);
-				this.listenTo(this.model, 'change:state', 		this.updateState);
+				this.listenTo(this.model, 'change:status', this.updateStatus);
+				this.listenTo(this.model, 'change:state', this.updateState);
 				this.listenTo(this.model.get('classes'), 'add remove change', this.updateClasses);
 				this.$el.data('model', this.model);
 				this.model.set('view', this);