From 21da18cb1415fe44536dd3001d5d3fa6b73e3f51 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 27 May 2016 03:14:12 +0200 Subject: [PATCH] Start removing IDs and refactor Editor --- src/css_composer/model/CssRule.js | 2 +- src/dom_components/config/config.js | 2 +- src/dom_components/main.js | 14 +-- src/dom_components/model/Components.js | 13 +++ src/editor/model/Editor.js | 147 +++++++++++-------------- 5 files changed, 85 insertions(+), 93 deletions(-) diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js index 60a3cb9be..6f31d5c82 100644 --- a/src/css_composer/model/CssRule.js +++ b/src/css_composer/model/CssRule.js @@ -26,7 +26,7 @@ define(['backbone', './Selectors'], if(this.sm.get){ var slct = []; for(var i = 0; i < this.slct.length; i++) - slct.push(this.sm.get('ClassManager').addClass(this.slct[i].name)); + slct.push(this.sm.get('ClassManager').addClass(this.slct[i].name || this.slct[i])); this.slct = slct; } diff --git a/src/dom_components/config/config.js b/src/dom_components/config/config.js index 034879560..56554bab8 100644 --- a/src/dom_components/config/config.js +++ b/src/dom_components/config/config.js @@ -15,7 +15,7 @@ define(function () { }, // Could be used for default components - defaults : [], + components: [], rte : {}, diff --git a/src/dom_components/main.js b/src/dom_components/main.js index 163f974a2..1c5e15068 100644 --- a/src/dom_components/main.js +++ b/src/dom_components/main.js @@ -59,21 +59,14 @@ define(function(require) { if (!(name in c)) c[name] = defaults[name]; } -/* - // If there is no components try to append defaults - if(!c.wrapper.components.length && c.defaults.length){ - c.wrapper.components = c.defaults; - } -*/ - //c.wrapper.style.position = 'relative'; + var component = new Component(c.wrapper, { sm: c.em }); component.set({ attributes: {id: 'wrapper'} }); - if(c.components) - component.get('components').add(c.components); + component.get('components').add(c.components); var obj = { model: component, @@ -183,9 +176,8 @@ define(function(require) { }, /** - * Clear all components + * Remove all components * @return {this} - * @private */ clear: function(){ var c = this.getComponents(); diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js index 05a13ca0b..c7b7d8358 100644 --- a/src/dom_components/model/Components.js +++ b/src/dom_components/model/Components.js @@ -5,6 +5,8 @@ define([ 'backbone', 'require'], initialize: function(models, opt){ + this.on('add', this.onAdd); + // Inject editor if(opt && opt.sm) this.editor = opt.sm; @@ -48,5 +50,16 @@ define([ 'backbone', 'require'], return Backbone.Collection.prototype.add.apply(this, [models, opt]); }, + onAdd: function(model, c, opts){ + var style = model.get('style'); + + if(!_.isEmpty(style)){ + var newClass = this.editor.get('ClassManager').addClass(model.cid); + model.get('classes').add(newClass); + var rule = this.editor.get('CssComposer').newRule(newClass); + rule.set('style', style); + } + }, + }); }); diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 9c45690c6..3382c5214 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -77,6 +77,7 @@ define([ /** * Initialize Utils + * @private * */ initUtils: function() { this.set('Utils', new Utils()); @@ -84,11 +85,12 @@ define([ /** * Initialize Css Composer + * @private * */ initCssComposer: function() { var cfg = this.config.cssComposer, - df = this.loadRules(); - pfx = cfg.stylePrefix || 'css-'; + df = this.loadRules(); + pfx = cfg.stylePrefix || 'css-'; cfg.stylePrefix = this.config.stylePrefix + pfx; if(df) @@ -146,10 +148,11 @@ define([ /** * Initialize Class manager + * @private * */ initClassManager: function() { var cfg = this.config.classManager, - pfx = cfg.stylePrefix || 'clm-'; + pfx = cfg.stylePrefix || 'clm-'; cfg.stylePrefix = this.config.stylePrefix + pfx; cfg.target = this; this.clm = new ClassManager(cfg); @@ -198,14 +201,14 @@ define([ /** * Initialize canvas + * @private * */ - initCanvas: function() - { - var cfg = this.config.canvas, - pfx = cfg.stylePrefix || 'cv-'; - cfg.stylePrefix = this.config.stylePrefix + pfx; + initCanvas: function() { + var cfg = this.config.canvas, + pfx = cfg.stylePrefix || 'cv-'; + cfg.stylePrefix = this.config.stylePrefix + pfx; cfg.canvasId = this.config.idCanvas; - this.cv = new Canvas(this.config.canvas); + this.cv = new Canvas(this.config.canvas); if(this.cmp) this.cv.setWrapper(this.cmp); @@ -215,18 +218,19 @@ define([ /** * Initialize rich text editor + * @private * */ - initRichTextEditor: function() - { - var cfg = this.config.rte, - rteStylePfx = cfg.stylePrefix || 'rte-'; + initRichTextEditor: function() { + var cfg = this.config.rte, + rteStylePfx = cfg.stylePrefix || 'rte-'; cfg.stylePrefix = this.config.stylePrefix + rteStylePfx; - this.rte = new RichTextEditor(cfg); + this.rte = new RichTextEditor(cfg); this.set('RichTextEditor', this.rte); }, /** * Initialize storage + * @private * */ initStorage: function() { this.stm = new StorageManager(this.config.storageManager); @@ -237,9 +241,9 @@ define([ /** * Initialize asset manager + * @private * */ - initAssetManager: function() - { + initAssetManager: function() { var cfg = this.config.assetManager, pfx = cfg.stylePrefix || 'am-'; cfg.stylePrefix = this.config.stylePrefix + pfx; @@ -252,27 +256,27 @@ define([ }, /** - * Initialize modal + * Initialize dialog + * @private * */ - initModal: function() - { - var cfg = this.config.modal, - pfx = cfg.stylePrefix || 'mdl-'; + initModal: function() { + var cfg = this.config.modal, + pfx = cfg.stylePrefix || 'mdl-'; cfg.stylePrefix = this.config.stylePrefix + pfx; - this.modal = new ModalDialog(cfg); + this.modal = new ModalDialog(cfg); this.modal.render().appendTo('body'); this.set('Modal', this.modal); }, /** * Initialize Code Manager + * @private * */ - initCodeManager: function() - { - var cfg = this.config.codeManager, - pfx = cfg.stylePrefix || 'cm-'; + initCodeManager: function() { + var cfg = this.config.codeManager, + pfx = cfg.stylePrefix || 'cm-'; cfg.stylePrefix = this.config.stylePrefix + pfx; - this.cm = new CodeManager(cfg); + this.cm = new CodeManager(cfg); this.CodeManager = this.cm; this.cm.loadDefaultGenerators().loadDefaultViewers(); this.set('CodeManager', this.cm); @@ -280,39 +284,39 @@ define([ /** * Initialize Commands + * @private * */ - initCommands: function() - { - var cfg = this.config.commands, - pfx = cfg.stylePrefix || 'com-'; + initCommands: function() { + var cfg = this.config.commands, + pfx = cfg.stylePrefix || 'com-'; cfg.stylePrefix = this.config.stylePrefix + pfx; - cfg.em = this; - cfg.canvasId = this.config.idCanvas; - cfg.wrapperId = this.config.idWrapper; - this.com = new Commands(cfg); + cfg.em = this; + cfg.canvasId = this.config.idCanvas; + cfg.wrapperId = this.config.idWrapper; + this.com = new Commands(cfg); this.com.loadDefaultCommands(); this.set('Commands', this.com); }, /** * Initialize Panels + * @private * */ - initPanels: function() - { - var cfg = this.config.panels, - pfx = cfg.stylePrefix || 'pn-'; + initPanels: function() { + var cfg = this.config.panels, + pfx = cfg.stylePrefix || 'pn-'; cfg.stylePrefix = this.config.stylePrefix + pfx; - cfg.em = this; - this.pn = new Panels(cfg); + cfg.em = this; + this.pn = new Panels(cfg); this.pn.addPanel({ id: 'views-container'}); this.set('Panels', this.pn); }, /** * Initialize Undo manager + * @private * */ - initUndoManager: function() - { + initUndoManager: function() { if(this.um) return; if(this.cmp && this.config.undoManager){ @@ -363,8 +367,7 @@ define([ * @param {Mixed} val Value * @param {Object} opt Options * */ - componentsUpdated: function(model, val, opt) - { + componentsUpdated: function(model, val, opt){ var updatedCount = this.get('changesCount') + 1, avSt = opt ? opt.avoidStore : 0; this.set('changesCount', updatedCount); @@ -385,8 +388,7 @@ define([ * @param {Object} Options * * */ - componentSelected: function(model, val, options) - { + componentSelected: function(model, val, options){ if(!this.get('selectedComponent')) this.trigger('deselect-comp'); else @@ -406,12 +408,9 @@ define([ try{ comps = JSON.parse(result.components); }catch(err){} - }else if(result.html){ + }else if(result.html) comps = result.html; - } - console.log('loadComponents'); - console.log(comps); return comps; }, @@ -421,39 +420,34 @@ define([ * @return void * */ storeComponents: function() { - /*var wrp = this.cmp.getComponent(); - if(wrp && this.cm){ - var res = this.cm.getCode(wrp, 'json'); - this.stm.store(this.compName, JSON.stringify(res)); - }*/ this.store(); }, /** * Load rules from storage - * - * @return {Array} + * @return {Array} + * @private * */ - loadRules: function(){ - var result; - try{ - var r = this.stm.load(this.rulesName); - if(r) - result = JSON.parse(r); - }catch(err){ - //console.warn("Load '" + this.rulesName + "':Error encountered while parsing JSON response"); - } - return result; + loadRules: function() { + var comps = ''; + var result = this.getCacheLoad(); + + if(result.style){ + try{ + comps = JSON.parse(result.style); + }catch(err){} + }else if(result.css) + comps = this.Parser.parseCss(result.css); + + return comps; }, /** * Save rules to storage + * @private * */ storeRules: function() { - var rules = this.cssc.getRules(); - - if(rules) - this.stm.store(this.rulesName, JSON.stringify(rules)); + this.store(); }, /** @@ -549,6 +543,7 @@ define([ * @return {this} */ setStyle: function(style){ + //return this.CssComposer.setStyle(style); return this; }, @@ -627,14 +622,6 @@ define([ var result = this.getCacheLoad(1); var comps = []; - if(result.components){ - try{ - comps = JSON.parse(result.components); - }catch(err){} - }else if(result.html){ - comps = result.html; - } - console.log(result); //this.setComponents(comps); },