mirror of https://github.com/artf/grapesjs.git
tangkikodo
9 years ago
16 changed files with 338 additions and 230 deletions
File diff suppressed because one or more lines are too long
@ -1,145 +1,149 @@ |
|||||
define(['backbone'], |
define(['backbone'], |
||||
function (Backbone) { |
function (Backbone) { |
||||
/** |
/** |
||||
* @class CssGenerator |
* @class CssGenerator |
||||
* */ |
* */ |
||||
return Backbone.Model.extend({ |
return Backbone.Model.extend({ |
||||
|
|
||||
initialize: function() { |
initialize: function() { |
||||
this.compCls = []; |
this.compCls = []; |
||||
}, |
}, |
||||
|
|
||||
/** |
/** |
||||
* Get CSS from component |
* Get CSS from component |
||||
* @param {Model} model |
* @param {Model} model |
||||
* @return {String} |
* @return {String} |
||||
*/ |
*/ |
||||
buildFromModel: function (model) { |
buildFromModel: function (model) { |
||||
var code = ''; |
var code = ''; |
||||
var style = model.get('style'); |
var style = model.get('style'); |
||||
var classes = model.get('classes'); |
var classes = model.get('classes'); |
||||
|
|
||||
// Let's know what classes I've found
|
// Let's know what classes I've found
|
||||
if(classes) { |
if(classes) { |
||||
classes.each(function(model){ |
classes.each(function(model){ |
||||
this.compCls.push(model.get('name')); |
this.compCls.push(model.get('name')); |
||||
}, this); |
}, this); |
||||
} |
} |
||||
|
|
||||
if(style && Object.keys(style).length !== 0) { |
if(style && Object.keys(style).length !== 0) { |
||||
code += '#' + model.cid + '{'; |
code += '#' + model.cid + '{'; |
||||
for(var prop in style){ |
for(var prop in style){ |
||||
if(style.hasOwnProperty(prop)) |
if(style.hasOwnProperty(prop)) |
||||
code += prop + ':' + style[prop] + ';'; |
code += prop + ':' + style[prop] + ';'; |
||||
} |
} |
||||
code += '}'; |
code += '}'; |
||||
} |
} |
||||
|
|
||||
return code; |
return code; |
||||
}, |
}, |
||||
|
|
||||
/** |
/** |
||||
* Get CSS from components |
* Get CSS from components |
||||
* @param {Model} model |
* @param {Model} model |
||||
* @return {String} |
* @return {String} |
||||
*/ |
*/ |
||||
buildFromComp: function(model) { |
buildFromComp: function(model) { |
||||
var coll = model.get('components') || model, |
var coll = model.get('components') || model, |
||||
code = ''; |
code = ''; |
||||
|
|
||||
coll.each(function(m) { |
coll.each(function(m) { |
||||
var cln = m.get('components'); |
var cln = m.get('components'); |
||||
code += this.buildFromModel(m); |
code += this.buildFromModel(m); |
||||
|
|
||||
if(cln.length){ |
if(cln.length){ |
||||
code += this.buildFromComp(cln); |
code += this.buildFromComp(cln); |
||||
} |
} |
||||
|
|
||||
}, this); |
}, this); |
||||
|
|
||||
return code; |
return code; |
||||
}, |
}, |
||||
|
|
||||
/** @inheritdoc */ |
/** @inheritdoc */ |
||||
build: function(model, cssc) { |
build: function(model, cssc) { |
||||
this.compCls = []; |
this.compCls = []; |
||||
var code = this.buildFromModel(model); |
var code = this.buildFromModel(model); |
||||
code += this.buildFromComp(model); |
code += this.buildFromComp(model); |
||||
var compCls = this.compCls; |
var compCls = this.compCls; |
||||
|
|
||||
if(cssc){ |
if(cssc){ |
||||
var rules = cssc.getAll(); |
var rules = cssc.getAll(); |
||||
var mediaRules = {}; |
var mediaRules = {}; |
||||
rules.each(function(rule){ |
rules.each(function(rule){ |
||||
var width = rule.get('maxWidth'); |
var width = rule.get('maxWidth'); |
||||
|
|
||||
// If width setted will render it later
|
// If width setted will render it later
|
||||
if(width){ |
if(width){ |
||||
var mRule = mediaRules[width]; |
var mRule = mediaRules[width]; |
||||
if(mRule) |
if(mRule) |
||||
mRule.push(rule); |
mRule.push(rule); |
||||
else |
else |
||||
mediaRules[width] = [rule]; |
mediaRules[width] = [rule]; |
||||
return; |
return; |
||||
} |
} |
||||
|
|
||||
code += this.buildFromRule(rule); |
code += this.buildFromRule(rule); |
||||
}, this); |
}, this); |
||||
|
|
||||
// Get media rules
|
// Get media rules
|
||||
for (var ruleW in mediaRules) { |
for (var ruleW in mediaRules) { |
||||
var meRules = mediaRules[ruleW]; |
var meRules = mediaRules[ruleW]; |
||||
var ruleC = ''; |
var ruleC = ''; |
||||
for(var i = 0, len = meRules.length; i < len; i++){ |
for(var i = 0, len = meRules.length; i < len; i++){ |
||||
ruleC += this.buildFromRule(meRules[i]); |
ruleC += this.buildFromRule(meRules[i]); |
||||
} |
} |
||||
if(ruleC) |
if(ruleC) |
||||
code += '@media (max-width: ' + ruleW + '){' + ruleC + '}'; |
code += '@media (max-width: ' + ruleW + '){' + ruleC + '}'; |
||||
} |
} |
||||
|
|
||||
} |
} |
||||
return code; |
return code; |
||||
}, |
}, |
||||
|
|
||||
/** |
/** |
||||
* Get CSS from the rule model |
* Get CSS from the rule model |
||||
* @param {Model} rule |
* @param {Model} rule |
||||
* @return {string} CSS string |
* @return {string} CSS string |
||||
*/ |
*/ |
||||
buildFromRule: function(rule) { |
buildFromRule: function(rule) { |
||||
var result = ''; |
var result = ''; |
||||
var selectors = rule.get('selectors'); |
var selectorsAdd = rule.get('selectorsAdd'); |
||||
var ruleStyle = rule.get('style'); |
var selectors = rule.get('selectors'); |
||||
var state = rule.get('state'); |
var ruleStyle = rule.get('style'); |
||||
var strSel = ''; |
var state = rule.get('state'); |
||||
var found = 0; |
var strSel = ''; |
||||
var compCls = this.compCls; |
var found = 0; |
||||
|
var compCls = this.compCls; |
||||
// Get string of selectors
|
|
||||
selectors.each(function(selector){ |
// Get string of selectors
|
||||
strSel += '.' + selector.get('name'); |
selectors.each(function(selector){ |
||||
if(compCls.indexOf(selector.get('name')) > -1) |
strSel += '.' + selector.get('name'); |
||||
found = 1; |
if(compCls.indexOf(selector.get('name')) > -1) |
||||
}); |
found = 1; |
||||
|
}); |
||||
if(strSel && found){ |
|
||||
strSel += state ? ':' + state : ''; |
// With 'found' will skip rules which selectors are not found in
|
||||
var strStyle = ''; |
// canvas components.
|
||||
|
if ((strSel && found) || selectorsAdd) { |
||||
// Get string of style properties
|
strSel += state ? ':' + state : ''; |
||||
if(ruleStyle && Object.keys(ruleStyle).length !== 0){ |
strSel += selectorsAdd ? (strSel ? ', ' : '') + selectorsAdd : ''; |
||||
for(var prop2 in ruleStyle){ |
var strStyle = ''; |
||||
if(ruleStyle.hasOwnProperty(prop2)) |
|
||||
strStyle += prop2 + ':' + ruleStyle[prop2] + ';'; |
// Get string of style properties
|
||||
} |
if(ruleStyle && Object.keys(ruleStyle).length !== 0){ |
||||
} |
for(var prop2 in ruleStyle){ |
||||
|
if(ruleStyle.hasOwnProperty(prop2)) |
||||
if(strStyle) |
strStyle += prop2 + ':' + ruleStyle[prop2] + ';'; |
||||
result += strSel + '{' + strStyle + '}'; |
} |
||||
} |
} |
||||
|
|
||||
return result; |
if(strStyle) |
||||
}, |
result += strSel + '{' + strStyle + '}'; |
||||
|
} |
||||
}); |
|
||||
|
return result; |
||||
|
}, |
||||
|
|
||||
|
}); |
||||
}); |
}); |
||||
|
|||||
Loading…
Reference in new issue