From e27942bdcf62ff960592ee073a948686408c6bbf Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 8 Jan 2022 07:26:36 +0100 Subject: [PATCH] Update property views to classes --- src/style_manager/view/PropertyColorView.js | 12 ++-- .../view/PropertyCompositeView.js | 14 ++--- src/style_manager/view/PropertyFileView.js | 12 ++-- src/style_manager/view/PropertyNumberView.js | 14 ++--- src/style_manager/view/PropertyRadioView.js | 10 ++-- src/style_manager/view/PropertySelectView.js | 14 ++--- src/style_manager/view/PropertySliderView.js | 20 +++---- src/style_manager/view/PropertyStackView.js | 20 +++---- src/style_manager/view/PropertyView.js | 60 +++++++++---------- 9 files changed, 88 insertions(+), 88 deletions(-) diff --git a/src/style_manager/view/PropertyColorView.js b/src/style_manager/view/PropertyColorView.js index e0c822f8a..e494123fa 100644 --- a/src/style_manager/view/PropertyColorView.js +++ b/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; } - }, -}); + } +} diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index 6ea08bd30..ed0bfd01e 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/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({ `; - }, + } 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; - }, -}); + } +} diff --git a/src/style_manager/view/PropertyFileView.js b/src/style_manager/view/PropertyFileView.js index b44a2d700..e070cffe5 100644 --- a/src/style_manager/view/PropertyFileView.js +++ b/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({ `; - }, + } __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/*', }); - }, -}); + } +} diff --git a/src/style_manager/view/PropertyNumberView.js b/src/style_manager/view/PropertyNumberView.js index 332c441a6..e38fd21bd 100644 --- a/src/style_manager/view/PropertyNumberView.js +++ b/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; - }, -}); + } +} diff --git a/src/style_manager/view/PropertyRadioView.js b/src/style_manager/view/PropertyRadioView.js index 70b61f2e2..a5b72ff15 100644 --- a/src/style_manager/view/PropertyRadioView.js +++ b/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 `
`; - }, + } onRender() { const { pfx, ppfx, model } = this; @@ -36,12 +36,12 @@ export default PropertySelectView.extend({ inputHld.innerHTML = `
${optionsRes.join('')}
`; 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); - }, -}); + } +} diff --git a/src/style_manager/view/PropertySelectView.js b/src/style_manager/view/PropertySelectView.js index 0955b69b6..01bed688c 100644 --- a/src/style_manager/view/PropertySelectView.js +++ b/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({ `; - }, + } 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 = ``; 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); - }, -}); + } +} diff --git a/src/style_manager/view/PropertySliderView.js b/src/style_manager/view/PropertySliderView.js index 42decfe6f..ee5752463 100644 --- a/src/style_manager/view/PropertySliderView.js +++ b/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({ `; - }, + } 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; - }, -}); + } +} diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index a029414bf..0c9dfa79b 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/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({
`; - }, + } 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; } - }, -}); + } +} diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index d0dfb8328..0a38f3a9b 100644 --- a/src/style_manager/view/PropertyView.js +++ b/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 `
`; - }, + } templateLabel(model) { const { pfx, em } = this; @@ -26,7 +26,7 @@ export default Backbone.View.extend({ ${!parent ? `` : ''} `; - }, + } templateInput(model) { return ` @@ -34,12 +34,7 @@ export default Backbone.View.extend({ `; - }, - - 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', +};