From 90eda45ceb89c544a5f4b783176ad4be37cd0e49 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 12 Sep 2016 23:14:10 +0200 Subject: [PATCH] Add the possibility to create blocks with style inside --- src/css_composer/main.js | 34 ++++++++- src/css_composer/model/CssRule.js | 12 +++- src/demo.js | 2 +- src/dom_components/model/Components.js | 7 +- src/editor/config/config.js | 27 +++++++- src/selector_manager/main.js | 4 +- test/specs/css_composer/e2e/CssComposer.js | 81 ++++++++++++++-------- 7 files changed, 129 insertions(+), 38 deletions(-) diff --git a/src/css_composer/main.js b/src/css_composer/main.js index e8ebfd548..25a12a9f0 100644 --- a/src/css_composer/main.js +++ b/src/css_composer/main.js @@ -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} data Array of rule objects + * @return {Array} + * @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) { }; }; -}); \ No newline at end of file +}); diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js index 464f60ff8..2980f72fe 100644 --- a/src/css_composer/model/CssRule.js +++ b/src/css_composer/model/CssRule.js @@ -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) diff --git a/src/demo.js b/src/demo.js index 08f79d058..11c5836c0 100644 --- a/src/demo.js +++ b/src/demo.js @@ -10,7 +10,7 @@ require(['config/require-config'], function() { container : '#gjs', height: '100%', fromElement: true, - storageManager:{ autoload: 0}, + //storageManager:{ autoload: 0}, commands: { defaults : [{ diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js index 9aaa91267..0f798fb1a 100644 --- a/src/dom_components/model/Components.js +++ b/src/dom_components/model/Components.js @@ -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]); diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 8def7dceb..ed26d6c24 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -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: '
', + content: '
', attributes: {class:'gjs-fonts gjs-f-b1'} },{ id: 'b2', label: '2 Blocks', - content: '
', + content: '
', attributes: {class:'gjs-fonts gjs-f-b2'} },{ id: 'b3', @@ -179,4 +200,4 @@ define(function () { }, }; -}); \ No newline at end of file +}); diff --git a/src/selector_manager/main.js b/src/selector_manager/main.js index d76fb3e24..28a9540ea 100644 --- a/src/selector_manager/main.js +++ b/src/selector_manager/main.js @@ -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) { }; }; -}); \ No newline at end of file +}); diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.js index 66b2a9881..c2455d01d 100644 --- a/test/specs/css_composer/e2e/CssComposer.js +++ b/test/specs/css_composer/e2e/CssComposer.js @@ -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 = $('
'); + fixtures = $("#fixtures"); + fixture = $('
'); }); 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("
Test
"); 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); + }); + }); } }; -}); \ No newline at end of file +});