| 1 | |
|---|
| 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|---|
| 3 | <html xmlns="http://www.w3.org/1999/xhtml"> |
|---|
| 4 | <head> |
|---|
| 5 | <title>Testcase</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | #ourmenu { |
|---|
| 8 | position:absolute; |
|---|
| 9 | width:165px; |
|---|
| 10 | border:2px solid black; |
|---|
| 11 | background-color:menu; |
|---|
| 12 | z-index:100; |
|---|
| 13 | visibility:hidden; |
|---|
| 14 | } |
|---|
| 15 | |
|---|
| 16 | </style> |
|---|
| 17 | <script type="text/javascript"> |
|---|
| 18 | |
|---|
| 19 | // Script initialization, this is the special part for Opera, taking care to raise our custom |
|---|
| 20 | // oncontextmenu event. |
|---|
| 21 | (function(){ |
|---|
| 22 | |
|---|
| 23 | // This test doesn't work in Mac, but Opera raises the event. |
|---|
| 24 | if ( 'oncontextmenu' in document.createElement('foo') ) |
|---|
| 25 | //contextmenu supported - nothing to do |
|---|
| 26 | return; |
|---|
| 27 | |
|---|
| 28 | function dispatchCtxMenuEvent(e,evType){ |
|---|
| 29 | var doc = e.target.ownerDocument||(e.view?e.view.document:null)||e.target; |
|---|
| 30 | var newEv = doc.createEvent('MouseEvent'); |
|---|
| 31 | newEv.initMouseEvent(evType||'contextmenu', true, true, doc.defaultView, e.detail, |
|---|
| 32 | e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, |
|---|
| 33 | e.shiftKey, e.metaKey, e.button, e.relatedTarget); |
|---|
| 34 | newEv.synthetic = true; |
|---|
| 35 | e.target.dispatchEvent(newEv); |
|---|
| 36 | }; |
|---|
| 37 | |
|---|
| 38 | |
|---|
| 39 | //contextmenu must be fired on mousedown if we want to cancel the menu |
|---|
| 40 | addEventListener('mousedown',function(e){ |
|---|
| 41 | //right-click doesn't fire click event. Only mouseup |
|---|
| 42 | if( e && e.button == 2 ){ |
|---|
| 43 | cancelMenu(e); |
|---|
| 44 | return false; |
|---|
| 45 | } |
|---|
| 46 | },true); |
|---|
| 47 | |
|---|
| 48 | var overrideButton; |
|---|
| 49 | function cancelMenu(e){ |
|---|
| 50 | if(!overrideButton){ |
|---|
| 51 | var doc = e.target.ownerDocument; |
|---|
| 52 | overrideButton = doc.createElement('input'); |
|---|
| 53 | overrideButton.type='button'; |
|---|
| 54 | (doc.body||doc.documentElement).appendChild(overrideButton); |
|---|
| 55 | } |
|---|
| 56 | overrideButton.style='position:absolute;top:'+(e.clientY-2)+'px;left:'+(e.clientX-2)+'px;width:5px;height:5px;opacity:0.01'; |
|---|
| 57 | } |
|---|
| 58 | |
|---|
| 59 | addEventListener('mouseup',function(e){ |
|---|
| 60 | if(overrideButton){ |
|---|
| 61 | overrideButton.parentNode.removeChild(overrideButton); |
|---|
| 62 | overrideButton = undefined; |
|---|
| 63 | } |
|---|
| 64 | if( e && e.button == 2 ){ |
|---|
| 65 | dispatchCtxMenuEvent(e, 'contextmenu'); |
|---|
| 66 | return false; |
|---|
| 67 | } |
|---|
| 68 | },true); |
|---|
| 69 | |
|---|
| 70 | })( true, 1000 ); |
|---|
| 71 | |
|---|
| 72 | </script> |
|---|
| 73 | </head> |
|---|
| 74 | <body> |
|---|
| 75 | <h1>Using our context menu in Opera</h1> |
|---|
| 76 | <hr /> |
|---|
| 77 | <p>Test page.<br> |
|---|
| 78 | In this page Opera shouldn't show its normal context menu, and instead use only our own code</p> |
|---|
| 79 | <p>In order to debug something in Opera, remember to use Opera.postError()<br> |
|---|
| 80 | I've only bothered to make it work in Opera, as we know that the rest of the browsers handle the |
|---|
| 81 | oncontextmenu event and it can be cancelled properly<br> |
|---|
| 82 | In Mac, Opera does raise an oncontextmenu event, but it can't be cancelled, so we must ignore it |
|---|
| 83 | (that's why I'm attaching the property "synthetic" to use only our custom event and don't mess |
|---|
| 84 | with the original one or the default menu will be shown) |
|---|
| 85 | </p> |
|---|
| 86 | <h1>Important</h1> |
|---|
| 87 | <p>To be able to test the page you must have javascript enabled and in the preferences, advanced, |
|---|
| 88 | content, javascript options, "Allow script to receive right clicks" must be checked (it's off by |
|---|
| 89 | default) |
|---|
| 90 | </p> |
|---|
| 91 | <p>This script only takes care of the context menu generated by the mouse. The keyboard won't be affected.</p> |
|---|
| 92 | <p>We listen to the event with " addEventListener('contextmenu', showmenu, false);". It's possible to make it work |
|---|
| 93 | also with "oncontextmenu = showmenu ;", but I don't think that we need to care about that.</p> |
|---|
| 94 | |
|---|
| 95 | <div id="ourmenu"> |
|---|
| 96 | This is the content of the context menu<br> |
|---|
| 97 | <br><br><br><br><br> |
|---|
| 98 | </div> |
|---|
| 99 | |
|---|
| 100 | <script type="text/javascript"> |
|---|
| 101 | |
|---|
| 102 | var menuobj=document.getElementById("ourmenu") |
|---|
| 103 | |
|---|
| 104 | function showmenu(e){ |
|---|
| 105 | // In Opera Mac, a real oncontextmenu is fired, but we can't use it or the default context menu will be shown! |
|---|
| 106 | if (!e.synthetic) |
|---|
| 107 | return; |
|---|
| 108 | |
|---|
| 109 | // boring stuff to show the div... |
|---|
| 110 | //Find out how close the mouse is to the corner of the window |
|---|
| 111 | var rightedge=window.innerWidth-e.clientX |
|---|
| 112 | var bottomedge=window.innerHeight-e.clientY |
|---|
| 113 | |
|---|
| 114 | //if the horizontal distance isn't enough to accomodate the width of the context menu |
|---|
| 115 | if (rightedge<menuobj.offsetWidth) |
|---|
| 116 | //move the horizontal position of the menu to the left by it's width |
|---|
| 117 | menuobj.style.left= window.pageXOffset+e.clientX-menuobj.offsetWidth |
|---|
| 118 | else |
|---|
| 119 | //position the horizontal position of the menu where the mouse was clicked |
|---|
| 120 | menuobj.style.left=window.pageXOffset+e.clientX |
|---|
| 121 | |
|---|
| 122 | //same concept with the vertical position |
|---|
| 123 | if (bottomedge<menuobj.offsetHeight) |
|---|
| 124 | menuobj.style.top=window.pageYOffset+e.clientY-menuobj.offsetHeight |
|---|
| 125 | else |
|---|
| 126 | menuobj.style.top=window.pageYOffset+e.clientY |
|---|
| 127 | |
|---|
| 128 | menuobj.style.visibility="visible" |
|---|
| 129 | // end of boring stuff |
|---|
| 130 | |
|---|
| 131 | return false ; |
|---|
| 132 | } |
|---|
| 133 | |
|---|
| 134 | function hidemenu(e){ |
|---|
| 135 | menuobj.style.visibility="hidden" ; |
|---|
| 136 | } |
|---|
| 137 | |
|---|
| 138 | //document.oncontextmenu = showmenu ; |
|---|
| 139 | document.addEventListener('contextmenu', showmenu, false); |
|---|
| 140 | document.onclick = hidemenu ; |
|---|
| 141 | </script> |
|---|
| 142 | |
|---|
| 143 | </body> |
|---|
| 144 | </html> |
|---|
