mirror/clipboard.js
1
0
Fork 0
mirror of https://github.com/zenorocha/clipboard.js.git synced 2023-08-10 21:12:48 +03:00
Code Issues Projects Releases Wiki Activity

Adds support for cut action

Browse Source
This commit is contained in:
Zeno Rocha 2015-09-18 18:05:49 -07:00
parent ed8260591c
commit 72cfee91a1
4 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
README.md
View File

@ -14,7 +14,7 @@ Or [download as ZIP](https://github.com/zenorocha/clipboard.js/archive/master.zi
## Usage
First, you need to instantiate it using a selector. This selector corresponds to the trigger element (usually a `<button>`).
First, you need to instantiate it using a selector. This selector corresponds to the trigger element, usually a `<button>`.
```js
new Clipboard('.btn');
@ -23,16 +23,25 @@ new Clipboard('.btn');
The easiest way to copy some content to the clipboard, is to include a `value` attribute in your trigger element.
```html
<button class="btn" value="lorem ipsum">Copy</button>
<button class="btn" value="Lorem ipsum">Copy</button>
```
Another way of doing it is to copy the content from an `<input>` or `<textarea`>. You can do that by adding a `for` attribute in your trigger element. The value you include in this `for` attribute needs to match another's element `id` attribute.
Another way of doing it, is to copy the content from an another element. You can do that by adding a `for` attribute in your trigger element. The value you include on this attribute needs to match another's element `id` attribute.
```html
<input id="target" value="Lorem ipsum">
<p id="target">Lorem ipsum</p>
<button class="btn" for="target">Copy</button>
```
Additionally, you can define a `type` attribute to specify if you want to either `copy` or `cut` content. If you omit this attribute, `copy` will be used.
```html
<input id="target" value="Lorem ipsum"></inpu>
<button class="btn" type="cut" for="target">Copy</button>
```
As you may expect, the `cut` action only works on `<input>` or `<textarea>` elements.
## Browser Support
This project relies on both [Select API](https://developer.mozilla.org/en-US/docs/Web/API/Selection) and [execCommand API](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand). When combined, they're supported in the following browsers.

2
dist/clipboard.min.js vendored
View File

@ -1 +1 @@
"use strict";function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),Clipboard=function(){function a(b){_classCallCheck(this,a),this._triggers=b,this.init()}return _createClass(a,[{key:"init",value:function(){var a=this;[].forEach.call(this.triggers,function(b){return a.bind(b)})}},{key:"bind",value:function(a){var b=this;a.addEventListener("click",function(a){return b.select(a)})}},{key:"select",value:function(a){var b=a.currentTarget.getAttribute("value"),c=a.currentTarget.getAttribute("for");b?this.selectValue(b):c?this.selectTarget(c):console.error('No "for" or "value" attributes'),a.preventDefault()}},{key:"selectValue",value:function(a){var b=document.createElement("input");b.value=a,b.style.opacity=0,b.style.zIndex=-1,document.body.appendChild(b),b.select(),this.copy(),document.body.removeChild(b)}},{key:"selectTarget",value:function(a){var b=document.getElementById(a);if("INPUT"===b.nodeName||"TEXTAREA"===b.nodeName)b.select();else{var c=document.createRange();c.selectNode(b),window.getSelection().addRange(c)}this.copy()}},{key:"copy",value:function(){try{document.execCommand("copy"),window.getSelection().removeAllRanges()}catch(a){console.error(a)}}},{key:"triggers",get:function(){return document.querySelectorAll(this._triggers)},set:function(a){return this._triggers=a}}]),a}();
"use strict";function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),Clipboard=function(){function a(b){_classCallCheck(this,a),this._triggers=b,this.init()}return _createClass(a,[{key:"init",value:function(){var a=this;[].forEach.call(this.triggers,function(b){return a.bind(b)})}},{key:"bind",value:function(a){var b=this;a.addEventListener("click",function(a){return b.select(a)})}},{key:"select",value:function(a){var b=a.currentTarget.getAttribute("for"),c=a.currentTarget.getAttribute("type")||"copy",d=a.currentTarget.getAttribute("value");if(d)this.selectValue(d,c);else{if(!b)throw new Error('Missing "for" or "value" attribute');this.selectTarget(b,c)}a.preventDefault()}},{key:"selectValue",value:function(a,b){var c=document.createElement("input");c.value=a,c.style.opacity=0,c.style.zIndex=-1,document.body.appendChild(c),c.select(),this.copy(b),document.body.removeChild(c)}},{key:"selectTarget",value:function(a,b){var c=document.getElementById(a);if("INPUT"===c.nodeName||"TEXTAREA"===c.nodeName)c.select();else{var d=document.createRange();d.selectNode(c),window.getSelection().addRange(d)}this.copy(b)}},{key:"copy",value:function(a){try{var b=document.execCommand(a);if(!b)throw'Invalid "type" attribute';window.getSelection().removeAllRanges()}catch(c){throw console.log(c),new Error(c)}}},{key:"triggers",get:function(){return document.querySelectorAll(this._triggers)},set:function(a){return this._triggers=a}}]),a}();

6
index.html
View File

@ -5,12 +5,14 @@
<title>Clipboard.js</title>
</head>
<body>
<button class="btn" type="copy" value="lorem ipsum">Copy</button>
<p id="paragraph">Lorem ipsum dolor.</p>
<button class="btn" for="paragraph" type="button">Copy</button>
<button class="btn" type="copy" for="paragraph">Copy</button>
<form>
<input id="target" type="text" value="qwe">
<button class="btn" for="target" type="button">Copy</button>
<button class="btn" type="copy" for="target">Cut</button>
</form>
<script src="dist/clipboard.min.js"></script>

34
src/clipboard.js
View File

@ -28,24 +28,25 @@ class Clipboard {
}
select(e) {
var valueAttr = e.currentTarget.getAttribute('value');
var targetAttr = e.currentTarget.getAttribute('for');
let targetAttr = e.currentTarget.getAttribute('for');
let typeAttr = e.currentTarget.getAttribute('type') || 'copy';
let valueAttr = e.currentTarget.getAttribute('value');
if (valueAttr) {
this.selectValue(valueAttr);
this.selectValue(valueAttr, typeAttr);
}
else if (targetAttr) {
this.selectTarget(targetAttr);
this.selectTarget(targetAttr, typeAttr);
}
else {
console.error('Missing "for" or "value" attribute');
throw new Error('Missing "for" or "value" attribute');
}
e.preventDefault();
}
selectValue(valueAttr) {
var fake = document.createElement('input');
selectValue(valueAttr, typeAttr) {
let fake = document.createElement('input');
fake.value = valueAttr;
fake.style.opacity = 0;
@ -54,33 +55,36 @@ class Clipboard {
document.body.appendChild(fake);
fake.select();
this.copy();
this.copy(typeAttr);
document.body.removeChild(fake);
}
selectTarget(targetAttr) {
var target = document.getElementById(targetAttr);
selectTarget(targetAttr, typeAttr) {
let target = document.getElementById(targetAttr);
if (target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
target.select();
}
else {
var range = document.createRange();
let range = document.createRange();
range.selectNode(target);
window.getSelection().addRange(range);
}
this.copy();
this.copy(typeAttr);
}
copy() {
copy(typeAttr) {
try {
document.execCommand('copy');
let successful = document.execCommand(typeAttr);
if (!successful) throw 'Invalid "type" attribute';
window.getSelection().removeAllRanges();
}
catch (err) {
console.error(err);
console.log(err);
throw new Error(err);
}
}
}