From 3acd2930abd52578d51ddf29740154c400546055 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 13 Nov 2017 02:00:35 +0100 Subject: [PATCH] Refactor methods in CssGenerator --- src/code_manager/index.js | 1 + src/code_manager/model/CssGenerator.js | 131 +++++++------------- src/css_composer/model/CssRule.js | 27 ++-- src/domain_abstract/model/Styleable.js | 4 +- test/specs/code_manager/model/CodeModels.js | 2 +- 5 files changed, 68 insertions(+), 97 deletions(-) diff --git a/src/code_manager/index.js b/src/code_manager/index.js index 578d394c8..32beeada4 100644 --- a/src/code_manager/index.js +++ b/src/code_manager/index.js @@ -182,6 +182,7 @@ module.exports = () => { * var codeStr = codeManager.getCode(model, 'html'); * */ getCode(model, genId, opt = {}) { + opt.em = c.em; var generator = this.getGenerator(genId); return generator ? generator.build(model, opt) : ''; }, diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js index 496ffa5c1..f05193958 100644 --- a/src/code_manager/model/CssGenerator.js +++ b/src/code_manager/model/CssGenerator.js @@ -1,92 +1,65 @@ -var Backbone = require('backbone'); +import { keys } from 'underscore'; -module.exports = Backbone.Model.extend({ +module.exports = require('backbone').Model.extend({ initialize() { this.compCls = []; + this.ids = []; }, /** - * Get CSS from component + * Get CSS from a component * @param {Model} model * @return {String} */ buildFromModel(model, opts = {}) { - var code = ''; - var style = model.get('style'); - var classes = model.get('classes'); + let code = ''; + const style = model.get('style'); + const classes = model.get('classes'); const wrappesIsBody = opts.wrappesIsBody; + this.ids.push(model.getId()); // Let's know what classes I've found - if(classes) { - classes.each(function(model){ - this.compCls.push(model.get('name')); - }, this); - } + classes.each(model => this.compCls.push(model.getFullName())); - if(style && Object.keys(style).length !== 0) { + if (style && keys(style).length) { let selector = `#${model.getId()}`; - selector = wrappesIsBody && model.get('wrapper') ? - 'body' : selector; - code += `${selector}{`; - for(var prop in style){ - if(style.hasOwnProperty(prop)) - code += prop + ':' + style[prop] + ';'; - } - code += '}'; + selector = wrappesIsBody && model.get('wrapper') ? 'body' : selector; + code = `${selector}{${model.styleToString()}}`; } + const components = model.components(); + components.each(model => code += this.buildFromModel(model, opts)); return code; }, - /** - * Get CSS from components - * @param {Model} model - * @return {String} - */ - buildFromComp(model) { - var coll = model.get('components') || model, - code = ''; - - coll.each(function(m) { - var cln = m.get('components'); - code += this.buildFromModel(m); - - if(cln.length){ - code += this.buildFromComp(cln); - } - - }, this); - return code; - }, - - /** @inheritdoc */ build(model, opts = {}) { const cssc = opts.cssc; this.compCls = []; + this.ids = []; var code = this.buildFromModel(model, opts); - code += this.buildFromComp(model); - var compCls = this.compCls; if (cssc) { - var rules = cssc.getAll(); - var mediaRules = {}; - rules.each(function(rule) { - var width = rule.get('mediaText'); - - // If width setted will render it later - if(width){ - var mRule = mediaRules[width]; - if(mRule) - mRule.push(rule); - else - mediaRules[width] = [rule]; + const rules = cssc.getAll(); + const mediaRules = {}; + + rules.each(rule => { + const media = rule.get('mediaText'); + + // If media is setted, I'll render it later + if (media) { + const mRules = mediaRules[media]; + if (mRules) { + mRules.push(rule); + } else { + mediaRules[media] = [rule]; + } return; } code += this.buildFromRule(rule); - }, this); + }); // Get media rules for (var ruleW in mediaRules) { @@ -102,6 +75,7 @@ module.exports = Backbone.Model.extend({ } } + return code; }, @@ -111,39 +85,24 @@ module.exports = Backbone.Model.extend({ * @return {string} CSS string */ buildFromRule(rule) { - var result = ''; - var selectorsAdd = rule.get('selectorsAdd'); - var selectors = rule.get('selectors'); - var ruleStyle = rule.get('style'); - var state = rule.get('state'); - var strSel = ''; - var found = 0; - var compCls = this.compCls; - - // Get string of selectors - selectors.each(selector => { - strSel += '.' + selector.get('name'); - if(compCls.indexOf(selector.get('name')) > -1) + let result = ''; + const selectorStr = rule.selectorsToString(); + const selectorStrNoAdd = rule.selectorsToString({skipAdd: 1}); + let found; + + // This will not render a rule if there is no its component + rule.get('selectors').each(selector => { + if (this.compCls.indexOf(selector.getFullName()) >= 0) { found = 1; + } }); - // With 'found' will skip rules which selectors are not found in - // canvas components. - if ((strSel && found) || selectorsAdd) { - strSel += state ? ':' + state : ''; - strSel += selectorsAdd ? (strSel ? ', ' : '') + selectorsAdd : ''; - var strStyle = ''; - - // Get string of style properties - if(ruleStyle && Object.keys(ruleStyle).length !== 0){ - for(var prop2 in ruleStyle){ - if(ruleStyle.hasOwnProperty(prop2)) - strStyle += prop2 + ':' + ruleStyle[prop2] + ';'; - } - } + if ((selectorStrNoAdd && found) || rule.get('selectorsAdd')) { + const style = rule.styleToString(); - if(strStyle) - result += strSel + '{' + strStyle + '}'; + if (style) { + result += `${selectorStr}{${style}}`; + } } return result; diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js index fcc17f74e..b02fb1f67 100644 --- a/src/css_composer/model/CssRule.js +++ b/src/css_composer/model/CssRule.js @@ -45,23 +45,34 @@ module.exports = Backbone.Model.extend(Styleable).extend({ }, + /** + * Return selectors fo the rule as a string + * @return {string} + */ + selectorsToString(opts = {}) { + const result = []; + const state = this.get('state'); + const addSelector = this.get('selectorsAdd'); + const selectors = this.get('selectors').getFullString(); + const stateStr = state ? `:${state}` : ''; + selectors && result.push(`${selectors}${stateStr}`); + addSelector && !opts.skipAdd && result.push(addSelector); + return result.join(', '); + }, + + /** * Returns CSS string of the rule * @return {string} */ toCSS() { let result = ''; - let sels = []; - const state = this.get('state'); const media = this.get('mediaText'); const style = this.styleToString(); - const addSelector = this.get('selectorsAdd'); - const selectors = this.get('selectors').getFullString(); - selectors && sels.push(selectors); - addSelector && sels.push(addSelector); + const selectors = this.selectorsToString(); - if (style && sels.length) { - result = `${sels.join(',')} {${style}}`; + if (selectors && style) { + result = `${selectors} {${style}}`; } if (media && result) { diff --git a/src/domain_abstract/model/Styleable.js b/src/domain_abstract/model/Styleable.js index 28a4508cc..eaa6df2c5 100644 --- a/src/domain_abstract/model/Styleable.js +++ b/src/domain_abstract/model/Styleable.js @@ -87,9 +87,9 @@ export default { const style = this.getStyle(); for (let prop in style) { - result.push(`${prop}:${style[prop]}`); + result.push(`${prop}:${style[prop]};`); } - return result.join(';'); + return result.join(''); }, } diff --git a/test/specs/code_manager/model/CodeModels.js b/test/specs/code_manager/model/CodeModels.js index ebddfd62a..43f0b5f57 100644 --- a/test/specs/code_manager/model/CodeModels.js +++ b/test/specs/code_manager/model/CodeModels.js @@ -58,7 +58,7 @@ module.exports = { }); }); - describe('CssGenerator', () => { + describe.only('CssGenerator', () => { var newCssComp = () => new CssComposer().init(); beforeEach(() => { obj = new CssGenerator();