Allows HTML elements to be passed in the constructor - Fixes #25

This commit is contained in:
Zeno Rocha
2015-10-26 01:06:29 -07:00
parent 705e2dbefd
commit 6b1f6b22a6
3 changed files with 21 additions and 63 deletions

View File

@@ -24,7 +24,7 @@
"dependencies": { "dependencies": {
"babelify": "^6.3.0", "babelify": "^6.3.0",
"browserify": "^11.2.0", "browserify": "^11.2.0",
"delegate": "^1.0.0", "good-listener": "^1.1.0",
"select": "^1.0.0", "select": "^1.0.0",
"tiny-emitter": "^1.0.0" "tiny-emitter": "^1.0.0"
}, },

View File

@@ -1,21 +1,21 @@
import ClipboardAction from './clipboard-action'; import ClipboardAction from './clipboard-action';
import Delegate from 'delegate';
import Emitter from 'tiny-emitter'; import Emitter from 'tiny-emitter';
import listen from 'good-listener';
/** /**
* Base class which takes a selector, delegates a click event to it, * Base class which takes one or more elements, adds event listeners to them,
* and instantiates a new `ClipboardAction` on each click. * and instantiates a new `ClipboardAction` on each click.
*/ */
class Clipboard extends Emitter { class Clipboard extends Emitter {
/** /**
* @param {String} selector * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
* @param {Object} options * @param {Object} options
*/ */
constructor(selector, options) { constructor(trigger, options) {
super(); super();
this.resolveOptions(options); this.resolveOptions(options);
this.delegateClick(selector); this.listenClick(trigger);
} }
/** /**
@@ -30,19 +30,11 @@ class Clipboard extends Emitter {
} }
/** /**
* Delegates a click event on the passed selector. * Adds a click event listener to the passed trigger.
* @param {String} selector * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
*/ */
delegateClick(selector) { listenClick(trigger) {
this.binding = Delegate.bind(document.body, selector, 'click', (e) => this.onClick(e)); this.listener = listen(trigger, 'click', (e) => this.onClick(e));
}
/**
* Undelegates a click event on body.
* @param {String} selector
*/
undelegateClick() {
Delegate.unbind(document.body, 'click', this.binding);
} }
/** /**
@@ -55,10 +47,10 @@ class Clipboard extends Emitter {
} }
this.clipboardAction = new ClipboardAction({ this.clipboardAction = new ClipboardAction({
action : this.action(e.delegateTarget), action : this.action(e.target),
target : this.target(e.delegateTarget), target : this.target(e.target),
text : this.text(e.delegateTarget), text : this.text(e.target),
trigger : e.delegateTarget, trigger : e.target,
emitter : this emitter : this
}); });
} }
@@ -95,7 +87,7 @@ class Clipboard extends Emitter {
* Destroy lifecycle. * Destroy lifecycle.
*/ */
destroy() { destroy() {
this.undelegateClick(); this.listener.destroy();
if (this.clipboardAction) { if (this.clipboardAction) {
this.clipboardAction.destroy(); this.clipboardAction.destroy();

View File

@@ -1,6 +1,6 @@
import Clipboard from '../src/clipboard'; import Clipboard from '../src/clipboard';
import ClipboardAction from '../src/clipboard-action'; import ClipboardAction from '../src/clipboard-action';
import Delegate from 'delegate'; import listen from 'good-listener';
describe('Clipboard', () => { describe('Clipboard', () => {
before(() => { before(() => {
@@ -10,7 +10,7 @@ describe('Clipboard', () => {
document.body.appendChild(global.button); document.body.appendChild(global.button);
global.event = { global.event = {
delegateTarget: global.button target: global.button
}; };
}); });
@@ -48,45 +48,10 @@ describe('Clipboard', () => {
}); });
}); });
describe('#delegateClick', () => { describe('#listenClick', () => {
before(() => { it('should add a click event listener to the passed selector', () => {
global.spy = sinon.spy(Delegate, 'bind');
});
after(() => {
global.spy.restore();
});
it('should delegate a click event to the passed selector', () => {
let element = document.body;
let selector = '.btn';
let event = 'click';
let clipboard = new Clipboard(selector);
assert.ok(global.spy.calledOnce);
assert.ok(global.spy.calledWith(element, selector, event));
});
});
describe('#undelegateClick', () => {
before(() => {
global.spy = sinon.spy(Delegate, 'unbind');
});
after(() => {
global.spy.restore();
});
it('should undelegate a click event', () => {
let element = document.body;
let event = 'click';
let clipboard = new Clipboard('.btn'); let clipboard = new Clipboard('.btn');
clipboard.undelegateClick(); assert.isObject(clipboard.listener);
assert.ok(global.spy.calledOnce);
assert.ok(global.spy.calledWith(element, event));
}); });
}); });
@@ -105,6 +70,7 @@ describe('Clipboard', () => {
return null; return null;
} }
}); });
clipboard.onClick(global.event); clipboard.onClick(global.event);
} }
catch(e) { catch(e) {