support custom trigger event

This commit is contained in:
Jeremy Xu 2015-11-02 17:53:30 +08:00
parent db575bb4df
commit cb0bfff389
4 changed files with 32 additions and 16 deletions

17
dist/clipboard.js vendored
View File

@ -621,9 +621,9 @@ var Clipboard = (function (_Emitter) {
_classCallCheck(this, Clipboard);
_Emitter.call(this);
this.defaultTriggerEvent = 'click';
this.resolveOptions(options);
this.listenClick(trigger);
this.listenEvent(trigger);
}
/**
@ -644,27 +644,28 @@ var Clipboard = (function (_Emitter) {
this.action = typeof options.action === 'function' ? options.action : this.defaultAction;
this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;
this.text = typeof options.text === 'function' ? options.text : this.defaultText;
this.triggerEvent = typeof options.triggerEvent === 'string' ? options.triggerEvent : this.defaultTriggerEvent;
};
/**
* Adds a click event listener to the passed trigger.
* Adds a event listener to the passed trigger.
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
*/
Clipboard.prototype.listenClick = function listenClick(trigger) {
Clipboard.prototype.listenEvent = function listenEvent(trigger) {
var _this = this;
this.listener = _goodListener2['default'](trigger, 'click', function (e) {
return _this.onClick(e);
this.listener = _goodListener2['default'](trigger, this.triggerEvent, function (e) {
return _this.handleEvent(e);
});
};
/**
* Defines a new `ClipboardAction` on each click event.
* Defines a new `ClipboardAction` on each trigger event.
* @param {Event} e
*/
Clipboard.prototype.onClick = function onClick(e) {
Clipboard.prototype.handleEvent = function handleEvent(e) {
if (this.clipboardAction) {
this.clipboardAction = null;
}

File diff suppressed because one or more lines are too long

View File

@ -102,6 +102,20 @@ Truth is, you don't even need another element to copy its content from. You can
</button>
```
### Use custom event trigger
you can listen other event, the default event is 'click'.
```html
<label class="triggerLabel" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Double click, then copy to clipboard
</label>
```
```javascript
var clipboard = new Clipboard('.triggerLabel', {'triggerEvent' : 'dblclick'});
```
## Events
There are cases where you'd like to show some user feedback or capture what has been selected after a copy/cut operation.

View File

@ -13,9 +13,9 @@ class Clipboard extends Emitter {
*/
constructor(trigger, options) {
super();
this.defaultTriggerEvent = 'click';
this.resolveOptions(options);
this.listenClick(trigger);
this.listenEvent(trigger);
}
/**
@ -27,21 +27,22 @@ class Clipboard extends Emitter {
this.action = (typeof options.action === 'function') ? options.action : this.defaultAction;
this.target = (typeof options.target === 'function') ? options.target : this.defaultTarget;
this.text = (typeof options.text === 'function') ? options.text : this.defaultText;
this.triggerEvent = (typeof options.triggerEvent === 'string') ? options.triggerEvent : this.defaultTriggerEvent;
}
/**
* Adds a click event listener to the passed trigger.
* Adds a event listener to the passed trigger.
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
*/
listenClick(trigger) {
this.listener = listen(trigger, 'click', (e) => this.onClick(e));
listenEvent(trigger) {
this.listener = listen(trigger, this.triggerEvent, (e) => this.handleEvent(e));
}
/**
* Defines a new `ClipboardAction` on each click event.
* Defines a new `ClipboardAction` on each trigger event.
* @param {Event} e
*/
onClick(e) {
handleEvent(e) {
if (this.clipboardAction) {
this.clipboardAction = null;
}