diff --git a/src/dom_components/config/config.js b/src/dom_components/config/config.js index 470c58a62..245800503 100644 --- a/src/dom_components/config/config.js +++ b/src/dom_components/config/config.js @@ -18,6 +18,13 @@ module.exports = { '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 components: [], diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index a8d21bd50..adfc163e3 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -150,7 +150,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({ this.opt = opt; this.sm = em; this.em = em; - this.config = props; + this.config = opt.config || {}; this.set('attributes', this.get('attributes') || {}); this.listenTo(this, 'change:script', this.scriptUpdated); this.listenTo(this, 'change:traits', this.traitsUpdated); @@ -185,33 +185,24 @@ module.exports = Backbone.Model.extend(Styleable).extend({ this.set('attributes', attrs); }, + getStyle() { const rule = this.rule; - return rule ? rule.getStyle() : Styleable.getStyle.call(this); + const avoidInline = this.config.avoidInlineStyle; + return rule && avoidInline ? 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}`); + if (this.config.avoidInlineStyle) { + 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 }); + } else { + Styleable.setStyle.apply(this, arguments); } }, - */ /** @@ -256,7 +247,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({ initClasses() { - const classes = this.normalizeClasses(this.get('classes') || this.config.classes || []); + const classes = this.normalizeClasses(this.get('classes') || []); this.set('classes', new Selectors(classes)); return this; }, diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index bf30a677a..36d4cbc62 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -64,6 +64,7 @@ module.exports = Backbone.View.extend({ } }, + /** * Import, if possible, classes inside main container * @private @@ -78,6 +79,7 @@ module.exports = Backbone.View.extend({ } }, + /** * Fires on state update. If the state is not empty will add a helper class * @param {Event} e @@ -94,6 +96,7 @@ module.exports = Backbone.View.extend({ } }, + /** * Update item on status change * @param {Event} e @@ -131,6 +134,7 @@ module.exports = Backbone.View.extend({ } }, + /** * Update highlight attribute * @private @@ -140,14 +144,33 @@ module.exports = Backbone.View.extend({ this.setAttribute('data-highlightable', hl ? 1 : ''); }, + /** * Update style attribute * @private * */ updateStyle() { - //this.setAttribute('style', this.getStyleString()); + this.setAttribute('style', this.getStyleString()); + }, + + + /** + * Return style string + * @return {string} + * @private + * */ + getStyleString() { + var style = ''; + this.style = this.model.get('style'); + for(var key in this.style) { + if(this.style.hasOwnProperty(key)) + style += key + ':' + this.style[key] + ';'; + } + + return style; }, + /** * Update classe attribute * @private @@ -201,6 +224,7 @@ module.exports = Backbone.View.extend({ } src && (attrs.src = src); + //attrs.id = model.getId(); this.$el.attr(attrs); this.updateHighlight(); this.updateStyle(); @@ -214,31 +238,6 @@ module.exports = Backbone.View.extend({ this.getChildrenContainer().innerHTML = this.model.get('content'); }, - /** - * Return style string - * @return {string} - * @private - * */ - getStyleString() { - var style = ''; - this.style = this.model.get('style'); - for(var key in this.style) { - if(this.style.hasOwnProperty(key)) - style += key + ':' + this.style[key] + ';'; - } - - return style; - }, - - /** - * Reply to event call - * @param object Event that generated the request - * @private - * */ - eventCall(event) { - event.viewResponse = this; - }, - /** * Prevent default helper * @param {Event} e diff --git a/test/specs/dom_components/view/ComponentV.js b/test/specs/dom_components/view/ComponentV.js index c7cd2edec..77a464ae8 100644 --- a/test/specs/dom_components/view/ComponentV.js +++ b/test/specs/dom_components/view/ComponentV.js @@ -80,14 +80,6 @@ module.exports = { expect(view.el.getAttribute('style')).toEqual(null); }); - it('Get style string', () => { - model.set('style', { - color: 'red', - float: 'left' - }); - expect(view.getStyleString()).toEqual('color:red;float:left;'); - }); - it('Add class', () => { model.get('classes').add({name: 'test'}); expect(view.el.getAttribute('class')).toEqual('test');