diff --git a/src/class_manager/view/ClassTagsView.js b/src/class_manager/view/ClassTagsView.js index dab8074cc..5a49cc103 100644 --- a/src/class_manager/view/ClassTagsView.js +++ b/src/class_manager/view/ClassTagsView.js @@ -91,8 +91,14 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'], var model = cm.addClass(name); if(this.compTarget){ - this.compTarget.get('classes').add(model); + var targetCls = this.compTarget.get('classes'); + var lenB = targetCls.length; + targetCls.add(model); + var lenA = targetCls.length; this.collection.add(model); + + if(lenA > lenB) + this.target.trigger('targetClassAdded'); } } this.endNewTag(); diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js index b69387e1e..60a3cb9be 100644 --- a/src/css_composer/model/CssRule.js +++ b/src/css_composer/model/CssRule.js @@ -22,14 +22,14 @@ define(['backbone', './Selectors'], 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)); }, diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 817e972c7..e9c8795bc 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -70,7 +70,10 @@ define([ df = this.loadRules(); pfx = cfg.stylePrefix || 'css-'; cfg.stylePrefix = this.config.stylePrefix + pfx; - cfg.defaults = df; + + if(df) + cfg.defaults = df; + cfg.sm = this; this.cssc = new CssComposer(cfg); this.set('CssComposer', this.cssc); @@ -86,6 +89,9 @@ define([ listenRules: function(collection) { this.stopListening(collection, 'add remove', this.listenRule); this.listenTo(collection, 'add remove', this.listenRule); + collection.each(function(model){ + this.listenRule(model); + }, this); }, /** @@ -400,7 +406,7 @@ define([ * @return {Array} * */ loadRules: function(){ - var result = []; + var result; try{ var r = this.stm.load(this.rulesName); if(r) @@ -416,11 +422,9 @@ define([ * */ storeRules: function() { var rules = this.cssc.getRules(); - if(rules){ - console.log('Store rules'); - console.log(rules); + + if(rules) this.stm.store(this.rulesName, JSON.stringify(rules)); - } }, /** diff --git a/src/style_manager/view/SectorsView.js b/src/style_manager/view/SectorsView.js index 37c7a7ee3..e77a5a1f2 100644 --- a/src/style_manager/view/SectorsView.js +++ b/src/style_manager/view/SectorsView.js @@ -13,7 +13,7 @@ define(['backbone','./SectorView'], // The taget that will emit events for properties this.propTarget = {}; _.extend(this.propTarget, Backbone.Events); - this.listenTo( this.target, 'change:selectedComponent', this.targetUpdated); + this.listenTo( this.target, 'change:selectedComponent targetClassAdded', this.targetUpdated); }, @@ -36,7 +36,6 @@ define(['backbone','./SectorView'], }); var iContainer = cssC.getRule(valid, '', ''); if(!iContainer){ - console.log('Create new one'); iContainer = cssC.newRule(valid, '', ''); // Hydrate styles from component element iContainer.set('style', el.get('style')); diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.js new file mode 100644 index 000000000..5727060a8 --- /dev/null +++ b/test/specs/css_composer/e2e/CssComposer.js @@ -0,0 +1,82 @@ + +define(function(require) { + + return { + run : function(){ + describe('E2E tests', function() { + + before(function () { + this.$fixtures = $("#fixtures"); + this.$fixture = $('
'); + }); + + beforeEach(function () { + this.Grapes = require('editor/main'); + this.gjs = new this.Grapes({ + stylePrefix: '', + storageType: 'none', + storageManager: { storageType: 'none', }, + assetManager: { storageType: 'none', }, + container: 'csscomposer-fixture', + }); + this.cssc = this.gjs.editor.get('CssComposer'); + this.clsm = this.gjs.editor.get('ClassManager'); + this.$fixture.empty().appendTo(this.$fixtures); + this.gjs.render(); + this.rulesSet = [ + { selectors: [{name: 'test1'}, {name: 'test2'}] }, + { selectors: [{name: 'test2'}, {name: 'test3'}] }, + { selectors: [{name: 'test3'}] } + ]; + }); + + afterEach(function () { + delete this.Grapes; + delete this.gjs; + delete this.cssc; + delete this.clsm; + }); + + after(function () { + this.$fixture.remove(); + }); + + it('Rules are correctly imported from default property', function() { + var gj = new this.Grapes({ + stylePrefix: '', + storageType: 'none', + storageManager: { storageType: 'none', }, + assetManager: { storageType: 'none', }, + cssComposer: { defaults: this.rulesSet}, + container: 'csscomposer-fixture', + }); + var cssc = gj.editor.get('CssComposer'); + cssc.getRules().length.should.equal(this.rulesSet.length); + var cls = gj.editor.get('ClassManager').getClasses(); + cls.length.should.equal(3); + }); + + + it('New rule adds correctly the class inside classe manager', function() { + var rules = this.cssc.getRules(); + rules.add({ selectors: [{name: 'test1'}] }); + this.clsm.getClasses().at(0).get('name').should.equal('test1'); + }); + + it('New rules are correctly imported inside classe manager', function() { + var rules = this.cssc.getRules(); + this.rulesSet.forEach(function(item){ + rules.add(item); + }); + var cls = this.clsm.getClasses(); + cls.length.should.equal(3); + cls.at(0).get('name').should.equal('test1'); + cls.at(1).get('name').should.equal('test2'); + cls.at(2).get('name').should.equal('test3'); + }); + + }); + } + }; + +}); \ No newline at end of file diff --git a/test/specs/css_composer/main.js b/test/specs/css_composer/main.js index 13feafd0e..e081e056c 100644 --- a/test/specs/css_composer/main.js +++ b/test/specs/css_composer/main.js @@ -4,13 +4,15 @@ define([ 'CssComposer', modulePath + '/model/CssModels', modulePath + '/view/CssRuleView', - modulePath + '/view/CssRulesView' + modulePath + '/view/CssRulesView', + modulePath + '/e2e/CssComposer' ], function( CssComposer, Models, CssRuleView, - CssRulesView + CssRulesView, + e2e ) { describe('Css Composer', function() { @@ -135,6 +137,7 @@ define([ Models.run(); CssRuleView.run(); CssRulesView.run(); + e2e.run(); }); }); \ No newline at end of file