Help with Zeroclipboard

help
1

Hi,

Can anyone help me with getting Zeroclipboard running with Meteor? I’ve not used it before, but it looks like it’s the best solution for what I need to do (put something on the clipboard).

I’ve tried using Propercursive’s package (https://atmospherejs.com/propercursive/zeroclipboard) but because I’m not that good a JS coder I keep running into errors I can’t really seem to understand. Even trying to do it ‘statically’ - like getting a bit of test-text into the clipboard - seems to end with no result.

Does anyone have a working example out there for me to have a look at?

Thanks in advance!

Alex.

2

So a little more info (sorry for omitting this. I was in a bit of a hurry earlier)

When I add the package mentioned above and add

var client = new ZeroClipboard();

to /client/main.js it comes back with the following error:

Uncaught TypeError: Cannot read property 'appendChild' of null
    _embedSwf @ ZeroClipboard.js:1224
    _create @ ZeroClipboard.js:636
    ZeroClipboard.create @ ZeroClipboard.js:1963
    _clientConstructor @ ZeroClipboard.js:2101
    ZeroClipboard._createClient @ ZeroClipboard.js:2455
    ZeroClipboard @ ZeroClipboard.js:1874
    (anonymous function) @ main.js?e1687cea1a97451376ea4621c45c52d02d60e961:1
    (anonymous function) @ main.js?e1687cea1a97451376ea4621c45c52d02d60e961:5

I think the .swf file is in the correct location when I trawl through the package code, but as I said, I’ve not got much JS/Meteor experience so I’m wondering if I’m making a rookie error here.

3

I haven’t used this package, so I may be completely off-base here :smile:

The github docs suggest that you need to supply a DOM element to ZeroClipboard (which may explain the Cannot read property 'appendChild' of null message.

// main.js
var client = new ZeroClipboard( document.getElementById(“copy-button”) );

If that’s the case, then your best bet for instantiating this may be in the onRendered function of a template.

<template name="copyToClipboard">
  <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
</template>

Template.copyToClipboard.onRendered(function() {
  this.client = new ZeroClipboard(document.getElementById("copy-button"));
});

That’s a rather naive example, but it re-uses the github documented code.

4

Naive enough to actually work! Thank you very much!!

I was looking in the right direction (adding a DOM element) but obviously not putting everything in the right locations. The missing link for me was the onRendered() function.

Thanks again!

1 Like
5

in case of onRendered I would suggest creating it something like

var this.client

to scope it on template level.

And in onDestroyed call that .destroy() to clean after yourself.

6

Errm, var this.client doesn’t actually make sense. Within onRendered, this.client is template scoped.

Good call to clean up with an onDestroyed callback :smile:

7

I dont know, I scope everything in template as @something in coffeescript.
Not sure what is correct JS equivalent.
And I want it to be template scoped, so if you render more instances of copy buttons, it would not touch each others “client” reference in global scope.