Merge ce93b5e0f7 into d166ff6d96

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);
     }
 
     /**

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', () => {