diff --git a/src/asset_manager/config/config.js b/src/asset_manager/config/config.js index 2956b2c99..a4996c621 100644 --- a/src/asset_manager/config/config.js +++ b/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, }; }); \ No newline at end of file diff --git a/src/asset_manager/main.js b/src/asset_manager/main.js index 75682e8b1..a19d9e304 100644 --- a/src/asset_manager/main.js +++ b/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} [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){ diff --git a/src/asset_manager/view/AssetsView.js b/src/asset_manager/view/AssetsView.js index c2322f674..b52e78751 100644 --- a/src/asset_manager/view/AssetsView.js +++ b/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 !== ''){ diff --git a/src/commands/view/Fullscreen.js b/src/commands/view/Fullscreen.js index 8c9448926..3ff4ddc90 100644 --- a/src/commands/view/Fullscreen.js +++ b/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(); } diff --git a/src/demo.js b/src/demo.js index 19afa8961..d81363338 100644 --- a/src/demo.js +++ b/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, diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index ee368c0f8..e72d867a2 100644 --- a/src/editor/model/Editor.js +++ b/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