mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
Compare commits
54 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
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 | ||
|
|
705e2dbefd | ||
|
|
fd66d6b51f | ||
|
|
e0263beb20 | ||
|
|
4d734bc277 | ||
|
|
d5015f6313 | ||
|
|
7e5beb439a | ||
|
|
70b2548a80 | ||
|
|
c6dc01cc29 | ||
|
|
f0245ab701 | ||
|
|
c911ba0f53 | ||
|
|
d166ff6d96 | ||
|
|
f7da00f0ba | ||
|
|
c7c2d9fb4f | ||
|
|
9fb666b365 | ||
|
|
9ddd3a8017 | ||
|
|
8d804fdd42 | ||
|
|
54efeb68e6 | ||
|
|
f56825bf73 | ||
|
|
9377659c9c | ||
|
|
5e43e84d91 | ||
|
|
6ca2ba514c |
6
.banner
Normal file
6
.banner
Normal file
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* clipboard.js v<%= pkg.version %>
|
||||
* https://zenorocha.github.io/clipboard.js
|
||||
*
|
||||
* Licensed MIT © Zeno Rocha
|
||||
*/
|
||||
@@ -17,3 +17,6 @@ insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{package.json,bower.json}]
|
||||
indent_size = 2
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,3 +1,4 @@
|
||||
lib
|
||||
npm-debug.log
|
||||
bower_components
|
||||
node_modules
|
||||
|
||||
7
.npmignore
Normal file
7
.npmignore
Normal file
@@ -0,0 +1,7 @@
|
||||
/.*/
|
||||
/demo/
|
||||
/test/
|
||||
/.*
|
||||
/bower.json
|
||||
/karma.conf.js
|
||||
/src
|
||||
@@ -1,3 +1,4 @@
|
||||
sudo: false
|
||||
language: node_js
|
||||
node_js:
|
||||
- 0.12
|
||||
- stable
|
||||
|
||||
12
bower.json
12
bower.json
@@ -1,9 +1,19 @@
|
||||
{
|
||||
"name": "clipboard",
|
||||
"version": "1.4.1",
|
||||
"version": "1.5.6",
|
||||
"description": "Modern copy to clipboard. No Flash. Just 2kb",
|
||||
"license": "MIT",
|
||||
"main": "dist/clipboard.js",
|
||||
"ignore": [
|
||||
"/.*/",
|
||||
"/demo/",
|
||||
"/test/",
|
||||
"/.*",
|
||||
"/bower.json",
|
||||
"/karma.conf.js",
|
||||
"/src",
|
||||
"/lib"
|
||||
],
|
||||
"keywords": [
|
||||
"clipboard",
|
||||
"copy",
|
||||
|
||||
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>
|
||||
939
dist/clipboard.js
vendored
939
dist/clipboard.js
vendored
File diff suppressed because it is too large
Load Diff
8
dist/clipboard.min.js
vendored
8
dist/clipboard.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -19,7 +19,9 @@ module.exports = function(karma) {
|
||||
|
||||
browserify: {
|
||||
debug: true,
|
||||
transform: ['babelify']
|
||||
transform: [
|
||||
['babelify', { presets: ['es2015'] }]
|
||||
]
|
||||
},
|
||||
|
||||
browsers: ['PhantomJS']
|
||||
|
||||
12
package.js
Normal file
12
package.js
Normal file
@@ -0,0 +1,12 @@
|
||||
// Package metadata for Meteor.js.
|
||||
|
||||
Package.describe({
|
||||
name: "zenorocha:clipboard",
|
||||
summary: "Modern copy to clipboard. No Flash. Just 2kb.",
|
||||
version: "1.5.6",
|
||||
git: "https://github.com/zenorocha/clipboard.js"
|
||||
});
|
||||
|
||||
Package.onUse(function(api) {
|
||||
api.addFiles("dist/clipboard.js", "client");
|
||||
});
|
||||
48
package.json
48
package.json
@@ -1,51 +1,47 @@
|
||||
{
|
||||
"name": "clipboard",
|
||||
"version": "1.4.1",
|
||||
"version": "1.5.6",
|
||||
"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-events": "^1.1.1",
|
||||
"good-listener": "^1.1.6",
|
||||
"select": "^1.0.6",
|
||||
"tiny-emitter": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel": "^6.3.26",
|
||||
"babel-cli": "^6.4.5",
|
||||
"babel-preset-es2015": "^6.3.13",
|
||||
"babelify": "^7.2.0",
|
||||
"bannerify": "Vekat/bannerify#feature-option",
|
||||
"browserify": "^13.0.0",
|
||||
"chai": "^3.4.1",
|
||||
"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",
|
||||
"uglify": "^0.1.5",
|
||||
"watchify": "^3.4.0"
|
||||
"phantomjs-prebuilt": "^2.1.3",
|
||||
"sinon": "^1.17.2",
|
||||
"uglify-js": "^2.4.24",
|
||||
"watchify": "^3.7.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run build-debug && npm run build-min",
|
||||
"build-debug": "browserify src/clipboard.js -s Clipboard -o dist/clipboard.js",
|
||||
"build-min": "uglify -s dist/clipboard.js -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-debug": "browserify src/clipboard.js -s Clipboard -t [babelify --presets es2015] -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 -t [babelify --presets es2015] -o dist/clipboard.js -v",
|
||||
"test": "karma start --single-run",
|
||||
"prepublish": "babel src --out-dir lib --presets es2015"
|
||||
}
|
||||
}
|
||||
|
||||
27
readme.md
27
readme.md
@@ -1,10 +1,11 @@
|
||||
# clipboard.js
|
||||
|
||||
[](https://travis-ci.org/zenorocha/clipboard.js)
|
||||
|
||||
|
||||
> Modern copy to clipboard. No Flash. Just 2kb
|
||||
|
||||
<a href="https://zenorocha.github.io/clipboard.js/"><img width="728" src="https://cloud.githubusercontent.com/assets/398893/9983535/5ab0a950-5fb4-11e5-9602-e73c0b661883.jpg" alt="Demo"></a>
|
||||
<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>
|
||||
|
||||
## Why
|
||||
|
||||
@@ -30,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');
|
||||
@@ -62,7 +57,7 @@ A pretty common use case is to copy content from another element. You can do tha
|
||||
|
||||
The value you include on this attribute needs to match another's element selector.
|
||||
|
||||
<a href="https://zenorocha.github.io/clipboard.js/#example-target"><img width="473" alt="example-2" src="https://cloud.githubusercontent.com/assets/398893/9983467/a4946aaa-5fb1-11e5-9780-f09fcd7ca6c8.png"></a>
|
||||
<a href="http://clipboardjs.com/#example-target"><img width="473" alt="example-2" src="https://cloud.githubusercontent.com/assets/398893/9983467/a4946aaa-5fb1-11e5-9780-f09fcd7ca6c8.png"></a>
|
||||
|
||||
```html
|
||||
<!-- Target -->
|
||||
@@ -80,7 +75,7 @@ Additionally, you can define a `data-clipboard-action` attribute to specify if y
|
||||
|
||||
If you omit this attribute, `copy` will be used by default.
|
||||
|
||||
<a href="https://zenorocha.github.io/clipboard.js/#example-action"><img width="473" alt="example-3" src="https://cloud.githubusercontent.com/assets/398893/10000358/7df57b9c-6050-11e5-9cd1-fbc51d2fd0a7.png"></a>
|
||||
<a href="http://clipboardjs.com/#example-action"><img width="473" alt="example-3" src="https://cloud.githubusercontent.com/assets/398893/10000358/7df57b9c-6050-11e5-9cd1-fbc51d2fd0a7.png"></a>
|
||||
|
||||
```html
|
||||
<!-- Target -->
|
||||
@@ -98,7 +93,7 @@ As you may expect, the `cut` action only works on `<input>` or `<textarea>` elem
|
||||
|
||||
Truth is, you don't even need another element to copy its content from. You can just include a `data-clipboard-text` attribute in your trigger element.
|
||||
|
||||
<a href="https://zenorocha.github.io/clipboard.js/#example-text"><img width="147" alt="example-1" src="https://cloud.githubusercontent.com/assets/398893/10000347/6e16cf8c-6050-11e5-9883-1c5681f9ec45.png"></a>
|
||||
<a href="http://clipboardjs.com/#example-text"><img width="147" alt="example-1" src="https://cloud.githubusercontent.com/assets/398893/10000347/6e16cf8c-6050-11e5-9883-1c5681f9ec45.png"></a>
|
||||
|
||||
```html
|
||||
<!-- Trigger -->
|
||||
@@ -130,7 +125,7 @@ clipboard.on('error', function(e) {
|
||||
});
|
||||
```
|
||||
|
||||
For a live demonstration, open this [site](https://zenorocha.github.io/clipboard.js/) and just your console :)
|
||||
For a live demonstration, open this [site](http://clipboardjs.com/) and just your console :)
|
||||
|
||||
## Advanced Options
|
||||
|
||||
@@ -156,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');
|
||||
@@ -167,7 +162,7 @@ clipboard.destroy();
|
||||
|
||||
This library relies on both [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) and [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) APIs. The second one is supported in the following browsers.
|
||||
|
||||
| <img src="https://zenorocha.github.io/clipboard.js/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://zenorocha.github.io/clipboard.js/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="https://zenorocha.github.io/clipboard.js/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://zenorocha.github.io/clipboard.js/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="https://zenorocha.github.io/clipboard.js/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> |
|
||||
| <img src="http://clipboardjs.com/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="http://clipboardjs.com/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="http://clipboardjs.com/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="http://clipboardjs.com/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="http://clipboardjs.com/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> |
|
||||
|:---:|:---:|:---:|:---:|:---:|
|
||||
| 42+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | Nope ✘ |
|
||||
|
||||
@@ -175,7 +170,7 @@ Although copy/cut operations with [execCommand](https://developer.mozilla.org/en
|
||||
|
||||
That means you can show a tooltip saying `Copied!` when `success` event is called and `Press Ctrl+C to copy` when `error` event is called because the text is already selected.
|
||||
|
||||
For a live demonstration, open this [site](https://zenorocha.github.io/clipboard.js/) on Safari.
|
||||
For a live demonstration, open this [site](http://clipboardjs.com) on Safari.
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import select from 'select';
|
||||
|
||||
/**
|
||||
* Inner class which performs selection from either `text` or `target`
|
||||
* properties and then executes copy or cut operations.
|
||||
*/
|
||||
class ClipboardAction {
|
||||
export default class ClipboardAction {
|
||||
/**
|
||||
* @param {Object} options
|
||||
*/
|
||||
@@ -49,27 +51,28 @@ class ClipboardAction {
|
||||
* and makes a selection on it.
|
||||
*/
|
||||
selectFake() {
|
||||
let 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';
|
||||
this.fakeElem.style[ isRTL ? 'right' : 'left' ] = '-9999px';
|
||||
this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop) + 'px';
|
||||
this.fakeElem.setAttribute('readonly', '');
|
||||
this.fakeElem.value = this.text;
|
||||
this.selectedText = this.text;
|
||||
|
||||
document.body.appendChild(this.fakeElem);
|
||||
|
||||
this.fakeElem.select();
|
||||
this.selectedText = select(this.fakeElem);
|
||||
this.copyText();
|
||||
}
|
||||
|
||||
/**
|
||||
* Only removes the fake element after another click event, that way
|
||||
* an user can hit `Ctrl+C` to copy because selection still exists.
|
||||
* a user can hit `Ctrl+C` to copy because selection still exists.
|
||||
*/
|
||||
removeFake() {
|
||||
if (this.fakeHandler) {
|
||||
@@ -87,19 +90,7 @@ class ClipboardAction {
|
||||
* Selects the content from element passed on `target` property.
|
||||
*/
|
||||
selectTarget() {
|
||||
if (this.target.nodeName === 'INPUT' || this.target.nodeName === 'TEXTAREA') {
|
||||
this.target.select();
|
||||
this.selectedText = this.target.value;
|
||||
}
|
||||
else {
|
||||
let range = document.createRange();
|
||||
let selection = window.getSelection();
|
||||
|
||||
range.selectNodeContents(this.target);
|
||||
selection.addRange(range);
|
||||
this.selectedText = selection.toString();
|
||||
}
|
||||
|
||||
this.selectedText = select(this.target);
|
||||
this.copyText();
|
||||
}
|
||||
|
||||
@@ -203,5 +194,3 @@ class ClipboardAction {
|
||||
this.removeFake();
|
||||
}
|
||||
}
|
||||
|
||||
export default ClipboardAction;
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import ClipboardAction from './clipboard-action';
|
||||
import Delegate from 'delegate-events';
|
||||
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 {
|
||||
export default 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) {
|
||||
let 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
|
||||
});
|
||||
}
|
||||
@@ -95,7 +89,7 @@ class Clipboard extends Emitter {
|
||||
* Destroy lifecycle.
|
||||
*/
|
||||
destroy() {
|
||||
this.undelegateClick();
|
||||
this.listener.destroy();
|
||||
|
||||
if (this.clipboardAction) {
|
||||
this.clipboardAction.destroy();
|
||||
@@ -119,5 +113,3 @@ function getAttributeValue(suffix, element) {
|
||||
|
||||
return element.getAttribute(attribute);
|
||||
}
|
||||
|
||||
export default Clipboard;
|
||||
|
||||
@@ -57,6 +57,19 @@ describe('ClipboardAction', () => {
|
||||
done();
|
||||
}
|
||||
});
|
||||
|
||||
it('should set the position right style property', done => {
|
||||
// Set document direction
|
||||
document.documentElement.setAttribute('dir', 'rtl');
|
||||
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
text: 'foo'
|
||||
});
|
||||
|
||||
assert.equal(clip.fakeElem.style.right, '-9999px');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
describe('#set action', () => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import Clipboard from '../src/clipboard';
|
||||
import ClipboardAction from '../src/clipboard-action';
|
||||
import Delegate from 'delegate-events';
|
||||
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
|
||||
};
|
||||
});
|
||||
|
||||
@@ -18,7 +24,7 @@ describe('Clipboard', () => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
describe('#resolveOptions', function() {
|
||||
describe('#resolveOptions', () => {
|
||||
before(() => {
|
||||
global.fn = function() {};
|
||||
});
|
||||
@@ -48,45 +54,10 @@ describe('Clipboard', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('#delegateClick', function() {
|
||||
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', function() {
|
||||
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