ZeroClipboard Issue #576

by James Greene

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//rawgit.com/JamesMGreene/sandblaster/master/dist/sandblaster.min.js"></script>
<script src="//rawgit.com/zeroclipboard/zeroclipboard/master/dist/ZeroClipboard.min.js"></script>
<h3><a href="http://fiddle.jshell.net/JamesMGreene/dkmvxnxq/show/">Right-click, open in new window/tab</a></h3>

<div id="warning"></div>

<div class="page">
    <div class="clip_button" id="myClip" data-placement="bottom" title="Click to Copy">Copy To Clipboard</div>
    <div class="clip_button" id="myClip" data-placement="bottom" title="Click to Copy">Copy This Too!</div>
</div>

CSS

.clip_button {
          text-align: center;
          border: 1px solid black;
          background-color: #ccc;
          margin: 10px;
          padding: 10px;
      }
      .clip_button.zeroclipboard-is-hover {
          background-color: #eee;
      }
      .clip_button.zeroclipboard-is-active {
          background-color: #aaa;
      }
      .page {
          width: 75%;
          text-align: center;
          margin: 0 auto;
      }

JavaScript

//
// 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();
}


//Initiates ZeroClipboard
$(function () {

    var $clipButtons = $('.clip_button');
    $clipButtons.on('mouseover', function(e) { $(e.target).tooltip(); });
    
    var client = new ZeroClipboard($clipButtons);

    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) {
            $('.tooltip .tooltip-inner').text('Copied!');
        });

    });

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

})