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) { |
function (Backbone) { |
||||
/** |
/** |
||||
* @class CssGenerator |
* @class CssGenerator |
||||
* */ |
* */ |
||||
return Backbone.Model.extend({ |
return Backbone.Model.extend({ |
||||
|
|
||||
|
initialize: function(){ |
||||
|
this.buff = []; |
||||
|
}, |
||||
|
|
||||
/** @inheritdoc */ |
/** @inheritdoc */ |
||||
getId : function() |
getId : function() |
||||
{ |
{ |
||||
return 'css'; |
return 'css'; |
||||
}, |
}, |
||||
|
|
||||
/** @inheritdoc */ |
/** @inheritdoc */ |
||||
build: function(model) |
build: function(model, cssc) |
||||
{ |
{ |
||||
|
|
||||
var coll = model.get('components') || model, |
var coll = model.get('components') || model, |
||||
code = ''; |
code = ''; |
||||
|
|
||||
coll.each(function(m){ |
coll.each(function(m){ |
||||
var css = m.get('style'), |
var css = m.get('style'), |
||||
cln = m.get('components'); // Children
|
cls = m.get('classes'), |
||||
|
cln = m.get('components'); |
||||
|
|
||||
|
// Get id-relative style
|
||||
if(css && Object.keys(css).length !== 0){ |
if(css && Object.keys(css).length !== 0){ |
||||
code += '#' + m.cid + '{'; |
code += '#' + m.cid + '{'; |
||||
|
|
||||
for(var prop in css) |
for(var prop in css) |
||||
if(css.hasOwnProperty(prop)) |
if(css.hasOwnProperty(prop)) |
||||
code += prop + ': ' + css[prop] + ';'; |
code += prop + ':' + css[prop] + ';'; |
||||
|
|
||||
code += '}'; |
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) |
if(cln.length) |
||||
code += this.build(cln); |
code += this.build(cln, cssc); |
||||
|
|
||||
}, this); |
}, this); |
||||
|
|
||||
return code; |
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