Debugging ZeroClipboard issue #511
by James Greene
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
<button type="button" id="btn" data-clipboard-text="Text to copy">Copy</button>
<div id="logging"></div>
CSS
.zeroclipboard-is-active {
background: red;
}
.zeroclipboard-is-hover {
background: blue;
}
#logging{
font-family: courier;
}
JavaScript
function _getElementIdentifier(el) {
if (el == null) {
return el;
}
var tagName = el.nodeName.toLowerCase();
var id = el.id;
var classes = el.className.replace(/^\s+|\s+$/g, "").split(/\s+/);
classes = classes.filter(function(item, i) {
return classes.indexOf(item) === i;
});
return tagName + (id ? "#" + id : "") + (classes.length > 0 ? "." + classes.join(".") : "");
}
function _cleanEvent(e) {
return $.extend(true, {}, e, {
target: _getElementIdentifier(e && e.target),
relatedTarget: _getElementIdentifier(e && e.relatedTarget),
currentTarget: _getElementIdentifier(e && e.currentTarget)
});
}
function log(msg, event) {
var eventStr = event == null ? null : JSON.stringify(event);
console.log(msg + (eventStr ? ' ' + eventStr : ''));
var $log = $('#logging');
$log.append('<p>' + msg + '</p>');
if (eventStr) {
$log.append('<pre>' + eventStr + '</pre>');
}
}
function logEvent(event) {
return log('ZeroClipboard event ("' + event.type + '"):', _cleanEvent(event));
}
var oldDomainsConfig = ZeroClipboard.config("trustedDomains");
var newDomains = oldDomainsConfig.slice().concat(["jsfiddle.net"]);
ZeroClipboard.config({ trustedDomains: newDomains });
log("Setting up handlers");
ZeroClipboard.on("error", logEvent);
ZeroClipboard.on("ready", logEvent);
ZeroClipboard.on("beforecopy", logEvent);
ZeroClipboard.on("copy", logEvent);
ZeroClipboard.on("aftercopy", logEvent);
ZeroClipboard.on("destroy", logEvent);
log("Attaching ZeroClipboard");
new ZeroClipboard(document.getElementById("btn"));
log("Done....");