mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
Compare commits
30 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
289389322e | ||
|
|
894a3bef4a | ||
|
|
780d390856 | ||
|
|
5de8be447f | ||
|
|
132fcd16b1 | ||
|
|
e7f0ff0392 | ||
|
|
393dbe34e0 | ||
|
|
d3fc3c1e7b | ||
|
|
83824fa248 | ||
|
|
ce79f170aa | ||
|
|
4c3a086866 | ||
|
|
20f64d82d0 | ||
|
|
85981026d1 | ||
|
|
6802a86f60 | ||
|
|
3522504d34 | ||
|
|
d17eca050e | ||
|
|
5381600a26 | ||
|
|
5be63e28dd | ||
|
|
adc669df06 | ||
|
|
b57e6d019f | ||
|
|
3d005b547e | ||
|
|
cf9e8fd7ce | ||
|
|
f1d99de5d3 | ||
|
|
fdb66d3f16 | ||
|
|
e0f82241d0 | ||
|
|
4d4c25c505 | ||
|
|
5ef3f1a817 | ||
|
|
3382ea3d14 | ||
|
|
0fcf8c9460 | ||
|
|
e1d571b3f3 |
13
.babelrc
13
.babelrc
@@ -1,4 +1,13 @@
|
||||
{
|
||||
"presets": ["es2015"],
|
||||
"plugins": ["transform-es2015-modules-umd"]
|
||||
"presets": [
|
||||
[
|
||||
"env",
|
||||
{
|
||||
"targets": {
|
||||
"uglify": true
|
||||
},
|
||||
"modules": false
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
21
.github/stale.yml
vendored
Normal file
21
.github/stale.yml
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
# Number of days of inactivity before an issue becomes stale
|
||||
daysUntilStale: 60
|
||||
|
||||
# Number of days of inactivity before a stale issue is closed
|
||||
daysUntilClose: 7
|
||||
|
||||
# Issues with these labels will never be considered stale
|
||||
exemptLabels:
|
||||
- pinned
|
||||
|
||||
# Label to use when marking an issue as stale
|
||||
staleLabel: stale
|
||||
|
||||
# Comment to post when marking an issue as stale. Set to `false` to disable
|
||||
markComment: >
|
||||
This issue has been automatically marked as stale because it has not had
|
||||
recent activity. It will be closed if no further activity occurs. Thank you
|
||||
for your contributions.
|
||||
|
||||
# Comment to post when closing a stale issue. Set to `false` to disable
|
||||
closeComment: false
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -2,3 +2,5 @@ lib
|
||||
npm-debug.log
|
||||
bower_components
|
||||
node_modules
|
||||
yarn-error.log
|
||||
yarn.lock
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
/.*/
|
||||
/demo/
|
||||
/test/
|
||||
/.*
|
||||
/bower.json
|
||||
/karma.conf.js
|
||||
/src
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) Zeno Rocha
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "clipboard",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.5",
|
||||
"description": "Modern copy to clipboard. No Flash. Just 3kb",
|
||||
"license": "MIT",
|
||||
"main": "dist/clipboard.js",
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
"authors": [
|
||||
{
|
||||
"name": "Zeno Rocha",
|
||||
"url": "http://zenorocha.com/"
|
||||
"homepage": "http://zenorocha.com/"
|
||||
}
|
||||
],
|
||||
"require": {
|
||||
"robloach/component-installer": "*"
|
||||
"oomphinc/composer-installers-extender": "*"
|
||||
},
|
||||
"extra": {
|
||||
"component": {
|
||||
|
||||
1282
dist/clipboard.js
vendored
1282
dist/clipboard.js
vendored
File diff suppressed because it is too large
Load Diff
6
dist/clipboard.min.js
vendored
6
dist/clipboard.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -2,14 +2,13 @@ var webpackConfig = require('./webpack.config.js');
|
||||
|
||||
module.exports = function (karma) {
|
||||
karma.set({
|
||||
plugins: ['karma-webpack', 'karma-chai', 'karma-sinon', 'karma-mocha', 'karma-phantomjs-launcher'],
|
||||
plugins: ['karma-webpack', 'karma-chai', 'karma-sinon', 'karma-mocha', 'karma-chrome-launcher'],
|
||||
|
||||
frameworks: ['chai', 'sinon', 'mocha'],
|
||||
|
||||
files: [
|
||||
'src/**/*.js',
|
||||
'test/**/*.js',
|
||||
'./node_modules/phantomjs-polyfill/bind-polyfill.js'
|
||||
],
|
||||
|
||||
preprocessors: {
|
||||
@@ -26,6 +25,6 @@ module.exports = function (karma) {
|
||||
stats: 'errors-only'
|
||||
},
|
||||
|
||||
browsers: ['PhantomJS']
|
||||
browsers: ['ChromeHeadless']
|
||||
});
|
||||
};
|
||||
|
||||
6945
package-lock.json
generated
Normal file
6945
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -3,7 +3,7 @@
|
||||
Package.describe({
|
||||
name: "zenorocha:clipboard",
|
||||
summary: "Modern copy to clipboard. No Flash. Just 3kb.",
|
||||
version: "2.0.0",
|
||||
version: "2.0.5",
|
||||
git: "https://github.com/zenorocha/clipboard.js"
|
||||
});
|
||||
|
||||
|
||||
32
package.json
32
package.json
@@ -1,11 +1,10 @@
|
||||
{
|
||||
"name": "clipboard",
|
||||
"version": "2.0.0",
|
||||
"version": "2.0.5",
|
||||
"description": "Modern copy to clipboard. No Flash. Just 2kb",
|
||||
"repository": "zenorocha/clipboard.js",
|
||||
"license": "MIT",
|
||||
"main": "dist/clipboard.js",
|
||||
"module": "src/clipboard.js",
|
||||
"keywords": [
|
||||
"clipboard",
|
||||
"copy",
|
||||
@@ -17,28 +16,27 @@
|
||||
"tiny-emitter": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.5.1",
|
||||
"babel-core": "^6.5.2",
|
||||
"babel-loader": "^6.2.10",
|
||||
"babel-plugin-transform-es2015-modules-umd": "^6.5.0",
|
||||
"babel-preset-es2015": "^6.5.0",
|
||||
"chai": "^3.4.1",
|
||||
"cross-env": "^3.1.4",
|
||||
"karma": "^1.3.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"chai": "^4.2.0",
|
||||
"cross-env": "^5.2.0",
|
||||
"karma": "^3.1.1",
|
||||
"karma-chai": "^0.1.0",
|
||||
"karma-mocha": "^1.2.0",
|
||||
"karma-phantomjs-launcher": "^1.0.0",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-sinon": "^1.0.4",
|
||||
"karma-webpack": "^2.0.2",
|
||||
"mocha": "^3.1.2",
|
||||
"phantomjs-prebuilt": "^2.1.4",
|
||||
"sinon": "^1.17.2",
|
||||
"webpack": "^2.2.1"
|
||||
"karma-webpack": "^3.0.5",
|
||||
"mocha": "^5.2.0",
|
||||
"sinon": "^7.1.1",
|
||||
"uglifyjs-webpack-plugin": "^2.0.1",
|
||||
"webpack": "^4.5.0",
|
||||
"webpack-cli": "^3.1.2"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run build-debug && npm run build-min",
|
||||
"build-debug": "webpack",
|
||||
"build-min": "cross-env NODE_ENV=production webpack --optimize-minimize",
|
||||
"build-min": "cross-env NODE_ENV=production webpack",
|
||||
"build-watch": "webpack --watch",
|
||||
"test": "karma start --single-run",
|
||||
"prepublish": "npm run build"
|
||||
|
||||
22
readme.md
22
readme.md
@@ -34,12 +34,12 @@ First, include the script located on the `dist` folder or load it from [a third-
|
||||
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');
|
||||
new ClipboardJS('.btn');
|
||||
```
|
||||
|
||||
Internally, we need to fetch all elements that matches with your selector and attach event listeners for each one. But guess what? If you have hundreds of matches, this operation can consume a lot of memory.
|
||||
|
||||
For this reason we use [event delegation](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) which replaces multiple event listeners with just a single listener. After all, [#perfmatters](https://twitter.com/hashtag/perfmatters).
|
||||
For this reason we use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) which replaces multiple event listeners with just a single listener. After all, [#perfmatters](https://twitter.com/hashtag/perfmatters).
|
||||
|
||||
# Usage
|
||||
|
||||
@@ -103,7 +103,7 @@ There are cases where you'd like to show some user feedback or capture what has
|
||||
That's why we fire custom events such as `success` and `error` for you to listen and implement your custom logic.
|
||||
|
||||
```js
|
||||
var clipboard = new Clipboard('.btn');
|
||||
var clipboard = new ClipboardJS('.btn');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
console.info('Action:', e.action);
|
||||
@@ -125,7 +125,7 @@ For a live demonstration, go to this [site](https://clipboardjs.com/) and open y
|
||||
|
||||
Each application has different design needs, that's why clipboard.js does not include any CSS or built-in tooltip solution.
|
||||
|
||||
The tooltips you see on the [demo site](https://clipboardjs.com/) were built using [GitHub's Primer](https://github.com/primer/primer-css/tree/master/modules/primer-tooltips). You may want to check that out if you're looking for a similar look and feel.
|
||||
The tooltips you see on the [demo site](https://clipboardjs.com/) were built using [GitHub's Primer](https://primer.style/css/components/tooltips). You may want to check that out if you're looking for a similar look and feel.
|
||||
|
||||
## Advanced Options
|
||||
|
||||
@@ -134,7 +134,7 @@ If you don't want to modify your HTML, there's a pretty handy imperative API for
|
||||
For instance, if you want to dynamically set a `target`, you'll need to return a Node.
|
||||
|
||||
```js
|
||||
new Clipboard('.btn', {
|
||||
new ClipboardJS('.btn', {
|
||||
target: function(trigger) {
|
||||
return trigger.nextElementSibling;
|
||||
}
|
||||
@@ -144,7 +144,7 @@ new Clipboard('.btn', {
|
||||
If you want to dynamically set a `text`, you'll return a String.
|
||||
|
||||
```js
|
||||
new Clipboard('.btn', {
|
||||
new ClipboardJS('.btn', {
|
||||
text: function(trigger) {
|
||||
return trigger.getAttribute('aria-label');
|
||||
}
|
||||
@@ -154,7 +154,7 @@ new Clipboard('.btn', {
|
||||
For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the `container` value.
|
||||
|
||||
```js
|
||||
new Clipboard('.btn', {
|
||||
new ClipboardJS('.btn', {
|
||||
container: document.getElementById('modal')
|
||||
});
|
||||
```
|
||||
@@ -162,13 +162,13 @@ new Clipboard('.btn', {
|
||||
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');
|
||||
var clipboard = new ClipboardJS('.btn');
|
||||
clipboard.destroy();
|
||||
```
|
||||
|
||||
## Browser Support
|
||||
|
||||
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 first one is [supported by all browsers](http://caniuse.com/#search=selection) while the second one is supported in the following browsers.
|
||||
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 first one is [supported by all browsers](https://caniuse.com/#search=selection) while the second one is supported in the following browsers.
|
||||
|
||||
| <img src="https://clipboardjs.com/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://clipboardjs.com/assets/images/edge.png" width="48px" height="48px" alt="Edge logo"> | <img src="https://clipboardjs.com/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="https://clipboardjs.com/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://clipboardjs.com/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="https://clipboardjs.com/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> |
|
||||
|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
@@ -176,7 +176,7 @@ This library relies on both [Selection](https://developer.mozilla.org/en-US/docs
|
||||
|
||||
The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is 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.
|
||||
|
||||
You can also check if clipboard.js is supported or not by running `Clipboard.isSupported()`, that way you can hide copy/cut buttons from the UI.
|
||||
You can also check if clipboard.js is supported or not by running `ClipboardJS.isSupported()`, that way you can hide copy/cut buttons from the UI.
|
||||
|
||||
## Bonus
|
||||
|
||||
@@ -186,4 +186,4 @@ Install for [Chrome](https://chrome.google.com/webstore/detail/codecopy/fkbfebkc
|
||||
|
||||
## License
|
||||
|
||||
[MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha
|
||||
[MIT License](https://zenorocha.mit-license.org/) © Zeno Rocha
|
||||
|
||||
@@ -137,7 +137,7 @@ class ClipboardAction {
|
||||
if (this.trigger) {
|
||||
this.trigger.focus();
|
||||
}
|
||||
|
||||
document.activeElement.blur();
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
|
||||
@@ -201,4 +201,4 @@ class ClipboardAction {
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ClipboardAction;
|
||||
export default ClipboardAction;
|
||||
|
||||
@@ -86,10 +86,10 @@ class Clipboard extends Emitter {
|
||||
*/
|
||||
static isSupported(action = ['copy', 'cut']) {
|
||||
const actions = (typeof action === 'string') ? [action] : action;
|
||||
let support = !!document.queryCommandSupported;
|
||||
let support = !document.queryCommandSupported;
|
||||
|
||||
actions.forEach((action) => {
|
||||
support = support && !!document.queryCommandSupported(action);
|
||||
support = support && !document.queryCommandSupported(action);
|
||||
});
|
||||
|
||||
return support;
|
||||
@@ -132,4 +132,4 @@ function getAttributeValue(suffix, element) {
|
||||
return element.getAttribute(attribute);
|
||||
}
|
||||
|
||||
module.exports = Clipboard;
|
||||
export default Clipboard;
|
||||
|
||||
@@ -1,20 +1,24 @@
|
||||
const pkg = require('./package.json');
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
|
||||
|
||||
const production = process.env.NODE_ENV === 'production' || false;
|
||||
|
||||
const banner = `clipboard.js v${pkg.version}
|
||||
https://zenorocha.github.io/clipboard.js
|
||||
https://clipboardjs.com/
|
||||
|
||||
Licensed MIT © Zeno Rocha`;
|
||||
|
||||
module.exports = {
|
||||
entry: './src/clipboard.js',
|
||||
mode: 'production',
|
||||
output: {
|
||||
filename: production ? 'clipboard.min.js' : 'clipboard.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
library: 'ClipboardJS',
|
||||
globalObject: 'this',
|
||||
libraryExport: 'default',
|
||||
libraryTarget: 'umd'
|
||||
},
|
||||
module: {
|
||||
@@ -22,20 +26,21 @@ module.exports = {
|
||||
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
|
||||
]
|
||||
},
|
||||
plugins: production ? [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
beautify: false,
|
||||
mangle: {
|
||||
screw_ie8: true,
|
||||
keep_fnames: true
|
||||
},
|
||||
compress: {
|
||||
screw_ie8: true
|
||||
},
|
||||
comments: false
|
||||
}),
|
||||
new webpack.BannerPlugin({banner})
|
||||
] : [
|
||||
new webpack.BannerPlugin({banner})
|
||||
optimization: {
|
||||
minimize: production,
|
||||
minimizer: [
|
||||
new UglifyJSPlugin({
|
||||
parallel: require('os').cpus().length,
|
||||
uglifyOptions: {
|
||||
ie8: false,
|
||||
keep_fnames: false,
|
||||
output: {
|
||||
beautify: false,
|
||||
comments: (node, {value, type}) => type == 'comment2' && value.startsWith('!')
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
},
|
||||
plugins: [new webpack.BannerPlugin({ banner })]
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user