-
-
+
+ templateField() {
+ const pfx = this.pfx;
+ const ppfx = this.ppfx;
+ return `
+
-
-
-
`),
+
+ `;
+ },
initialize(options) {
PropertyView.prototype.initialize.apply(this, arguments);
@@ -85,16 +94,6 @@ module.exports = PropertyView.extend({
this.$preview.css('background-image', "url(" + url + ")");
},
-
- /** @inheritdoc */
- renderTemplate() {
- this.$el.append( this.template({
- upload : 'Upload',
- assets : 'Images',
- pfx : this.pfx
- }));
- },
-
/** @inheritdoc */
cleanValue() {
this.setPreviewView(0);
diff --git a/src/style_manager/view/PropertyIntegerView.js b/src/style_manager/view/PropertyIntegerView.js
index 856ae3183..d0adbe56c 100644
--- a/src/style_manager/view/PropertyIntegerView.js
+++ b/src/style_manager/view/PropertyIntegerView.js
@@ -1,4 +1,3 @@
-var Backbone = require('backbone');
var PropertyView = require('./PropertyView');
var InputNumber = require('domain_abstract/ui/InputNumber');
@@ -10,15 +9,6 @@ module.exports = PropertyView.extend({
this.listenTo(this.model, 'el:change', this.elementUpdated);
},
- /**
- * Returns value from inputs
- * @return {string}
- */
- getValueForTarget() {
- var model = this.model;
- return model.get('value') + model.get('unit');
- },
-
renderInput() {
if (!this.input) {
var inputNumber = new InputNumber({
@@ -33,8 +23,6 @@ module.exports = PropertyView.extend({
this.setValue(this.componentValue);
},
- renderTemplate() {},
-
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 14bd57313..ebc693ede 100644
--- a/src/style_manager/view/PropertyRadioView.js
+++ b/src/style_manager/view/PropertyRadioView.js
@@ -3,11 +3,16 @@ var PropertyView = require('./PropertyView');
module.exports = PropertyView.extend({
- template: _.template(`
-
-
-
-
`),
+ templateField() {
+ const pfx = this.pfx;
+ const ppfx = this.ppfx;
+ return `
+
+
+
+
+ `;
+ },
initialize(options) {
PropertyView.prototype.initialize.apply(this, arguments);
diff --git a/src/style_manager/view/PropertySelectView.js b/src/style_manager/view/PropertySelectView.js
index fcda001e8..c315a1f00 100644
--- a/src/style_manager/view/PropertySelectView.js
+++ b/src/style_manager/view/PropertySelectView.js
@@ -3,14 +3,19 @@ var PropertyView = require('./PropertyView');
module.exports = PropertyView.extend({
- template: _.template(`
-
-
`),
+ templateField() {
+ const pfx = this.pfx;
+ const ppfx = this.ppfx;
+ return `
+
+
+ `;
+ },
initialize(options) {
PropertyView.prototype.initialize.apply(this, arguments);
diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js
index bfc501204..f654e3596 100644
--- a/src/style_manager/view/PropertyStackView.js
+++ b/src/style_manager/view/PropertyStackView.js
@@ -4,13 +4,18 @@ var Layers = require('./../model/Layers');
var LayersView = require('./LayersView');
module.exports = PropertyCompositeView.extend({
-
- template: _.template(`
-
-
-
-
-
`),
+
+ templateField() {
+ const pfx = this.pfx;
+ const ppfx = this.ppfx;
+ return `
+
+
+
+
+
+ `;
+ },
initialize(o) {
PropertyCompositeView.prototype.initialize.apply(this, arguments);
@@ -115,7 +120,7 @@ module.exports = PropertyCompositeView.extend({
var valist = (targetValue + '').split(',');
result = valist[layerIndex];
result = result ? result.trim() : propView.getDefaultValue();
- result = propView.tryFetchFromFunction(result);
+ result = propView.model.parseValue(result);
} else {
var aStack = this.getStackValues();
var strVar = aStack[layerIndex];
@@ -312,8 +317,9 @@ module.exports = PropertyCompositeView.extend({
},
render() {
- this.renderLabel();
- this.renderField();
+ const el = this.el;
+ el.innerHTML = this.template(this.model);
+ this.renderInput();
this.renderLayers();
this.$el.attr('class', this.className);
this.updateStatus();
diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js
index 1e043008f..c57ad3de6 100644
--- a/src/style_manager/view/PropertyView.js
+++ b/src/style_manager/view/PropertyView.js
@@ -1,19 +1,33 @@
var Backbone = require('backbone');
module.exports = Backbone.View.extend({
- template: _.template(`
-
-
-
-
`),
-
- templateLabel: _.template(`
-
-
- <%= label %>
-
- ⨯
-
`),
+
+ template(model) {
+ const pfx = this.pfx;
+ const name = model.get('name');
+ const icon = model.get('icon');
+ const info = model.get('info');
+ return `
+
+
+ ${name}
+
+ ⨯
+
+ ${this.templateField()}
+ `;
+ },
+
+ templateField() {
+ const pfx = this.pfx;
+ const ppfx = this.ppfx;
+ return `
+
+
+
+
+ `;
+ },
events: {
'change': 'valueUpdated'
@@ -169,7 +183,6 @@ module.exports = Backbone.View.extend({
status = '';
}
- //value = this.tryFetchFromFunction(value);
this.setValue(value, 1);
this.model.set('status', status);
@@ -177,14 +190,6 @@ module.exports = Backbone.View.extend({
em.trigger('styleManager:change', this);
em.trigger(`styleManager:change:${model.get('property')}`, this);
}
-
- /*
- if(this.getTarget()) {
- if(!this.sameValue()){
- this.renderInputRequest();
- }
- }*/
-
},
checkVisibility() {
@@ -207,16 +212,6 @@ module.exports = Backbone.View.extend({
return result;
},
- /**
- * Checks if the value from selected component is the
- * same of the value of the model
- *
- * @return {Boolean}
- * */
- sameValue() {
- return this.getTargetValue() == this.getValueForTarget();
- },
-
/**
* Get the value of this property from the target (eg, Component, CSSRule)
* @param {Object} [opts] Options
@@ -275,36 +270,6 @@ module.exports = Backbone.View.extend({
return computed && valid.indexOf(property) >= 0 && computed[property];
},
- /**
- * Fetch the string from function type value
- * @param {String} v Function type value
- *
- * @return {String}
- * */
- fetchFromFunction(v) {
- return v.substring(v.indexOf("(") + 1, v.lastIndexOf(")"));
- },
-
- tryFetchFromFunction(value) {
- if (!this.model.get('functionName')) {
- return value;
- }
-
- var valueStr = value + '';
- var start = valueStr.indexOf("(") + 1;
- var end = valueStr.lastIndexOf(")");
- return valueStr.substring(start, end);
- },
-
- /**
- * Returns the value composed for the target
- * TODO put here the check for functionName
- * @return {string}
- */
- getValueForTarget() {
- return this.model.get('value');
- },
-
/**
* Returns value from input
* @return {string}
@@ -321,31 +286,32 @@ module.exports = Backbone.View.extend({
* @param {Object} opt Options
* */
valueChanged(e, val, opt) {
- var mVal = this.getValueForTarget();
- var em = this.config.em;
- var model = this.model;
+ const em = this.config.em;
+ const model = this.model;
+ const value = model.getFullValue();
+ const target = this.getTarget();
+ const onChange = this.onChange;
- if(this.$input)
- this.setValue(mVal);
+ if (this.$input) {
+ this.setValue(value);
+ }
- if(!this.getTarget())
+ if (!target) {
return;
+ }
// Check if component is allowed to be styled
if (!this.isTargetStylable() || !this.isComponentStylable()) {
return;
}
- const value = this.model.getFullValue();
- var target = this.getTarget();
- var onChange = this.onChange;
-
- if(onChange && typeof onChange === "function"){
+ if (onChange && typeof onChange === "function") {
onChange(target, this, opt);
- }else
+ } else {
this.updateTargetStyle(value, null, opt);
+ }
- if(em){
+ if (em) {
em.trigger('component:update', model);
em.trigger('component:styleUpdate', model);
em.trigger('component:styleUpdate:' + model.get('property'), model);
@@ -370,6 +336,7 @@ module.exports = Backbone.View.extend({
}
target.setStyle(style, opts);
+
// Helper is used by `states` like ':hover' to show its preview
const helper = this.getHelperModel();
helper && helper.setStyle(style, opts);
@@ -442,39 +409,6 @@ module.exports = Backbone.View.extend({
this.model.set('visible', 0);
},
- renderLabel() {
- 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'),
- }));
- },
-
- /**
- * Render field property
- * */
- renderField() {
- this.renderTemplate();
- this.renderInput();
- delete this.componentValue;
- },
-
- /**
- * Render loaded template
- * */
- renderTemplate() {
- this.$el.append( this.template({
- pfx : this.pfx,
- ppfx : this.ppfx,
- icon : this.model.get('icon'),
- info : this.model.get('info'),
- label : this.model.get('name'),
- }));
- },
-
/**
* Renders input, to override
* */
@@ -489,13 +423,6 @@ module.exports = Backbone.View.extend({
this.setValue(this.componentValue, 0);
},
- /**
- * Request to render input of the property
- * */
- renderInputRequest() {
- this.renderInput();
- },
-
/**
* Clean input
* */
@@ -504,9 +431,10 @@ module.exports = Backbone.View.extend({
},
render() {
- this.renderLabel();
- this.renderField();
- this.$el.attr('class', this.className);
+ const el = this.el;
+ el.innerHTML = this.template(this.model);
+ this.renderInput();
+ el.className = this.className;
this.updateStatus();
return this;
},