diff --git a/package.json b/package.json index 97bd5b9..fa92981 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "babelify": "^6.3.0", "browserify": "^11.2.0", "delegate-events": "^1.1.1", - "tiny-emitter": "^1.0.0" + "tiny-emitter": "^1.0.0", + "component-event": "^0.1.4" }, "devDependencies": { "karma": "^0.13.10", diff --git a/src/clipboard.js b/src/clipboard.js index 5f2bcd0..c0333b5 100644 --- a/src/clipboard.js +++ b/src/clipboard.js @@ -1,5 +1,6 @@ import ClipboardAction from './clipboard-action'; import Delegate from 'delegate-events'; +import event from 'component-event'; import Emitter from 'tiny-emitter'; const prefix = 'data-clipboard-'; @@ -17,7 +18,13 @@ class Clipboard extends Emitter { super(); this.resolveOptions(options); - this.delegateClick(selector); + if (typeof selector === 'string') { + this.delegateClickToSelector(selector); + } else if (selector !== null && typeof selector === 'object') { + this.delegateClickToElement(selector); + } else { + throw new Error('`selector` should be a CSS selector string or elements itself.'); + } } /** @@ -35,10 +42,23 @@ class Clipboard extends Emitter { * Delegates a click event on the passed selector. * @param {String} selector */ - delegateClick(selector) { + delegateClickToSelector(selector) { Delegate.bind(document.body, selector, 'click', (e) => this.initialize(e)); } + /** + * Delegates a click event on the passed element. + * @param {Object} element + */ + delegateClickToElement(element) { + event.bind(document.body, 'click', (e) => { + e.delegateTarget = element; + if (e.delegateTarget) { + (e) => this.initialize(e); + } + }); + } + /** * Defines a new `ClipboardAction` on each click event. * @param {Event} e diff --git a/test/clipboard.js b/test/clipboard.js index 1567b18..b16a66b 100644 --- a/test/clipboard.js +++ b/test/clipboard.js @@ -1,6 +1,7 @@ import Clipboard from '../src/clipboard'; import ClipboardAction from '../src/clipboard-action'; import Delegate from 'delegate-events'; +import Event from 'component-event'; describe('Clipboard', () => { before(() => { @@ -48,7 +49,7 @@ describe('Clipboard', () => { }); }); - describe('#delegateClick', function() { + describe('#delegateClickToSelector', function() { before(() => { global.spy = sinon.spy(Delegate, 'bind'); }); @@ -69,6 +70,26 @@ describe('Clipboard', () => { }); }); + describe('#delegateClickToElement', function() { + before(() => { + global.spy = sinon.spy(Event, 'bind'); + }); + + after(() => { + global.spy.restore(); + }); + + it('should delegate a click event to the passed element', () => { + let element = document.body; + let event = 'click'; + + let clipboard = new Clipboard(global.button); + + assert.ok(global.spy.calledOnce); + assert.ok(global.spy.calledWith(element, event)); + }); + }); + describe('#initialize', () => { it('should create a new instance of ClipboardAction', () => { let clipboard = new Clipboard('.btn');