diff --git a/assets/scripts/clipboard.js b/assets/scripts/clipboard.js index e929fcf..42c2c84 100644 --- a/assets/scripts/clipboard.js +++ b/assets/scripts/clipboard.js @@ -5,10 +5,14 @@ clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); + console.info('Trigger:', e.trigger); showTooltip(e.trigger, 'Copied!'); }); clipboard.on('error', function(e) { + console.error('Action:', e.action); + console.error('Trigger:', e.trigger); + showTooltip(e.trigger, fallbackMessage(e.action)); }); diff --git a/index.html b/index.html index daadc67..9898fe8 100644 --- a/index.html +++ b/index.html @@ -32,8 +32,6 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><

That's why clipboard.js exists.

-

And don't be a jerk, use it responsibly :)

-

Install

You can get it on npm.

@@ -52,33 +50,24 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30">< 
<script src="dist/clipboard.min.js"></script>
-

Now, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <button>.

+

Now, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element(s), for example <button class="btn">.

new Clipboard('.btn');
+

Internally, we need to fetch all elements that matches with your selector and attach event listeners for each one. But guess what? If you have hundreds of matches, this operation can consume a lot of memory.

+ +

For this reason we use event delegation which replaces multiple event listeners with just a single listener. After all, #perfmatters.

+

Usage

We're living a declarative renaissance, that's why we decided to take advantage of HTML5 data attributes for better usability.

-

Copy text from attribute

- -

The easiest way to copy some content to the clipboard, is to include a data-text attribute in your trigger element.

- -
- -
- - 
<!-- Trigger -->
-<button class="btn" data-text="Just because you can doesn't mean you should — clipboard.js">
-    Copy to clipboard
-</button>
-

Copy text from another element

-

Alternatively, you can copy content from another element by adding a data-target attribute in your trigger element.

+

A pretty common use case is to copy content from 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.

-
+
@@ -102,7 +91,7 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><

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 by default.

-
+
@@ -123,36 +112,45 @@ allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"><

As you may expect, the cut action only works on <input> or <textarea> elements.

+

Copy text from attribute

+ +

Truth is, you don't even need another element to copy its content from. You can just include a data-text attribute in your trigger element.

+ +
+ +
+ + 
<!-- Trigger -->
+<button class="btn" data-text="Just because you can doesn't mean you should — clipboard.js">
+    Copy to clipboard
+</button>
+

Events

-

There are cases where you'd like to capture what has been copied/cut or even check if there was an error.

+

There are cases where you'd like to show some user feedback or capture what has been selected after a copy/cut operation.

That's why we fire custom events such as success and error for you to listen and implement your custom logic.

-

But to achieve that, first you need to access the triggers property from your clipboard instance.

- 
var clipboard = new Clipboard('.btn');
-var btns = clipboard.triggers;
-

Internally, this property is just a collections of nodes resulted from a querySelectorAll operation. So all you have to do now is loop through that collection and attach listeners.

+clipboard.on('success', function(e) { + console.info('Action:', e.action); + console.info('Text:', e.text); + console.info('Trigger:', e.trigger); - 
for (var i = 0; i < btns.length; i++) {
-    btns[i].addEventListener('success', function(e) {
-        console.info('Action:', e.detail.action);
-        console.info('Text:', e.detail.text);
-    });
+    e.clearSelection();
+});
 
-    btns[i].addEventListener('error', function(e) {
-        alert(e.detail);
-    });
-}
-
+clipboard.on('error', function(e) { + console.error('Action:', e.action); + console.error('Trigger:', e.trigger); +});

For a live demonstration, just open your console :)

Browser Support

-

This library relies on both Selection and execCommand APIs. When combined, they're supported in the following browsers.

+

This library relies on both Selection and execCommand APIs. The second one is supported in the following browsers.

  • @@ -175,6 +173,12 @@ var btns = clipboard.triggers;

    Safari ✘

+ +

Although copy/cut operations with execCommand aren't supported on Safari yet (including mobile), it gracefully degrades because Selection is supported.

+ +

That means you can show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.

+ +

For a live demonstration, open this site on Safari.