Update Css Composer

src/class_manager/config/config.js

@@ -5,7 +5,7 @@ define(function () {
     stylePrefix     : 'clm-',
 
     // Default classes
-    classes : [],
+    defaults : [],
 
     // Label for classes
     label: 'Classes',

src/class_manager/main.js

@@ -16,7 +16,7 @@ define(function(require) {
         c[name] = def[name];
     }
 
-    this.classes = new this.ClassTags(c.classes);
+    this.classes = new this.ClassTags(c.defaults);
     this.config = c;
   };
 

src/css_composer/config/config.js

@@ -4,8 +4,11 @@ define(function () {
     // Style prefix
     stylePrefix: 'css-',
 
+    // Custom CSS string to render on top
+    'staticRules': '',
+
     // Default CSS style
-    'default': '',
+    'defaults': [],
 
 	};
 });

src/css_composer/main.js

@@ -18,7 +18,7 @@ define(function(require) {
         c[name] = def[name];
     }
 
-    var rules = new CssRules([]),
+    var rules = new CssRules(c.defaults, c),
     rulesView = new CssRulesView({
       collection: rules,
       config: c,

src/css_composer/model/CssRule.js

@@ -20,7 +20,16 @@ define(['backbone', './Selectors'],
 
             initialize: function(c, opt) {
                 this.config   = c || {};
+                this.sm = opt ? opt.sm || {} : {};
                 this.slct = this.config.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));
+                    //console.log(this.sm.get('ClassManager').getClasses());
+                    console.log(slct);
+                    this.slct = slct;
+                }
                 this.set('selectors', new Selectors(this.slct));
             },
 

src/css_composer/model/CssRules.js

@@ -5,7 +5,23 @@ define(['backbone','./CssRule'],
      * */
     return Backbone.Collection.extend({
 
-      model:  CssRule,
+      initialize: function(models, opt){
+
+        this.model  = function(attrs, options) {
+          var model;
+
+          if(!options.sm && opt && opt.sm)
+            options.sm = opt.sm;
+
+          switch(1){
+            default:
+              model = new CssRule(attrs, options);
+          }
+
+          return  model;
+        };
+
+      },
 
     });
 });

src/css_composer/view/CssRulesView.js

@@ -7,7 +7,8 @@ define(['backbone','./CssRuleView'],
 
     initialize: function(o) {
       this.config = o.config || {};
-      this.pfx = this.config.stylePrefix;
+      this.pfx = this.config.stylePrefix || '';
+      this.className = this.pfx + 'rules';
       this.listenTo( this.collection, 'add', this.addTo );
       this.listenTo( this.collection, 'reset', this.render );
     },
@@ -55,6 +56,7 @@ define(['backbone','./CssRuleView'],
       }, this);
 
       this.$el.append(fragment);
+      this.$el.attr('class', this.className);
       return this;
     }
   });

src/editor/model/Editor.js

