Hi,
I have a webapp that (did) allows text to be copied using zeroClipboard, using a Dijit.Menu, by right clicking. The problem is that Flash 10 needs the user to click on the actual Flash applet to allow this to happen now.
I have tried to use the ZeroClipboard.glue() method to 'glue' the swf to the menu item but am having no success. I am just wondering is anyone has had to deal with this problem.
Thanks.
I figured out a solution, not pretty as the menu title will disappear when the mouse hover above it but at least it works. I haven't tested extensively but I am hoping it does not leak flash objects.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ZeroClipboard Menu Demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="js/ZeroClipboard.js"></script>
<script type="text/javascript" src="js/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:false, preventBackButtonFix: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.Menu");
ZeroClipboard.setMoviePath('flash/ZeroClipboard.swf');
</script>
</head>
<body class="tundra">
<div id="MenuTarget">Right Click Here</div>
<script type="text/javascript">
var menu = new dijit.Menu();
var menuItem1 = new dijit.MenuItem({
id: "tester",
label: "This Does Nothing",
parentMenu: menu
});
menu.addChild(menuItem1);
menu.bindDomNode(dojo.byId("MenuTarget"));
var menuItem2 = new dijit.MenuItem({
id: "tester2",
label: "Copy Some Text",
parentMenu: menu
});
attachCopyEvent(menuItem2, "Some Text");
menu.addChild(menuItem2);
/*
attaches ZeroClipboard object to specified menu item
menuItem: diji.menuItem to attach to
copyText: text to copy to clipboard
*/
function attachCopyEvent(menuItem, copyText) {
var myId = menuItem.domNode.id;
var origText = menuItem.label; //Grab the original menu caption
var clip; //keep the clip object external/public to the connecdt functions
//Replace the text of the menuItem with the flash object when the mouse hovers over it
//We use the connect method of the menuitem so that the connects are destroyed when the object is destroyed
menuItem.connect(menuItem, "_onHover", function() {
var myLabelDiv = dojo.byId(myId + "_text"); //The label for menuItems is always the id of the menu item with '_text' appended
clip = new ZeroClipboard.Client();
//Destroy the flash object when copy is complted to save RAM
clip.addEventListener('onComplete', function() {
clip.destroy();
});
//Grab the size of the div and tell zeroclipboard to generate embed html of neccesary size
clip.setText(copyText);
myLabelDiv.innerHTML = clip.getHTML(myLabelDiv.clientWidth - 5, myLabelDiv.clientHeight - 6);
});
menuItem.connect(menuItem, "_onUnhover", function() {
var myLabelDiv = dojo.byId(myId + "_text"); //The label for menuItems is always the id of the menu item with '_text' appended
myLabelDiv.innerHTML = origText;
clip.destroy();
});
}
</script>
</body>
</html>