diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 67898445e..2ea672312 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -4,6 +4,7 @@ import Styleable from 'domain_abstract/model/Styleable'; const Backbone = require('backbone'); const Components = require('./Components'); +const Selector = require('selector_manager/model/Selector'); const Selectors = require('selector_manager/model/Selectors'); const Traits = require('trait_manager/model/Traits'); @@ -307,6 +308,34 @@ module.exports = Backbone.Model.extend(Styleable).extend({ }, + /** + * Remove classes + * @param {Array|string} classes Array or string of classes + * @return {Array} Array of removed selectors + * @example + * model.removeClass('class1'); + * model.removeClass('class1 class2'); + * model.removeClass(['class1', 'class2']); + * // -> [SelectorObject, ...] + */ + removeClass(classes) { + const removed = []; + classes = isArray(classes) ? classes : [classes]; + const selectors = this.get('classes'); + const type = Selector.TYPE_CLASS; + + classes.forEach(classe => { + const classes = classe.split(' '); + classes.forEach(name => { + const selector = selectors.where({ name, type })[0]; + selector && removed.push(selectors.remove(selector)); + }) + }); + + return removed; + }, + + initClasses() { const classes = this.normalizeClasses(this.get('classes') || []); this.set('classes', new Selectors(classes)); diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js index 878ea0a6a..5e2ca63d5 100644 --- a/test/specs/dom_components/model/Component.js +++ b/test/specs/dom_components/model/Component.js @@ -170,6 +170,34 @@ module.exports = { expect(result.length).toEqual(3); }); + it('removeClass by string', () => { + obj.addClass(['class1', 'class2']); + obj.removeClass('class2'); + const result = obj.get('classes').models; + expect(result.length).toEqual(1); + }); + + it('removeClass by string with multiple classes', () => { + obj.addClass(['class1', 'class2']); + obj.removeClass('class2 class1'); + const result = obj.get('classes').models; + expect(result.length).toEqual(0); + }); + + it('removeClass by array', () => { + obj.addClass(['class1', 'class2']); + obj.removeClass(['class1', 'class2']); + const result = obj.get('classes').models; + expect(result.length).toEqual(0); + }); + + it('removeClass do nothing with undefined classes', () => { + obj.addClass(['class1', 'class2']); + obj.removeClass(['class3']); + const result = obj.get('classes').models; + expect(result.length).toEqual(2); + }); + it('setAttributes', () => { obj.setAttributes({ id: 'test',