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

Move avoidInlineStyle inside main configuration object

pull/540/head
Artur Arseniev 9 years ago
parent
c97ad3431a
commit
87ffa7865f
9 changed files with 58 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/code_manager/model/CssGenerator.js
  2. 7
      src/dom_components/config/config.js
  3. 12
      src/dom_components/model/Component.js
  4. 3
      src/dom_components/view/ComponentView.js
  5. 6
      src/editor/config/config.js
  6. 8
      src/editor/index.js
  7. 13
      src/editor/model/Editor.js
  8. 10
      src/selector_manager/view/ClassTagsView.js
  9. 22
      test/specs/code_manager/model/CodeModels.js

3
src/code_manager/model/CssGenerator.js
View File

@ -15,8 +15,7 @@ module.exports = require('backbone').Model.extend({
buildFromModel(model, opts = {}) { buildFromModel(model, opts = {}) {
let code = ''; let code = '';
const em = this.em; const em = this.em;
const dc = em && em.get('DomComponents'); const avoidInline = em && em.getConfig('avoidInlineStyle');
const avoidInline = dc && dc.getConfig().avoidInlineStyle;
const style = model.get('style'); const style = model.get('style');
const classes = model.get('classes'); const classes = model.get('classes');
const wrappesIsBody = opts.wrappesIsBody; const wrappesIsBody = opts.wrappesIsBody;

7
src/dom_components/config/config.js
View File

@ -18,13 +18,6 @@ module.exports = {
'background-size'], 'background-size'],
}, },
// Usually when you update the `style` of the component this changes the
// element's `style` attribute. Unfortunately, inline styling doesn't allow
// use of media queries (@media) or even pseudo selectors (eg. :hover).
// When `avoidInlineStyle` is true all the styles are inserted inside the
// relative css rule
avoidInlineStyle: 0,
// Could be used for default components // Could be used for default components
components: [], components: [],

12
src/dom_components/model/Component.js
View File

@ -187,9 +187,11 @@ module.exports = Backbone.Model.extend(Styleable).extend({
getStyle() { getStyle() {
if (this.config.avoidInlineStyle) { const em = this.em;
if (em.getConfig('avoidInlineStyle')) {
const state = this.get('state'); const state = this.get('state');
const cc = this.em.get('CssComposer'); const cc = em.get('CssComposer');
const rule = cc.getIdRule(this.getId(), { state }); const rule = cc.getIdRule(this.getId(), { state });
this.rule = rule; this.rule = rule;
@ -203,10 +205,12 @@ module.exports = Backbone.Model.extend(Styleable).extend({
setStyle(prop = {}, opts = {}) { setStyle(prop = {}, opts = {}) {
if (this.config.avoidInlineStyle) { const em = this.em;
if (em.getConfig('avoidInlineStyle')) {
prop = Styleable.setStyle.call(this, prop, {silent: 1, avoidStore: 1}); prop = Styleable.setStyle.call(this, prop, {silent: 1, avoidStore: 1});
const state = this.get('state'); const state = this.get('state');
const cc = this.em.get('CssComposer'); const cc = em.get('CssComposer');
this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state }); this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });
} else { } else {
prop = Styleable.setStyle.apply(this, arguments); prop = Styleable.setStyle.apply(this, arguments);

3
src/dom_components/view/ComponentView.js
View File

@ -153,7 +153,8 @@ module.exports = Backbone.View.extend({
* @private * @private
* */ * */
updateStyle() { updateStyle() {
if (this.config.avoidInlineStyle) { const em = this.em;
if (em.get('avoidInlineStyle')) {
const model = this.model; const model = this.model;
this.el.id = model.getId(); this.el.id = model.getId();
model.setStyle(model.getStyle()); model.setStyle(model.getStyle());

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

@ -71,6 +71,12 @@ module.exports = {
// The wrapper, if visible, will be shown as a `<body>` // The wrapper, if visible, will be shown as a `<body>`
wrappesIsBody: 1, wrappesIsBody: 1,
// Usually when you update the `style` of the component this changes the
// element's `style` attribute. Unfortunately, inline styling doesn't allow
// use of media queries (@media) or even pseudo selectors (eg. :hover).
// When `avoidInlineStyle` is true all styles are inserted inside the css rule
avoidInlineStyle: 0,
// Dom element // Dom element
el: '', el: '',

8
src/editor/index.js
View File

@ -238,10 +238,12 @@ module.exports = config => {
/** /**
* Returns configuration object * Returns configuration object
* @return {Object} * @param {string} [prop] Property name
* @return {any} Returns the configuration object or
* the value of the specified property
*/ */
getConfig() { getConfig(prop) {
return c; return em.getConfig(prop);
}, },
/** /**

13
src/editor/model/Editor.js
View File

@ -66,6 +66,19 @@ module.exports = Backbone.Model.extend({
this.on('change:changesCount', this.updateChanges, this); this.on('change:changesCount', this.updateChanges, this);
}, },
/**
* Get configurations
* @param {string} [prop] Property name
* @return {any} Returns the configuration object or
* the value of the specified property
*/
getConfig(prop) {
const config = this.config;
return isUndefined(prop) ? config : config[prop];
},
/** /**
* Should be called after all modules and plugins are loaded * Should be called after all modules and plugins are loaded
* @param {Function} clb * @param {Function} clb

10
src/selector_manager/view/ClassTagsView.js
View File

@ -33,7 +33,7 @@ module.exports = Backbone.View.extend({
events: {}, events: {},
initialize(o) { initialize(o = {}) {
this.config = o.config || {}; this.config = o.config || {};
this.pfx = this.config.stylePrefix || ''; this.pfx = this.config.stylePrefix || '';
this.ppfx = this.config.pStylePrefix || ''; this.ppfx = this.config.pStylePrefix || '';
@ -48,7 +48,8 @@ module.exports = Backbone.View.extend({
this.events['keyup #' + this.newInputId] = 'onInputKeyUp'; this.events['keyup #' + this.newInputId] = 'onInputKeyUp';
this.events['change #' + this.stateInputId] = 'stateChanged'; this.events['change #' + this.stateInputId] = 'stateChanged';
this.target = this.config.em; this.target = this.config.em;
this.em = this.target;
this.listenTo(this.target ,'change:selectedComponent',this.componentChanged); this.listenTo(this.target ,'change:selectedComponent',this.componentChanged);
this.listenTo(this.target, 'targetClassUpdated', this.updateSelector); this.listenTo(this.target, 'targetClassUpdated', this.updateSelector);
@ -148,7 +149,10 @@ module.exports = Backbone.View.extend({
* @private * @private
*/ */
updateStateVis() { updateStateVis() {
if(this.collection.length) const em = this.em;
const avoidInline = em && em.getConfig('avoidInlineStyle');
if(this.collection.length || avoidInline)
this.getStatesC().css('display','block'); this.getStatesC().css('display','block');
else else
this.getStatesC().css('display','none'); this.getStatesC().css('display','none');

22
test/specs/code_manager/model/CodeModels.js
View File

@ -62,7 +62,7 @@ module.exports = {
}); });
}); });
describe.only('CssGenerator', () => { describe('CssGenerator', () => {
var newCssComp = () => new CssComposer().init(); var newCssComp = () => new CssComposer().init();
beforeEach(() => { beforeEach(() => {
em = new Editor({}); em = new Editor({});
@ -221,17 +221,27 @@ module.exports = {
expect(obj.build(comp, {cssc})).toEqual(''); expect(obj.build(comp, {cssc})).toEqual('');
}); });
it('Render correctly a rule with avoidInlineStyle option and not', () => { it('Render correctly a rule without avoidInlineStyle option', () => {
em.get('DomComponents').getConfig().avoidInlineStyle = 1;
comp.setStyle({color: 'red'}); comp.setStyle({color: 'red'});
const id = comp.getId(); const id = comp.getId();
const result = `#${id}{color:red;}`; const result = `#${id}{color:red;}`;
expect(obj.build(comp, {cssc: cc})).toEqual(result); expect(obj.build(comp, {cssc: cc})).toEqual(result);
expect(obj.build(comp, {cssc: cc, em})).toEqual(''); });
it('Render correctly a rule with avoidInlineStyle option', () => {
em.getConfig().avoidInlineStyle = 1;
comp = new Component({}, {
em,
componentTypes: dcomp.componentTypes,
});
comp.setStyle({color: 'red'});
const id = comp.getId();
const result = `#${id}{color:red;}`;
expect(obj.build(comp, {cssc: cc, em})).toEqual(result);
}); });
it('Render correctly a rule with avoidInlineStyle and state', () => { it('Render correctly a rule with avoidInlineStyle and state', () => {
em.get('DomComponents').getConfig().avoidInlineStyle = 1; em.getConfig().avoidInlineStyle = 1;
const state = 'hover'; const state = 'hover';
comp.config.avoidInlineStyle = 1; comp.config.avoidInlineStyle = 1;
comp.set('state', state); comp.set('state', state);
@ -242,7 +252,7 @@ module.exports = {
}); });
it('Render correctly a rule with avoidInlineStyle and w/o state', () => { it('Render correctly a rule with avoidInlineStyle and w/o state', () => {
em.get('DomComponents').getConfig().avoidInlineStyle = 1; em.getConfig().avoidInlineStyle = 1;
const state = 'hover'; const state = 'hover';
comp.config.avoidInlineStyle = 1; comp.config.avoidInlineStyle = 1;
comp.setStyle({color: 'blue'}); comp.setStyle({color: 'blue'});

Write Preview
Loading…
Cancel
Save