Update property views to classes

src/style_manager/view/PropertyColorView.js

@@ -1,21 +1,21 @@
 import PropertyNumberView from './PropertyNumberView';
 import InputColor from 'domain_abstract/ui/InputColor';
 
-export default PropertyNumberView.extend({
+export default class PropertyColorView extends PropertyNumberView {
   setValue(value) {
     this.inputInst.setValue(value, { fromTarget: 1, def: this.model.getDefaultValue() });
-  },
+  }
 
   remove() {
     PropertyNumberView.prototype.remove.apply(this, arguments);
     const inp = this.inputInst;
     inp && inp.remove && inp.remove();
     ['inputInst', '$color'].forEach(i => (this[i] = {}));
-  },
+  }
 
   __handleChange(value, partial) {
     this.model.upValue(value, { partial });
-  },
+  }
 
   onRender() {
     if (!this.inputInst) {
@@ -27,5 +27,5 @@ export default PropertyNumberView.extend({
       this.input = input.inputEl.get(0);
       this.inputInst = input;
     }
-  },
-});
+  }
+}

src/style_manager/view/PropertyCompositeView.js

@@ -1,7 +1,7 @@
 import PropertyView from './PropertyView';
 import PropertiesView from './PropertiesView';
 
-export default PropertyView.extend({
+export default class PropertyCompositeView extends PropertyView {
   templateInput() {
     const { pfx } = this;
     return `
@@ -9,14 +9,14 @@ export default PropertyView.extend({
         <span id="${pfx}input-holder"></span>
       </div>
     `;
-  },
+  }
 
   remove() {
     this.props?.remove();
     PropertyView.prototype.remove.apply(this, arguments);
-  },
+  }
 
-  onValueChange() {},
+  onValueChange() {}
 
   onRender() {
     const { model, pfx } = this;
@@ -37,10 +37,10 @@ export default PropertyView.extend({
       this.$el.find(`#${pfx}input-holder`).append(propsView.el);
       this.props = propsView;
     }
-  },
+  }
 
   clearCached() {
     PropertyView.prototype.clearCached.apply(this, arguments);
     this.props = null;
-  },
-});
+  }
+}

src/style_manager/view/PropertyFileView.js

@@ -1,14 +1,14 @@
 import { isString } from 'underscore';
 import PropertyView from './PropertyView';
 
-export default PropertyView.extend({
+export default class PropertyFileView extends PropertyView {
   events() {
     return {
       ...PropertyView.prototype.events,
       'click [data-clear-asset]': 'clear',
       'click [data-open-assets]': 'openAssetManager',
     };
-  },
+  }
 
   templateInput() {
     const { pfx, em } = this;
@@ -31,7 +31,7 @@ export default PropertyView.extend({
         </div>
       </div>
     `;
-  },
+  }
 
   __setValueInput(value) {
     const { model, el } = this;
@@ -40,7 +40,7 @@ export default PropertyView.extend({
     const prvEl = el.querySelector('[data-preview]');
     prvBoxEl.style.display = !value || value === valueDef ? 'none' : '';
     prvEl.style.backgroundImage = value || model.getDefaultValue();
-  },
+  }
 
   openAssetManager() {
     const am = this.em?.get('AssetManager');
@@ -54,5 +54,5 @@ export default PropertyView.extend({
       types: ['image'],
       accept: 'image/*',
     });
-  },
-});
+  }
+}

src/style_manager/view/PropertyNumberView.js

@@ -1,21 +1,21 @@
 import PropertyView from './PropertyView';
 
-export default PropertyView.extend({
+export default class PropertyNumberView extends PropertyView {
   templateInput() {
     return '';
-  },
+  }
 
   init() {
     const model = this.model;
     this.listenTo(model, 'change:unit', this.onValueChange);
     this.listenTo(model, 'change:units', this.render);
-  },
+  }
 
   setValue(value) {
     const parsed = this.model.parseValue(value);
     value = `${parsed.value}${parsed.unit}`;
     this.inputInst.setValue(value, { silent: 1 });
-  },
+  }
 
   onRender() {
     const { ppfx, model, el } = this;
@@ -29,10 +29,10 @@ export default PropertyView.extend({
       this.input = input.inputEl.get(0);
       this.inputInst = input;
     }
-  },
+  }
 
   clearCached() {
     PropertyView.prototype.clearCached.apply(this, arguments);
     this.inputInst = null;
-  },
-});
+  }
+}

src/style_manager/view/PropertyRadioView.js

@@ -1,10 +1,10 @@
 import PropertySelectView from './PropertySelectView';
 
-export default PropertySelectView.extend({
+export default class PropertyRadioView extends PropertySelectView {
   templateInput() {
     const { ppfx } = this;
     return `<div class="${ppfx}field ${ppfx}field-radio"></div>`;
-  },
+  }
 
   onRender() {
     const { pfx, ppfx, model } = this;
@@ -36,12 +36,12 @@ export default PropertySelectView.extend({
       inputHld.innerHTML = `<div class="${ppfx}radio-items">${optionsRes.join('')}</div>`;
       this.input = inputHld.firstChild;
     }
-  },
+  }
 
   __setValueInput(value) {
     const model = this.model;
     const id = value || model.getDefaultValue();
     const inputIn = this.getInputEl()?.querySelector(`[value="${id}"]`);
     inputIn && (inputIn.checked = true);
-  },
-});
+  }
+}

src/style_manager/view/PropertySelectView.js

@@ -1,6 +1,6 @@
 import PropertyView from './PropertyView';
 
-export default PropertyView.extend({
+export default class PropertySelectView extends PropertyView {
   templateInput() {
     const pfx = this.pfx;
     const ppfx = this.ppfx;
@@ -12,17 +12,17 @@ export default PropertyView.extend({
         </div>
       </div>
     `;
-  },
+  }
 
   initialize(...args) {
     PropertyView.prototype.initialize.apply(this, args);
     this.listenTo(this.model, 'change:options', this.updateOptions);
-  },
+  }
 
   updateOptions() {
     this.input = null;
     this.onRender();
-  },
+  }
 
   onRender() {
     const { model, pfx } = this;
@@ -44,7 +44,7 @@ export default PropertyView.extend({
       inputH.innerHTML = `<select>${optionsRes.join('')}</select>`;
       this.input = inputH.firstChild;
     }
-  },
+  }
 
   __setValueInput(value) {
     const { model } = this;
@@ -52,5 +52,5 @@ export default PropertyView.extend({
     const firstOpt = model.getOptions()[0];
     const firstId = firstOpt ? model.getOptionId(firstOpt) : '';
     input && (input.value = value || firstId);
-  },
-});
+  }
+}

