diff --git a/index.html b/index.html index 7fc024565..57409ce8e 100755 --- a/index.html +++ b/index.html @@ -1310,21 +1310,6 @@ }); */ - var am = editor.AssetManager; - - am.addType('svg-icon', { - // `value` is for example the argument passed in `am.add(VALUE);` - isType(value) { - // The condition is intentionally simple - if (value.substring(0, 5) == ' diff --git a/src/asset_manager/index.js b/src/asset_manager/index.js index 2e723bb5f..d38602e1e 100644 --- a/src/asset_manager/index.js +++ b/src/asset_manager/index.js @@ -226,7 +226,6 @@ module.exports = () => { this.getAll().reset(assets); } - this.lastLoad = assets; return assets; }, @@ -316,15 +315,12 @@ module.exports = () => { return fu; }, + onLoad() { + this.getAll().reset(c.assets); + }, + postRender(editorView) { c.dropzone && fu.initDropzone(editorView); - - // Reset assets for custom types - const last = this.lastLoad || {}; - const assets = last.length ? last : c.assets; - const all = this.getAll(); - all.reset(); - all.add(assets, {silent: 1}); }, /** diff --git a/src/domain_abstract/model/TypeableCollection.js b/src/domain_abstract/model/TypeableCollection.js index 4c60c7c26..41394998c 100644 --- a/src/domain_abstract/model/TypeableCollection.js +++ b/src/domain_abstract/model/TypeableCollection.js @@ -6,20 +6,23 @@ export default { initialize(models, opts) { this.model = (attrs = {}, options = {}) => { - let Model, type; + let Model, View, type; if (attrs && attrs.type) { + const baseType = this.getBaseType(); type = this.getType(attrs.type); - Model = type ? type.model : this.getBaseType().model; + Model = type ? type.model : baseType.model; + View = type ? type.view : baseType.view; } else { const typeFound = this.recognizeType(attrs); type = typeFound.type; Model = type.model; + View = type.view; attrs = typeFound.attributes; } const model = new Model(attrs, options); - model.typeView = type.view; + model.typeView = View; return model; }; const init = this.init && this.init.bind(this); diff --git a/src/editor/view/EditorView.js b/src/editor/view/EditorView.js index 4a3ec5e7b..ee8ef81d0 100644 --- a/src/editor/view/EditorView.js +++ b/src/editor/view/EditorView.js @@ -1,43 +1,35 @@ -var Backbone = require('backbone'); - module.exports = Backbone.View.extend({ initialize() { - this.model.view = this; - this.pn = this.model.get('Panels'); - this.conf = this.model.config; - this.className = this.conf.stylePrefix + 'editor'; - this.model.on('loaded', () => { + const model = this.model; + model.view = this; + this.conf = model.config; + this.pn = model.get('Panels'); + model.on('loaded', () => { this.pn.active(); - this.model.runDefault(); - setTimeout(() => this.model.trigger('load'), 0); + model.runDefault(); + setTimeout(() => model.trigger('load'), 0); }); }, render() { - var model = this.model; - var um = model.get('UndoManager'); - var dComps = model.get('DomComponents'); - var config = model.get('Config'); - - var conf = this.conf; - var contEl = $(conf.el || ('body ' + conf.container)); - this.$el.empty(); - - if(conf.width) + const model = this.model; + const el = this.$el; + const conf = this.conf; + const contEl = $(conf.el || `body ${conf.container}`); + const pfx = conf.stylePrefix; + el.empty(); + + if (conf.width) contEl.css('width', conf.width); - if(conf.height) + if (conf.height) contEl.css('height', conf.height); - // Canvas - this.$el.append(model.get('Canvas').render()); - - // Panels - this.$el.append(this.pn.render()); - this.$el.attr('class', this.className); - contEl.addClass(conf.stylePrefix + 'editor-cont'); - contEl.empty().append(this.$el); + el.append(model.get('Canvas').render()); + el.append(this.pn.render()); + el.attr('class', `${pfx}editor`); + contEl.addClass(`${pfx}editor-cont`).empty().append(el); return this; } diff --git a/src/grapesjs/index.js b/src/grapesjs/index.js index 98e650a85..4c9bd41fe 100644 --- a/src/grapesjs/index.js +++ b/src/grapesjs/index.js @@ -1,13 +1,11 @@ -import { isUndefined } from 'underscore'; +import { isUndefined, defaults } from 'underscore'; -module.exports = (config => { - var c = config || {}, - defaults = require('./config/config'), - Editor = require('editor'), - PluginManager = require('plugin_manager'); - - var plugins = new PluginManager(); - var editors = []; +module.exports = (() => { + const defaultConfig = require('./config/config'); + const Editor = require('editor'); + const PluginManager = require('plugin_manager'); + const plugins = new PluginManager(); + const editors = []; return { @@ -33,35 +31,28 @@ module.exports = (config => { * style: '.hello{color: red}', * }) */ - init(config) { - var c = config || {}; - var els = c.container; + init(config = {}) { + const els = config.container; // Make a missing $ more verbose if (isUndefined($)) { throw 'jQuery not found'; } - // Set default options - for (var name in defaults) { - if (!(name in c)) - c[name] = defaults[name]; - } - if (!els) { throw new Error("'container' is required"); } - c.el = document.querySelector(els); - var editor = new Editor(c).init(); + defaults(config, defaultConfig); + config.el = document.querySelector(els); + const editor = new Editor(config).init(); // Load plugins - var plugs = plugins.getAll(); - c.plugins.forEach((pluginId) => { - let plugin = plugins.get(pluginId); + config.plugins.forEach(pluginId => { + const plugin = plugins.get(pluginId); if (plugin) { - plugin(editor, c.pluginsOpts[pluginId] || {}); + plugin(editor, config.pluginsOpts[pluginId] || {}); } else { console.warn(`Plugin ${pluginId} not found`); } @@ -72,7 +63,7 @@ module.exports = (config => { // is a good point to load stuff like components, css rules, etc. editor.getModel().loadOnStart(); - c.autorender && editor.render(); + config.autorender && editor.render(); editors.push(editor); return editor;