Clean property views

src/style_manager/view/PropertyColorView.js

@@ -15,14 +15,12 @@ export default PropertyNumberView.extend({
   },
 
   onRender() {
-    if (!this.input) {
-      const { ppfx, model, em } = this;
+    if (!this.inputInst) {
+      const { ppfx, model, em, el } = this;
       const inputColor = new InputColor({ target: em, model, ppfx });
       const input = inputColor.render();
-      this.el.querySelector(`.${ppfx}fields`).appendChild(input.el);
-      this.$input = input.inputEl;
-      this.$color = input.colorEl;
-      this.input = this.$input.get(0);
+      el.querySelector(`.${ppfx}fields`).appendChild(input.el);
+      this.input = input.inputEl.get(0);
       this.inputInst = input;
     }
   },

src/style_manager/view/PropertyFileView.js

@@ -51,7 +51,6 @@ export default PropertyView.extend({
         this.model.upValue(url, { partial: !complete });
         complete && am.close();
       },
-      target: this.getTargetModel(),
       types: ['image'],
       accept: 'image/*',
     });

src/style_manager/view/PropertyNumberView.js

@@ -1,8 +1,5 @@
-import Backbone from 'backbone';
 import PropertyView from './PropertyView';
 
-const $ = Backbone.$;
-
 export default PropertyView.extend({
   templateInput() {
     return '';
@@ -21,25 +18,21 @@ export default PropertyView.extend({
   },
 
   onRender() {
-    const ppfx = this.ppfx;
+    const { ppfx, model, el } = this;
 
-    if (!this.input) {
-      const input = this.model.input;
+    if (!this.inputInst) {
+      const { input } = model;
       input.ppfx = ppfx;
       input.render();
-      const fields = this.el.querySelector(`.${ppfx}fields`);
+      const fields = el.querySelector(`.${ppfx}fields`);
       fields.appendChild(input.el);
-      this.$input = input.inputEl;
-      this.unit = input.unitEl;
-      this.$unit = $(this.unit);
-      this.input = this.$input.get(0);
+      this.input = input.inputEl.get(0);
       this.inputInst = input;
     }
   },
 
   clearCached() {
     PropertyView.prototype.clearCached.apply(this, arguments);
-    this.unit = null;
-    this.$unit = null;
+    this.inputInst = null;
   },
 });

src/style_manager/view/PropertyView.js

@@ -131,39 +131,6 @@ export default Backbone.View.extend({
     return this.clearEl;
   },
 
-  /**
-   * Returns selected target which should have 'style' property
-   * @return {Model|null}
-   */
-  getTarget() {
-    return this.getTargetModel();
-  },
-
-  getTargets() {
-    const { targets } = this.propTarget;
-    return targets || [this.getTarget()];
-  },
-
-  getFirstTarget() {
-    return this.getTargets()[0];
-  },
-
-  /**
-   * Returns Styleable model
-   * @return {Model|null}
-   */
-  getTargetModel() {
-    return this.propTarget && this.propTarget.model;
-  },
-
-  /**
-   * Returns helper Styleable model
-   * @return {Model|null}
-   */
-  getHelperModel() {
-    return this.propTarget && this.propTarget.helper;
-  },
-
   /**
    * Triggers when the value of element input/s is changed, so have to update
    * the value of the model which will propogate those changes to the target
@@ -255,23 +222,14 @@ export default Backbone.View.extend({
   },
 
   _getClbOpts() {
-    const { model, el, createdEl, propTarget } = this;
-    const prop = model.get('property');
-    const computed = propTarget.computed || {};
-    const parentRules = propTarget.parentRules || [];
-    const parentRule = find(parentRules, rule => !!rule.getStyle()[prop]);
+    const { model, el, createdEl } = this;
     return {
       el,
       createdEl,
+      property: model,
       props: model.attributes,
-      setProps: (...args) => model.set(...args),
       change: this.__change,
       updateStyle: this.__updateStyle,
-      targets: this.getTargets(), // Used to update selected targets
-      target: this.getFirstTarget(), // Used to update custom UI
-      computed,
-      parentRules, // All parent rules
-      parentRule, // First parent rule containing the same property
     };
   },
 
@@ -295,7 +253,6 @@ export default Backbone.View.extend({
 
     el.className = `${className} ${clsType} ${className}__${property} ${cls}`.trim();
     el.className += full ? ` ${className}--full` : '';
-    // this.updateStatus();
 
     const onRender = this.onRender && this.onRender.bind(this);
     onRender && onRender();