Add loader to the editor module

src/asset_manager/config/config.js

@@ -1,27 +1,26 @@
 define(function () {
 	return {
+		stylePrefix: 'am-',
+	/*
 		// Indicates if try to load data from the selected storage
     autoload: 1,
 
+    // Indicates which storage to use. Available: local | remote
+		storageType: 'local',
+
 		// Style prefix
 		stylePrefix: 'am-',
 
-		// Default assets
-		assets: [],
-
-		// Indicates which storage to use. Available: local | remote
-		storageType			: 'local',
-
-		// The name that will be used to identify assets inside storage.
-		//	If empty will be used: prefix + 'assets'
-		storageName			: 'assets',
-
 		// Where store remote assets
 		urlStore			: 'http://localhost/assets/store',
 
 		// Where fetch remote assets
 		urlLoad				: 'http://localhost/assets/load',
 
+		// The name that will be used to identify assets inside storage.
+		//	If empty will be used: prefix + 'assets'
+		storageName: 'assets',
+
 		// Custom parameters to pass with set request
 		paramsStore			: {},
 
@@ -33,22 +32,25 @@ define(function () {
 
 		// Callback after request
 		onComplete			: function(jqXHR,status){},
+*/
+		// Default assets
+		assets: [],
 
 		// Url where uploads will be send
-		urlUpload				: 'http://localhost/assets/upload',
+		urlUpload: 'http://localhost/assets/upload',
 
 		// Text on upload input
-		uploadText			: 'Drop files here or click to upload',
+		uploadText: 'Drop files here or click to upload',
 
 		// Disable upload input
-		disableUpload		: false,
+		disableUpload: false,
 
 		// Store assets data where the new one is added or deleted
-		storeOnChange		: true,
+		storeOnChange: true,
 
 		// It could be useful to avoid send other requests for saving assets,
 		// as after upload the script may have already done it
-		storeAfterUpload	: false,
+		storeAfterUpload: false,
 
 	};
 });

src/asset_manager/main.js

