From 050fcf5997d2588b5868b4d9a2c94afe0bfd3d28 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 15 Jul 2017 02:30:35 +0200 Subject: [PATCH] Refactor targetUpdated and take in account computed styles --- src/domain_abstract/model/Styleable.js | 15 ++- src/editor/index.js | 2 +- src/style_manager/view/PropertyIntegerView.js | 2 + src/style_manager/view/PropertyView.js | 114 ++++++++++++++---- src/style_manager/view/SectorsView.js | 2 + 5 files changed, 106 insertions(+), 29 deletions(-) diff --git a/src/domain_abstract/model/Styleable.js b/src/domain_abstract/model/Styleable.js index b2c30bd1c..411f07fee 100644 --- a/src/domain_abstract/model/Styleable.js +++ b/src/domain_abstract/model/Styleable.js @@ -6,7 +6,7 @@ export default { * @param {Object} prop * @return {Object} */ - newStyle(prop) { + extendStyle(prop) { return Object.assign({}, this.getStyle(), prop); }, @@ -21,9 +21,10 @@ export default { /** * Set new style object * @param {Object} prop + * @param {Object} opts */ - setStyle(prop = {}) { - this.set('style', this.newStyle(prop)); + setStyle(prop = {}, opts = {}) { + this.set('style', Object.assign({}, prop), opts); }, /** @@ -34,15 +35,17 @@ export default { * this.addStyle({color: 'red'}); * this.addStyle('color', 'blue'); */ - addStyle(prop, value = '') { + addStyle(prop, value = '', opts = {}) { if (typeof prop == 'string') { prop = { prop: value }; + } else { + opts = value || {}; } - prop = this.newStyle(prop); - this.set('style', prop); + prop = this.extendStyle(prop); + this.set('style', prop, opts); }, /** diff --git a/src/editor/index.js b/src/editor/index.js index 5443e01d1..0b3ac7232 100644 --- a/src/editor/index.js +++ b/src/editor/index.js @@ -305,7 +305,7 @@ module.exports = config => { /** * Returns selected component, if there is one - * @return {grapesjs.Component} + * @return {Model} */ getSelected() { return em.getSelected(); diff --git a/src/style_manager/view/PropertyIntegerView.js b/src/style_manager/view/PropertyIntegerView.js index 3711e7132..e638091c0 100644 --- a/src/style_manager/view/PropertyIntegerView.js +++ b/src/style_manager/view/PropertyIntegerView.js @@ -35,6 +35,8 @@ module.exports = PropertyView.extend({ renderTemplate() {}, setValue(value) { + if(this.model.get('property') == 'font-size') + console.log('set value int', value); this.input.setValue(value, {silent: 1}); }, diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 172ed16af..8095727a3 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -45,12 +45,27 @@ module.exports = Backbone.View.extend({ /** * Returns selected target which should have 'style' property + * @deprecated * @return {Model|null} */ getTarget() { - if(this.selectedComponent) - return this.selectedComponent; - return this.propTarget ? this.propTarget.model : null; + return this.propTarget && this.propTarget.model; + }, + + /** + * Returns Styleable model + * @return {Model|null} + */ + getTargetModel() { + return this.propTarget && this.propTarget.model; + }, + + /** + * Returns helper Styleable model + * @return {Model|null} + */ + getHelperModel() { + return this.propTarget && this.propTarget.helper; }, /** @@ -62,25 +77,67 @@ module.exports = Backbone.View.extend({ }, /** - * Fired when the target is updated + * Fired when the target is changed * */ targetUpdated() { - this.selectedComponent = this.propTarget.model; - this.helperComponent = this.propTarget.helper; - this.checkVisibility(); + if (!this.checkVisibility()) { + return; + } + + let value = ''; + let status = ''; + let targetValue = this.getTargetValue({ignoreDefault: 1}); + let defaultValue = this.getDefaultValue(); + let computedValue = this.getComputedValue(); + + if (targetValue) { + value = targetValue; + status = 'updated'; + } else if (computedValue && computedValue != defaultValue) { + value = computedValue; + status = 'computed'; + } else { + value = defaultValue; + status = ''; + } + + this.setValue(value, 1); + this.model.set('status', status); + + if (this.model.get('property') == 'font-size') { + console.log('FS', targetValue, defaultValue, computedValue); + } + + /* + get targetValue + if targetValue + setValue(targetValue) + setStatus('updated'); + elseif computedValue != defaultValue + setValue(computedValue) + setStatus('computed'); + else + setValue(defaultValue) + setStatus(''); + */ + /* if(this.getTarget()) { if(!this.sameValue()){ this.renderInputRequest(); } } + */ }, checkVisibility() { + var result = 1; + // Check if need to hide the property if (this.config.hideNotStylable) { if (!this.isTargetStylable() || !this.isComponentStylable()) { this.hide(); + result = 0; } else { this.show(); } @@ -89,6 +146,8 @@ module.exports = Backbone.View.extend({ this.sector.trigger('updateVisibility'); } } + + return result; }, /** @@ -96,20 +155,20 @@ module.exports = Backbone.View.extend({ * same of the value of the model * * @return {Boolean} - * */ + * * sameValue() { return this.getComponentValue() == this.getValueForTarget(); }, + */ /** * Get the value from the selected component of this property - * * @return {String} * */ getComponentValue() { var propModel = this.model; - var target = this.getTarget(); + var target = this.getTargetModel(); if(!target) return; @@ -147,9 +206,8 @@ module.exports = Backbone.View.extend({ * @return string * @private */ - getTargetValue(opts) { + getTargetValue(opts = {}) { var result; - var opt = opts || {}; var model = this.model; var target = this.getTarget(); @@ -157,9 +215,9 @@ module.exports = Backbone.View.extend({ return result; } - result = target.get('style')[model.get('property')]; + result = target.getStyle()[model.get('property')]; - if (!result && !opt.ignoreDefault) { + if (!result && !opts.ignoreDefault) { result = this.getDefaultValue(); } @@ -175,6 +233,16 @@ module.exports = Backbone.View.extend({ return this.model.get('defaults'); }, + /** + * Returns computed value + * @return {String} + * @private + */ + getComputedValue() { + let computed = this.propTarget.computed; + return computed && computed[this.model.get('property')]; + }, + /** * Fetch the string from function type value * @param {String} v Function type value @@ -274,8 +342,9 @@ module.exports = Backbone.View.extend({ target.set('style', targetStyle, { avoidStore : avSt}); - if(this.helperComponent) - this.helperComponent.set('style', targetStyle, { avoidStore : avSt}); + // Helper exists when is active a State in Style Manager + let helper = this.getHelperModel(); + helper && helper.setStyle(targetStyle, {avoidStore: avSt}); }, /** @@ -346,12 +415,13 @@ module.exports = Backbone.View.extend({ }, renderLabel() { - this.$el.html( this.templateLabel({ - pfx : this.pfx, - ppfx : this.ppfx, - icon : this.model.get('icon'), - info : this.model.get('info'), - label : this.model.get('name'), + let model = this.model; + this.$el.html(this.templateLabel({ + pfx: this.pfx, + ppfx: this.ppfx, + icon: model.get('icon'), + info: model.get('info'), + label: model.get('name'), })); }, diff --git a/src/style_manager/view/SectorsView.js b/src/style_manager/view/SectorsView.js index 1168c7069..bd46c750d 100644 --- a/src/style_manager/view/SectorsView.js +++ b/src/style_manager/view/SectorsView.js @@ -48,6 +48,8 @@ module.exports = Backbone.View.extend({ var widthMedia = device && device.get('widthMedia'); var mediaText = device && !previewMode && widthMedia ? `(${config.mediaCondition}: ${widthMedia})` : ''; + var stateStr = state ? `:${state}` : null; + pt.computed = window.getComputedStyle(el.view.el, stateStr); pt.helper = null; if(classes.length){