@@ -41,11 +41,13 @@ define([
 			initialize: function(c)
 			{
 				this.config		= c;
-				this.compName	= this.config.storagePrefix + 'components' + this.config.id;
+				this.pfx = this.config.storagePrefix;
+				this.compName	= this.pfx + 'components' + this.config.id;
+				this.rulesName	= this.pfx + 'rules' + this.config.id;
 				this.set('Config', c);
 
-				this.initClassManager();
 				this.initStorage();
+				this.initClassManager();
 				this.initModal();
 				this.initAssetManager();
 				this.initCodeManager();
@@ -63,19 +65,62 @@ define([
 			/**
 			 * Initialize Css Composer
 			 * */
-			initCssComposer: function()
-			{
+			initCssComposer: function() {
 				var cfg = this.config.cssComposer,
+						df = this.loadRules();
 						pfx	= cfg.stylePrefix || 'css-';
 				cfg.stylePrefix	= this.config.stylePrefix + pfx;
-				this.set('CssComposer', new CssComposer(cfg));
+				cfg.defaults = df;
+				cfg.sm = this;
+				this.cssc = new CssComposer(cfg);
+				this.set('CssComposer', this.cssc);
+
+				if(this.stm.isAutosave())
+					this.listenRules(this.cssc.getRules());
+			},
+
+			/**
+			 * Listen for new rules
+			 * @param {Object} collection
+			 */
+			listenRules: function(collection) {
+				this.stopListening(collection, 'add remove', this.listenRule);
+				this.listenTo(collection, 'add remove', this.listenRule);
+			},
+
+			/**
+			 * Listen for rule changes
+			 * @param {Object} model
+			 */
+			listenRule: function(model) {
+				this.stopListening(model, 'change:style', this.ruleUpdated);
+				this.listenTo(model, 'change:style', this.ruleUpdated);
+			},
+
+			/**
+			 * Triggered when rule is updated
+			 * @param	{Object}	model
+			 * @param	{Mixed}		val	Value
+			 * @param	{Object}	opt	Options
+			 * */
+			ruleUpdated: function(model, val, opt) {
+				var count = this.get('changesCount') + 1,
+						avSt	= opt ? opt.avoidStore : 0;
+				this.set('changesCount', count);
+
+				if(this.stm.isAutosave() && count < this.stm.getChangesBeforeSave())
+					return;
+
+				if(!avSt){
+					this.storeRules();
+					this.set('changesCount', 0);
+				}
 			},
 
 			/**
 			 * Initialize Class manager
 			 * */
-			initClassManager: function()
-			{
+			initClassManager: function() {
 				var cfg = this.config.classManager,
 						pfx	= cfg.stylePrefix || 'clm-';
 				cfg.stylePrefix	= this.config.stylePrefix + pfx;
@@ -324,7 +369,7 @@ define([
 			 *
 			 * @return	{Object}
 			 * */
-			loadComponents: function(){
+			loadComponents: function() {
 				var result = null;
 				try{
 					var r = this.stm.load(this.compName);
@@ -341,7 +386,7 @@ define([
 			 *
 			 * @return void
 			 * */
-			storeComponents: function(){
+			storeComponents: function() {
 				var wrp	= this.cmp.getComponent();
 				if(wrp && this.cm){
 					var res	= this.cm.getCode(wrp, 'json');
@@ -349,6 +394,35 @@ define([
 				}
 			},
 
+			/**
+			 * Load rules from storage
+			 *
+			 * @return	{Array}
+			 * */
+			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;
+			},
+
+			/**
+			 * Save rules to storage
+			 * */
+			storeRules: function() {
+				var rules	= this.cssc.getRules();
+				if(rules){
+					console.log('Store rules');
+					console.log(rules);
+					this.stm.store(this.rulesName, JSON.stringify(rules));
+				}
+			},
+
 			/**
 			 * Triggered when components are updated
 			 * @param	{Object}	model
@@ -356,7 +430,7 @@ define([
 			 * @param	{Object}	opt	Options
 			 *
 			 * */
-			updateComponents: function(model, val, opt){
+			updateComponents: function(model, val, opt) {
 				var comps	= model.get('components'),
 						classes	= model.get('classes'),
 						avSt	= opt ? opt.avoidStore : 0;
@@ -365,7 +439,7 @@ define([
 				if(this.um)
 					this.um.register(comps);
 
-				// Call stopListening for not creating nested listenings
+				// Call stopListening for not creating nested listeners
 				this.stopListening(comps, 'add', this.updateComponents);
 				this.stopListening(comps, 'remove', this.rmComponents);
 				this.listenTo(comps, 'add', this.updateComponents);
@@ -386,8 +460,7 @@ define([
 			 * Init stuff like storage for already existing elements
 			 * @param {Object}	model
 			 */
-			initChildrenComp: function(model)
-			{
+			initChildrenComp: function(model) {
 					var comps	= model.get('components');
 					if(comps.length){
 						comps.each(function(md){

src/style_manager/view/SectorsView.js

@@ -34,9 +34,10 @@ define(['backbone','./SectorView'],
 				var valid = _.filter(classes.models, function(item){
 					return item.get('active');
 				});
-				var iContainer = cssC.getRule(valid, 'status', 'mediaq');
+				var iContainer = cssC.getRule(valid, '', '');
 				if(!iContainer){
-					iContainer = cssC.newRule(valid, 'status', 'mediaq');
+					console.log('Create new one');
+					iContainer = cssC.newRule(valid, '', '');
 					// Hydrate styles from component element
 					iContainer.set('style', el.get('style'));
 					cssC.addRule(iContainer);

test/specs/class_manager/main.js

@@ -37,7 +37,7 @@ define([
 
 				it('Able to add default classes', function() {
 					var cm = new ClassManager({
-						classes: ['test1', 'test2', 'test3'],
+						defaults: ['test1', 'test2', 'test3'],
 					});
 					cm.getClasses().length.should.equal(3);
 				});