From 9e61bea2ace3b376a03aa409ce630ae8d74fea06 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 13 Jan 2019 20:56:40 +0100 Subject: [PATCH 1/5] Updated `SelectorManager.add` method, now it can receive an array of selectors to add --- src/css_composer/index.js | 22 ++++++++++ src/parser/index.js | 2 + src/parser/model/BrowserParserCss.js | 2 +- src/selector_manager/index.js | 57 +++++++++++++++++-------- src/selector_manager/model/Selectors.js | 2 + test/specs/css_composer/index.js | 11 ++++- test/specs/selector_manager/index.js | 46 ++++++++++++++++++++ 7 files changed, 122 insertions(+), 20 deletions(-) diff --git a/src/css_composer/index.js b/src/css_composer/index.js index be8e9808a..b7323972e 100644 --- a/src/css_composer/index.js +++ b/src/css_composer/index.js @@ -382,6 +382,28 @@ module.exports = () => { return selector && this.get(selector, state, media); }, + setRule(selectors, style, opts = {}) { + const node = em.get('Parser').parserCss.checkNode({ + selectors, + style, + atRule: null, + params: null + })[0]; + const sm = em.get('SelectorManager'); + const selector = sm.add(node.selectors); + const rule = this.add(selector, node.state); + rule.setStyle(style, opts); + throw rule.toCSS(); + return rule; + }, + + getRule(selectors, opts = {}) { + const sm = em.get('SelectorManager'); + const node = em.get('Parser').parserCss.checkNode({ selectors })[0]; + const selector = sm.get(node.selectors); + return selector && this.get(selector, node.state); + }, + /** * Render the block of CSS rules * @return {HTMLElement} diff --git a/src/parser/index.js b/src/parser/index.js index 6853cac00..5b6663d01 100644 --- a/src/parser/index.js +++ b/src/parser/index.js @@ -48,6 +48,8 @@ module.exports = () => { pHtml = new parserHtml(conf); pCss = new parserCss(conf); this.em = conf.em; + this.parserCss = pCss; + this.parserHtml = pHtml; return this; }, diff --git a/src/parser/model/BrowserParserCss.js b/src/parser/model/BrowserParserCss.js index 4acd59b29..abf56291b 100644 --- a/src/parser/model/BrowserParserCss.js +++ b/src/parser/model/BrowserParserCss.js @@ -101,7 +101,7 @@ export const parseCondition = node => { * @param {Object} style Key-value object of style declarations * @return {Object} */ -export const createNode = (selectors, style, opts = {}) => { +export const createNode = (selectors, style = {}, opts = {}) => { const node = {}; const selLen = selectors.length; const lastClass = selectors[selLen - 1]; diff --git a/src/selector_manager/index.js b/src/selector_manager/index.js index d524eef33..13dccf17c 100644 --- a/src/selector_manager/index.js +++ b/src/selector_manager/index.js @@ -44,7 +44,7 @@ * @module SelectorManager */ -import { isString, isElement, isObject } from 'underscore'; +import { isString, isElement, isObject, isArray } from 'underscore'; const isId = str => isString(str) && str[0] == '#'; const isClass = str => isString(str) && str[0] == '.'; @@ -118,22 +118,9 @@ module.exports = config => { } }, - /** - * Add a new selector to collection if it's not already exists. Class type is a default one - * @param {String} name Selector 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} - * @example - * var selector = selectorManager.add('selectorName'); - * // Same as - * var selector = selectorManager.add('selectorName', { - * type: 1, - * label: 'selectorName' - * }); - * */ - add(name, opts = {}) { + addSelector(name, opt = {}) { + let opts = { ...opt }; + if (isObject(name)) { opts = name; } else { @@ -143,6 +130,8 @@ module.exports = config => { 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 (opts.label && !opts.name) { @@ -161,6 +150,31 @@ module.exports = config => { return selector; }, + /** + * 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} + * @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']); + * */ + add(name, opts = {}) { + if (isArray(name)) { + return name.map(item => this.addSelector(item, opts)); + } else { + return this.addSelector(name, opts); + } + }, + /** * Add class selectors * @param {Array|string} classes Array or string of classes @@ -178,7 +192,14 @@ module.exports = config => { classes = classes.trim().split(' '); } - classes.forEach(name => added.push(selectors.add({ name }))); + classes.forEach(name => + added.push( + selectors.add({ + name, + type: Selector.TYPE_ID + }) + ) + ); return added; }, diff --git a/src/selector_manager/model/Selectors.js b/src/selector_manager/model/Selectors.js index a3a800b7a..f8ae05e9c 100644 --- a/src/selector_manager/model/Selectors.js +++ b/src/selector_manager/model/Selectors.js @@ -4,6 +4,8 @@ const Selector = require('./Selector'); module.exports = require('backbone').Collection.extend({ model: Selector, + modelId: attr => `${attr.name}_${attr.type}`, + getStyleable() { return filter( this.models, diff --git a/test/specs/css_composer/index.js b/test/specs/css_composer/index.js index 0d1ef288d..ad9eba809 100644 --- a/test/specs/css_composer/index.js +++ b/test/specs/css_composer/index.js @@ -7,7 +7,7 @@ const utils = require('./../test_utils.js'); const Editor = require('editor/model/Editor'); describe('Css Composer', () => { - describe('Main', () => { + describe.only('Main', () => { var obj; var em; var config; @@ -207,6 +207,15 @@ describe('Css Composer', () => { const rule = obj.getClassRule(name, { state }); expect(rule.selectorsToString()).toEqual(`.${name}:${state}`); }); + + test('Create a simple class-based rule with setRule', () => { + const selector = '.test'; + obj.setRule(selector, { color: 'red' }); + expect(obj.getAll().length).toEqual(1); + const rule = obj.getRule(selector); + expect(rule.selectorsToString()).toEqual(selector); + expect(rule.styleToString()).toEqual(`color:red;`); + }); }); Models.run(); diff --git a/test/specs/selector_manager/index.js b/test/specs/selector_manager/index.js index adb86bc29..da3497b6e 100644 --- a/test/specs/selector_manager/index.js +++ b/test/specs/selector_manager/index.js @@ -60,6 +60,13 @@ describe('SelectorManager', () => { expect(sel.get('label')).toEqual(name); }); + test('Check name property by adding as class', () => { + var name = 'test'; + var sel = obj.add(`.${name}`); + expect(sel.get('name')).toEqual(name); + expect(sel.get('label')).toEqual(name); + }); + test('Add 2 selectors', () => { obj.add('test'); obj.add('test2'); @@ -72,6 +79,45 @@ describe('SelectorManager', () => { expect(obj.getAll().length).toEqual(1); }); + test('Add multiple selectors', () => { + const result = obj.add([ + '.test1', + 'test1', + '.test2', + '.test2', + '#test3', + 'test3', + 'test3', + '#test3' + ]); + expect(Array.isArray(result)).toEqual(true); + expect(obj.getAll().length).toEqual(4); + expect( + obj + .getAll() + .at(0) + .getFullName() + ).toEqual('.test1'); + expect( + obj + .getAll() + .at(1) + .getFullName() + ).toEqual('.test2'); + expect( + obj + .getAll() + .at(2) + .getFullName() + ).toEqual('#test3'); + expect( + obj + .getAll() + .at(3) + .getFullName() + ).toEqual('.test3'); + }); + test('Get selector', () => { var name = 'test'; var sel = obj.add(name); From ad0efce8916de46a4d3b8234cd9e1ce4400e08ca Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 13 Jan 2019 23:09:54 +0100 Subject: [PATCH 2/5] Updated `SelectorManager.get` method, now it can receive an array of selectors to get --- src/css_composer/index.js | 1 - src/selector_manager/index.js | 36 +++++++++++++++++++++------- test/specs/css_composer/index.js | 2 +- test/specs/selector_manager/index.js | 20 +++++++++++++--- 4 files changed, 46 insertions(+), 13 deletions(-) diff --git a/src/css_composer/index.js b/src/css_composer/index.js index b7323972e..6ebd6f678 100644 --- a/src/css_composer/index.js +++ b/src/css_composer/index.js @@ -393,7 +393,6 @@ module.exports = () => { const selector = sm.add(node.selectors); const rule = this.add(selector, node.state); rule.setStyle(style, opts); - throw rule.toCSS(); return rule; }, diff --git a/src/selector_manager/index.js b/src/selector_manager/index.js index 13dccf17c..05d6ad438 100644 --- a/src/selector_manager/index.js +++ b/src/selector_manager/index.js @@ -150,6 +150,17 @@ module.exports = config => { return selector; }, + getSelector(name, type = Selector.TYPE_CLASS) { + if (isId(name)) { + name = name.substr(1); + type = Selector.TYPE_ID; + } else if (isClass(name)) { + name = name.substr(1); + } + + return selectors.where({ name, type })[0]; + }, + /** * 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 @@ -205,18 +216,27 @@ module.exports = config => { /** * Get the selector by its name - * @param {String} name Selector name + * @param {String|Array} name Selector name * @param {String} tyoe Selector type - * @return {Model|null} + * @return {Model|Array} * @example - * var selector = selectorManager.get('selectorName'); + * const selector = selectorManager.get('selectorName'); + * // or get an array + * const selectors = selectorManager.get(['class1', 'class2']); * */ - get(name, type = Selector.TYPE_CLASS) { - if (isId(name)) { - name = name.substr(1); - type = Selector.TYPE_ID; + get(name, type) { + if (isArray(name)) { + const result = []; + const selectors = name + .map(item => this.getSelector(item)) + .filter(item => item); + selectors.forEach( + item => result.indexOf(item) < 0 && result.push(item) + ); + return result; + } else { + return this.getSelector(name, type); } - return selectors.where({ name, type })[0]; }, /** diff --git a/test/specs/css_composer/index.js b/test/specs/css_composer/index.js index ad9eba809..a4ca1dd54 100644 --- a/test/specs/css_composer/index.js +++ b/test/specs/css_composer/index.js @@ -210,7 +210,7 @@ describe('Css Composer', () => { test('Create a simple class-based rule with setRule', () => { const selector = '.test'; - obj.setRule(selector, { color: 'red' }); + const result = obj.setRule(selector, { color: 'red' }); expect(obj.getAll().length).toEqual(1); const rule = obj.getRule(selector); expect(rule.selectorsToString()).toEqual(selector); diff --git a/test/specs/selector_manager/index.js b/test/specs/selector_manager/index.js index da3497b6e..28da0a5c7 100644 --- a/test/specs/selector_manager/index.js +++ b/test/specs/selector_manager/index.js @@ -7,7 +7,7 @@ var e2e = require('./e2e/ClassManager'); var Editor = require('editor/model/Editor'); describe('SelectorManager', () => { - describe('Main', () => { + describe.only('Main', () => { var obj; let em; @@ -80,7 +80,7 @@ describe('SelectorManager', () => { }); test('Add multiple selectors', () => { - const result = obj.add([ + const cls = [ '.test1', 'test1', '.test2', @@ -89,8 +89,14 @@ describe('SelectorManager', () => { 'test3', 'test3', '#test3' - ]); + ]; + const result = obj.add(cls); expect(Array.isArray(result)).toEqual(true); + const concat = obj + .getAll() + .map(item => item.getFullName()) + .join(''); + expect(concat).toEqual('.test1.test2#test3.test3'); expect(obj.getAll().length).toEqual(4); expect( obj @@ -116,6 +122,14 @@ describe('SelectorManager', () => { .at(3) .getFullName() ).toEqual('.test3'); + + expect(obj.get(cls).length).toEqual(4); + expect( + obj + .get(cls) + .map(item => item.getFullName()) + .join('') + ).toEqual(concat); }); test('Get selector', () => { From c03699107dc796cb18f936f4a6f010daa13f92aa Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 14 Jan 2019 01:03:19 +0100 Subject: [PATCH 3/5] Added `setRule` and `getRule` in CssComposer module --- src/css_composer/index.js | 53 +++++++++------- test/specs/css_composer/index.js | 105 +++++++++++++++++++++++++++++++ 2 files changed, 137 insertions(+), 21 deletions(-) diff --git a/src/css_composer/index.js b/src/css_composer/index.js index 6ebd6f678..4b5a84eb3 100644 --- a/src/css_composer/index.js +++ b/src/css_composer/index.js @@ -304,6 +304,38 @@ module.exports = () => { return result; }, + setRule(selectors, style, opts = {}) { + const { atRuleType, atRuleParams } = opts; + const node = em.get('Parser').parserCss.checkNode({ + selectors, + style + })[0]; + const { state, selectorsAdd } = node; + const sm = em.get('SelectorManager'); + const selector = sm.add(node.selectors); + const rule = this.add(selector, state, atRuleParams, { + selectorsAdd, + atRule: atRuleType + }); + rule.setStyle(style, opts); + return rule; + }, + + getRule(selectors, opts = {}) { + const sm = em.get('SelectorManager'); + const node = em.get('Parser').parserCss.checkNode({ selectors })[0]; + const selector = sm.get(node.selectors); + const { state, selectorsAdd } = node; + const { atRuleType, atRuleParams } = opts; + return ( + selector && + this.get(selector, state, atRuleParams, { + selectorsAdd, + atRule: atRuleType + }) + ); + }, + /** * Add/update the CSS rule with id selector * @param {string} name Id selector name, eg. 'my-id' @@ -382,27 +414,6 @@ module.exports = () => { return selector && this.get(selector, state, media); }, - setRule(selectors, style, opts = {}) { - const node = em.get('Parser').parserCss.checkNode({ - selectors, - style, - atRule: null, - params: null - })[0]; - const sm = em.get('SelectorManager'); - const selector = sm.add(node.selectors); - const rule = this.add(selector, node.state); - rule.setStyle(style, opts); - return rule; - }, - - getRule(selectors, opts = {}) { - const sm = em.get('SelectorManager'); - const node = em.get('Parser').parserCss.checkNode({ selectors })[0]; - const selector = sm.get(node.selectors); - return selector && this.get(selector, node.state); - }, - /** * Render the block of CSS rules * @return {HTMLElement} diff --git a/test/specs/css_composer/index.js b/test/specs/css_composer/index.js index a4ca1dd54..a120bd064 100644 --- a/test/specs/css_composer/index.js +++ b/test/specs/css_composer/index.js @@ -216,6 +216,111 @@ describe('Css Composer', () => { expect(rule.selectorsToString()).toEqual(selector); expect(rule.styleToString()).toEqual(`color:red;`); }); + + test('Avoid creating multiple rules with the same selector', () => { + const selector = '.test'; + obj.setRule(selector, { color: 'red' }); + obj.setRule(selector, { color: 'blue' }); + expect(obj.getAll().length).toEqual(1); + const rule = obj.getRule(selector); + expect(rule.selectorsToString()).toEqual(selector); + expect(rule.styleToString()).toEqual(`color:blue;`); + }); + + test('Create a class-based rule with setRule', () => { + const selector = '.test.test2'; + const result = obj.setRule(selector, { color: 'red' }); + expect(obj.getAll().length).toEqual(1); + const rule = obj.getRule(selector); + expect(rule.selectorsToString()).toEqual(selector); + expect(rule.styleToString()).toEqual(`color:red;`); + }); + + test('Create a class-based rule with a state, by using setRule', () => { + const selector = '.test.test2:hover'; + const result = obj.setRule(selector, { color: 'red' }); + expect(obj.getAll().length).toEqual(1); + const rule = obj.getRule(selector); + expect(rule.selectorsToString()).toEqual(selector); + expect(rule.styleToString()).toEqual(`color:red;`); + }); + + test('Create a rule with class-based and mixed selectors', () => { + const selector = '.test.test2:hover, #test .selector'; + obj.setRule(selector, { color: 'red' }); + expect(obj.getAll().length).toEqual(1); + const rule = obj.getRule(selector); + expect(rule.selectorsToString()).toEqual(selector); + expect(rule.styleToString()).toEqual(`color:red;`); + }); + + test('Create a rule with only mixed selectors', () => { + const selector = '#test1 .class1, .class2 > #id2'; + obj.setRule(selector, { color: 'red' }); + expect(obj.getAll().length).toEqual(1); + const rule = obj.getRule(selector); + expect(rule.get('selectors').length).toEqual(0); + expect(rule.selectorsToString()).toEqual(selector); + expect(rule.styleToString()).toEqual(`color:red;`); + }); + + test('Create a rule with atRule', () => { + const toTest = [ + { + selector: '.class1:hover', + style: { color: 'blue' }, + opts: { + atRuleType: 'media', + atRuleParams: 'screen and (min-width: 480px)' + } + }, + { + selector: '.class1:hover', + style: { color: 'red' }, + opts: { + atRuleType: 'media', + atRuleParams: 'screen and (min-width: 480px)' + } + } + ]; + toTest.forEach(test => { + const { selector, style, opts } = test; + const result = obj.setRule(selector, style, opts); + expect(obj.getAll().length).toEqual(1); + const rule = obj.getRule(selector, opts); + expect(rule.getAtRule()).toEqual( + `@${opts.atRuleType} ${opts.atRuleParams}` + ); + expect(rule.selectorsToString()).toEqual(selector); + expect(rule.getStyle()).toEqual(style); + }); + }); + + test('Create different rules by using setRule', () => { + const toTest = [ + { selector: '.class1:hover', style: { color: '#111' } }, + { selector: '.class1.class2', style: { color: '#222' } }, + { selector: '.class1, .class2 .class3', style: { color: 'red' } }, + { selector: '.class1, .class2 .class4', style: { color: 'green' } }, + { selector: '.class4, .class1 .class2', style: { color: 'blue' } }, + { + selector: '.class4, .class1 .class2', + style: { color: 'blue' }, + opt: { atRuleType: 'media', atRuleParams: '(min-width: 480px)' } + } + ]; + toTest.forEach(test => { + const { selector, style, opt = {} } = test; + obj.setRule(selector, style, opt); + const rule = obj.getRule(selector, opt); + const atRule = `${opt.atRuleType || ''} ${opt.atRuleParams || + ''}`.trim(); + expect(rule.getAtRule()).toEqual(atRule ? `@${atRule}` : ''); + expect(rule.selectorsToString()).toEqual(selector); + expect(rule.getStyle()).toEqual(style); + }); + expect(obj.getAll().length).toEqual(toTest.length); + }); }); Models.run(); From 518e4da08ef35d383d2f82b8c7976b327df72f12 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 14 Jan 2019 01:20:53 +0100 Subject: [PATCH 4/5] Update setRule and getRule docs and hide IdRule and classRule methods --- src/css_composer/index.js | 46 +++++++++++++++++++++++++--- test/specs/css_composer/index.js | 2 +- test/specs/selector_manager/index.js | 2 +- 3 files changed, 44 insertions(+), 6 deletions(-) diff --git a/src/css_composer/index.js b/src/css_composer/index.js index 4b5a84eb3..a52a0a228 100644 --- a/src/css_composer/index.js +++ b/src/css_composer/index.js @@ -21,10 +21,8 @@ * * [get](#get) * * [getAll](#getall) * * [clear](#clear) - * * [setIdRule](#setidrule) - * * [getIdRule](#getidrule) - * * [setClassRule](#setclassrule) - * * [getClassRule](#getclassrule) + * * [setRule](#setrule) + * * [getRule](#getrule) * * @module CssComposer */ @@ -304,6 +302,28 @@ module.exports = () => { return result; }, + /** + * Add/update the CSS rule with a generic selector + * @param {string} selectors Selector, eg. '.myclass' + * @param {Object} style Style properties and values + * @param {Object} [opts={}] Additional properties + * @param {String} [opts.atRuleType=''] At-rule type, eg. 'media' + * @param {String} [opts.atRuleParams=''] At-rule parameters, eg. '(min-width: 500px)' + * @return {CssRule} The new/updated rule + * @example + * // Simple class-based rule + * const rule = cc.setRule('.class1.class2', { color: 'red' }); + * console.log(rule.toCSS()) // output: .class1.class2 { color: red } + * // With state and other mixed selector + * const rule = cc.setRule('.class1.class2:hover, div#myid', { color: 'red' }); + * // output: .class1.class2:hover, div#myid { color: red } + * // With media + * const rule = cc.setRule('.class1:hover', { color: 'red' }, { + * atRuleType: 'media', + * atRuleParams: '(min-width: 500px)', + * }); + * // output: @media (min-width: 500px) { .class1:hover { color: red } } + */ setRule(selectors, style, opts = {}) { const { atRuleType, atRuleParams } = opts; const node = em.get('Parser').parserCss.checkNode({ @@ -321,6 +341,20 @@ module.exports = () => { return rule; }, + /** + * Get the CSS rule by a generic selector + * @param {string} selectors Selector, eg. '.myclass:hover' + * @param {String} [opts.atRuleType=''] At-rule type, eg. 'media' + * @param {String} [opts.atRuleParams=''] At-rule parameters, eg. '(min-width: 500px)' + * @return {CssRule} + * @example + * const rule = cc.getRule('.myclass1:hover'); + * const rule2 = cc.getRule('.myclass1:hover, div#myid'); + * const rule3 = cc.getRule('.myclass1', { + * atRuleType: 'media', + * atRuleParams: '(min-width: 500px)', + * }); + */ getRule(selectors, opts = {}) { const sm = em.get('SelectorManager'); const node = em.get('Parser').parserCss.checkNode({ selectors })[0]; @@ -342,6 +376,7 @@ module.exports = () => { * @param {Object} style Style properties and values * @param {Object} [opts={}] Custom options, like `state` and `mediaText` * @return {CssRule} The new/updated rule + * @private * @example * const rule = cc.setIdRule('myid', { color: 'red' }); * const ruleHover = cc.setIdRule('myid', { color: 'blue' }, { state: 'hover' }); @@ -364,6 +399,7 @@ module.exports = () => { * @param {string} name Id selector name, eg. 'my-id' * @param {Object} [opts={}] Custom options, like `state` and `mediaText` * @return {CssRule} + * @private * @example * const rule = cc.getIdRule('myid'); * const ruleHover = cc.setIdRule('myid', { state: 'hover' }); @@ -381,6 +417,7 @@ module.exports = () => { * @param {Object} style Style properties and values * @param {Object} [opts={}] Custom options, like `state` and `mediaText` * @return {CssRule} The new/updated rule + * @private * @example * const rule = cc.setClassRule('myclass', { color: 'red' }); * const ruleHover = cc.setClassRule('myclass', { color: 'blue' }, { state: 'hover' }); @@ -403,6 +440,7 @@ module.exports = () => { * @param {string} name Class selector name, eg. 'my-class' * @param {Object} [opts={}] Custom options, like `state` and `mediaText` * @return {CssRule} + * @private * @example * const rule = cc.getClassRule('myclass'); * const ruleHover = cc.getClassRule('myclass', { state: 'hover' }); diff --git a/test/specs/css_composer/index.js b/test/specs/css_composer/index.js index a120bd064..5c3d038af 100644 --- a/test/specs/css_composer/index.js +++ b/test/specs/css_composer/index.js @@ -7,7 +7,7 @@ const utils = require('./../test_utils.js'); const Editor = require('editor/model/Editor'); describe('Css Composer', () => { - describe.only('Main', () => { + describe('Main', () => { var obj; var em; var config; diff --git a/test/specs/selector_manager/index.js b/test/specs/selector_manager/index.js index 28da0a5c7..62f931a17 100644 --- a/test/specs/selector_manager/index.js +++ b/test/specs/selector_manager/index.js @@ -7,7 +7,7 @@ var e2e = require('./e2e/ClassManager'); var Editor = require('editor/model/Editor'); describe('SelectorManager', () => { - describe.only('Main', () => { + describe('Main', () => { var obj; let em; From 5c5465be1c489dd7a1c5bbc290682cbb0f3a5b1c Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 14 Jan 2019 13:56:24 +0100 Subject: [PATCH 5/5] Fix type in addClass --- src/selector_manager/index.js | 9 +-------- src/selector_manager/model/Selectors.js | 2 +- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/selector_manager/index.js b/src/selector_manager/index.js index 05d6ad438..0385e4352 100644 --- a/src/selector_manager/index.js +++ b/src/selector_manager/index.js @@ -203,14 +203,7 @@ module.exports = config => { classes = classes.trim().split(' '); } - classes.forEach(name => - added.push( - selectors.add({ - name, - type: Selector.TYPE_ID - }) - ) - ); + classes.forEach(name => added.push(selectors.add({ name }))); return added; }, diff --git a/src/selector_manager/model/Selectors.js b/src/selector_manager/model/Selectors.js index f8ae05e9c..eca223f94 100644 --- a/src/selector_manager/model/Selectors.js +++ b/src/selector_manager/model/Selectors.js @@ -4,7 +4,7 @@ const Selector = require('./Selector'); module.exports = require('backbone').Collection.extend({ model: Selector, - modelId: attr => `${attr.name}_${attr.type}`, + modelId: attr => `${attr.name}_${attr.type || Selector.TYPE_CLASS}`, getStyleable() { return filter(