diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js index d095239d8..450db34bd 100644 --- a/src/code_manager/model/CssGenerator.js +++ b/src/code_manager/model/CssGenerator.js @@ -6,7 +6,7 @@ define(['backbone'], return Backbone.Model.extend({ initialize: function(){ - this.buff = []; + this.compCls = []; }, /** @inheritdoc */ @@ -15,9 +15,11 @@ define(['backbone'], return 'css'; }, - /** @inheritdoc */ - build: function(model, cssc) - { + /** + * Get CSS from components + * @return {String} + */ + buildFromComp: function(model){ var coll = model.get('components') || model, code = ''; @@ -25,47 +27,63 @@ define(['backbone'], var css = m.get('style'), cls = m.get('classes'), cln = m.get('components'); + cls.each(function(m){ + this.compCls.push(m.get('name')); + }, this); - // Get id-relative style if(css && Object.keys(css).length !== 0){ code += '#' + m.cid + '{'; - - for(var prop in css) + for(var prop in css){ if(css.hasOwnProperty(prop)) code += prop + ':' + css[prop] + ';'; - - code += '}'; - } - - if(cssc && cls.length){ - var rule = cssc.getRule(cls.models); - if(rule){ - var selectors = rule.get('selectors'); - var ruleStyle = rule.get('style'); - var strSel = ''; - selectors.each(function(selector){ - strSel += '.' + selector.get('name'); - }); - if(this.buff.indexOf(strSel) < 0){ - this.buff.push(strSel); - code += strSel + '{'; - if(ruleStyle && Object.keys(ruleStyle).length !== 0){ - for(var prop2 in ruleStyle) - if(ruleStyle.hasOwnProperty(prop2)) - code += prop2 + ':' + ruleStyle[prop2] + ';'; - } - code += '}'; - } } + code += '}'; } if(cln.length) - code += this.build(cln, cssc); + code += this.buildFromComp(cln); }, this); return code; }, + /** @inheritdoc */ + build: function(model, cssc) + { + this.compCls = []; + var code = this.buildFromComp(model); + var compCls = this.compCls; + + if(cssc){ + var rules = cssc.getRules(); + rules.each(function(rule){ + var selectors = rule.get('selectors'); + var ruleStyle = rule.get('style'); + var strSel = ''; + var found = 0; + + selectors.each(function(selector){ + strSel += '.' + selector.get('name'); + if(compCls.indexOf(selector.get('name')) > -1) + found = 1; + }); + if(strSel && found){ + var strStyle = ''; + if(ruleStyle && Object.keys(ruleStyle).length !== 0){ + for(var prop2 in ruleStyle){ + if(ruleStyle.hasOwnProperty(prop2)) + strStyle += prop2 + ':' + ruleStyle[prop2] + ';'; + } + } + if(strStyle) + code += strSel + '{' + strStyle + '}'; + } + }); + + } + return code; + }, + }); }); diff --git a/src/commands/view/ExportTemplate.js b/src/commands/view/ExportTemplate.js index a9fecc9b1..4c9c8b4c4 100644 --- a/src/commands/view/ExportTemplate.js +++ b/src/commands/view/ExportTemplate.js @@ -63,7 +63,6 @@ define(function() { } this.htmlEditor.setContent( this.cm.getCode(this.components, 'html') ); - this.cm.getGenerator('css').buff = []; this.cssEditor.setContent( this.cm.getCode(this.components, 'css', this.cssc)); if(this.sender) diff --git a/test/specs/code_manager/model/CodeModels.js b/test/specs/code_manager/model/CodeModels.js index 95370ac23..0a561931e 100644 --- a/test/specs/code_manager/model/CodeModels.js +++ b/test/specs/code_manager/model/CodeModels.js @@ -99,6 +99,41 @@ define([path + 'HtmlGenerator', this.obj.build(comp, cssc).should.equal('.class1{prop1:value1;prop2:value2;}'); }); + + it('Build correctly with more classes', function() { + var comp = new Component(); + var m1 = comp.get('components').add({tagName: 'article'}); + var cls1 = m1.get('classes').add({name: 'class1'}); + var cls2 = m1.get('classes').add({name: 'class2'}); + + var cssc = new CssComposer(); + var rule = cssc.newRule([cls1, cls2]); + rule.set('style',{'prop1':'value1', 'prop2':'value2'}); + cssc.addRule(rule); + + this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;prop2:value2;}'); + this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;prop2:value2;}'); + }); + + it('Build correctly with class styled out', function() { + var comp = new Component(); + var m1 = comp.get('components').add({tagName: 'article'}); + var cls1 = m1.get('classes').add({name: 'class1'}); + var cls2 = m1.get('classes').add({name: 'class2'}); + + var cssc = new CssComposer(); + var rule = cssc.newRule([cls1, cls2]); + rule.set('style',{'prop1':'value1'}); + cssc.addRule(rule); + var rule2 = cssc.newRule(cls2); + rule2.set('style',{'prop2':'value2'}); + cssc.addRule(rule2); + + this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;}.class2{prop2:value2;}'); + }); + it.skip("Avoid useless code", function() { + //create comp with class then remove comp + }); }) } };