From 783fef7113078b6f43107ac71275680d7fc64732 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 12 Oct 2021 15:52:01 +0200 Subject: [PATCH] Update selector.add method --- src/selector_manager/index.js | 60 ++++++++++++------------- src/selector_manager/model/Selector.js | 20 +++++---- src/selector_manager/model/Selectors.js | 6 ++- test/specs/selector_manager/index.js | 9 ++-- 4 files changed, 50 insertions(+), 45 deletions(-) diff --git a/src/selector_manager/index.js b/src/selector_manager/index.js index 193fb0524..8dee87338 100644 --- a/src/selector_manager/index.js +++ b/src/selector_manager/index.js @@ -50,7 +50,6 @@ * ## Methods * * [getConfig](#getconfig) * * [add](#add) - * * [addClass](#addclass) * * [get](#get) * * [getAll](#getall) * * [setState](#setstate) @@ -185,33 +184,35 @@ export default () => { return this.em.getState(); }, - addSelector(name, opt = {}) { - let opts = { ...opt }; + addSelector(name, opts = {}, cOpts = {}) { + let props = { ...opts }; if (isObject(name)) { - opts = name; + props = name; } else { - opts.name = name; + props.name = name; } - if (isId(opts.name)) { - opts.name = opts.name.substr(1); - opts.type = Selector.TYPE_ID; - } else if (isClass(opts.name)) { - opts.name = opts.name.substr(1); + if (isId(props.name)) { + props.name = props.name.substr(1); + props.type = Selector.TYPE_ID; + } else if (isClass(props.name)) { + props.name = props.name.substr(1); } - if (opts.label && !opts.name) { - opts.name = this.escapeName(opts.label); + if (props.label && !props.name) { + props.name = this.escapeName(props.label); } - const cname = opts.name; + const cname = props.name; const config = this.getConfig(); const all = this.getAll(); - const selector = cname ? this.get(cname, opts.type) : all.where(opts)[0]; + const selector = cname + ? this.get(cname, props.type) + : all.where(props)[0]; if (!selector) { - return all.add(opts, { config }); + return all.add(props, { ...cOpts, config }); } return selector; @@ -230,26 +231,20 @@ export default () => { /** * Add a new selector to collection if it's not already exists. Class type is a default one - * @param {String|Array} name Selector/s name - * @param {Object} opts Selector options - * @param {String} [opts.label=''] Label for the selector, if it's not provided the label will be the same as the name - * @param {String} [opts.type=1] Type of the selector. At the moment, only 'class' (1) is available - * @return {Model|Array} + * @param {Object} props Selector properties, eg. `{ name: 'my-class', label: 'My class' }` + * @param {Object} [opts] Selector options + * @return {[Selector]} * @example - * const selector = selectorManager.add('selectorName'); - * // Same as - * const selector = selectorManager.add('selectorName', { - * type: 1, - * label: 'selectorName' - * }); - * // Multiple selectors - * const selectors = selectorManager.add(['.class1', '.class2', '#id1']); + * const selector = selectorManager.add({ name: 'my-class', label: 'My class' }); + * console.log(selector.toString()) // `.my-class` * */ - add(name, opts = {}) { - if (isArray(name)) { - return name.map(item => this.addSelector(item, opts)); + add(props, opts = {}) { + const cOpts = isString(props) ? {} : opts; + // Keep support for arrays but avoid it in docs + if (isArray(props)) { + return props.map(item => this.addSelector(item, opts, cOpts)); } else { - return this.addSelector(name, opts); + return this.addSelector(props, opts, cOpts); } }, @@ -257,6 +252,7 @@ export default () => { * Add class selectors * @param {Array|string} classes Array or string of classes * @return {Array} Array of added selectors + * @private * @example * sm.addClass('class1'); * sm.addClass('class1 class2'); diff --git a/src/selector_manager/model/Selector.js b/src/selector_manager/model/Selector.js index 03441662d..966eb2c99 100644 --- a/src/selector_manager/model/Selector.js +++ b/src/selector_manager/model/Selector.js @@ -53,14 +53,6 @@ export default class Selector extends Model { return this.get('type') === TYPE_CLASS; } - /** - * Get full selector name. - * @returns {String} - * @example - * // Given such selector: { name: 'my-selector', type: 2 } - * console.log(selector.getFullName()); - * // -> `#my-selector` - */ getFullName(opts = {}) { const { escape } = opts; const name = this.get('name'); @@ -78,6 +70,18 @@ export default class Selector extends Model { return pfx + (escape ? escape(name) : name); } + /** + * Get selector as a string. + * @returns {String} + * @example + * // Given such selector: { name: 'my-selector', type: 2 } + * console.log(selector.toString()); + * // -> `#my-selector` + */ + toString() { + return this.getFullName(); + } + toJSON(opts = {}) { const { em } = this; let obj = Model.prototype.toJSON.call(this, [opts]); diff --git a/src/selector_manager/model/Selectors.js b/src/selector_manager/model/Selectors.js index 01d246777..9d2fa91ce 100644 --- a/src/selector_manager/model/Selectors.js +++ b/src/selector_manager/model/Selectors.js @@ -3,6 +3,10 @@ import { Collection } from 'common'; import Selector from './Selector'; export default class Selectors extends Collection { + modelId(attr) { + return `${attr.name}_${attr.type || Selector.TYPE_CLASS}`; + } + getStyleable() { return filter( this.models, @@ -25,5 +29,3 @@ export default class Selectors extends Collection { } Selectors.prototype.model = Selector; -Selectors.prototype.modelId = attr => - `${attr.name}_${attr.type || Selector.TYPE_CLASS}`; diff --git a/test/specs/selector_manager/index.js b/test/specs/selector_manager/index.js index fa901114a..86c92c832 100644 --- a/test/specs/selector_manager/index.js +++ b/test/specs/selector_manager/index.js @@ -39,8 +39,9 @@ describe('SelectorManager', () => { }); test('Default new selector is a class type', () => { - obj.add('test'); + const added = obj.add('test'); expect(obj.get('test').get('type')).toEqual(obj.Selector.TYPE_CLASS); + expect(added.getFullName()).toBe('.test'); }); test('Add a selector as an id', () => { @@ -49,6 +50,7 @@ describe('SelectorManager', () => { expect(sel.get('name')).toEqual(name); expect(sel.get('label')).toEqual(name); expect(obj.get(`#${name}`).get('type')).toEqual(obj.Selector.TYPE_ID); + expect(sel.getFullName()).toBe('#test'); }); test('Check name property', () => { @@ -72,9 +74,10 @@ describe('SelectorManager', () => { }); test('Adding 2 selectors with the same name is not possible', () => { - obj.add('test'); - obj.add('test'); + const add1 = obj.add('test'); + const add2 = obj.add('test'); expect(obj.getAll().length).toEqual(1); + expect(add1).toBe(add2); }); test('Add multiple selectors', () => {