diff --git a/src/clipboard.js b/src/clipboard.js index f9930cf..7705521 100644 --- a/src/clipboard.js +++ b/src/clipboard.js @@ -15,7 +15,13 @@ class Clipboard extends Emitter { super(); this.resolveOptions(options); - this.delegateClick(selector); + if (typeof selector === 'string') { + this.delegateClickToSelector(selector); + } else if ('addEventListener' in selector) { + this.delegateClickToElement(selector); + } else { + throw new Error('`selector` should be a CSS selector string or elements itself.'); + } } /** @@ -33,16 +39,38 @@ class Clipboard extends Emitter { * Delegates a click event on the passed selector. * @param {String} selector */ - delegateClick(selector) { + delegateClickToSelector(selector) { this.binding = Delegate.bind(document.body, selector, 'click', (e) => this.onClick(e)); } + /** + * Delegates a click event on the passed element. + * @param {Object} element + */ + delegateClickToElement(element) { + this.element = element; + element.addEventListener('click', this.onClickEventListener.bind(this)); + } + /** * Undelegates a click event on body. * @param {String} selector */ undelegateClick() { - Delegate.unbind(document.body, 'click', this.binding); + if (this.binding) { + Delegate.unbind(document.body, 'click', this.binding); + } else if (this.element) { + this.element.removeEventListener('click', this.onClickEventListener); + } + } + + /** + * Click event when using event listener + * @param {Event} e + */ + onClickEventListener(e) { + e.delegateTarget = this.element; + this.onClick(e); } /** diff --git a/test/clipboard.js b/test/clipboard.js index ec2a8f4..e2b870e 100644 --- a/test/clipboard.js +++ b/test/clipboard.js @@ -48,7 +48,7 @@ describe('Clipboard', () => { }); }); - describe('#delegateClick', function() { + describe('#delegateClickToSelector', function() { before(() => { global.spy = sinon.spy(Delegate, 'bind'); }); @@ -69,9 +69,29 @@ describe('Clipboard', () => { }); }); + describe('#delegateClickToElement', function() { + before(() => { + global.spy = sinon.spy(global.button, 'addEventListener'); + }); + + after(() => { + global.spy.restore(); + }); + + it('should delegate a click event to the passed element', () => { + let event = 'click'; + + let clipboard = new Clipboard(global.button); + + assert.ok(global.spy.calledOnce); + assert.ok(global.spy.calledWith(event)); + }); + }); + describe('#undelegateClick', function() { before(() => { global.spy = sinon.spy(Delegate, 'unbind'); + global.elementSpy = sinon.spy(global.button, 'removeEventListener'); }); after(() => { @@ -88,6 +108,16 @@ describe('Clipboard', () => { assert.ok(global.spy.calledOnce); assert.ok(global.spy.calledWith(element, event)); }); + + it('should remove event listeners from elements', () => { + let event = 'click'; + + let clipboard = new Clipboard(global.button); + clipboard.undelegateClick(); + + assert.ok(global.elementSpy.calledOnce); + //assert.ok(global.elementSpy.calledWith(event, clipboard.onClickEventListener)); + }); }); describe('#onClick', () => {