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() {