Start removing IDs and refactor Editor

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;
                 }
 

src/dom_components/config/config.js

@@ -15,7 +15,7 @@ define(function () {
 		},
 
 		// Could be used for default components
-		defaults		: [],
+		components: [],
 
 		rte					: {},
 

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();

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);
+				}
+      },
+
 		});
 });

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();
+				df = this.loadRules();
-						pfx	= cfg.stylePrefix || 'css-';
+				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()
+			initCanvas: function() {
-			{
+				var cfg = this.config.canvas,
-				var cfg				= this.config.canvas,
+				pfx = cfg.stylePrefix || 'cv-';
-					pfx				= cfg.stylePrefix || 'cv-';
+				cfg.stylePrefix	= this.config.stylePrefix + pfx;
-					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()
+			initRichTextEditor: function() {
-			{
+				var cfg = this.config.rte,
-				var cfg			= this.config.rte,
+				rteStylePfx	= cfg.stylePrefix || '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()
+			initModal: function() {
-			{
+				var cfg = this.config.modal,
-				var cfg			= this.config.modal,
+				pfx = cfg.stylePrefix || 'mdl-';
-					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()
+			initCodeManager: function() {
-			{
+				var cfg = this.config.codeManager,
-				var cfg			= this.config.codeManager,
+				pfx = cfg.stylePrefix || 'cm-';
-					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()
+			initCommands: function() {
-			{
+				var cfg = this.config.commands,
-				var cfg			= this.config.commands,
+					pfx = cfg.stylePrefix || 'com-';
-					pfx			= cfg.stylePrefix || 'com-';
 				cfg.stylePrefix = this.config.stylePrefix + pfx;
-				cfg.em			= this;
+				cfg.em = this;
-				cfg.canvasId	= this.config.idCanvas;
+				cfg.canvasId = this.config.idCanvas;
-				cfg.wrapperId	= this.config.idWrapper;
+				cfg.wrapperId = this.config.idWrapper;
-				this.com		= new Commands(cfg);
+				this.com = new Commands(cfg);
 				this.com.loadDefaultCommands();
 				this.set('Commands', this.com);
 			},
 
 			/**
 			 * Initialize Panels
+			 * @private
 			 * */
-			initPanels: function()
+			initPanels: function() {
-			{
+				var cfg = this.config.panels,
-				var cfg			= this.config.panels,
+					pfx = cfg.stylePrefix || 'pn-';
-					pfx			= cfg.stylePrefix || 'pn-';
 				cfg.stylePrefix = this.config.stylePrefix + pfx;
-				cfg.em			= this;
+				cfg.em = this;
-				this.pn			= new Panels(cfg);
+				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<Object>}
-			 * @return	{Array}
+			 * @private
 			 * */
-			loadRules: function(){
+			loadRules: function() {
-				var result;
+				var comps = '';
-				try{
+				var result = this.getCacheLoad();
-					var r = this.stm.load(this.rulesName);
+
-					if(r)
+				if(result.style){
-						result	=  JSON.parse(r);
+					try{
-				}catch(err){
+						comps	=  JSON.parse(result.style);
-					//console.warn("Load '" + this.rulesName + "':Error encountered while parsing JSON response");
+					}catch(err){}
-				}
+				}else if(result.css)
-				return result;
+					comps = this.Parser.parseCss(result.css);
+
+				return comps;
 			},
 
 			/**
 			 * Save rules to storage
+			 * @private
 			 * */
 			storeRules: function() {
-				var rules	= this.cssc.getRules();
+				this.store();
-
-				if(rules)
-					this.stm.store(this.rulesName, JSON.stringify(rules));
 			},
 
 			/**
@@ -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);
 			},