Skip to content
This repository has been archived by the owner on Feb 16, 2021. It is now read-only.

How to use ZeroClipboard to achieve: different buttons copy different content? #524

Closed
dukesmike opened this issue Dec 5, 2014 · 2 comments
Closed

How to use ZeroClipboard to achieve: different buttons copy different content? #524

dukesmike opened this issue Dec 5, 2014 · 2 comments
Assignees
@JamesMGreene
Labels
Category: Documentation Resolution: Invalid
Milestone
Release 2.x Infra...

Comments

@dukesmike
Copy link

I have been struggling on this for several days, and read several threads, most of them were saying use some code like:

var clip = new ZeroClipboard.Client();
var id_1 = document.getElementById("id1");
var copy1 = document.getElementById("copy1")
var id_2 = document.getElementById("id2");
var copy1 = document.getElementById("copy1")
clip.glue(id_1, copy1); 
clip.glue(id_2, copy2);

but anyhow, these code doesn't work for me and always have an error said: Undefined function Client().
Additionally to that, I tried remove .Client(), then clip.glue(); is undefined.

So far, this is what I got:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
  <link href="embedCode.css" rel="stylesheet" type="text/css" />    
  </head>
  <body>
    <div class="copyAllContent" id="copyAll">
      <div id="copy1">
        content1
      </div>
      <button class="copySectionBtn" id="button1"></button>

      <div id="copy2">
        content2
      </div>
      <button class="copySectionBtn" id="button2"></button>
    </div>
  <button class="copyAllBtn" id="copyAll"></button>
</body>
<script type="text/javascript">
ZeroClipboard.config({ zIndex: 1000100002 }); //For other future purpose, I have to make this

//should copy content1 and content2 after click this button
//This button right now copy content2
var clientAll = new ZeroClipboard( document.getElementById('copyAll') ); 
var copyAll = copy1 + copy2;
clientAll.setText(copyAll);
console.log("I got all");

//should ONLY copy content1
//This button right now copy content2
var client1 = new ZeroClipboard( document.getElementById('button1') ); 
var copy1 = document.getElementById("copy1").innerText;
client1.setText(copy1);
console.log("I got: "+copy1);

//should ONLY copy content2
//This button right now works fine.
var client2 = new ZeroClipboard( document.getElementById('button2') ); 
var copy2 = document.getElementById("copy2").innerText;
client2.setText(copy2);
console.log("I got 2");
</script>
</html>

In this case, I would like to use 3 buttons to copy 3 different content to clipboard, but the code above makes all my buttons copy only content2, which means only client2 is working.
Please do not provide me any jQuery solutions as I know nothing about that...

If my question is duplicated, please advise me the link (no jQuery please) that I may missed in past week.

I appreciate all comments and helps!

PS: My English is not that good as second language, so if there has anything unclear, please make comments for me, I will correct it.
@JamesMGreene
Copy link
Member

ZeroClipboard.Client and client#glue are long-gone API methods. Please consult our docs here on GitHub for the latest and correct API (and other) documentation.

These documents will also talk at length about the multiple available mechanisms for copying data with ZeroClipboard, as well as some gotchas to watch out for (like the fact that setText, which you are using, puts data into a temporary store that is cleared out after every clipboard injection).

Here's a suggested update for your HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.js"></script>
  <link href="embedCode.css" rel="stylesheet" type="text/css" />    
  </head>
  <body>
    <div class="copyAllContent">
      <div id="copy1">
        content1
      </div>
      <button class="copySectionBtn" id="button1" data-clipboard-target="copy1"></button>

      <div id="copy2">
        content2
      </div>
      <button class="copySectionBtn" id="button2" data-clipboard-target="copy2"></button>
    </div>
    <button class="copyAllBtn" id="copyAll"></button>

    <script type="text/javascript">
ZeroClipboard.config({ zIndex: 1000100002 }); //For other future purpose, I have to make this

var copyBtn1 = document.getElementById("button1");
var copyBtn2 = document.getElementById("button2");
var copyBtnAll = document.getElementById("copyAll");

var client = new ZeroClipboard([copyBtn1, copyBtn2, copyBtnAll]); 

// Release DOM references
copyBtn1 = copyBtn2 = copyBtnAll = null;

client.on("error", function(event) {
  console.error("ERROR!\n" + JSON.stringify(event, null, 2));
});

client.on("ready", function(event) {
  console.log("Ready!");

  client.on("copy", function(event) {
    console.log("Copying...");
    if (event.target.id === "copyAll") {
      var copy1 = document.getElementById("copy1");
      var copy2 = document.getElementById("copy2");
      var textToCopy = "";
      if (copy1) {
        textToCopy += copy1.value || copy1.textContent || copy1.innerText;
      }
      if (copy2) {
        textToCopy += (textToCopy ? "\n" : "");
        textToCopy += copy2.value || copy2.textContent || copy2.innerText;
      }
      if (textToCopy) {
        console.log("Text to copy:\n" + textToCopy);
        event.clipboardData.clearData();
        event.clipboardData.setData("text/plain", textToCopy);
      }
      // Release DOM references
      copy1 = copy2 = null;
    }
    else if (event.relatedTarget) {
      // If you ONLY want the "text/plain" format to end up in your clipboard for `button1` and
      // `button2`, remove the default HTML text being populated
      event.clipboardData.clearData("text/html");
    }
  });
});
    </script>
  </body>
</html>

@JamesMGreene JamesMGreene self-assigned this Dec 13, 2014
@JamesMGreene
Copy link
Member

@dukesmike: For our own improvement opportunities, can you tell me how it is that you happened upon documentation/tutorials that suggested you use long-removed API methods like ZeroClipboard.Client and client#glue? That might be helpful for us to track down or encourage blog authors to publish an updated tutorial, etc. Please let us know. Thanks!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@JamesMGreene JamesMGreene

Labels
Category: Documentation Resolution: Invalid
Projects
None yet
Milestone
Release 2.x Infrastructure Enhancements
Development

No branches or pull requests
2 participants
@JamesMGreene @dukesmike