ZeroClipboard Starter Snippet - JSFiddle

by fiddlegrimbo

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//rawgit.com/JamesMGreene/sandblaster/master/dist/sandblaster.min.js"></script>
<script src="//rawgit.com/zeroclipboard/zeroclipboard/master/dist/ZeroClipboard.min.js"></script>
<div id="warning"></div>

    <div class="clip_button">1</div>
    <div class="clip_button">2</div>
    <div class="clip_button">3</div>
    <div class="clip_button">4</div>
    <div class="clip_button">5</div>
    <div class="clip_button">6</div>

<div id="zcState">
    <h3>ZeroClipboard state: <button
  class="zc-state-updater fa fa-refresh"
  title="Refresh state"></button></h3>
    <pre></pre>
</div>

<div>
    <h3>Logs:</h3>
    <ul id="logger"></ul>
</div>

CSS

button.clipboard {
    padding: 3px;
}

/* FF button fix */
button.clipboard::-moz-focus-inner {
    margin: 1px -5px;
}

#zcState pre {
    width: 98%;
    height: 100px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: lightgray;
    border: 1px solid darkgray;
    padding: 2px;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

JavaScript

//
// Utility code
//
function showActive(el) {
    var $el = $(el);
    $el.fadeOut(10, function() { $el.fadeIn(90); });
}

var $logger = $("#logger");
function log(msg) {
    $logger.prepend("<li>" + msg + "</li>");
}


//
// Forcibly remove the JSFiddle iframe sandboxing with Sandblaster.js
// https://github.com/JamesMGreene/sandblaster
//
var result = sandblaster.detect();
if (result.framed && result.crossOrigin !== false && result.sandboxed !== false) {
    $("#warning").html('<p><strong>IMPORTANT:</strong> This JSFiddle can only work correctly if visiting the result view in the top frame!</p><p>Paste this URL into your browser\'s address bar: <a href="' + window.location.href + '">' + window.location.href + '</a></p>').after("<hr />");
}
else if (result.sandboxed && sandblaster.unsandbox()) {
    sandblaster.reload();
}

//
// Begin ZeroClipboard stuff
//
ZeroClipboard.config({
    forceHandCursor: true
});

      var client = new ZeroClipboard( $('.clip_button') );

      client.on( 'ready', function(event) {
        console.log( 'movie is loaded' );

        client.on( 'copy', function(event) {
          event.clipboardData.setData('text/plain', event.target.innerHTML);
        } );

        client.on( 'aftercopy', function(event) {
          console.log('Copied text to clipboard: ' + event.data['text/plain']);
        } );
      } );

      client.on( 'error', function(event) {
        console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
        ZeroClipboard.destroy();
      } );

$(".zc-state-updater").on("click", function() {
  $("#zcState pre").text(JSON.stringify(ZeroClipboard.state(), null, 2));
});
$("#zcState pre").text(JSON.stringify(ZeroClipboard.state(), null, 2));