easyui menus with ZeroClipboard

EasyUI Forum

October 16, 2024, 01:33:07 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > General Discussion > easyui menus with ZeroClipboard

Pages: [1]

« previous next »

Author

Topic: easyui menus with ZeroClipboard (Read 27775 times)

jpierce

Jr. Member

Posts: 73

easyui menus with ZeroClipboard

« on: August 27, 2013, 02:25:47 PM »

I'm trying to use ZeroClipboard with EasyUI's menus. ZeroClipboard is a javascript + flash solution that allows you to copy to the clipboard. You can get the library from here:
https://github.com/zeroclipboard/ZeroClipboard/archive/v1.1.7.zip

You point it at an element and it throws a faked up flash movie element over the top of it, hijacking the click event so you satisfy the flash security restriction that setting the clipboard must come from an interactive click event.

Unfortunately, it and EasyUI appear to be incompatible. Here's my example code:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Menu with ZeroClipboard</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/demo/demo.css">
<script type="text/javascript" src="jquery-easyui-1.3.4/jquery.min.js"></script>

<script type="text/javascript" src="jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ZeroClipboard-1.1.7/ZeroClipboard.js"></script>
<script type="text/javascript">
$(document).ready(function () {
console.log('registering ZC');
//var clip = new ZeroClipboard($('#copybutton'), {
var clip = new ZeroClipboard($('#copymi'), {
moviePath:'ZeroClipboard-1.1.7/ZeroClipboard.swf'
});
clip.on( 'load', function(client) {
console.log('movie loaded');
} );
clip.on( 'complete', function(client, args) {
alert("Copied text to clipboard: " + args.text );
} );
clip.on( 'mouseover', function(client) {
console.log('mouseover');
} );
clip.on( 'mouseout', function(client) {
console.log("mouse out");
} );
clip.on( 'mousedown', function(client) {
console.log("mouse down");
} );
clip.on( 'mouseup', function(client) {
console.log("mouse up");
} );
clip.on( 'dataRequested', function (client, args) {
console.log('datarequested');
});
clip.on( 'wrongFlash', function ( client, args ) {
alert("Your flash is too old " + args.flashVersion);
} );
clip.on( 'wrongflash', function ( client, args ) {
alert("Your flash is too old " + args.flashVersion);
} );
clip.on( 'noflash', function ( client, args ) {
alert("You don't support flash");
} );

});
</script>
</head>
<body>
<button id="copybutton">copy via button</button>
<h2>Basic Menu</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Right click on page to display menu.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="mm" class="easyui-menu" style="width:120px;">
<div id="copymi">copy via menu</div>
</div>
<script>
$(function () {
$(document).bind('contextmenu', function (e) {
e.preventDefault();
$('#mm').menu('show', {
left:e.pageX,
top:e.pageY
});
});
});
</script>
</body>
</html>

Clicking on the menu item, you don't get any of the events you should, including the "complete" event when clicked on. If you switch the code to use the button instead, it works fine. I've also tried this with other versions of jQuery but the problem still happens.

Any ideas on how to get the two to be compatible? I've been looking around at other flash-clipboard libraries and this seems like the main option.

Thanks.


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: easyui menus with ZeroClipboard

« Reply #1 on: August 27, 2013, 07:47:55 PM »

The menu item has higher zIndex value(default is 110000) than ZeroClipboard(default is 9999). This is why the ZeroClipboard events do not be triggered when clicking the menu item.
To solve this issue, please try to increment the ZeroClipboard's zIndex value. When this is made ok, be sure to trigger the menu's mouseenter event to prevent from hiding when mouseover the ZeroClipboard.

Code:

clip.on( 'mouseover', function(client) {
$('#mm').trigger('mouseenter');
console.log('mouseover');
} );


	Logged

jpierce

Jr. Member

Posts: 73

Re: easyui menus with ZeroClipboard

« Reply #2 on: September 03, 2013, 02:40:11 PM »

