From bbbcb6cc2629be5e2b4f4a5a6be4cdd0b698b2be Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 19 Sep 2017 14:54:47 +0200 Subject: [PATCH] More updates on Style Properties refactoring --- index.html | 2 +- .../view/PropertyCompositeView.js | 12 +++++-- src/style_manager/view/PropertyRadioView.js | 22 ++++--------- src/style_manager/view/PropertySelectView.js | 26 +++++++-------- src/style_manager/view/PropertyView.js | 32 +++++++++++++++---- 5 files changed, 56 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index 4f0a53691..394f87268 100755 --- a/index.html +++ b/index.html @@ -1320,7 +1320,7 @@ console.log('STORE ', e); }) - editor.on('styleManager:change:text-shadow', function(view) { + editor.on('styleManager:change:border-width', function(view) { var model = view.model; let targetValue = view.getTargetValue({ignoreDefault: 1}); let computedValue = view.getComputedValue(); diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index 3a9244b86..9201bd438 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/src/style_manager/view/PropertyCompositeView.js @@ -29,8 +29,10 @@ module.exports = PropertyView.extend({ var self = this; if (props.length) { - if(!this.$input) + if (!this.$input) { this.$input = $('', {value: 0, type: 'hidden' }); + this.input = this.$input.get(0); + } if (!this.props) { this.props = model.get('properties'); @@ -102,9 +104,13 @@ module.exports = PropertyView.extend({ // to get the value of the sub-property if (targetValue) { const values = targetValue.split(' '); - value = view ? view.model.parseValue(values[index]) : values[index]; + value = values[index]; } else { - value = view.getTargetValue({ignoreCustomValue: 1}); + value = view && view.getTargetValue({ignoreCustomValue: 1, ignoreDefault: 1}); + } + + if (view) { + value = view.model.parseValue(value); } return value; diff --git a/src/style_manager/view/PropertyRadioView.js b/src/style_manager/view/PropertyRadioView.js index 651264ec0..1a6eaba30 100644 --- a/src/style_manager/view/PropertyRadioView.js +++ b/src/style_manager/view/PropertyRadioView.js @@ -24,46 +24,38 @@ module.exports = require('./PropertyView').extend({ if(!this.$input) { if(this.list && this.list.length) { - var input = ''; + let inputStr = ''; _.each(this.list, el => { var cl = el.className ? el.className + ' ' + pfx + 'icon ' + itemCls : '', id = prop + '-' + el.value, labelTxt = el.name ? el.name : el.value; var titleAttr = el.title ? 'title="' + el.title + '"': ''; - input += '
'+ + inputStr += '
'+ ''+ '
'; }); - this.input = input; - this.$inputEl = $(this.input); + this.$inputEl = $(inputStr); + this.input = this.$inputEl.get(0); this.$el.find('#'+ pfx +'input-holder').html(this.$inputEl); this.$input = this.$inputEl.find('input[name="'+this.property+'"]'); } } - - this.setValue(this.componentValue); }, - /** - * Returns value from input - * @return {string} - */ getInputValue() { return this.$input ? this.$el.find('input:checked').val() : ''; }, - /** @inheritdoc */ setValue(value) { const model = this.model; var v = model.get('value') || model.getDefaultValue(); - if(value) + if (value) { v = value; + } if(this.$input) - this.$input.filter('[value="'+v+'"]').prop('checked', true); - - model.set({value: v}, {silent: true}); + this.$input.filter(`[value="${v}"]`).prop('checked', true); }, }); diff --git a/src/style_manager/view/PropertySelectView.js b/src/style_manager/view/PropertySelectView.js index e968d8cd1..2af82c28f 100644 --- a/src/style_manager/view/PropertySelectView.js +++ b/src/style_manager/view/PropertySelectView.js @@ -20,22 +20,22 @@ module.exports = require('./PropertyView').extend({ onRender() { var pfx = this.pfx; + const options = this.list; + if (!this.$input) { - var input = ''; - this.input = input; - this.$input = $(this.input); - this.$el.find('#'+ pfx +'input-holder').html(this.$input); + this.$input = $(``); + this.input = this.$input.get(0); + this.$el.find(`#${pfx}input-holder`).html(this.$input); } }, diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 54cec42ed..fcdc030f4 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -121,11 +121,10 @@ module.exports = Backbone.View.extend({ /** * Returns selected target which should have 'style' property - * @deprecated * @return {Model|null} */ getTarget() { - return this.propTarget && this.propTarget.model; + return this.getTargetModel(); }, /** @@ -283,7 +282,8 @@ module.exports = Backbone.View.extend({ * @return {string} */ getInputValue() { - return this.$input ? this.$input.val() : ''; + const input = this.getInputEl(); + return input ? input.value : ''; }, /** @@ -299,7 +299,7 @@ module.exports = Backbone.View.extend({ const value = model.getFullValue(); const target = this.getTarget(); const onChange = this.onChange; - this.setValue(value); + this.setRawValue(value); // Check if component is allowed to be styled if (!target || !this.isTargetStylable() || !this.isComponentStylable()) { @@ -380,6 +380,18 @@ module.exports = Backbone.View.extend({ return stylable; }, + /** + * Passed a raw value you have to update the input element, generally + * is the value fetched from targets, so you can receive values with + * functions, units, etc. (eg. `rotateY(45deg)`) + * get also + * @param {string} value + * @private + */ + setRawValue(value) { + this.setValue(this.model.parseValue(value)); + }, + /** * Set the value to property input * @param {String} value @@ -396,8 +408,16 @@ module.exports = Backbone.View.extend({ v = value; } - const input = this.$input; - input && input.val(v); + const input = this.getInputEl(); + input && (input.value = v); + }, + + getInputEl() { + if (!this.input) { + this.input = this.el.querySelector('input'); + } + + return this.input; }, updateVisibility() {