@@ -30,29 +30,66 @@
  */
 define(function(require) {
 
-	return function(config) {
-		var c = config || {},
-			defaults = require('./config/config'),
+	return function() {
+		var c = {},
 			Assets = require('./model/Assets'),
 			AssetsView = require('./view/AssetsView'),
-			FileUpload = require('./view/FileUploader');
-
-		for (var name in defaults) {
-			if (!(name in c))
-				c[name] = defaults[name];
-		}
-
-		var assets = new Assets(c.assets);
-		var obj = {
-			collection: assets,
-			config: c,
-		};
-
-	  var am = new AssetsView(obj);
-	  var fu = new FileUpload(obj);
+			FileUpload = require('./view/FileUploader'),
+			assets, am, fu;
 
 	  return {
 
+	  	/**
+	  	 * Name of the module
+	  	 * @type {String}
+	  	 * @private
+	  	 */
+	  	name: 'AssetManager',
+
+	  	/**
+	  	 * If public module
+	  	 * @type {Boolean}
+	  	 * @private
+	  	 */
+	  	public: true,
+
+	  	/**
+	  	 * Initialize module
+	  	 * @param {Object} config Configurations
+			 * @param {Array<Object>} [config.assets=[]] Default assets
+			 * @example
+			 * ...
+			 * {
+			 * 	assets: [
+			 *  	{src:'path/to/image.png'},
+			 *     ...
+			 *  ],
+			 *  upload: 'http://dropbox/path', // set to false to disable it
+			 *  uploadText: 'Drop files here or click to upload',
+			 * }
+	  	 */
+	  	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);
+	  	},
+
 	  	stm: c.stm,
 
 			/**
@@ -121,27 +158,28 @@ define(function(require) {
 				if(!this.stm)
 					return;
 				this.stm.store({
-					assets: this.getAll().toJSON()
+					assets: JSON.stringify(this.getAll().toJSON())
 				});
 				return this;
 			},
 
 			/**
 			 * Load data from the selected storage. The fetched data will be added to the collection
-			 * @return {this}
+			 * @return {Object} Stored assets
 			 */
 			load: function(){
 				var name = 'assets';
 				if(!this.stm)
 					return;
 				var data = this.stm.load([name]);
-				this.getAll().add(data[name] || []);
-				return this;
+				var assets = (JSON.parse(data[name]) || []).reverse();
+				this.getAll().add(assets);
+				return assets;
 			},
 
 			/**
 			 * Render assets
-			 * @param  {Boolean} f 	Force to render
+			 * @param  {Boolean} f 	Force to render, otherwise cached version will be returned
 			 * @return {HTMLElement}
 			 */
 			render: function(f){

src/asset_manager/view/AssetsView.js

@@ -15,6 +15,7 @@ define(['backbone', './AssetView', './AssetImageView', './FileUploader', 'text!.
 			this.listenTo( this.collection, 'add', this.addToAsset );
 			this.listenTo( this.collection, 'deselectAll', this.deselectAll );
 			this.className	= this.pfx + 'assets';
+			var c = this.config;
 
 			// Check if storage is required and if Storage Manager is available
 			if(this.config.stm && this.config.storageType !== ''){

src/commands/view/Fullscreen.js

@@ -73,7 +73,8 @@ define(function() {
 		  },
 
 		  stop: function(editor, sender){
-		    sender.set('active', false);
+		    if(sender && sender.set)
+		    	sender.set('active', false);
 		    this.disable();
 		  }
 

src/demo.js

@@ -39,68 +39,9 @@ require(['config/require-config'], function() {
 															var comps = editor.DomComponents.clear();
 														}
 													}
-												},{
-                          id:   'fullscreen',
-
-                          isEnabled: function(){
-                            var d = document;
-                            if(d.fullscreenElement || d.webkitFullscreenElement || d.mozFullScreenElement)
-                              return 1;
-                            else
-                              return 0;
-                          },
-
-                          enable: function(el){
-                            var pfx = '';
-                            if (el.requestFullscreen)
-                              el.requestFullscreen();
-                            else if (el.webkitRequestFullscreen) {
-                              pfx = 'webkit';
-                              el.webkitRequestFullscreen();
-                            }else if (el.mozRequestFullScreen) {
-                              pfx = 'moz';
-                              el.mozRequestFullScreen();
-                            }else if (el.msRequestFullscreen)
-                              el.msRequestFullscreen();
-                            else
-                              console.warn('Fullscreen not supported');
-                            return pfx;
-                          },
-
-                          disable: function(){
-                            var d = document;
-                            if (d.exitFullscreen)
-                              d.exitFullscreen();
-                            else if (d.webkitExitFullscreen)
-                              d.webkitExitFullscreen();
-                            else if (d.mozCancelFullScreen)
-                              d.mozCancelFullScreen();
-                            else if (d.msExitFullscreen)
-                              d.msExitFullscreen();
-                          },
-
-                          fsChanged: function(pfx, e){
-                            var d = document;
-                            var ev = (pfx || '') + 'fullscreenchange';
-                            if(!this.isEnabled()){
-                              this.stop(null, this.sender);
-                              document.removeEventListener(ev, this.fsChanged);
-                            }
-                          },
-
-                          run:  function(editor, sender){
-                            this.sender = sender;
-                            var pfx = this.enable(editor.getContainer());
-                            this.fsChanged = this.fsChanged.bind(this, pfx);
-                            document.addEventListener(pfx + 'fullscreenchange', this.fsChanged);
-                          },
-
-                          stop: function(editor, sender){
-                            sender.set('active', false);
-                            this.disable();
-                          }
-                        }],
+												}],
 			},
+
 			assetManager: {
 				storageType			: '',
 				storeOnChange		: true,

src/editor/model/Editor.js

@@ -46,6 +46,7 @@ define([
 				selectedComponent: null,
 				previousModel: null,
 				changesCount:	0,
+				storables: [],
 				device: '',
 			},
 
@@ -64,7 +65,8 @@ define([
 				this.initStorage();
 				this.initClassManager();
 				this.initModal();
-				this.initAssetManager();
+				this.loadModule(AssetManager);
+				//this.initAssetManager();
 				this.initUtils();
 				this.initCodeManager();
 				this.initCommands();
@@ -80,6 +82,32 @@ define([
 				this.on('change:selectedComponent', this.componentSelected, this);
 			},
 
+			/**
+			 * Load generic module
+			 * @param {Object} module
+			 * @return {this}
+			 */
+			loadModule: function(module) {
+				var c = this.config;
+				var M = new module();
+				var name = M.name.charAt(0).toLowerCase() + M.name.slice(1);
+				var cfg = c[name] || c[M.name];
+				cfg.pStylePrefix = c.stylePrefix;
+
+				// Check if module is storable
+				var sm = this.get('StorageManager');
+				if(M.store && M.load && sm){
+					cfg.stm = sm;
+					this.set('storables', this.get('storables').push(module));
+				}
+				M.init(cfg);
+
+				// Bind the module to the editor model if public
+				if(M.public)
+					this.set(M.name, M);
+				return this;
+			},
+
 			/**
 			 * Initialize editor model and set editor instance
 			 * @param {Editor} editor Editor instance
@@ -256,8 +284,7 @@ define([
 				if(this.modal)
 					cfg.modal = this.modal;
 
-				if(this.am)
-					cfg.am = this.am;
+				cfg.am = this.get('AssetManager') || '';
 
 				cfg.em = this;
 
@@ -317,23 +344,6 @@ define([
 				this.set('StorageManager', this.stm);
 			},
 
-			/**
-			 * Initialize asset manager
-			 * @private
-			 * */
-			initAssetManager: function() {
-				var cfg			= this.config.assetManager,
-					pfx			= cfg.stylePrefix || 'am-';
-				cfg.pStylePrefix = this.config.stylePrefix;
-				cfg.stylePrefix = this.config.stylePrefix + pfx;
-				if(this.stm)
-					cfg.stm = this.stm;
-
-				this.am = new AssetManager(cfg);
-				this.AssetManager = this.am;
-				this.set('AssetManager', this.am);
-			},
-
 			/**
 			 * Initialize dialog
 			 * @private