Clean property view

src/style_manager/view/PropertiesView.js

@@ -5,11 +5,6 @@ export default Backbone.View.extend({
   initialize(o) {
     this.config = o.config || {};
     this.pfx = this.config.stylePrefix || '';
-    this.target = o.target || {};
-    this.propTarget = o.propTarget || {};
-    this.onChange = o.onChange;
-    this.onInputRender = o.onInputRender || {};
-    this.customValue = o.customValue || {};
     this.properties = [];
     this.parent = o.parent;
     const coll = this.collection;
@@ -22,40 +17,24 @@ export default Backbone.View.extend({
   },
 
   add(model, frag, opts = {}) {
-    const { parent } = this;
+    const { parent, config } = this;
     const appendTo = frag || this.el;
-    const view = new model.typeView({
-      model,
-      name: model.get('name'),
-      id: this.pfx + model.get('property'),
-      target: this.target,
-      propTarget: this.propTarget,
-      onChange: this.onChange,
-      onInputRender: this.onInputRender,
-      config: this.config,
-    });
+    const view = new model.typeView({ model, config });
     parent && (view.parent = parent);
-
-    if (model.get('type') != 'composite') {
-      view.customValue = this.customValue;
-    }
-
     view.render();
     const rendered = view.el;
     this.properties.push(view);
-    view.updateVisibility();
-
     appendAtIndex(appendTo, rendered, opts.at);
   },
 
   render() {
-    const { $el } = this;
+    const { $el, pfx } = this;
     this.clearItems();
     const fragment = document.createDocumentFragment();
     this.collection.forEach(model => this.add(model, fragment));
     $el.empty();
     $el.append(fragment);
-    $el.attr('class', `${this.pfx}properties`);
+    $el.attr('class', `${pfx}properties`);
     return this;
   },
 

src/style_manager/view/PropertyView.js

@@ -1,10 +1,8 @@
 import Backbone from 'backbone';
-import { bindAll, isArray, isUndefined, debounce } from 'underscore';
-import { camelCase, isObject, find } from 'utils/mixins';
-import { includes, each } from 'underscore';
+import { bindAll, isUndefined, debounce } from 'underscore';
+import { isObject } from 'utils/mixins';
 
 const clearProp = 'data-clear-style';
-const evStyleUp = 'component:styleUpdate';
 
 export default Backbone.View.extend({
   template() {
@@ -19,13 +17,12 @@ export default Backbone.View.extend({
     const { pfx, em } = this;
     const { parent } = model;
     const { icon = '', info = '' } = model.attributes;
-    const label = model.getLabel();
     const icons = em?.getConfig('icons');
     const iconClose = icons?.close || '';
 
     return `
       <span class="${pfx}icon ${icon}" title="${info}">
-        ${label}
+        ${model.getLabel()}
       </span>
       ${!parent ? `<div class="${pfx}clear" style="display: none" ${clearProp}>${iconClose}</div>` : ''}
     `;
@@ -46,23 +43,14 @@ export default Backbone.View.extend({
 
   initialize(o = {}) {
     bindAll(this, '__change', '__updateStyle');
-    this.config = o.config || {};
-    const em = this.config.em;
+    const config = o.config || {};
+    const { em } = config;
+    this.config = config;
     this.em = em;
-    this.pfx = this.config.stylePrefix || '';
-    this.ppfx = this.config.pStylePrefix || '';
-    this.target = o.target || {};
-    this.propTarget = o.propTarget || {};
-    this.onChange = o.onChange;
-    this.onInputRender = o.onInputRender || {};
-    this.customValue = o.customValue || {};
-    const model = this.model;
-    this.property = model.get('property');
-    this.input = null;
-    const pfx = this.pfx;
-    this.inputHolderId = '#' + pfx + 'input-holder';
-    this.sector = model.collection && model.collection.sector;
+    this.pfx = config.stylePrefix || '';
+    this.ppfx = config.pStylePrefix || '';
     this.__destroyFn = this.destroy ? this.destroy.bind(this) : () => {};
+    const { model } = this;
     model.view = this;
 
     this.listenTo(model, 'destroy remove', this.remove);
@@ -82,7 +70,7 @@ export default Backbone.View.extend({
 
   remove() {
     Backbone.View.prototype.remove.apply(this, arguments);
-    ['em', 'target', 'input', '$input', 'propTarget', 'sector'].forEach(i => (this[i] = {}));
+    ['em', 'input', '$input', 'view'].forEach(i => (this[i] = {}));
     this.__destroyFn(this._getClbOpts());
   },
 
@@ -142,15 +130,6 @@ export default Backbone.View.extend({
     this.model.upValue(ev.target.value);
   },
 
-  /**
-   * Returns value from input
-   * @return {string}
-   */
-  getInputValue() {
-    const input = this.getInputEl();
-    return input ? input.value : '';
-  },
-
   onValueChange(m, val, opt = {}) {
     this.setValue(this.model.getFullValue());
     this.updateStatus();
@@ -236,9 +215,8 @@ export default Backbone.View.extend({
   render() {
     this.clearCached();
     const { pfx, model, el, $el } = this;
-    const property = model.get('property');
-    const type = model.get('type');
-    const full = model.get('full');
+    const name = model.getName();
+    const type = model.getType();
     const cls = model.get('className') || '';
     const className = `${pfx}property`;
     // Support old integer classname
@@ -251,8 +229,8 @@ export default Backbone.View.extend({
     this.createdEl = create && create(this._getClbOpts());
     $el.find('[data-sm-fields]').append(this.createdEl || this.templateInput(model));
 
-    el.className = `${className} ${clsType} ${className}__${property} ${cls}`.trim();
-    el.className += full ? ` ${className}--full` : '';
+    el.className = `${className} ${clsType} ${className}__${name} ${cls}`.trim();
+    el.className += model.isFull() ? ` ${className}--full` : '';
 
     const onRender = this.onRender && this.onRender.bind(this);
     onRender && onRender();