tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add the possibility to create blocks with style inside

pull/36/head
Artur Arseniev 10 years ago
parent
1f2f8fc532
commit
90eda45ceb
7 changed files with 129 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      src/css_composer/main.js
  2. 12
      src/css_composer/model/CssRule.js
  3. 2
      src/demo.js
  4. 7
      src/dom_components/model/Components.js
  5. 27
      src/editor/config/config.js
  6. 4
      src/selector_manager/main.js
  7. 81
      test/specs/css_composer/e2e/CssComposer.js

34
src/css_composer/main.js
View File

@ -212,6 +212,38 @@ define(function(require) {
return rules;
},
/**
* Add a raw collection of rule objects
* This method overrides styles, in case, of already defined rule
* @param {Array<Object>} data Array of rule objects
* @return {Array<Model>}
* @private
*/
addCollection: function(data){
var result = [];
var d = data instanceof Array ? data : [data];
for(var i = 0, l = d.length; i < l; i++){
var rule = d[i] || {};
if(!rule.selectors)
continue;
var sm = c.em && c.em.get('SelectorManager');
if(!sm)
console.warn('Selector Manager not found');
var sl = rule.selectors;
var sels = sl instanceof Array ? sl : [sl];
var newSels = [];
for(var j = 0, le = sels.length; j < le; j++){
var selec = sm.add(sels[j]);
console.log('Selector: ', selec.get('name'), selec.cid);
newSels.push(selec);
}
var model = this.add(newSels, rule.state, rule.width);
model.set('style', rule.style || {});
result.push(model);
}
return result;
},
/**
* Render the block of CSS rules
* @return {HTMLElement}
@ -224,4 +256,4 @@ define(function(require) {
};
};
});
});

12
src/css_composer/model/CssRule.js
View File

@ -42,8 +42,16 @@ define(['backbone', './Selectors'],
var st = state || '';
var wd = width || '';
var cId = 'cid';
var a1 = _.pluck(selectors.models || selectors, cId);
var a2 = _.pluck(this.get('selectors').models, cId);
//var a1 = _.pluck(selectors.models || selectors, cId);
//var a2 = _.pluck(this.get('selectors').models, cId);
if(!(selectors instanceof Array) && !selectors.models)
selectors = [selectors];
var a1 = _.each((selectors.models || selectors), function(model) {
return model.get('name');
});
var a2 = _.each(this.get('selectors').models, function(model) {
return model.get('name');
});
var f = false;
if(a1.length !== a2.length)

2
src/demo.js
View File

@ -10,7 +10,7 @@ require(['config/require-config'], function() {
container : '#gjs',
height: '100%',
fromElement: true,
storageManager:{ autoload: 0},
//storageManager:{ autoload: 0},
commands: {
defaults : [{

7
src/dom_components/model/Components.js
View File

@ -54,8 +54,11 @@ define([ 'backbone', 'require'],
models = parsed.html;
var cssc = this.editor.get('CssComposer');
if(parsed.css && cssc)
cssc.getAll().add(parsed.css);
if(parsed.css && cssc){
var added = cssc.addCollection(parsed.css);
console.log(added);
//cssc.getAll().add(parsed.css);
}
}
return Backbone.Collection.prototype.add.apply(this, [models, opt]);

27
src/editor/config/config.js
View File

@ -1,4 +1,25 @@
define(function () {
var blkStyle = '.blk-row::after{ content: ""; clear: both; display: block;} .blk-row{padding: 10px;}';
/*
.blk3{
float: left;
width: 33.3333%;
padding: 10px;
min-height: 75px;
}
.blk37l{
float: left;
width: 30%;
padding: 10px;
min-height: 75px;
}
.blk37r{
float: left;
width: 70%;
padding: 10px;
min-height: 75px;
}';
*/
return {
// Style prefix
@ -92,12 +113,12 @@ define(function () {
'blocks': [{
id: 'b1',
label: '1 Block',
content: '<div class="blk-row"><div class="blk1"></div></div>',
content: '<div class="blk-row"><div class="blk1"></div></div><style>'+ blkStyle +'.blk1{width: 100%;padding: 10px;min-height: 75px;}</style>',
attributes: {class:'gjs-fonts gjs-f-b1'}
},{
id: 'b2',
label: '2 Blocks',
content: '<div class="blk-row"><div class="blk2"></div><div class="blk2"></div></div>',
content: '<div class="blk-row"><div class="blk2"></div><div class="blk2"></div></div><style>'+ blkStyle +'.blk2{float: left;width: 50%;padding: 10px;min-height: 75px;}</style>',
attributes: {class:'gjs-fonts gjs-f-b2'}
},{
id: 'b3',
@ -179,4 +200,4 @@ define(function () {
},
};
});
});

4
src/selector_manager/main.js
View File

@ -113,7 +113,7 @@ define(function(require) {
* */
add: function(name, opts){
var obj = opts || {};
obj.name = name;
obj.name = name.name || name;
return selectors.add(obj);
},
@ -156,4 +156,4 @@ define(function(require) {
};
};
});
});