src/style_manager/view/PropertySliderView.js

@@ -1,6 +1,6 @@
 import Property from './PropertyNumberView';
 
-export default Property.extend({
+export default class PropertySliderView extends Property {
   events() {
     return {
       ...Property.prototype.events,
@@ -8,7 +8,7 @@ export default Property.extend({
       'input [type=range]': 'inputValueChangedSoft',
       change: '',
     };
-  },
+  }
 
   templateInput(model) {
     const { ppfx } = this;
@@ -17,7 +17,7 @@ export default Property.extend({
         <input type="range" min="${model.get('min')}" max="${model.get('max')}" step="${model.get('step')}"/>
       </div>
     `;
-  },
+  }
 
   getSliderEl() {
     if (!this.slider) {
@@ -25,22 +25,22 @@ export default Property.extend({
     }
 
     return this.slider;
-  },
+  }
 
   inputValueChanged() {
     this.model.upValue(this.getSliderEl().value);
-  },
+  }
 
   inputValueChangedSoft() {
     this.model.upValue(this.getSliderEl().value, { partial: true });
-  },
+  }
 
   setValue(value) {
     const { model } = this;
     const parsed = model.parseValue(value);
     this.getSliderEl().value = value === '' ? model.getDefaultValue() : parseFloat(parsed.value);
     Property.prototype.setValue.apply(this, arguments);
-  },
+  }
 
   onRender() {
     Property.prototype.onRender.apply(this, arguments);
@@ -48,10 +48,10 @@ export default Property.extend({
     if (!this.model.get('showInput')) {
       this.inputInst.el.style.display = 'none';
     }
-  },
+  }
 
   clearCached() {
     Property.prototype.clearCached.apply(this, arguments);
     this.slider = null;
-  },
-});
+  }
+}

src/style_manager/view/PropertyStackView.js

@@ -2,14 +2,14 @@ import PropertyCompositeView from './PropertyCompositeView';
 import PropertiesView from './PropertiesView';
 import LayersView from './LayersView';
 
-export default PropertyCompositeView.extend({
+export default class PropertyStackView extends PropertyCompositeView {
   events() {
     return {
       ...PropertyCompositeView.prototype.events,
       'click [data-add-layer]': 'addLayer',
       change: '',
     };
-  },
+  }
 
   templateInput() {
     const { pfx, em } = this;
@@ -23,33 +23,33 @@ export default PropertyCompositeView.extend({
         <div data-layers-wrapper></div>
       </div>
     `;
-  },
+  }
 
   init() {
     const { model } = this;
     this.listenTo(model.__getLayers(), 'change reset', this.updateStatus);
-  },
+  }
 
   addLayer() {
     this.model.addLayer({}, { at: 0 });
-  },
+  }
 
   /**
    * There is no need to handle input update by the property itself,
    * this will be done by layers
    * @private
    */
-  setValue() {},
+  setValue() {}
 
   remove() {
     this.layersView?.remove();
     PropertyCompositeView.prototype.remove.apply(this, arguments);
-  },
+  }
 
   clearCached() {
     PropertyCompositeView.prototype.clearCached.apply(this, arguments);
     this.layersView = null;
-  },
+  }
 
   onRender() {
     const { model, el, config } = this;
@@ -79,5 +79,5 @@ export default PropertyCompositeView.extend({
       this.props = propsView;
       this.layersView = layersView;
     }
-  },
-});
+  }
+}

