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

Renames "data-value" to "data-text"

Browse Source
This commit is contained in:
Zeno Rocha 2015-09-19 02:25:46 -07:00
parent 6fcb7d5f87
commit e1f8fe6cde
4 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -20,10 +20,10 @@ 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 `data-value` attribute in your trigger element.
The easiest way to copy some content to the clipboard, is to include a `data-text` attribute in your trigger element.
```html
<button class="btn" data-value="Lorem ipsum">Copy</button>
<button class="btn" data-text="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 `data-target` attribute in your trigger element. The value you include on this attribute needs to match another's element `id` attribute.

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;if(!(this.triggers.length>0))throw new Error("The provided selector is empty");[].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("action")||"copy",c=a.currentTarget.getAttribute("target"),d=a.currentTarget.getAttribute("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 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;if(!(this.triggers.length>0))throw new Error("The provided selector is empty");[].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("data-action")||"copy",c=a.currentTarget.getAttribute("data-target"),d=a.currentTarget.getAttribute("data-text");if(d)this.selectValue(d,b);else{if(!c)throw new Error('Missing "data-target" or "data-text" 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 new Error(c)}}},{key:"triggers",get:function(){return document.querySelectorAll(this._triggers)},set:function(a){return this._triggers=a}}]),a}();

18
index.html
View File

@ -26,21 +26,21 @@
<h3>Copy text from attribute</h3>
<p>The easiest way to copy some content to the clipboard, is to include a <code>data-value</code> attribute in your trigger element.</p>
<p>The easiest way to copy some content to the clipboard, is to include a <code>data-text</code> attribute in your trigger element.</p>
<form class="example">
<button class="btn" data-action="copy" data-value="Just because you can doesn't mean you should — clipboard.js">Copy to the clipboard</button>
</form>
<div class="example">
<button class="btn" data-action="copy" data-text="Just because you can doesn't mean you should — clipboard.js">Copy to the clipboard</button>
</div>
<pre><code class="html">&lt;!-- Trigger --&gt;
&lt;button class="btn" data-value="Heya!"&gt;Copy&lt;/button&gt;</code></pre>
&lt;button class="btn" data-text="Heya!"&gt;Copy&lt;/button&gt;</code></pre>
<h3>Copy text from another element</h3>
<p>Alternatively, you can copy content from another element by adding a <code>data-target</code> attribute in your trigger element.</p>
<p>The value you include on this attribute needs to match another's element <code>id</code> attribute.</p>
<form class="example">
<div class="example">
<div class="input-group">
<input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git">
<span class="input-group-button">
@ -49,7 +49,7 @@
</button>
</span>
</div>
</form>
</div>
<pre><code class="html">&lt;!-- Target --&gt;
&lt;input id="foo" value="https://git.io/vn3cM"&gt;
@ -62,7 +62,7 @@
<p>Additionally, you can define a <code>data-action</code> attribute to specify if you want to either <code>copy</code> or <code>cut</code> content.</p>
<p>If you omit this attribute, <code>copy</code> will be used by default.</p>
<form class="example">
<div class="example">
<div class="input-group">
<textarea id="bar" cols="62" rows="4" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
</div>
@ -71,7 +71,7 @@
Cut to the clipboard
</button>
</div>
</form>
</div>
<pre><code class="html">&lt;!-- Target --&gt;
&lt;textarea id="bar"&gt;clipboard.js rocks!&lt;/textarea&gt;

16
src/clipboard.js
View File

@ -33,27 +33,27 @@ class Clipboard {
}
select(e) {
let actionAttr = e.currentTarget.getAttribute('action') || 'copy';
let targetAttr = e.currentTarget.getAttribute('target');
let valueAttr = e.currentTarget.getAttribute('value');
let actionAttr = e.currentTarget.getAttribute('data-action') || 'copy';
let targetAttr = e.currentTarget.getAttribute('data-target');
let textAttr = e.currentTarget.getAttribute('data-text');
if (valueAttr) {
this.selectValue(valueAttr, actionAttr);
if (textAttr) {
this.selectValue(textAttr, actionAttr);
}
else if (targetAttr) {
this.selectTarget(targetAttr, actionAttr);
}
else {
throw new Error('Missing "data-target" or "data-value" attribute');
throw new Error('Missing "data-target" or "data-text" attribute');
}
e.preventDefault();
}
selectValue(valueAttr, actionAttr) {
selectValue(textAttr, actionAttr) {
let fake = document.createElement('input');
fake.value = valueAttr;
fake.value = textAttr;
fake.style.opacity = 0;
fake.style.zIndex = -1;