Add first support for CSS states

src/class_manager/view/ClassTagsView.js

@@ -99,6 +99,8 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
      */
     componentChanged: function(e){
       this.compTarget = this.target.get('selectedComponent');
+      if(this.compTarget)
+        this.$states.val(this.compTarget.get('state'));
       var models = this.compTarget ? this.compTarget.get('classes').models : [];
       this.collection.reset(models);
       this.updateStateVis();
@@ -116,11 +118,15 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
     },
 
     /**
-     * Triggered when select with states is changed
+     * Triggered when the select with states is changed
      * @param  {Object} e
      */
     stateChanged: function(e){
-      console.log(this.$states.val());
+      if(this.compTarget){
+        this.compTarget.set('state', this.$states.val());
+        if(this.target)
+          this.target.trigger('targetStateUpdated');
+      }
     },
 
     /**

src/commands/view/SelectComponent.js

@@ -111,7 +111,7 @@ define(function() {
 				e.stopPropagation();
 				var md 	= this.editorModel.get('selectedComponent');
 				if(md)
-					md.set('status','');
+					this.cleanPrevious(md);
 				var nMd = $(el).data('model');
 				if(nMd){
 					this.editorModel.set('selectedComponent', nMd);
@@ -178,6 +178,17 @@ define(function() {
 					this.badge.html( model.getName() );
 			},
 
+			/**
+			 * Clean previous model from different states
+			 * @param {Component} model
+			 */
+			cleanPrevious: function(model){
+				model.set({
+					status: '',
+					state: '',
+				});
+			},
+
 			/**
 			 * Run method
 			 * */
@@ -192,7 +203,7 @@ define(function() {
 			stop: function(){
 				var sel 	= this.editorModel.get('selectedComponent');
 				if(sel)
-					sel.set('status','');
+					this.cleanPrevious(sel);
 				this.$el.unbind();												//removes all attached events
 				this.removeBadge();
 				this.clean();

src/css_composer/view/CssRuleView.js

@@ -10,6 +10,7 @@ define(['backbone'],
     initialize: function(o) {
       this.config = o.config || {};
       this.listenTo(this.model, 'change:style', this.render);
+      this.listenTo(this.model, 'change:state', this.render);
     },
 
     /**
@@ -41,13 +42,17 @@ define(['backbone'],
 
     render : function(){
       var block = '',
+          selStr = '';
           o = '';
       if(!this.selStr)
         this.selStr = this.renderSelectors();
       var prpStr = this.renderProperties();
-      if(this.selStr)
+      var stateStr = this.model.get('state');
+      if(this.selStr){
+        stateStr = stateStr ? ':' + stateStr : '';
         block = prpStr !== '' ? '{' + prpStr + '}' : '';
-      o = this.selStr && block ? this.selStr + block : '';
+      }
+      o = this.selStr && block ? this.selStr + stateStr + block : '';
       this.$el.html(o);
       return this;
     },

src/dom_components/model/Component.js

@@ -6,20 +6,21 @@ define(['backbone','./Components', 'ClassManager/model/ClassTags'],
 		return Backbone.Model.extend({
 
 			defaults: {
-				tagName			: 'div',
-				type				: '',
-				editable		: false,
-				removable		: true,
-				movable			: true,
-				droppable		: true,
-				badgable		: true,
-				stylable		: true,
-				copyable		: true,
-				status			: '',
-				previousModel	: '',
-				content			: '',
-				style				: {},
-				attributes	: {},
+				tagName: 'div',
+				type: '',
+				editable: false,
+				removable: true,
+				movable: true,
+				droppable: true,
+				badgable: true,
+				stylable: true,
+				copyable: true,
+				state: '',
+				status: '',
+				previousModel: '',
+				content: '',
+				style: {},
+				attributes: {},
 			},
 
 			initialize: function(o, opt) {

src/style_manager/view/SectorsView.js

@@ -13,7 +13,8 @@ define(['backbone','./SectorView'],
 			// The taget that will emit events for properties
 			this.propTarget	 = {};
 			_.extend(this.propTarget, Backbone.Events);
-			this.listenTo( this.target, 'change:selectedComponent targetClassAdded targetClassRemoved targetClassUpdated', this.targetUpdated);
+			this.listenTo( this.target, 'change:selectedComponent targetClassAdded targetClassRemoved targetClassUpdated ' +
+				'targetStateUpdated', this.targetUpdated);
 
 		},
 
@@ -27,6 +28,7 @@ define(['backbone','./SectorView'],
 				return;
 
 			var classes = el.get('classes');
+			var state = el.get('state');
 			var pt = this.propTarget;
 
 			if(classes.length){
@@ -34,10 +36,10 @@ define(['backbone','./SectorView'],
 				var valid = _.filter(classes.models, function(item){
 					return item.get('active');
 				});
-				var iContainer = cssC.getRule(valid, '', '');
+				var iContainer = cssC.getRule(valid, state, '');
 
 				if(!iContainer){
-					iContainer = cssC.newRule(valid, '', '');
+					iContainer = cssC.newRule(valid, state, '');
 					// Hydrate styles from component element
 					iContainer.set('style', el.get('style'));
 					cssC.addRule(iContainer);

test/specs/css_composer/view/CssRuleView.js

@@ -86,6 +86,19 @@ define([path + 'CssRuleView', 'CssComposer/model/CssRule'],
                 this.regView.$el.html().should.equal('.test1.test2{prop:value;}');
               });
 
+              it('State correctly rendered', function() {
+                this.regView.model.set('style', {'prop':'value'});
+                this.regView.model.set('state', 'hover');
+                this.regView.$el.html().should.equal('.test1.test2:hover{prop:value;}');
+              });
+
+              it('State render changes on update', function() {
+                this.regView.model.set('style', {'prop':'value'});
+                this.regView.model.set('state', 'hover');
+                this.regView.model.set('state', '');
+                this.regView.$el.html().should.equal('.test1.test2{prop:value;}');
+              });
+
               it('Empty on clear', function() {
                 this.regView.model.set('style', {'prop':'value'});
                 this.regView.model.set('style', {});