From d153bd809766da22c957c7027a58f7be908c7d52 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 18 Sep 2017 22:45:26 +0200 Subject: [PATCH] Refactor Style Manager Property views --- index.html | 2 +- src/style_manager/model/PropertyFactory.js | 2 +- src/style_manager/view/PropertiesView.js | 3 +- src/style_manager/view/PropertyColorView.js | 17 ++-- .../view/PropertyCompositeView.js | 13 +-- src/style_manager/view/PropertyFileView.js | 11 +-- src/style_manager/view/PropertyIntegerView.js | 26 +++--- src/style_manager/view/PropertyRadioView.js | 19 ++--- src/style_manager/view/PropertySelectView.js | 17 ++-- src/style_manager/view/PropertyStackView.js | 34 +++----- src/style_manager/view/PropertyView.js | 79 ++++++++----------- 11 files changed, 93 insertions(+), 130 deletions(-) diff --git a/index.html b/index.html index d3640fea4..4f0a53691 100755 --- a/index.html +++ b/index.html @@ -1324,7 +1324,7 @@ var model = view.model; let targetValue = view.getTargetValue({ignoreDefault: 1}); let computedValue = view.getComputedValue(); - let defaultValue = view.getDefaultValue(); + let defaultValue = view.model.getDefaultValue(); //console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue); }); diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 4e13cdfe1..26e0a4a31 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -121,7 +121,7 @@ module.exports = () => ({ obj.defaults = 1; break; case 'box-shadow-blur': - obj.defaults = 5; + obj.defaults = '5px'; break; case 'min-height': case 'min-width': case 'max-height': case 'max-width': case 'width': case 'height': diff --git a/src/style_manager/view/PropertiesView.js b/src/style_manager/view/PropertiesView.js index d717a8a8c..2686210b1 100644 --- a/src/style_manager/view/PropertiesView.js +++ b/src/style_manager/view/PropertiesView.js @@ -39,7 +39,8 @@ module.exports = Backbone.View.extend({ view.customValue = this.customValue; } - fragment.appendChild(view.render().el); + view.render(); + fragment.appendChild(view.el); }); this.$el.append(fragment); diff --git a/src/style_manager/view/PropertyColorView.js b/src/style_manager/view/PropertyColorView.js index ea8f6414a..faffe8044 100644 --- a/src/style_manager/view/PropertyColorView.js +++ b/src/style_manager/view/PropertyColorView.js @@ -1,15 +1,17 @@ var Backbone = require('backbone'); -var PropertyView = require('./PropertyView'); var InputColor = require('domain_abstract/ui/InputColor'); -module.exports = PropertyView.extend({ +module.exports = require('./PropertyIntegerView').extend({ - initialize(options) { - PropertyView.prototype.initialize.apply(this, arguments); + init() { this.className += ` ${this.pfx}file`; }, - renderInput() { + setValue(value) { + this.input.setValue(value, {silent: 1}); + }, + + onRender() { if (!this.input) { var inputColor = new InputColor({ target: this.target, @@ -21,11 +23,6 @@ module.exports = PropertyView.extend({ this.$input = this.input.inputEl; this.$color = this.input.colorEl; } - this.setValue(this.componentValue); - }, - - setValue(value) { - this.input.setValue(value, {silent: 1}); }, }); diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index 9f008c317..3a9244b86 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/src/style_manager/view/PropertyCompositeView.js @@ -1,22 +1,17 @@ -var Backbone = require('backbone'); -var PropertyView = require('./PropertyView'); +const PropertyView = require('./PropertyView'); module.exports = PropertyView.extend({ - templateField() { + templateInput() { const pfx = this.pfx; - const ppfx = this.ppfx; return `
-
`; }, - initialize(o) { - PropertyView.prototype.initialize.apply(this, arguments); - this.config = o.config || {}; + init() { this.className = this.className + ' '+ this.pfx +'composite'; }, @@ -28,7 +23,7 @@ module.exports = PropertyView.extend({ /** * Renders input * */ - renderInput() { + onRender() { var model = this.model; var props = model.get('properties') || []; var self = this; diff --git a/src/style_manager/view/PropertyFileView.js b/src/style_manager/view/PropertyFileView.js index 6dc570a7b..ca334ac18 100644 --- a/src/style_manager/view/PropertyFileView.js +++ b/src/style_manager/view/PropertyFileView.js @@ -3,7 +3,7 @@ var PropertyView = require('./PropertyView'); module.exports = PropertyView.extend({ - templateField() { + templateInput() { const pfx = this.pfx; const ppfx = this.ppfx; const assetsLabel = this.config.assetsLabel || 'Images'; @@ -22,12 +22,10 @@ module.exports = PropertyView.extend({
⨯
-
`; }, - initialize(options) { - PropertyView.prototype.initialize.apply(this, arguments); + init() { this.assets = this.target.get('assets'); this.modal = this.target.get('Modal'); this.am = this.target.get('AssetManager'); @@ -37,8 +35,7 @@ module.exports = PropertyView.extend({ this.delegateEvents(); }, - /** @inheritdoc */ - renderInput() { + onRender() { if (!this.$input) { this.$input = $('', {placeholder: this.model.getDefaultValue(), type: 'text' }); } @@ -56,7 +53,7 @@ module.exports = PropertyView.extend({ setValue(value, f) { PropertyView.prototype.setValue.apply(this, arguments); - this.setPreviewView(value && value != this.getDefaultValue()); + this.setPreviewView(value && value != this.model.getDefaultValue()); this.setPreview(value); }, diff --git a/src/style_manager/view/PropertyIntegerView.js b/src/style_manager/view/PropertyIntegerView.js index 3008415cf..b3b417312 100644 --- a/src/style_manager/view/PropertyIntegerView.js +++ b/src/style_manager/view/PropertyIntegerView.js @@ -1,16 +1,27 @@ -var PropertyView = require('./PropertyView'); var InputNumber = require('domain_abstract/ui/InputNumber'); -module.exports = PropertyView.extend({ +module.exports = require('./PropertyView').extend({ - initialize(options) { - PropertyView.prototype.initialize.apply(this, arguments); + template(model) { + const pfx = this.pfx; + return ` +
+ ${this.templateLabel(model)} +
+ `; + }, + + init() { const model = this.model; this.listenTo(model, 'change:unit', this.modelValueChanged); this.listenTo(model, 'el:change', this.elementUpdated); }, - renderInput() { + setValue(value) { + this.input.setValue(value, {silent: 1}); + }, + + onRender() { if (!this.input) { var inputNumber = new InputNumber({ model: this.model, @@ -21,11 +32,6 @@ module.exports = PropertyView.extend({ this.$input = this.input.inputEl; this.$unit = this.input.unitEl; } - this.setValue(this.componentValue); - }, - - setValue(value) { - this.input.setValue(value, {silent: 1}); }, }); diff --git a/src/style_manager/view/PropertyRadioView.js b/src/style_manager/view/PropertyRadioView.js index ebc693ede..651264ec0 100644 --- a/src/style_manager/view/PropertyRadioView.js +++ b/src/style_manager/view/PropertyRadioView.js @@ -1,28 +1,22 @@ -var Backbone = require('backbone'); -var PropertyView = require('./PropertyView'); +module.exports = require('./PropertyView').extend({ -module.exports = PropertyView.extend({ - - templateField() { + templateInput() { const pfx = this.pfx; const ppfx = this.ppfx; return `
-
`; }, - initialize(options) { - PropertyView.prototype.initialize.apply(this, arguments); + init() { const model = this.model; this.list = model.get('list') || model.get('options') || []; this.className = this.className + ' '+ this.pfx +'list'; }, - /** @inheritdoc */ - renderInput() { + onRender() { var pfx = this.pfx; var ppfx = this.ppfx; var itemCls = ppfx + 'radio-item-label'; @@ -60,7 +54,8 @@ module.exports = PropertyView.extend({ /** @inheritdoc */ setValue(value) { - var v = this.model.get('value') || this.model.getDefaultValue(); + const model = this.model; + var v = model.get('value') || model.getDefaultValue(); if(value) v = value; @@ -68,7 +63,7 @@ module.exports = PropertyView.extend({ if(this.$input) this.$input.filter('[value="'+v+'"]').prop('checked', true); - this.model.set({value: v},{silent: true}); + model.set({value: v}, {silent: true}); }, }); diff --git a/src/style_manager/view/PropertySelectView.js b/src/style_manager/view/PropertySelectView.js index c315a1f00..e968d8cd1 100644 --- a/src/style_manager/view/PropertySelectView.js +++ b/src/style_manager/view/PropertySelectView.js @@ -1,9 +1,6 @@ -var Backbone = require('backbone'); -var PropertyView = require('./PropertyView'); +module.exports = require('./PropertyView').extend({ -module.exports = PropertyView.extend({ - - templateField() { + templateInput() { const pfx = this.pfx; const ppfx = this.ppfx; return ` @@ -13,20 +10,17 @@ module.exports = PropertyView.extend({
-
`; }, - initialize(options) { - PropertyView.prototype.initialize.apply(this, arguments); + init() { const model = this.model; this.list = model.get('list') || model.get('options') || []; }, - /** @inheritdoc */ - renderInput() { + onRender() { var pfx = this.pfx; - if(!this.$input){ + if (!this.$input) { var input = ' -
`; }, @@ -33,7 +36,7 @@ module.exports = Backbone.View.extend({ 'change': 'inputValueChanged' }, - initialize(o) { + initialize(o = {}) { this.config = o.config || {}; this.em = this.config.em; this.pfx = this.config.stylePrefix || ''; @@ -63,8 +66,16 @@ module.exports = Backbone.View.extend({ this.listenTo(model, 'change:status', this.updateStatus); this.events[`click .${pfx}clear`] = 'clear'; this.delegateEvents(); + + const init = this.init && this.init.bind(this); + init && init(); }, + /** + * Triggers when the status changes. The status indicates if the value of + * the proprerty is changed or inherited + * @private + */ updateStatus() { const status = this.model.get('status'); const pfx = this.pfx; @@ -92,7 +103,7 @@ module.exports = Backbone.View.extend({ }, /** - * Clear the property + * Clear the property from the target */ clear() { const target = this.getTargetModel(); @@ -157,14 +168,14 @@ module.exports = Backbone.View.extend({ return; } + const config = this.config; + const em = config.em; + const model = this.model; let value = ''; let status = ''; let targetValue = this.getTargetValue({ignoreDefault: 1}); - let defaultValue = this.getDefaultValue(); + let defaultValue = model.getDefaultValue(); let computedValue = this.getComputedValue(); - const config = this.config; - const em = config.em; - const model = this.model; if (targetValue) { value = targetValue; @@ -240,7 +251,7 @@ module.exports = Backbone.View.extend({ result = model.parseValue(result); if (!result && !opts.ignoreDefault) { - result = this.getDefaultValue(); + result = model.getDefaultValue(); } if (typeof customFetchValue == 'function' && !opts.ignoreCustomValue) { @@ -255,15 +266,6 @@ module.exports = Backbone.View.extend({ return result; }, - /** - * Returns default value - * @return {String} - * @private - */ - getDefaultValue() { - return this.model.getDefaultValue(); - }, - /** * Returns computed value * @return {String} @@ -411,20 +413,6 @@ module.exports = Backbone.View.extend({ this.model.set('visible', 0); }, - /** - * Renders input, to override - * */ - renderInput() { - if(!this.$input){ - this.$input = $('', { - placeholder: this.model.getDefaultValue(), - type: 'text' - }); - this.$el.find(this.inputHolderId).html(this.$input); - } - this.setValue(this.componentValue, 0); - }, - /** * Clean input * */ @@ -436,9 +424,10 @@ module.exports = Backbone.View.extend({ const el = this.el; el.innerHTML = this.template(this.model); el.className = this.className; - this.renderInput(); this.updateStatus(); - return this; + + const onRender = this.onRender && this.onRender.bind(this); + onRender && onRender(); }, });