mirror
/
clipboard.js
mirror of https://github.com/zenorocha/clipboard.js.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Converts to a valid HTML document

This commit is contained in:
Zeno Rocha 2015-09-18 18:25:28 -07:00
parent 72cfee91a1
commit 9f59fd4c59
4 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -20,24 +20,24 @@ First, you need to instantiate it using a selector. This selector corresponds to
new Clipboard('.btn');
```
The easiest way to copy some content to the clipboard, is to include a `value` attribute in your trigger element.
The easiest way to copy some content to the clipboard, is to include a `data-value` attribute in your trigger element.
```html
<button class="btn" value="Lorem ipsum">Copy</button>
<button class="btn" data-value="Lorem ipsum">Copy</button>
```
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.
Another way of doing it, is to copy the content from an another element. You can do that by adding a `data-target` attribute in your trigger element. The value you include on this attribute needs to match another's element `id` attribute.
```html
<p id="target">Lorem ipsum</p>
<button class="btn" for="target">Copy</button>
<p id="foo">Lorem ipsum</p>
<button class="btn" data-target="foo">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.
Additionally, you can define a `data-action` 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>
<input id="foo" value="Lorem ipsum"></inpu>
<button class="btn" data-action="cut" data-target="foo">Copy</button>
```
As you may expect, the `cut` action only works on `<input>` or `<textarea>` elements.

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("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}();
"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.dataset.action||"copy",c=a.currentTarget.dataset.target,d=a.currentTarget.dataset.value;if(d)this.selectValue(d,b);else{if(!c)throw new Error('Missing "data-target" or "data-value" attribute');this.selectTarget(c,b)}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 "data-action" 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}();

12
index.html
View File

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

26
src/clipboard.js
View File

@ -28,24 +28,24 @@ class Clipboard {
}
select(e) {
let targetAttr = e.currentTarget.getAttribute('for');
let typeAttr = e.currentTarget.getAttribute('type') || 'copy';
let valueAttr = e.currentTarget.getAttribute('value');
let actionAttr = e.currentTarget.dataset.action || 'copy';
let targetAttr = e.currentTarget.dataset.target;
let valueAttr = e.currentTarget.dataset.value;
if (valueAttr) {
this.selectValue(valueAttr, typeAttr);
this.selectValue(valueAttr, actionAttr);
}
else if (targetAttr) {
this.selectTarget(targetAttr, typeAttr);
this.selectTarget(targetAttr, actionAttr);
}
else {
throw new Error('Missing "for" or "value" attribute');
throw new Error('Missing "data-target" or "data-value" attribute');
}
e.preventDefault();
}
selectValue(valueAttr, typeAttr) {
selectValue(valueAttr, actionAttr) {
let fake = document.createElement('input');
fake.value = valueAttr;
@ -55,12 +55,12 @@ class Clipboard {
document.body.appendChild(fake);
fake.select();
this.copy(typeAttr);
this.copy(actionAttr);
document.body.removeChild(fake);
}
selectTarget(targetAttr, typeAttr) {
selectTarget(targetAttr, actionAttr) {
let target = document.getElementById(targetAttr);
if (target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
@ -72,13 +72,13 @@ class Clipboard {
window.getSelection().addRange(range);
}
this.copy(typeAttr);
this.copy(actionAttr);
}
copy(typeAttr) {
copy(actionAttr) {
try {
let successful = document.execCommand(typeAttr);
if (!successful) throw 'Invalid "type" attribute';
let successful = document.execCommand(actionAttr);
if (!successful) throw 'Invalid "data-action" attribute';
window.getSelection().removeAllRanges();
}