mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
Compare commits
53 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
53a733fcb5 | ||
|
|
7a5a910bcd | ||
|
|
0163f7cb72 | ||
|
|
941bdbb16e | ||
|
|
00d5cc4e96 | ||
|
|
07a1f8456b | ||
|
|
ff3cd2c722 | ||
|
|
d346f30e5d | ||
|
|
e5fe34c524 | ||
|
|
0a6aace544 | ||
|
|
43d9c11aaf | ||
|
|
90a52149ed | ||
|
|
83b9d6a84d | ||
|
|
3d13baa385 | ||
|
|
7e37c95121 | ||
|
|
bc9bcdd678 | ||
|
|
4c9e29a0dc | ||
|
|
bd6dc9eb9f | ||
|
|
a88bb77be4 | ||
|
|
e86dc2caa2 | ||
|
|
8392a7ba1c | ||
|
|
31e3622e17 | ||
|
|
ee1eb455f4 | ||
|
|
d50f2fb73f | ||
|
|
c8221c742d | ||
|
|
efc22cf651 | ||
|
|
4b27a72dce | ||
|
|
c12c610b22 | ||
|
|
1d772a0cbe | ||
|
|
d9254459b7 | ||
|
|
2aa163b1d0 | ||
|
|
783dc6f3cf | ||
|
|
3188ffbce3 | ||
|
|
5dba68634e | ||
|
|
a12a056ef6 | ||
|
|
cb4301658c | ||
|
|
5efcdf2810 | ||
|
|
72926580c3 | ||
|
|
4967f118fe | ||
|
|
44d59b34a2 | ||
|
|
9d6375d20e | ||
|
|
37136663df | ||
|
|
db575bb4df | ||
|
|
bb6c4c0e7c | ||
|
|
03ee9829e0 | ||
|
|
24f6e1f541 | ||
|
|
5bdfff6375 | ||
|
|
4b73122f81 | ||
|
|
171f438f22 | ||
|
|
42a459402c | ||
|
|
b26cdb3b41 | ||
|
|
57c7fcf9a4 | ||
|
|
6b1f6b22a6 |
4
.babelrc
Normal file
4
.babelrc
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"presets": ["es2015-loose"],
|
||||
"plugins": ["transform-es2015-modules-umd"]
|
||||
}
|
||||
19
.github/issue_template.md
vendored
Normal file
19
.github/issue_template.md
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
### Expected behaviour
|
||||
|
||||
I thought that by going to the page '...' and pressing the button '...' then '...' would happen.
|
||||
|
||||
### Actual behaviour
|
||||
|
||||
Instead of '...', what I saw was that '...' happened instead.
|
||||
|
||||
### Steps to reproduce
|
||||
|
||||
1. Go this JSFiddle, JSBin, CodePen, etc
|
||||
2. Click on '....'
|
||||
3. Scroll down to '....'
|
||||
4. Refresh the page and wait 5 secs
|
||||
5. Finally the error will magically happen (if it is raining)
|
||||
|
||||
### Browsers affected
|
||||
|
||||
I tested on all major browsers and only IE 11 does not work.
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,3 +1,4 @@
|
||||
lib
|
||||
npm-debug.log
|
||||
bower_components
|
||||
node_modules
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
/.*/
|
||||
/example/
|
||||
/demo/
|
||||
/test/
|
||||
/.*
|
||||
/bower.json
|
||||
/karma.conf.js
|
||||
/src
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
{
|
||||
"name": "clipboard",
|
||||
"version": "1.4.3",
|
||||
"version": "1.5.10",
|
||||
"description": "Modern copy to clipboard. No Flash. Just 2kb",
|
||||
"license": "MIT",
|
||||
"main": "dist/clipboard.js",
|
||||
"ignore": [
|
||||
"/.*/",
|
||||
"/example/",
|
||||
"/demo/",
|
||||
"/test/",
|
||||
"/.*",
|
||||
"/bower.json",
|
||||
"/karma.conf.js"
|
||||
"/karma.conf.js",
|
||||
"/src",
|
||||
"/lib"
|
||||
],
|
||||
"keywords": [
|
||||
"clipboard",
|
||||
|
||||
30
demo/constructor-node.html
Normal file
30
demo/constructor-node.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>constructor-node</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1. Define some markup -->
|
||||
<div id="btn" data-clipboard-text="1">
|
||||
<span>Copy</span>
|
||||
</div>
|
||||
|
||||
<!-- 2. Include library -->
|
||||
<script src="../dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- 3. Instantiate clipboard by passing a HTML element -->
|
||||
<script>
|
||||
var btn = document.getElementById('btn');
|
||||
var clipboard = new Clipboard(btn);
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
30
demo/constructor-nodelist.html
Normal file
30
demo/constructor-nodelist.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>constructor-nodelist</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1. Define some markup -->
|
||||
<button data-clipboard-text="1">Copy</button>
|
||||
<button data-clipboard-text="2">Copy</button>
|
||||
<button data-clipboard-text="3">Copy</button>
|
||||
|
||||
<!-- 2. Include library -->
|
||||
<script src="../dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- 3. Instantiate clipboard by passing a list of HTML elements -->
|
||||
<script>
|
||||
var btns = document.querySelectorAll('button');
|
||||
var clipboard = new Clipboard(btns);
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
29
demo/constructor-selector.html
Normal file
29
demo/constructor-selector.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>constructor-selector</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1. Define some markup -->
|
||||
<button class="btn" data-clipboard-text="1">Copy</button>
|
||||
<button class="btn" data-clipboard-text="2">Copy</button>
|
||||
<button class="btn" data-clipboard-text="3">Copy</button>
|
||||
|
||||
<!-- 2. Include library -->
|
||||
<script src="../dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- 3. Instantiate clipboard by passing a string selector -->
|
||||
<script>
|
||||
var clipboard = new Clipboard('.btn');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
32
demo/function-target.html
Normal file
32
demo/function-target.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>function-target</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1. Define some markup -->
|
||||
<button class="btn">Copy</button>
|
||||
<div>hello</div>
|
||||
|
||||
<!-- 2. Include library -->
|
||||
<script src="../dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- 3. Instantiate clipboard -->
|
||||
<script>
|
||||
var clipboard = new Clipboard('.btn', {
|
||||
target: function() {
|
||||
return document.querySelector('div');
|
||||
}
|
||||
});
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
31
demo/function-text.html
Normal file
31
demo/function-text.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>function-text</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1. Define some markup -->
|
||||
<button class="btn">Copy</button>
|
||||
|
||||
<!-- 2. Include library -->
|
||||
<script src="../dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- 3. Instantiate clipboard -->
|
||||
<script>
|
||||
var clipboard = new Clipboard('.btn', {
|
||||
text: function() {
|
||||
return 'to be or not to be';
|
||||
}
|
||||
});
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
28
demo/target-div.html
Normal file
28
demo/target-div.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>target-div</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1. Define some markup -->
|
||||
<div>hello</div>
|
||||
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
|
||||
|
||||
<!-- 2. Include library -->
|
||||
<script src="../dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- 3. Instantiate clipboard -->
|
||||
<script>
|
||||
var clipboard = new Clipboard('.btn');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
28
demo/target-input.html
Normal file
28
demo/target-input.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>target-input</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1. Define some markup -->
|
||||
<input id="foo" type="text" value="hello">
|
||||
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
|
||||
|
||||
<!-- 2. Include library -->
|
||||
<script src="../dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- 3. Instantiate clipboard -->
|
||||
<script>
|
||||
var clipboard = new Clipboard('.btn');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
28
demo/target-textarea.html
Normal file
28
demo/target-textarea.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>target-textarea</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1. Define some markup -->
|
||||
<textarea id="bar">hello</textarea>
|
||||
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
|
||||
|
||||
<!-- 2. Include library -->
|
||||
<script src="../dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- 3. Instantiate clipboard -->
|
||||
<script>
|
||||
var clipboard = new Clipboard('.btn');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
945
dist/clipboard.js
vendored
945
dist/clipboard.js
vendored
File diff suppressed because it is too large
Load Diff
4
dist/clipboard.min.js
vendored
4
dist/clipboard.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -3,10 +3,10 @@
|
||||
Package.describe({
|
||||
name: "zenorocha:clipboard",
|
||||
summary: "Modern copy to clipboard. No Flash. Just 2kb.",
|
||||
version: "1.4.2",
|
||||
version: "1.5.10",
|
||||
git: "https://github.com/zenorocha/clipboard.js"
|
||||
});
|
||||
|
||||
Package.onUse(function(api) {
|
||||
api.addFiles("dist/clipboard.min.js", "client");
|
||||
api.addFiles("dist/clipboard.js", "client");
|
||||
});
|
||||
|
||||
50
package.json
50
package.json
@@ -1,53 +1,49 @@
|
||||
{
|
||||
"name": "clipboard",
|
||||
"version": "1.4.3",
|
||||
"version": "1.5.10",
|
||||
"description": "Modern copy to clipboard. No Flash. Just 2kb",
|
||||
"repository": "zenorocha/clipboard.js",
|
||||
"license": "MIT",
|
||||
"main": "dist/clipboard.js",
|
||||
"browser": "src/clipboard.js",
|
||||
"browserify": {
|
||||
"transform": [
|
||||
[
|
||||
"babelify",
|
||||
{
|
||||
"loose": "all"
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"main": "lib/clipboard.js",
|
||||
"keywords": [
|
||||
"clipboard",
|
||||
"copy",
|
||||
"cut"
|
||||
],
|
||||
"dependencies": {
|
||||
"babelify": "^6.3.0",
|
||||
"browserify": "^11.2.0",
|
||||
"delegate": "^1.0.0",
|
||||
"select": "^1.0.0",
|
||||
"good-listener": "^1.1.6",
|
||||
"select": "^1.0.6",
|
||||
"tiny-emitter": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.5.1",
|
||||
"babel-core": "^6.5.2",
|
||||
"babel-plugin-transform-es2015-modules-umd": "^6.5.0",
|
||||
"babel-preset-es2015": "^6.5.0",
|
||||
"babel-preset-es2015-loose": "^7.0.0",
|
||||
"babelify": "^7.2.0",
|
||||
"bannerify": "Vekat/bannerify#feature-option",
|
||||
"browserify": "^13.0.0",
|
||||
"chai": "^3.4.1",
|
||||
"install": "^0.4.4",
|
||||
"karma": "^0.13.10",
|
||||
"karma-browserify": "^4.4.0",
|
||||
"karma-browserify": "^5.0.1",
|
||||
"karma-chai": "^0.1.0",
|
||||
"karma-mocha": "^0.2.0",
|
||||
"karma-phantomjs-launcher": "^0.2.1",
|
||||
"karma-phantomjs-launcher": "^1.0.0",
|
||||
"karma-sinon": "^1.0.4",
|
||||
"mocha": "^2.3.3",
|
||||
"phantomjs-polyfill": "0.0.1",
|
||||
"phantomjs-prebuilt": "^2.1.4",
|
||||
"sinon": "^1.17.2",
|
||||
"uglify-js": "^2.4.24",
|
||||
"watchify": "^3.4.0",
|
||||
"bannerify": "Vekat/bannerify#feature-option"
|
||||
"watchify": "^3.4.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run build-debug && npm run build-min",
|
||||
"build-debug": "browserify src/clipboard.js -s Clipboard -p [bannerify --file .banner ] -o dist/clipboard.js",
|
||||
"build-debug": "browserify src/clipboard.js -s Clipboard -t [babelify] -p [bannerify --file .banner ] -o dist/clipboard.js",
|
||||
"build-min": "uglifyjs dist/clipboard.js --comments '/!/' -m screw_ie8=true -c screw_ie8=true,unused=false -o dist/clipboard.min.js",
|
||||
"build-watch": "watchify src/clipboard.js -s Clipboard -o dist/clipboard.js -v",
|
||||
"test": "npm run test-browser && npm run test-server",
|
||||
"test-browser": "karma start --single-run",
|
||||
"test-server": "mocha test/module-systems.js"
|
||||
"build-watch": "watchify src/clipboard.js -s Clipboard -t [babelify] -o dist/clipboard.js -v",
|
||||
"test": "karma start --single-run",
|
||||
"prepublish": "babel src --out-dir lib --loose all"
|
||||
}
|
||||
}
|
||||
|
||||
14
readme.md
14
readme.md
@@ -3,7 +3,7 @@
|
||||
[](https://travis-ci.org/zenorocha/clipboard.js)
|
||||
|
||||
|
||||
> Modern copy to clipboard. No Flash. Just 2kb
|
||||
> Modern copy to clipboard. No Flash. Just 3kb gzipped.
|
||||
|
||||
<a href="http://clipboardjs.com/"><img width="728" src="https://cloud.githubusercontent.com/assets/398893/9983535/5ab0a950-5fb4-11e5-9602-e73c0b661883.jpg" alt="Demo"></a>
|
||||
|
||||
@@ -31,19 +31,13 @@ If you're not into package management, just [download a ZIP](https://github.com/
|
||||
|
||||
## Setup
|
||||
|
||||
First, include the script located on the `dist` folder.
|
||||
First, include the script located on the `dist` folder or load it from [a third-party CDN provider](https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers).
|
||||
|
||||
```html
|
||||
<script src="dist/clipboard.min.js"></script>
|
||||
```
|
||||
|
||||
Or load it from a CDN.
|
||||
|
||||
```html
|
||||
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
|
||||
```
|
||||
|
||||
Now, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element(s), for example `<button class="btn">`.
|
||||
Now, you need to instantiate it by [passing a DOM selector](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18), [HTML element](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17), or [list of HTML elements](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19).
|
||||
|
||||
```js
|
||||
new Clipboard('.btn');
|
||||
@@ -157,7 +151,7 @@ new Clipboard('.btn', {
|
||||
});
|
||||
```
|
||||
|
||||
Also, with are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here's how you clean up the events and objects that we create.
|
||||
Also, if you are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here's how you clean up the events and objects that we create.
|
||||
|
||||
```js
|
||||
var clipboard = new Clipboard('.btn');
|
||||
|
||||
@@ -32,18 +32,12 @@ class ClipboardAction {
|
||||
* on the existence of `text` and `target` properties.
|
||||
*/
|
||||
initSelection() {
|
||||
if (this.text && this.target) {
|
||||
throw new Error('Multiple attributes declared, use either "target" or "text"');
|
||||
}
|
||||
else if (this.text) {
|
||||
if (this.text) {
|
||||
this.selectFake();
|
||||
}
|
||||
else if (this.target) {
|
||||
this.selectTarget();
|
||||
}
|
||||
else {
|
||||
throw new Error('Missing required attributes, use either "target" or "text"');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -51,13 +45,23 @@ class ClipboardAction {
|
||||
* and makes a selection on it.
|
||||
*/
|
||||
selectFake() {
|
||||
const isRTL = document.documentElement.getAttribute('dir') == 'rtl';
|
||||
|
||||
this.removeFake();
|
||||
|
||||
this.fakeHandler = document.body.addEventListener('click', () => this.removeFake());
|
||||
|
||||
this.fakeElem = document.createElement('textarea');
|
||||
this.fakeElem.style.position = 'absolute';
|
||||
this.fakeElem.style.left = '-9999px';
|
||||
// Prevent zooming on iOS
|
||||
this.fakeElem.style.fontSize = '12pt';
|
||||
// Reset box model
|
||||
this.fakeElem.style.border = '0';
|
||||
this.fakeElem.style.padding = '0';
|
||||
this.fakeElem.style.margin = '0';
|
||||
// Move element out of screen horizontally
|
||||
this.fakeElem.style.position = 'fixed';
|
||||
this.fakeElem.style[ isRTL ? 'right' : 'left' ] = '-9999px';
|
||||
// Move element to the same position vertically
|
||||
this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop) + 'px';
|
||||
this.fakeElem.setAttribute('readonly', '');
|
||||
this.fakeElem.value = this.text;
|
||||
@@ -169,6 +173,14 @@ class ClipboardAction {
|
||||
set target(target) {
|
||||
if (target !== undefined) {
|
||||
if (target && typeof target === 'object' && target.nodeType === 1) {
|
||||
if (this.action === 'copy' && target.hasAttribute('disabled')) {
|
||||
throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
|
||||
}
|
||||
|
||||
if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
|
||||
throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
|
||||
}
|
||||
|
||||
this._target = target;
|
||||
}
|
||||
else {
|
||||
@@ -193,4 +205,4 @@ class ClipboardAction {
|
||||
}
|
||||
}
|
||||
|
||||
export default ClipboardAction;
|
||||
module.exports = ClipboardAction;
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import ClipboardAction from './clipboard-action';
|
||||
import Delegate from 'delegate';
|
||||
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.
|
||||
*/
|
||||
class Clipboard extends Emitter {
|
||||
/**
|
||||
* @param {String} selector
|
||||
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
|
||||
* @param {Object} options
|
||||
*/
|
||||
constructor(selector, options) {
|
||||
constructor(trigger, options) {
|
||||
super();
|
||||
|
||||
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.
|
||||
* @param {String} selector
|
||||
* Adds a click event listener to the passed trigger.
|
||||
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
|
||||
*/
|
||||
delegateClick(selector) {
|
||||
this.binding = Delegate.bind(document.body, selector, 'click', (e) => this.onClick(e));
|
||||
}
|
||||
|
||||
/**
|
||||
* Undelegates a click event on body.
|
||||
* @param {String} selector
|
||||
*/
|
||||
undelegateClick() {
|
||||
Delegate.unbind(document.body, 'click', this.binding);
|
||||
listenClick(trigger) {
|
||||
this.listener = listen(trigger, 'click', (e) => this.onClick(e));
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -50,15 +42,17 @@ class Clipboard extends Emitter {
|
||||
* @param {Event} e
|
||||
*/
|
||||
onClick(e) {
|
||||
const trigger = e.delegateTarget || e.currentTarget;
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction = null;
|
||||
}
|
||||
|
||||
this.clipboardAction = new ClipboardAction({
|
||||
action : this.action(e.delegateTarget),
|
||||
target : this.target(e.delegateTarget),
|
||||
text : this.text(e.delegateTarget),
|
||||
trigger : e.delegateTarget,
|
||||
action : this.action(trigger),
|
||||
target : this.target(trigger),
|
||||
text : this.text(trigger),
|
||||
trigger : trigger,
|
||||
emitter : this
|
||||
});
|
||||
}
|
||||
@@ -76,7 +70,7 @@ class Clipboard extends Emitter {
|
||||
* @param {Element} trigger
|
||||
*/
|
||||
defaultTarget(trigger) {
|
||||
let selector = getAttributeValue('target', trigger);
|
||||
const selector = getAttributeValue('target', trigger);
|
||||
|
||||
if (selector) {
|
||||
return document.querySelector(selector);
|
||||
@@ -95,7 +89,7 @@ class Clipboard extends Emitter {
|
||||
* Destroy lifecycle.
|
||||
*/
|
||||
destroy() {
|
||||
this.undelegateClick();
|
||||
this.listener.destroy();
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction.destroy();
|
||||
@@ -111,7 +105,7 @@ class Clipboard extends Emitter {
|
||||
* @param {Element} element
|
||||
*/
|
||||
function getAttributeValue(suffix, element) {
|
||||
let attribute = `data-clipboard-${suffix}`;
|
||||
const attribute = `data-clipboard-${suffix}`;
|
||||
|
||||
if (!element.hasAttribute(attribute)) {
|
||||
return;
|
||||
@@ -120,4 +114,4 @@ function getAttributeValue(suffix, element) {
|
||||
return element.getAttribute(attribute);
|
||||
}
|
||||
|
||||
export default Clipboard;
|
||||
module.exports = Clipboard;
|
||||
|
||||
@@ -35,27 +35,17 @@ describe('ClipboardAction', () => {
|
||||
});
|
||||
|
||||
describe('#initSelection', () => {
|
||||
it('should throw an error since both "text" and "target" were passed', done => {
|
||||
try {
|
||||
new ClipboardAction({
|
||||
text: 'foo',
|
||||
target: document.querySelector('#input')
|
||||
});
|
||||
}
|
||||
catch(e) {
|
||||
assert.equal(e.message, 'Multiple attributes declared, use either "target" or "text"');
|
||||
done();
|
||||
}
|
||||
});
|
||||
it('should set the position right style property', done => {
|
||||
// Set document direction
|
||||
document.documentElement.setAttribute('dir', 'rtl');
|
||||
|
||||
it('should throw an error since neither "text" nor "target" were passed', done => {
|
||||
try {
|
||||
new ClipboardAction();
|
||||
}
|
||||
catch(e) {
|
||||
assert.equal(e.message, 'Missing required attributes, use either "target" or "text"');
|
||||
done();
|
||||
}
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
text: 'foo'
|
||||
});
|
||||
|
||||
assert.equal(clip.fakeElem.style.right, '-9999px');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import Clipboard from '../src/clipboard';
|
||||
import ClipboardAction from '../src/clipboard-action';
|
||||
import Delegate from 'delegate';
|
||||
import listen from 'good-listener';
|
||||
|
||||
describe('Clipboard', () => {
|
||||
before(() => {
|
||||
@@ -9,8 +9,14 @@ describe('Clipboard', () => {
|
||||
global.button.setAttribute('data-clipboard-text', 'foo');
|
||||
document.body.appendChild(global.button);
|
||||
|
||||
global.span = document.createElement('span');
|
||||
global.span.innerHTML = 'bar';
|
||||
|
||||
global.button.appendChild(span);
|
||||
|
||||
global.event = {
|
||||
delegateTarget: global.button
|
||||
target: global.button,
|
||||
currentTarget: global.button
|
||||
};
|
||||
});
|
||||
|
||||
@@ -48,45 +54,10 @@ describe('Clipboard', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('#delegateClick', () => {
|
||||
before(() => {
|
||||
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';
|
||||
|
||||
describe('#listenClick', () => {
|
||||
it('should add a click event listener to the passed selector', () => {
|
||||
let clipboard = new Clipboard('.btn');
|
||||
clipboard.undelegateClick();
|
||||
|
||||
assert.ok(global.spy.calledOnce);
|
||||
assert.ok(global.spy.calledWith(element, event));
|
||||
assert.isObject(clipboard.listener);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -98,13 +69,22 @@ describe('Clipboard', () => {
|
||||
assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
|
||||
});
|
||||
|
||||
it('should throws exception target', done => {
|
||||
it('should use an event\'s currentTarget when not equal to target', () => {
|
||||
let clipboard = new Clipboard('.btn');
|
||||
let bubbledEvent = { target: global.span, currentTarget: global.button };
|
||||
|
||||
clipboard.onClick(bubbledEvent);
|
||||
assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
|
||||
});
|
||||
|
||||
it('should throw an exception when target is invalid', done => {
|
||||
try {
|
||||
var clipboard = new Clipboard('.btn', {
|
||||
target: function() {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
clipboard.onClick(global.event);
|
||||
}
|
||||
catch(e) {
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
var assert = require('chai').assert;
|
||||
var browserify = require('browserify');
|
||||
|
||||
describe('CommonJS', function() {
|
||||
it('should import the lib in a commonjs env without babel', function(done) {
|
||||
browserify('./dist/clipboard.js').bundle(function(err) {
|
||||
assert.equal(err, null);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('AMD', function() {
|
||||
// TODO: Write test case
|
||||
});
|
||||
Reference in New Issue
Block a user