diff --git a/README.md b/README.md index 996fcff..982f2a9 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,7 @@ Each level of the module can be required as a whole or you can drill down for a - `addClass(element, className)` - `removeClass(element, className)` - `hasClass(element, className)` + - `toggleClass(element, className)` - `style(element, propName, [value])` or `style(element, objectOfPropValues)` + `removeStyle(element, styleName)` + `getComputedStyle(element)` -> `getPropertyValue(name)` diff --git a/src/class/index.js b/src/class/index.js index fe8d32f..c13757b 100644 --- a/src/class/index.js +++ b/src/class/index.js @@ -1,6 +1,7 @@ import addClass from './addClass'; import removeClass from './removeClass'; import hasClass from './hasClass'; +import toggleClass from './toggleClass'; -export { addClass, removeClass, hasClass } -export default { addClass, removeClass, hasClass } +export { addClass, removeClass, hasClass, toggleClass } +export default { addClass, removeClass, hasClass, toggleClass } diff --git a/src/class/toggleClass.js b/src/class/toggleClass.js new file mode 100644 index 0000000..a07c1a0 --- /dev/null +++ b/src/class/toggleClass.js @@ -0,0 +1,12 @@ +import hasClass from './hasClass' +import removeClass from './removeClass' +import addClass from './addClass' + +export default function toggleClass(element, className){ + if (element.classList) + element.classList.toggle(className); + else if (hasClass(element, className)) + removeClass(element, className) + else + addClass(element, className) +} diff --git a/test/class.js b/test/class.js index dd31f02..d4bc472 100644 --- a/test/class.js +++ b/test/class.js @@ -48,4 +48,14 @@ describe('Class helpers', () => { expect(cls.hasClass(document.getElementById('item-2'), 'test-class')).to.equal(true) expect(cls.hasClass(document.getElementById('item-1'), 'test-class')).to.equal(false) }) + + it('should toggle class', () => { + var el = document.getElementById('item-1') + removeProperty('classList', el) + + cls.toggleClass(el, 'test-class') + expect(cls.hasClass(el, 'test-class')).to.equal(true) + cls.toggleClass(el, 'test-class') + expect(cls.hasClass(el, 'test-class')).to.equal(false) + }) })