diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js index fdf1d95d2..bae87089c 100644 --- a/src/style_manager/model/Property.js +++ b/src/style_manager/model/Property.js @@ -18,7 +18,28 @@ define(['backbone'], properties: [], layers: [], list: [], - } + }, + + /** + * Return value + * @return {string} Value + * @private + */ + getValue: function(){ + var result = ''; + var type = this.get('type'); + + switch(type){ + case 'integer': + result = this.get('value') + this.get('unit'); + break; + default: + result = this.get('value'); + break; + } + + return result; + }, }); }); \ No newline at end of file diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index 1437b5f49..f1300f8ee 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/src/style_manager/view/PropertyCompositeView.js @@ -120,8 +120,7 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyComposite.html build: function(selectedEl, propertyModel){ var result = ''; this.model.get('properties').each(function(prop){ - //TODO v = prop.getValueForTarget(); -> functionName inside?!? - var v = (prop.get('value') || prop.get('defaults')) + prop.get('unit'), + var v = prop.getValue(); func = prop.get('functionName'); if(func) v = func + '(' + v + ')'; diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 98a46ea75..b24243357 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -18,7 +18,6 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat this.onChange = o.onChange || {}; this.onInputRender = o.onInputRender || {}; this.customValue = o.customValue || {}; - this.func = this.model.get('functionName'); this.defaultValue = this.model.get('defaults'); this.property = this.model.get('property'); this.input = this.$input = null; @@ -122,7 +121,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat * @return {string} */ getValueForTarget: function(){ - return this.model.get('value'); + return this.model.getValue(); }, /** @@ -155,8 +154,9 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat value = this.getValueForTarget(); - if(this.func) - value = this.func + '(' + value + ')'; + var func = this.model.get('functionName'); + if(func) + value = func + '(' + value + ')'; if( !this.model.get('doNotStyle') ){ var componentCss = _.clone( this.getTarget().get('style') ); diff --git a/test/specs/style_manager/view/PropertyView.js b/test/specs/style_manager/view/PropertyView.js index c8352d0bc..4448a68af 100644 --- a/test/specs/style_manager/view/PropertyView.js +++ b/test/specs/style_manager/view/PropertyView.js @@ -90,6 +90,16 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod compStyle.should.deep.equal(assertStyle); }); + it('Update target on value change with functionName', function() { + view.selectedComponent = component; + view.model.set('functionName', 'testfunc'); + view.model.set('value', propValue); + var compStyle = view.selectedComponent.get('style'); + var assertStyle = {}; + assertStyle[propName] = 'testfunc(' + propValue + ')'; + compStyle.should.deep.equal(assertStyle); + }); + it('Clean target from the property if its value is empty', function() { view.selectedComponent = component; view.model.set('value', propValue);