src/style_manager/view/PropertyView.js

@@ -1,17 +1,17 @@
-import Backbone from 'backbone';
+import { View } from 'common';
 import { bindAll, isUndefined, debounce } from 'underscore';
 import { isObject } from 'utils/mixins';
 
 const clearProp = 'data-clear-style';
 
-export default Backbone.View.extend({
+export default class Property extends View {
   template() {
     const { pfx, ppfx } = this;
     return `
       <div class="${pfx}label" data-sm-label></div>
       <div class="${ppfx}fields" data-sm-fields></div>
     `;
-  },
+  }
 
   templateLabel(model) {
     const { pfx, em } = this;
@@ -26,7 +26,7 @@ export default Backbone.View.extend({
       </span>
       ${!parent ? `<div class="${pfx}clear" style="display: none" ${clearProp}>${iconClose}</div>` : ''}
     `;
-  },
+  }
 
   templateInput(model) {
     return `
@@ -34,12 +34,7 @@ export default Backbone.View.extend({
         <input placeholder="${model.getDefaultValue()}"/>
       </div>
     `;
-  },
-
-  events: {
-    change: 'inputValueChanged',
-    [`click [${clearProp}]`]: 'clear',
-  },
+  }
 
   initialize(o = {}) {
     bindAll(this, '__change', '__updateStyle');
@@ -66,13 +61,13 @@ export default Backbone.View.extend({
 
     const init = this.init && this.init.bind(this);
     init && init();
-  },
+  }
 
   remove() {
-    Backbone.View.prototype.remove.apply(this, arguments);
+    View.prototype.remove.apply(this, arguments);
     ['em', 'input', '$input', 'view'].forEach(i => (this[i] = {}));
     this.__destroyFn(this._getClbOpts());
-  },
+  }
 
   /**
    * Triggers when the status changes. The status indicates if the value of
@@ -97,7 +92,7 @@ export default Backbone.View.extend({
     }
 
     this.parent?.updateStatus();
-  },
+  }
 
   /**
    * Clear the property from the target
@@ -105,7 +100,7 @@ export default Backbone.View.extend({
   clear(ev) {
     ev && ev.stopPropagation();
     this.model.clear();
-  },
+  }
 
   /**
    * Get clear element
@@ -117,7 +112,7 @@ export default Backbone.View.extend({
     }
 
     return this.clearEl;
-  },
+  }
 
   /**
    * Triggers when the value of element input/s is changed, so have to update
@@ -128,12 +123,12 @@ export default Backbone.View.extend({
     // Skip the default update in case a custom emit method is defined
     if (this.emit) return;
     this.model.upValue(ev.target.value);
-  },
+  }
 
   onValueChange(m, val, opt = {}) {
     this.setValue(this.model.getFullValue());
     this.updateStatus();
-  },
+  }
 
   /**
    * Update the element input.
@@ -145,12 +140,12 @@ export default Backbone.View.extend({
     const result = isUndefined(value) || value === '' ? model.getDefaultValue() : value;
     if (this.update) return this.__update(result);
     this.__setValueInput(result);
-  },
+  }
 
   __setValueInput(value) {
     const input = this.getInputEl();
     input && (input.value = value);
-  },
+  }
 
   getInputEl() {
     if (!this.input) {
@@ -158,22 +153,22 @@ export default Backbone.View.extend({
     }
 
     return this.input;
-  },
+  }
 
   updateVisibility() {
     this.el.style.display = this.model.isVisible() ? '' : 'none';
-  },
+  }
 
   clearCached() {
     this.clearEl = null;
     this.input = null;
     this.$input = null;
-  },
+  }
 
   __unset() {
     const unset = this.unset && this.unset.bind(this);
     unset && unset(this._getClbOpts());
-  },
+  }
 
   __update(value) {
     const update = this.update && this.update.bind(this);
@@ -182,12 +177,12 @@ export default Backbone.View.extend({
         ...this._getClbOpts(),
         value,
       });
-  },
+  }
 
   __change(...args) {
     const emit = this.emit && this.emit.bind(this);
     emit && emit(this._getClbOpts(), ...args);
-  },
+  }
 
   __updateStyle(value, { complete, partial, ...opts } = {}) {
     const { model } = this;
@@ -198,7 +193,7 @@ export default Backbone.View.extend({
     } else {
       model.upValue(value, { partial: !final });
     }
-  },
+  }
 
   _getClbOpts() {
     const { model, el, createdEl } = this;
@@ -210,7 +205,7 @@ export default Backbone.View.extend({
       change: this.__change,
       updateStyle: this.__updateStyle,
     };
-  },
+  }
 
   render() {
     this.clearCached();
@@ -235,5 +230,10 @@ export default Backbone.View.extend({
     const onRender = this.onRender && this.onRender.bind(this);
     onRender && onRender();
     this.setValue(model.getValue());
-  },
-});
+  }
+}
+
+Property.prototype.events = {
+  change: 'inputValueChanged',
+  [`click [${clearProp}]`]: 'clear',
+};