2

I am using the Accusoft document viewer. I have a requirement for a button that when clicked will copy to the clipboard the current URL plus a page number querystring parameter. I am using clipboard.js. I know exactly how to get the current URL and how to add a page number parameter to the URL. What I don't know how to do is make clipboard.js copy a variable (such as the generated URL with page number parameter) to the clipboard. Any help on this?

Michael Mahony
  • 1,310
  • 3
  • 15
  • 33

2 Answers2

14

Clipboard.js creator here ;)

You can use the imperative API to achieve that:

var url = document.location.href;

new Clipboard('.btn', {
  text: function() {
    return url;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>


<button class="btn">Copy</button>
Zeno Rocha
  • 3,226
  • 1
  • 23
  • 27
  • Zeno, thanks! That works perfectly! One other question is how to make the tooltip show "copied" like your demo. There is no sample code for that one.So when the copy is completed I want to show "copied" as a tooltip that then gets replaced by the default tooltip when the mouse goes away from the button. – Michael Mahony May 26 '16 at 16:14
  • Awesome ;D There are tons of different ways to do that. For example, you can use Bootstrap's Tooltip: http://stackoverflow.com/questions/37381640/tooltips-highlight-animation-with-clipboard-js-click/37395225 or some CSS-based solution. You can check clipboardjs.com source code where we use PrimerCSS: https://github.com/zenorocha/clipboard.js/tree/gh-pages – Zeno Rocha May 26 '16 at 17:21
  • Thanks Zeno! I managed to hack together some code that works for me! Great tool and again, thanks for the input! – Michael Mahony May 26 '16 at 17:54
  • Zeno, I have converted my code over to using the variable method above, but here is a problem I see with both Chrome and IE when using a DOM element to store the clipboard data...it appears when you get to the line of code var clipboard = New Clipboard(domElement); sometimes that code doesn't execute because the DOM element isn't there yet. I know about $(document).ready, but since this is inside of angular I don't really want to use that. Any ideas? I need a quick fix for the current release. – Michael Mahony Jun 02 '16 at 18:24
  • `document.addEventListener("DOMContentLoaded")` is the equivalent of jQuery's `$(document).ready` – Zeno Rocha Jun 02 '16 at 22:17
0

By placing you variable's content into a div and then use it as a target for clipboard.js....
I have to admit I didn't tryed it, but it should should work.

Your button (the example of the clipboard.js site) : 

<button class="btn" data-clipboard-target="#clipboardTarget">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
<div id="clipboardTarget" style="display:none;"></div>

Place your variable's content into the target div:

var myData = "http://example.com?data=something";
$("#clipboardTarget").html(myData);

It is now ready to be copied.

-----
EDIT

Ok, after the discussion below, I really tried my solution by downloading Clipboard.js and tested it.
(Someday I will learn to test my solutions before posting!)

Turns out that it works on a div only if visible.
Sadly.

So my solution is wrong.
I leave it here anyway... As a "don't do it, it's a false-good idea".

Thanks to Michael Mahony for his feedback.
;)

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
  • Two comments I have to add. (1) You can't get the data from a field that is set to display:none. It throws an error; (2) I originally worked around this by using a textbox and setting it to position: absolute; left: -999em so it is not visible on the screen, but can still be reached via code. It worked, but with Zeno's suggestion I am now using a variable. – Michael Mahony May 26 '16 at 16:16
  • @Michael Mahony: Thank you for your feedback, I appreciate. Can you tell me what is the error it trows and on which browser (for my knowledge), because I just made a test with Chrome, and it works fine. No error and I have the html inside a hidden div console logged. – Louys Patrice Bessette May 26 '16 at 16:43
  • @Michael Mahony: Or is it a Clipboard.js limitation ? – Louys Patrice Bessette May 26 '16 at 16:46
  • It says "unable to read property "text" of hidden field" or something to that effect. Perhaps a hidden div is different from a hidden form element? – Michael Mahony May 26 '16 at 16:48
  • I'm using property html... Like this : var hiddenDiv = $("#testID").html(); console.log(hiddenDiv); – Louys Patrice Bessette May 26 '16 at 16:53