From 8939ae377372f31f98000068fa38597e3377e8a1 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 12 Nov 2017 14:36:15 +0100 Subject: [PATCH] Update Component with new style methods and fix regressions --- src/css_composer/index.js | 4 ++- src/dom_components/model/Component.js | 28 +++++++++++++++++++ src/dom_components/view/ComponentView.js | 11 ++------ src/domain_abstract/model/Styleable.js | 3 ++ test/specs/css_composer/e2e/CssComposer.js | 2 +- test/specs/selector_manager/index.js | 2 +- .../style_manager/view/PropertyColorView.js | 14 ++++++++-- .../view/PropertyCompositeView.js | 12 ++++++-- .../style_manager/view/PropertyIntegerView.js | 14 ++++++++-- .../style_manager/view/PropertyRadioView.js | 14 ++++++++-- .../style_manager/view/PropertySelectView.js | 12 ++++++-- .../style_manager/view/PropertyStackView.js | 12 ++++++-- test/specs/style_manager/view/PropertyView.js | 12 ++++++-- 13 files changed, 111 insertions(+), 29 deletions(-) diff --git a/src/css_composer/index.js b/src/css_composer/index.js index e66f18bda..600f007f1 100644 --- a/src/css_composer/index.js +++ b/src/css_composer/index.js @@ -279,8 +279,10 @@ module.exports = () => { * Add/update a css rule with id selector * @param {string} name Id selector name, eg. 'my-id' * @param {Object} style Style properties and values + * @param {Object} [opts={}] Custom options + * @return {CssRule} */ - setIdStyle(name, style = {}, opts = {}) { + setIdRule(name, style = {}, opts = {}) { const state = opts.state || ''; const media = opts.mediaText || em.getCurrentMedia(); const sm = em.get('SelectorManager'); diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 709d37397..a8d21bd50 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -185,6 +185,34 @@ module.exports = Backbone.Model.extend(Styleable).extend({ this.set('attributes', attrs); }, + getStyle() { + const rule = this.rule; + return rule ? rule.getStyle() : Styleable.getStyle.call(this); + }, + + setStyle(prop = {}, opts = {}) { + prop = Styleable.setStyle.call(this, prop, {silent: 1, avoidStore: 1}); + const state = this.get('state'); + const cc = this.em.get('CssComposer'); + this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state }); + }, + + // setStyle / getStyle + /* + + setStyle(prop = {}, opts = {}) { + if (isString(prop)) { + prop = parseStyle(prop); + } + + this.set('style', { ...prop }, opts); + + for (let pr in prop) { + this.trigger(`change:style:${pr}`); + } + }, + */ + /** * Return attributes diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 2b92939f3..bf30a677a 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -144,16 +144,10 @@ module.exports = Backbone.View.extend({ * Update style attribute * @private * */ - updateStyle(mod, val, opts = {}) { - const em = this.em; - const model = this.model; - const style = model.getStyle(); - const state = model.get('state'); - const cc = em.get('CssComposer'); - cc.setIdStyle(model.getId(), style, { ...opts, state }); + updateStyle() { + //this.setAttribute('style', this.getStyleString()); }, - /** * Update classe attribute * @private @@ -207,7 +201,6 @@ module.exports = Backbone.View.extend({ } src && (attrs.src = src); - attrs.id = model.getId(); this.$el.attr(attrs); this.updateHighlight(); this.updateStyle(); diff --git a/src/domain_abstract/model/Styleable.js b/src/domain_abstract/model/Styleable.js index 4a228f68a..946a118cf 100644 --- a/src/domain_abstract/model/Styleable.js +++ b/src/domain_abstract/model/Styleable.js @@ -26,6 +26,7 @@ export default { * Set new style object * @param {Object|string} prop * @param {Object} opts + * @return {Object} Applied properties */ setStyle(prop = {}, opts = {}) { if (isString(prop)) { @@ -37,6 +38,8 @@ export default { for (let pr in prop) { this.trigger(`change:style:${pr}`); } + + return prop; }, /** diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.js index b3dca6c26..be88caf09 100644 --- a/test/specs/css_composer/e2e/CssComposer.js +++ b/test/specs/css_composer/e2e/CssComposer.js @@ -130,7 +130,7 @@ module.exports = { active: true, label: 'test1', name: 'test1', - type: 'class', + type: clsm.Selector.TYPE_CLASS, private: false, protected: false, }], diff --git a/test/specs/selector_manager/index.js b/test/specs/selector_manager/index.js index 5a8255b83..e42e4e914 100644 --- a/test/specs/selector_manager/index.js +++ b/test/specs/selector_manager/index.js @@ -44,7 +44,7 @@ describe('SelectorManager', () => { it('Default new selector is a class type', () => { obj.add('test'); - expect(obj.get('test').get('type')).toEqual('class'); + expect(obj.get('test').get('type')).toEqual(obj.Selector.TYPE_CLASS); }); it('Check name property', () => { diff --git a/test/specs/style_manager/view/PropertyColorView.js b/test/specs/style_manager/view/PropertyColorView.js index 5dadbf18c..5f543bbf2 100644 --- a/test/specs/style_manager/view/PropertyColorView.js +++ b/test/specs/style_manager/view/PropertyColorView.js @@ -1,12 +1,17 @@ const PropertyColorView = require('style_manager/view/PropertyColorView'); const Property = require('style_manager/model/Property'); const Component = require('dom_components/model/Component'); +const Editor = require('editor/model/Editor'); +const DomComponents = require('dom_components'); module.exports = { run() { describe('PropertyColorView', () => { + let em; + let dcomp; + let compOpts; var component; var fixtures; var target; @@ -22,13 +27,16 @@ module.exports = { }); beforeEach(() => { - target = new Component(); - component = new Component(); + em = new Editor({}); + dcomp = new DomComponents(); + compOpts = { em, componentTypes: dcomp.componentTypes }; + propTarget = Object.assign({}, Backbone.Events); + target = new Component({}, compOpts); + component = new Component({}, compOpts); model = new Property({ type: 'color', property: propName }); - propTarget = Object.assign({}, Backbone.Events); propTarget.model = component; view = new PropertyColorView({ model, diff --git a/test/specs/style_manager/view/PropertyCompositeView.js b/test/specs/style_manager/view/PropertyCompositeView.js index b6c3ac51d..99902eb30 100644 --- a/test/specs/style_manager/view/PropertyCompositeView.js +++ b/test/specs/style_manager/view/PropertyCompositeView.js @@ -2,12 +2,17 @@ const PropertyCompositeView = require('style_manager/view/PropertyCompositeView' const Property = require('style_manager/model/Property'); const PropertyComposite = require('style_manager/model/PropertyComposite'); const Component = require('dom_components/model/Component'); +const Editor = require('editor/model/Editor'); +const DomComponents = require('dom_components'); module.exports = { run() { describe('PropertyCompositeView', () => { + let em; + let dcomp; + let compOpts; var component; var fixtures; var target; @@ -35,8 +40,11 @@ module.exports = { }]; beforeEach(() => { - target = new Component(); - component = new Component(); + em = new Editor({}); + dcomp = new DomComponents(); + compOpts = { em, componentTypes: dcomp.componentTypes }; + target = new Component({}, compOpts); + component = new Component({}, compOpts); target.model = component; model = new PropertyComposite({ type: 'composite', diff --git a/test/specs/style_manager/view/PropertyIntegerView.js b/test/specs/style_manager/view/PropertyIntegerView.js index 3a7ab3a15..c99138e8b 100644 --- a/test/specs/style_manager/view/PropertyIntegerView.js +++ b/test/specs/style_manager/view/PropertyIntegerView.js @@ -2,12 +2,17 @@ const PropertyIntegerView = require('style_manager/view/PropertyIntegerView'); const Property = require('style_manager/model/Property'); const PropertyInteger = require('style_manager/model/PropertyInteger'); const Component = require('dom_components/model/Component'); +const Editor = require('editor/model/Editor'); +const DomComponents = require('dom_components'); module.exports = { run() { describe('PropertyIntegerView', () => { + let em; + let dcomp; + let compOpts; var component; var fixtures; var target; @@ -25,13 +30,16 @@ module.exports = { var unitsElSel = '.field-units select'; beforeEach(() => { - target = new Component(); - component = new Component(); + em = new Editor({}); + dcomp = new DomComponents(); + compOpts = { em, componentTypes: dcomp.componentTypes }; + propTarget = Object.assign({}, Backbone.Events); + target = new Component({}, compOpts); + component = new Component({}, compOpts); model = new PropertyInteger({ units, property: propName }); - propTarget = Object.assign({}, Backbone.Events); propTarget.model = component; view = new PropertyIntegerView({ model, diff --git a/test/specs/style_manager/view/PropertyRadioView.js b/test/specs/style_manager/view/PropertyRadioView.js index 0bc41527c..9866b9bfe 100644 --- a/test/specs/style_manager/view/PropertyRadioView.js +++ b/test/specs/style_manager/view/PropertyRadioView.js @@ -1,12 +1,17 @@ const PropertyRadioView = require('style_manager/view/PropertyRadioView'); const Property = require('style_manager/model/Property'); const Component = require('dom_components/model/Component'); +const Editor = require('editor/model/Editor'); +const DomComponents = require('dom_components'); module.exports = { run() { describe('PropertyRadioView', () => { + let em; + let dcomp; + let compOpts; var component; var fixtures; var target; @@ -27,14 +32,17 @@ module.exports = { var getCheckedEl = (view) => view.getInputEl().querySelectorAll('input:checked')[0]; beforeEach(() => { - target = new Component(); - component = new Component(); + em = new Editor({}); + dcomp = new DomComponents(); + compOpts = { em, componentTypes: dcomp.componentTypes }; + propTarget = Object.assign({}, Backbone.Events); + target = new Component({}, compOpts); + component = new Component({}, compOpts); model = new Property({ type: 'radio', list: options, property: propName }); - propTarget = Object.assign({}, Backbone.Events); propTarget.model = component; view = new PropertyRadioView({ model, diff --git a/test/specs/style_manager/view/PropertySelectView.js b/test/specs/style_manager/view/PropertySelectView.js index 770ab37fc..37c3ac44c 100644 --- a/test/specs/style_manager/view/PropertySelectView.js +++ b/test/specs/style_manager/view/PropertySelectView.js @@ -1,5 +1,7 @@ const PropertySelectView = require('style_manager/view/PropertySelectView'); const Property = require('style_manager/model/Property'); +const Editor = require('editor/model/Editor'); +const DomComponents = require('dom_components'); const Component = require('dom_components/model/Component'); module.exports = { @@ -7,6 +9,9 @@ module.exports = { describe('PropertySelectView', () => { + let em; + let dcomp; + let compOpts; var component; var fixtures; var target; @@ -23,9 +28,12 @@ module.exports = { ]; beforeEach(() => { + em = new Editor({}); + dcomp = new DomComponents(); + compOpts = { em, componentTypes: dcomp.componentTypes }; propTarget = Object.assign({}, Backbone.Events); - target = new Component(); - component = new Component(); + target = new Component({}, compOpts); + component = new Component({}, compOpts); model = new Property({ type: 'select', list: options, diff --git a/test/specs/style_manager/view/PropertyStackView.js b/test/specs/style_manager/view/PropertyStackView.js index 6d04fd596..f2f222d77 100644 --- a/test/specs/style_manager/view/PropertyStackView.js +++ b/test/specs/style_manager/view/PropertyStackView.js @@ -1,12 +1,17 @@ const PropertyStackView = require('style_manager/view/PropertyStackView'); const Property = require('style_manager/model/PropertyStack'); const Component = require('dom_components/model/Component'); +const Editor = require('editor/model/Editor'); +const DomComponents = require('dom_components'); module.exports = { run() { describe('PropertyStackView', () => { + let em; + let dcomp; + let compOpts; var component; var fixtures; var target; @@ -41,8 +46,11 @@ module.exports = { ]; beforeEach(() => { - target = new Component(); - component = new Component(); + em = new Editor({}); + dcomp = new DomComponents(); + compOpts = { em, componentTypes: dcomp.componentTypes }; + target = new Component({}, compOpts); + component = new Component({}, compOpts); target.model = component; model = new Property({ type: 'stack', diff --git a/test/specs/style_manager/view/PropertyView.js b/test/specs/style_manager/view/PropertyView.js index 2298b9e43..3757f4ba5 100644 --- a/test/specs/style_manager/view/PropertyView.js +++ b/test/specs/style_manager/view/PropertyView.js @@ -1,5 +1,7 @@ const PropertyView = require('style_manager/view/PropertyView'); const Property = require('style_manager/model/Property'); +const Editor = require('editor/model/Editor'); +const DomComponents = require('dom_components'); const Component = require('dom_components/model/Component'); module.exports = { @@ -7,6 +9,9 @@ module.exports = { describe('PropertyView', () => { + let em; + let dcomp; + let compOpts; var component; var fixtures; var target; @@ -19,9 +24,12 @@ module.exports = { var defValue = 'testDefault'; beforeEach(() => { + em = new Editor({}); + dcomp = new DomComponents(); + compOpts = { em, componentTypes: dcomp.componentTypes }; propTarget = Object.assign({}, Backbone.Events); - target = new Component(); - component = new Component(); + target = new Component({}, compOpts); + component = new Component({}, compOpts); model = new Property({property: propName}); propTarget.model = component; options = {