mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
Converts to a valid HTML document
This commit is contained in:
Zeno Rocha
parent
72cfee91a1
commit
9f59fd4c59
16
README.md
16
README.md
@ -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
2
dist/clipboard.min.js
vendored
@ -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
12
index.html
@ -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>
|
||||
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user