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

Handles browsers that do not support this API

Browse Source
This commit is contained in:
Zeno Rocha 2015-09-19 16:43:42 -07:00
parent e4f9aa0d7a
commit 4ad0069dbd
3 changed files with 39 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo.css
View File

@ -113,6 +113,10 @@ code {
/* Example
========================================================================== */
.flash {
margin-bottom: 15px;
}
.example {
position: relative;
margin: 15px 0 0;

2
dist/clipboard.min.js vendored
View File

@ -1 +1 @@
!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){(function(a){function c(){try{var a=new d("cat",{detail:{foo:"bar"}});return"cat"===a.type&&"bar"===a.detail.foo}catch(b){}return!1}var d=a.CustomEvent;b.exports=c()?d:"function"==typeof document.createEvent?function(a,b){var c=document.createEvent("CustomEvent");return b?c.initCustomEvent(a,b.bubbles,b.cancelable,b.detail):c.initCustomEvent(a,!1,!1,void 0),c}:function(a,b){var c=document.createEventObject();return c.type=a,b?(c.bubbles=Boolean(b.bubbles),c.cancelable=Boolean(b.cancelable),c.detail=b.detail):(c.bubbles=!1,c.cancelable=!1,c.detail=void 0),c}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],2:[function(a,b,c){(function(b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d=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}}(),e=a("custom-event"),f=function(){function a(b){c(this,a),this._triggers=b,this.init()}return d(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(b,d,a.currentTarget);else{if(!c)throw new Error('Missing "data-target" or "data-text" attribute');this.selectTarget(b,c,a.currentTarget)}a.preventDefault()}},{key:"selectValue",value:function(a,b,c){var d=document.createElement("input");d.value=b,d.style.opacity=0,d.style.zIndex=-1,document.body.appendChild(d),d.select(),this.copy(a,b,c),document.body.removeChild(d)}},{key:"selectTarget",value:function(a,b,c){var d="",e=document.getElementById(b);if("INPUT"===e.nodeName||"TEXTAREA"===e.nodeName)e.select(),d=e.value;else{var f=document.createRange(),g=window.getSelection();f.selectNode(e),g.addRange(f),d=g.toString()}this.copy(a,d,c)}},{key:"copy",value:function(a,b,c){try{var d=document.execCommand(a);if(!d)throw'Invalid "data-action" attribute';this.dispatchEvent(a,b,c),window.getSelection().removeAllRanges()}catch(e){throw new Error(e)}}},{key:"dispatchEvent",value:function(a,b,c){var d=new e(a,{detail:b});c.dispatchEvent(d)}},{key:"triggers",get:function(){return document.querySelectorAll(this._triggers)},set:function(a){return this._triggers=a}}]),a}();b.Clipboard=f}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"custom-event":1}]},{},[2]);
!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){(function(a){function c(){try{var a=new d("cat",{detail:{foo:"bar"}});return"cat"===a.type&&"bar"===a.detail.foo}catch(b){}return!1}var d=a.CustomEvent;b.exports=c()?d:"function"==typeof document.createEvent?function(a,b){var c=document.createEvent("CustomEvent");return b?c.initCustomEvent(a,b.bubbles,b.cancelable,b.detail):c.initCustomEvent(a,!1,!1,void 0),c}:function(a,b){var c=document.createEventObject();return c.type=a,b?(c.bubbles=Boolean(b.bubbles),c.cancelable=Boolean(b.cancelable),c.detail=b.detail):(c.bubbles=!1,c.cancelable=!1,c.detail=void 0),c}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],2:[function(a,b,c){(function(b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var d=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}}(),e=a("custom-event"),f=function(){function a(b){c(this,a),this._triggers=b,this.init()}return d(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(b,d,a.currentTarget);else{if(!c)throw new Error('Missing "data-target" or "data-text" attribute');this.selectTarget(b,c,a.currentTarget)}a.preventDefault()}},{key:"selectValue",value:function(a,b,c){var d=document.createElement("input");d.value=b,d.style.opacity=0,d.style.zIndex=-1,document.body.appendChild(d),d.select(),this.copy(a,b,c),document.body.removeChild(d)}},{key:"selectTarget",value:function(a,b,c){var d="",e=document.getElementById(b);if("INPUT"===e.nodeName||"TEXTAREA"===e.nodeName)e.select(),d=e.value;else{var f=document.createRange(),g=window.getSelection();f.selectNode(e),g.addRange(f),d=g.toString()}this.copy(a,d,c)}},{key:"copy",value:function(a,b,c){var d=document.queryCommandSupported(a);try{var e=document.execCommand(a);if(!e)throw new Error('Invalid "data-action" attribute');this.dispatchEvent(a,b,c),window.getSelection().removeAllRanges()}catch(f){d=!1}d||this.notSupported(c)}},{key:"dispatchEvent",value:function(a,b,c){var d=new e(a,{detail:b});c.dispatchEvent(d)}},{key:"notSupported",value:function(a){var b=new e("no-support");a.dispatchEvent(b)}},{key:"triggers",get:function(){return document.querySelectorAll(this._triggers)},set:function(a){return this._triggers=a}}]),a}();b.Clipboard=f}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"custom-event":1}]},{},[2]);

