From 41bbc6fdc17726ecfb8d843dc444ecc4bf1349c8 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 7 Oct 2018 15:33:28 +0200 Subject: [PATCH] Add callParentInit and callInit helpers --- src/style_manager/model/Property.js | 308 +++++++++--------- src/style_manager/model/PropertyComposite.js | 10 +- src/style_manager/model/PropertyStack.js | 3 +- src/style_manager/view/PropertyIntegerView.js | 5 - 4 files changed, 167 insertions(+), 159 deletions(-) diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js index a2b5c5e65..be6636085 100644 --- a/src/style_manager/model/Property.js +++ b/src/style_manager/model/Property.js @@ -1,152 +1,170 @@ import { isUndefined, isString } from 'underscore'; -module.exports = require('backbone').Model.extend({ - defaults: { - name: '', - property: '', - type: '', - defaults: '', - info: '', - value: '', - icon: '', - functionName: '', - status: '', - visible: true, - fixedValues: ['initial', 'inherit'], - - // If true to the value will be added '!important' - important: 0, - - // If true, will be hidden by default and will show up only for targets - // which require this property (via `stylable-require`) - // Use case: - // you can add all SVG CSS properties with toRequire as true - // and then require them on SVG Components - toRequire: 0 - }, - - initialize(props = {}, opts = {}) { - var name = this.get('name'); - var prop = this.get('property'); - - if (!name) { - this.set( - 'name', - prop.charAt(0).toUpperCase() + prop.slice(1).replace(/-/g, ' ') - ); - } - - !opts.skipInit && this.init(props, opts); - }, - - init() {}, - - /** - * Clear the value - * @return {this} - */ - clearValue(opts = {}) { - this.set({ value: undefined }, opts); - return this; - }, - - /** - * Update value - * @param {any} value - * @param {Boolen} [complete=true] Indicates if it's a final state - * @param {Object} [opts={}] Options - */ - setValue(value, complete = 1, opts = {}) { - const parsed = this.parseValue(value); - this.set(parsed, { ...opts, avoidStore: 1 }); - - // It's important to set an empty value, otherwise the - // UndoManager won't see the change - if (complete) { - this.set('value', '', opts); - this.set(parsed, opts); - } - }, - - /** - * Like `setValue` but, in addition, prevents the update of the input element - * as the changes should come from the input itself. - * This method is useful with the definition of custom properties - * @param {any} value - * @param {Boolen} [complete=true] Indicates if it's a final state - * @param {Object} [opts={}] Options - */ - setValueFromInput(value, complete, opts = {}) { - this.setValue(value, complete, { ...opts, fromInput: 1 }); - }, - - /** - * Parse a raw value, generally fetched from the target, for this property - * @param {string} value Raw value string - * @return {Object} - * @example - * // example with an Input type - * prop.parseValue('translateX(10deg)'); - * // -> { value: 10, unit: 'deg', functionName: 'translateX' } - * - */ - parseValue(value) { - const result = { value }; - const imp = '!important'; - - if (isString(value) && value.indexOf(imp) !== -1) { - result.value = value.replace(imp, '').trim(); - result.important = 1; - } - - if (!this.get('functionName')) { +const Property = require('backbone').Model.extend( + { + defaults: { + name: '', + property: '', + type: '', + defaults: '', + info: '', + value: '', + icon: '', + functionName: '', + status: '', + visible: true, + fixedValues: ['initial', 'inherit'], + + // If true to the value will be added '!important' + important: 0, + + // If true, will be hidden by default and will show up only for targets + // which require this property (via `stylable-require`) + // Use case: + // you can add all SVG CSS properties with toRequire as true + // and then require them on SVG Components + toRequire: 0 + }, + + initialize(props = {}, opts = {}) { + var name = this.get('name'); + var prop = this.get('property'); + + if (!name) { + this.set( + 'name', + prop.charAt(0).toUpperCase() + prop.slice(1).replace(/-/g, ' ') + ); + } + Property.callInit(this, props, opts); + }, + + init() {}, + + /** + * Clear the value + * @return {this} + */ + clearValue(opts = {}) { + this.set({ value: undefined }, opts); + return this; + }, + + /** + * Update value + * @param {any} value + * @param {Boolen} [complete=true] Indicates if it's a final state + * @param {Object} [opts={}] Options + */ + setValue(value, complete = 1, opts = {}) { + const parsed = this.parseValue(value); + this.set(parsed, { ...opts, avoidStore: 1 }); + + // It's important to set an empty value, otherwise the + // UndoManager won't see the change + if (complete) { + this.set('value', '', opts); + this.set(parsed, opts); + } + }, + + /** + * Like `setValue` but, in addition, prevents the update of the input element + * as the changes should come from the input itself. + * This method is useful with the definition of custom properties + * @param {any} value + * @param {Boolen} [complete=true] Indicates if it's a final state + * @param {Object} [opts={}] Options + */ + setValueFromInput(value, complete, opts = {}) { + this.setValue(value, complete, { ...opts, fromInput: 1 }); + }, + + /** + * Parse a raw value, generally fetched from the target, for this property + * @param {string} value Raw value string + * @return {Object} + * @example + * // example with an Input type + * prop.parseValue('translateX(10deg)'); + * // -> { value: 10, unit: 'deg', functionName: 'translateX' } + * + */ + parseValue(value) { + const result = { value }; + const imp = '!important'; + + if (isString(value) && value.indexOf(imp) !== -1) { + result.value = value.replace(imp, '').trim(); + result.important = 1; + } + + if (!this.get('functionName')) { + return result; + } + + const args = []; + let valueStr = `${result.value}`; + let start = valueStr.indexOf('(') + 1; + let end = valueStr.lastIndexOf(')'); + args.push(start); + + // Will try even if the last closing parentheses is not found + if (end >= 0) { + args.push(end); + } + + result.value = String.prototype.substring.apply(valueStr, args); return result; + }, + + /** + * Get the default value + * @return {string} + * @private + */ + getDefaultValue() { + return this.get('defaults'); + }, + + /** + * Get a complete value of the property. + * This probably will replace the getValue when all + * properties models will be splitted + * @param {string} val Custom value to replace the one on the model + * @return {string} + * @private + */ + getFullValue(val) { + const fn = this.get('functionName'); + let value = isUndefined(val) ? this.get('value') : val; + + if (fn && !isUndefined(value)) { + value = `${fn}(${value})`; + } + + if (this.get('important')) { + value = `${value} !important`; + } + + return value || ''; } - - const args = []; - let valueStr = `${result.value}`; - let start = valueStr.indexOf('(') + 1; - let end = valueStr.lastIndexOf(')'); - args.push(start); - - // Will try even if the last closing parentheses is not found - if (end >= 0) { - args.push(end); - } - - result.value = String.prototype.substring.apply(valueStr, args); - return result; }, - - /** - * Get the default value - * @return {string} - * @private - */ - getDefaultValue() { - return this.get('defaults'); - }, - - /** - * Get a complete value of the property. - * This probably will replace the getValue when all - * properties models will be splitted - * @param {string} val Custom value to replace the one on the model - * @return {string} - * @private - */ - getFullValue(val) { - const fn = this.get('functionName'); - let value = isUndefined(val) ? this.get('value') : val; - - if (fn && !isUndefined(value)) { - value = `${fn}(${value})`; + { + callParentInit(property, ctx, props, opts = {}) { + property.prototype.initialize.apply(ctx, [ + props, + { + ...opts, + skipInit: 1 + } + ]); + }, + + callInit(context, props, opts = {}) { + !opts.skipInit && context.init(props, opts); } - - if (this.get('important')) { - value = `${value} !important`; - } - - return value || ''; } -}); +); + +module.exports = Property; diff --git a/src/style_manager/model/PropertyComposite.js b/src/style_manager/model/PropertyComposite.js index 6bea2a159..9de929a1b 100644 --- a/src/style_manager/model/PropertyComposite.js +++ b/src/style_manager/model/PropertyComposite.js @@ -22,18 +22,12 @@ module.exports = Property.extend({ }, initialize(props = {}, opts = {}) { - Property.prototype.initialize.apply(this, [ - props, - { - ...opts, - skipInit: 1 - } - ]); + Property.callParentInit(Property, this, props, opts); const properties = this.get('properties') || []; const Properties = require('./Properties'); this.set('properties', new Properties(properties)); this.listenTo(this, 'change:value', this.updateValues); - this.init(props, opts); + Property.callInit(this, props, opts); }, /** diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js index eb383aebd..29f9385a9 100644 --- a/src/style_manager/model/PropertyStack.js +++ b/src/style_manager/model/PropertyStack.js @@ -12,11 +12,12 @@ module.exports = Property.extend({ }, initialize(props = {}, opts = {}) { - Property.prototype.initialize.apply(this, arguments); + Property.callParentInit(Property, this, props, opts); const layers = this.get('layers'); const layersColl = new Layers(layers); layersColl.properties = this.get('properties'); this.set('layers', layersColl); + Property.callInit(this, props, opts); }, getFullValue() { diff --git a/src/style_manager/view/PropertyIntegerView.js b/src/style_manager/view/PropertyIntegerView.js index 83e206889..a0c64f9fd 100644 --- a/src/style_manager/view/PropertyIntegerView.js +++ b/src/style_manager/view/PropertyIntegerView.js @@ -26,11 +26,6 @@ module.exports = PropertyView.extend({ const ppfx = this.ppfx; if (!this.input) { - console.log( - 'onRender', - this.model.get('property'), - this.model.get('units') - ); const input = this.model.input; input.ppfx = ppfx; input.render();