mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
Allows HTML elements to be passed in the constructor - Fixes #25
This commit is contained in:
@@ -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"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user