40
index.html
View File

@ -24,7 +24,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
</header>
<main class="wrap">
<h1>Install</h1>
<h1 id="install">Install</h1>
<p>You can get it on npm.</p>
@ -36,7 +36,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>If you're not into package management, just <a href="https://github.com/zenorocha/clipboard.js/archive/master.zip">download a ZIP</a> file.</p>
<h1>Setup</h1>
<h1 id="setup">Setup</h1>
<p>First, include the script located on the <code>dist</code> folder</p>
@ -46,7 +46,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<pre><code class="js">new Clipboard('.btn');</code></pre>
<h1>Usage</h1>
<h1 id="usage">Usage</h1>
<p>We're living a <em>declarative renaissance</em>, that's why we decided to take advantage of <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML5 data attributes</a> for better usability.</p>
@ -55,6 +55,10 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<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>
<div class="example">
<div class="flash flash-error hidden">
Sorry, your browser do not support copy &amp; cut to the clipboard.
</div>
<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>
@ -67,6 +71,10 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>The value you include on this attribute needs to match another's element <code>id</code> attribute.</p>
<div class="example">
<div class="flash flash-error hidden">
Sorry, your browser do not support copy &amp; cut to the clipboard.
</div>
<div class="input-group">
<input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git">
<span class="input-group-button">
@ -89,6 +97,10 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>If you omit this attribute, <code>copy</code> will be used by default.</p>
<div class="example">
<div class="flash flash-error hidden">
Sorry, your browser do not support copy &amp; cut to the clipboard.
</div>
<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>
@ -109,9 +121,11 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><
<p>As you may expect, the <code>cut</code> action only works on <code>&lt;input&gt;</code> or <code>&lt;textarea&gt;</code> elements.</p>
<h1>Events</h1>
<h1 id="events">Events</h1>
<p>There are cases where you'd like to capture what has been copied/cut. That's why we fire custom events such as <code>copy</code> and <code>cut</code> for you to listen and implement your custom logic.</p>
<p>There are cases where you'd like to capture what has been copied/cut or even check if this API is supported.</p>
<p>That's why we fire custom events such as <code>copy</code>, <code>cut</code>, and <code>no-support</code> for you to listen and implement your custom logic.</p>
<p>But to achieve that, first you need to access the <code>triggers</code> property from your clipboard instance.</p>
@ -125,12 +139,16 @@ var btns = clipboard.triggers;</code></pre>
console.info('Event:', e.type);
console.info('Text:', e.detail);
});
btns[i].addEventListener('no-support', function(e) {
alert('Sorry, your browser sucks :P');
});
}
</code></pre>
<p>For a live demonstration, just open your console :)</p>
<h1>Browser Support</h1>
<h1 id="browser-support">Browser Support</h1>
<p>This library relies on both <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection">Selection</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand">execCommand</a> APIs. When combined, they're supported in the following browsers.</p>
@ -155,6 +173,7 @@ var btns = clipboard.triggers;</code></pre>
<p>Safari ✘</p>
</li>
</ul>
<p>For instructions on how to detect support, check <a href="#events">Events</a> section.</p>
</main>
<footer class="footer gradient text-center">
@ -180,6 +199,15 @@ var btns = clipboard.triggers;</code></pre>
console.info('Event:', e.type);
console.info('Text:', e.detail);
});
btns[i].addEventListener('no-support', function(e) {
var flashes = document.querySelectorAll('.flash');
for (var j = 0; j < btns.length; j++) {
btns[j].disabled = true;
flashes[j].classList.remove('hidden');
}
});
}
});
</script>