Thanks, that worked great for Chrome and FF. But for IE10, it makes the menu immediately disappear when it is moused over. This makes it so that you can never click on the menu item.

Any suggestions?


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: easyui menus with ZeroClipboard

« Reply #3 on: September 03, 2013, 05:11:13 PM »

If you are using jquery 1.8.0, try to update to jquery 1.8.3 or jquery 2.x. When using jquery 1.8.3,ZeroClipboard and easyui menu work fine in ie10.


	Logged

jpierce

Jr. Member

Posts: 73

Re: easyui menus with ZeroClipboard

« Reply #4 on: September 04, 2013, 07:48:12 AM »

I tried it with both 1.8.3 and 2.0.3 and got the same result. Basically, anywhere but right over the text part of the menu item makes the menu disappear. And sometimes when I right-clicked, I'd get the flash context menu.

Code:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Basic Menu with ZeroClipboard</title>
   
   <script text="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

   
   <script type="text/javascript" src="ZeroClipboard-1.1.7/ZeroClipboard.js"></script>

   <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/icon.css">
   <script type="text/javascript" src="jquery-easyui-1.3.4/jquery.easyui.min.js"></script>

   <style type="text/css">
   #global-zeroclipboard-html-bridge {
   z-index: 999999 !important;
   }
   </style>

   <script type="text/javascript">
   var cm;

   function bodyLoaded() {
   createContextMenu();

   $(document).bind('contextmenu', function (e) {
   showContextMenu(e);
   });
   }

   function createContextMenu() {
   console.log('creating new menu');
   $(document.body).append('<div id="mm" class="easyui-menu" style="width:200px;"></div>');

   cm = $('#mm');

   cm.append('<div id="copymi">Copy cell text</div>');

   cm.menu({
   onClick:function () {
   console.log('onclick');
   }
   });

   var clip = new ZeroClipboard($('#copymi'), {
//moviePath:'ZeroClipboard-1.2.0-beta.2/ZeroClipboard.swf'
   moviePath:'ZeroClipboard-1.1.7/ZeroClipboard.swf'
   });
   clip.on( 'load', function(client) {
   console.log('movie loaded');
   } );
   clip.on( 'complete', function(client, args) {
   alert("Copied text to clipboard: " + args.text );
   } );
   clip.on( 'mouseover', function(client) {
   $('#mm').trigger('mouseenter');
   console.log('mouseover');
   } );
   clip.on( 'mouseout', function(client) {
   console.log("mouse out");
   } );
   clip.on( 'mousedown', function(client) {
   console.log("mouse down");
   } );
   clip.on( 'mouseup', function(client) {
   console.log("mouse up");
   } );
   clip.on( 'dataRequested', function (client, args) {
   console.log('datarequested');
   client.setText( "Copy me!" );
   });
   clip.on( 'wrongFlash', function ( client, args ) {
   alert("Your flash is too old " + args.flashVersion);
   } );
   clip.on( 'wrongflash', function ( client, args ) {
   alert("Your flash is too old " + args.flashVersion);
   } );
   clip.on( 'noflash', function ( client, args ) {
   alert("You don't support flash");
   } );
   }

   function showContextMenu(e) {
   e.preventDefault();

   cm.menu('show', {
   left:e.pageX - 10,
   top:e.pageY - 10
   });
   }
   </script>
</head>
<body onload="bodyLoaded()">
</body>
</html>

This works fine in Chrome and FF (though there is this annoying effect where the context menu item will lose it's focus style and won't get it back), but not IE10. I haven't tried it on anything but Windows 7 so far.


« Last Edit: September 04, 2013, 07:50:09 AM by jpierce »	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: easyui menus with ZeroClipboard

« Reply #5 on: September 04, 2013, 07:40:11 PM »

What version are you using ie10? We use ie10(version 10.0.9200.16660) in our testing machine and find your code works well.


	Logged

jpierce

Jr. Member

Posts: 73