81
test/specs/css_composer/e2e/CssComposer.js
View File

@ -1,73 +1,86 @@
define(['GrapesJS'],function(Grapes) {
define(['GrapesJS'],function(GrapesJS) {
return {
run : function(){
describe('E2E tests', function() {
var fixtures;
var fixture;
var grapesjs;
var gjs;
var cssc, clsm, domc;
var rulesSet;
var rulesSet2;
before(function () {
this.$fixtures = $("#fixtures");
this.$fixture = $('<div id="csscomposer-fixture"></div>');
fixtures = $("#fixtures");
fixture = $('<div class="csscomposer-fixture"></div>');
});
beforeEach(function () {
Grapes = Grapes;
this.gjs = Grapes.init({
grapesjs = GrapesJS;
gjs = grapesjs.init({
stylePrefix: '',
storageManager: { autoload: 0, type:'none' },
assetManager: { storageType: 'none', },
container: 'csscomposer-fixture',
});
this.cssc = this.gjs.editor.get('CssComposer');
this.clsm = this.gjs.editor.get('SelectorManager');
this.domc = this.gjs.editor.get('DomComponents');
this.$fixture.empty().appendTo(this.$fixtures);
this.gjs.render();
this.rulesSet = [
cssc = gjs.CssComposer;
clsm = gjs.SelectorManager;
domc = gjs.DomComponents;
fixture.empty().appendTo(fixtures);
gjs.render();
rulesSet = [
{ selectors: [{name: 'test1'}, {name: 'test2'}] },
{ selectors: [{name: 'test2'}, {name: 'test3'}] },
{ selectors: [{name: 'test3'}] }
];
rulesSet2 = [
{ selectors: [{name: 'test1'}, {name: 'test2'}], state:':active' },
{ selectors: [{name: 'test2'}, {name: 'test3'}] },
{ selectors: [{name: 'test3'}], width:'900px' }
];
});
afterEach(function () {
delete Grapes;
delete this.gjs;
delete this.cssc;
delete this.clsm;
delete grapesjs;
delete gjs;
delete cssc;
delete clsm;
});
after(function () {
this.$fixture.remove();
fixture.remove();
});
it('Rules are correctly imported from default property', function() {
var gj = new Grapes.init({
var gj = new grapesjs.init({
stylePrefix: '',
storageManager: { autoload: 0, type:'none' },
assetManager: { storageType: 'none', },
cssComposer: { rules: this.rulesSet},
cssComposer: { rules: rulesSet},
container: 'csscomposer-fixture',
});
var cssc = gj.editor.get('CssComposer');
cssc.getAll().length.should.equal(this.rulesSet.length);
cssc.getAll().length.should.equal(rulesSet.length);
var cls = gj.editor.get('SelectorManager').getAll();
cls.length.should.equal(3);
});
it('New rule adds correctly the class inside selector manager', function() {
var rules = this.cssc.getAll();
var rules = cssc.getAll();
rules.add({ selectors: [{name: 'test1'}] });
this.clsm.getAll().at(0).get('name').should.equal('test1');
clsm.getAll().at(0).get('name').should.equal('test1');
});
it('New rules are correctly imported inside selector manager', function() {
var rules = this.cssc.getAll();
this.rulesSet.forEach(function(item){
var rules = cssc.getAll();
rulesSet.forEach(function(item){
rules.add(item);
});
var cls = this.clsm.getAll();
var cls = clsm.getAll();
cls.length.should.equal(3);
cls.at(0).get('name').should.equal('test1');
cls.at(1).get('name').should.equal('test2');
@ -75,15 +88,29 @@ define(['GrapesJS'],function(Grapes) {
});
it('Add rules from the new component added as a string with style tag', function() {
var comps = this.domc.getComponents();
var rules = this.cssc.getAll();
var comps = domc.getComponents();
var rules = cssc.getAll();
comps.add("<div>Test</div><style>.test{color: red} .test2{color: blue}</style>");
comps.length.should.equal(1);
rules.length.should.equal(2);
});
it('Add raw rule objects with addCollection', function() {
cssc.addCollection(rulesSet);
cssc.getAll().length.should.equal(3);
clsm.getAll().length.should.equal(3);
});
it('Add raw rule objects twice with addCollection do not duplucate rules', function() {
var coll1 = cssc.addCollection(rulesSet2);
var coll2 = cssc.addCollection(rulesSet2);
cssc.getAll().length.should.equal(3);
clsm.getAll().length.should.equal(3);
coll1.should.deep.equal(coll2);
});
});
}
};
});
});

Write Preview
Loading…
Cancel
Save