mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
10 years ago
11 changed files with 299 additions and 87 deletions
@ -1,44 +1,71 @@ |
|||
define(['backbone'], |
|||
define(['backbone'], |
|||
function (Backbone) { |
|||
/** |
|||
* @class CssGenerator |
|||
* */ |
|||
return Backbone.Model.extend({ |
|||
|
|||
|
|||
initialize: function(){ |
|||
this.buff = []; |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
getId : function() |
|||
{ |
|||
return 'css'; |
|||
return 'css'; |
|||
}, |
|||
|
|||
|
|||
/** @inheritdoc */ |
|||
build: function(model) |
|||
build: function(model, cssc) |
|||
{ |
|||
|
|||
var coll = model.get('components') || model, |
|||
code = ''; |
|||
|
|||
|
|||
coll.each(function(m){ |
|||
var css = m.get('style'), |
|||
cln = m.get('components'); // Children
|
|||
|
|||
var css = m.get('style'), |
|||
cls = m.get('classes'), |
|||
cln = m.get('components'); |
|||
|
|||
// Get id-relative style
|
|||
if(css && Object.keys(css).length !== 0){ |
|||
code += '#' + m.cid + '{'; |
|||
|
|||
|
|||
for(var prop in css) |
|||
if(css.hasOwnProperty(prop)) |
|||
code += prop + ': ' + css[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 += '}'; |
|||
} |
|||
} |
|||
} |
|||
|
|||
if(cln.length) |
|||
code += this.build(cln); |
|||
|
|||
code += this.build(cln, cssc); |
|||
|
|||
}, this); |
|||
|
|||
|
|||
return code; |
|||
}, |
|||
|
|||
|
|||
}); |
|||
}); |
|||
|
|||
@ -0,0 +1,39 @@ |
|||
var modulePath = './../../../test/specs/code_manager'; |
|||
|
|||
define([ |
|||
'CodeManager', |
|||
modulePath + '/model/CodeModels', |
|||
//modulePath + '/view/ClassTagView',
|
|||
//modulePath + '/view/ClassTagsView',
|
|||
//modulePath + '/e2e/ClassManager'
|
|||
], |
|||
function( |
|||
CodeManager, |
|||
Models |
|||
) { |
|||
|
|||
describe('Code Manager', function() { |
|||
|
|||
describe('Main', function() { |
|||
|
|||
beforeEach(function () { |
|||
this.obj = new CodeManager(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete this.obj; |
|||
}); |
|||
|
|||
it('Object exists', function() { |
|||
CodeManager.should.be.exist; |
|||
}); |
|||
|
|||
}); |
|||
|
|||
Models.run(); |
|||
//ClassTagView.run();
|
|||
//ClassTagsView.run();
|
|||
//e2e.run();
|
|||
|
|||
}); |
|||
}); |
|||
@ -0,0 +1,106 @@ |
|||
var path = 'CodeManager/model/'; |
|||
define([path + 'HtmlGenerator', |
|||
path + 'CssGenerator', |
|||
'DomComponents/model/Component', |
|||
'CssComposer'], |
|||
function(HtmlGenerator, CssGenerator, Component, CssComposer) { |
|||
|
|||
return { |
|||
run : function(){ |
|||
describe('HtmlGenerator', function() { |
|||
beforeEach(function () { |
|||
this.obj = new HtmlGenerator(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete this.obj; |
|||
}); |
|||
|
|||
it('Build correctly one component', function() { |
|||
var comp = new Component(); |
|||
this.obj.build(comp).should.equal(''); |
|||
}); |
|||
|
|||
it('Build correctly empty component inside', function() { |
|||
var comp = new Component(); |
|||
var m1 = comp.get('components').add({}); |
|||
this.obj.build(comp).should.equal('<div></div>'); |
|||
}); |
|||
|
|||
it('Build correctly not empty component inside', function() { |
|||
var comp = new Component(); |
|||
var m1 = comp.get('components').add({ |
|||
tagName: 'article', |
|||
attributes: { |
|||
'data-test1': 'value1', |
|||
'data-test2': 'value2' |
|||
} |
|||
}); |
|||
this.obj.build(comp).should.equal('<article data-test1="value1" data-test2="value2"></article>'); |
|||
}); |
|||
|
|||
it('Build correctly component with classes', function() { |
|||
var comp = new Component(); |
|||
var m1 = comp.get('components').add({ |
|||
tagName: 'article', |
|||
attributes: { |
|||
'data-test1': 'value1', |
|||
'data-test2': 'value2' |
|||
} |
|||
}); |
|||
['class1', 'class2'].forEach(function(item){ |
|||
m1.get('classes').add({name: item}); |
|||
}); |
|||
this.obj.build(comp).should.equal('<article class="class1 class2" data-test1="value1" data-test2="value2"></article>'); |
|||
}); |
|||
}); |
|||
|
|||
describe('CssGenerator', function() { |
|||
beforeEach(function () { |
|||
this.obj = new CssGenerator(); |
|||
}); |
|||
|
|||
afterEach(function () { |
|||
delete this.obj; |
|||
}); |
|||
|
|||
it('Build correctly one component', function() { |
|||
var comp = new Component(); |
|||
this.obj.build(comp).should.equal(''); |
|||
}); |
|||
|
|||
it('Build correctly empty component inside', function() { |
|||
var comp = new Component(); |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
this.obj.build(comp).should.equal(''); |
|||
}); |
|||
|
|||
it('Build correctly component with style inside', function() { |
|||
var comp = new Component(); |
|||
var m1 = comp.get('components').add({ |
|||
tagName: 'article', |
|||
style: { |
|||
'prop1': 'value1', |
|||
'prop2': 'value2' |
|||
} |
|||
}); |
|||
this.obj.build(comp).should.equal('#' + m1.cid +'{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
|
|||
it('Build correctly component with class styled', function() { |
|||
var comp = new Component(); |
|||
var m1 = comp.get('components').add({tagName: 'article'}); |
|||
var cls1 = m1.get('classes').add({name: 'class1'}); |
|||
|
|||
var cssc = new CssComposer(); |
|||
var rule = cssc.newRule(cls1); |
|||
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); |
|||
cssc.addRule(rule); |
|||
|
|||
this.obj.build(comp, cssc).should.equal('.class1{prop1:value1;prop2:value2;}'); |
|||
}); |
|||
}) |
|||
} |
|||
}; |
|||
|
|||
}); |
|||
Loading…
Reference in new issue