Re: easyui menus with ZeroClipboard

« Reply #6 on: September 05, 2013, 07:48:24 AM »

Same version here. Are you also testing on Windows 7? 32bit - who knows if that matters.

Compatibility mode on or off? Mine is off. Yours probably is off, too, since when I had it on all kinds of things broke.

Are you testing it for more than a second or two? It may not be obvious to you unless you spend a minute right-clicking a few times to bring it up, mousing over the menu option, etc. It only disappears when you move your cursor around when you're not on the menu text. Try moving your cursor around the menu item (but still staying inside the menu) and you should see it disappear. If need by I will make a video.

FYI, I got the same problem on IE 8.0.6001.18702 on Windows XP (though I had to make sure to use jquery 1.8.3 and take out my references to "console").


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: easyui menus with ZeroClipboard

« Reply #7 on: September 09, 2013, 01:28:26 AM »

Here is another solution to solve this issue, the main action is to set 'hideOnUnhover' property to false to prevent from hiding menu when mouse exits the menu. To use the 'hideOnUnhover' property, please download the updated menu plugin from http://www.jeasyui.com/easyui/plugins/jquery.menu.js and include it in your page.

Code:

cm.menu({
hideOnUnhover:false,
onClick:function () {
console.log('onclick');
}
});


	Logged

jpierce

Jr. Member

Posts: 73

Re: easyui menus with ZeroClipboard

« Reply #8 on: September 26, 2013, 09:14:08 AM »

Unfortunately, that didn't help. (I DO like the hideOnUnhover in general, though, and will start using it in my apps!)

Here's the code I'm running just to make sure I didn't make a stupid mistake:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Menu with ZeroClipboard</title>

<script text="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<script type="text/javascript" src="ZeroClipboard-1.1.7/ZeroClipboard.js"></script>

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery.menu.js"></script>

<style type="text/css">
#global-zeroclipboard-html-bridge {
z-index: 999999 !important;
}
</style>

<script type="text/javascript">
var cm;

function bodyLoaded() {
createContextMenu();

$(document).bind('contextmenu', function (e) {
showContextMenu(e);
});
}

function createContextMenu() {
console.log('creating new menu');
$(document.body).append('<div id="mm" class="easyui-menu" style="width:200px;"></div>');

cm = $('#mm');

cm.append('<div id="copymi">Copy cell text</div>');

cm.menu({
hideOnUnhover:false,
onClick:function () {
console.log('onclick');
}
});

var clip = new ZeroClipboard($('#copymi'), {
//moviePath:'ZeroClipboard-1.2.0-beta.2/ZeroClipboard.swf'
moviePath:'ZeroClipboard-1.1.7/ZeroClipboard.swf'
});
clip.on( 'load', function(client) {
console.log('movie loaded');
} );
clip.on( 'complete', function(client, args) {
alert("Copied text to clipboard: " + args.text );
} );
clip.on( 'mouseover', function(client) {
$('#mm').trigger('mouseenter');
console.log('mouseover');
} );
clip.on( 'mouseout', function(client) {
console.log("mouse out");
} );
clip.on( 'mousedown', function(client) {
console.log("mouse down");
} );
clip.on( 'mouseup', function(client) {
console.log("mouse up");
} );
clip.on( 'dataRequested', function (client, args) {
console.log('datarequested');
client.setText( "Copy me!" );
});
clip.on( 'wrongFlash', function ( client, args ) {
alert("Your flash is too old " + args.flashVersion);
} );
clip.on( 'wrongflash', function ( client, args ) {
alert("Your flash is too old " + args.flashVersion);
} );
clip.on( 'noflash', function ( client, args ) {
alert("You don't support flash");
} );
}

function showContextMenu(e) {
e.preventDefault();

cm.menu('show', {
left:e.pageX - 10,
top:e.pageY - 10
});
}
</script>
</head>
<body onload="bodyLoaded()">
</body>
</html>


	Logged

Pages: [1]

« previous next »