| 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 | if ( 'oncontextmenu' in document.createElement('foo') ) |
|---|
| 24 | //contextmenu supported - nothing to do |
|---|
| 25 | return; |
|---|
| 26 | |
|---|
| 27 | function dispatchCtxMenuEvent(e,evType){ |
|---|
| 28 | var doc = e.target.ownerDocument||(e.view?e.view.document:null)||e.target; |
|---|
| 29 | var newEv = doc.createEvent('MouseEvent'); |
|---|
| 30 | newEv.initMouseEvent(evType||'contextmenu', true, true, doc.defaultView, e.detail, |
|---|
| 31 | e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, |
|---|
| 32 | e.shiftKey, e.metaKey, e.button, e.relatedTarget); |
|---|
| 33 | newEv.synthetic = true; |
|---|
| 34 | e.target.dispatchEvent(newEv); |
|---|
| 35 | }; |
|---|
| 36 | |
|---|
| 37 | |
|---|
| 38 | //contextmenu must be fired on mousedown if we want to cancel the menu |
|---|
| 39 | addEventListener('mousedown',function(e){ |
|---|
| 40 | //right-click doesn't fire click event. Only mouseup |
|---|
| 41 | if( e && e.button == 2 ){ |
|---|
| 42 | cancelMenu(e); |
|---|
| 43 | return false; |
|---|
| 44 | } |
|---|
| 45 | },true); |
|---|
| 46 | |
|---|
| 47 | var overrideButton; |
|---|
| 48 | function cancelMenu(e){ |
|---|
| 49 | if(!overrideButton){ |
|---|
| 50 | var doc = e.target.ownerDocument; |
|---|
| 51 | overrideButton = doc.createElement('input'); |
|---|
| 52 | overrideButton.type='button'; |
|---|
| 53 | (doc.body||doc.documentElement).appendChild(overrideButton); |
|---|
| 54 | } |
|---|
| 55 | overrideButton.style='position:absolute;top:'+(e.clientY-2)+'px;left:'+(e.clientX-2)+'px;width:5px;height:5px;opacity:0.01'; |
|---|
| 56 | } |
|---|
| 57 | |
|---|
| 58 | addEventListener('mouseup',function(e){ |
|---|
| 59 | if(overrideButton){ |
|---|
| 60 | overrideButton.parentNode.removeChild(overrideButton); |
|---|
| 61 | overrideButton = undefined; |
|---|
| 62 | } |
|---|
| 63 | if( e && e.button == 2 ){ |
|---|
| 64 | dispatchCtxMenuEvent(e, 'contextmenu'); |
|---|
| 65 | return false; |
|---|
| 66 | } |
|---|
| 67 | },true); |
|---|
| 68 | |
|---|
| 69 | })( true, 1000 ); |
|---|
| 70 | |
|---|
| 71 | </script> |
|---|
| 72 | </head> |
|---|
| 73 | <body> |
|---|
| 74 | <h1>Using our context menu in Opera</h1> |
|---|
| 75 | <hr /> |
|---|
| 76 | <p>Test page.<br> |
|---|
| 77 | In this page Opera shouldn't show its normal context menu, and instead use only our own code</p> |
|---|
| 78 | <p>In order to debug something in Opera, remember to use Opera.postError()<br> |
|---|
| 79 | I've only bothered to make it work in Opera, as we know that the rest of the browsers handle the |
|---|
| 80 | oncontextmenu event and it can be cancelled properly</p> |
|---|
| 81 | <h1>Important</h1> |
|---|
| 82 | <p>To be able to test the page you must have javascript enabled and in the preferences, advanced, |
|---|
| 83 | content, javascript options, "Allow script to receive right clicks" must be checked (it's off by |
|---|
| 84 | default) |
|---|
| 85 | </p> |
|---|
| 86 | <p>This script only takes care of the context menu generated by the mouse. The keyboard won't be affected.</p> |
|---|
| 87 | <p>We listen to the event with " addEventListener('contextmenu', showmenu, false);". It's possible to make it work |
|---|
| 88 | also with "oncontextmenu = showmenu ;", but I don't think that we need to care about that.</p> |
|---|
| 89 | |
|---|
| 90 | <div id="ourmenu"> |
|---|
| 91 | This is the content of the context menu<br> |
|---|
| 92 | <br><br><br><br><br> |
|---|
| 93 | </div> |
|---|
| 94 | |
|---|
| 95 | <script type="text/javascript"> |
|---|
| 96 | |
|---|
| 97 | var menuobj=document.getElementById("ourmenu") |
|---|
| 98 | |
|---|
| 99 | function showmenu(e){ |
|---|
| 100 | |
|---|
| 101 | // boring stuff to show the div... |
|---|
| 102 | //Find out how close the mouse is to the corner of the window |
|---|
| 103 | var rightedge=window.innerWidth-e.clientX |
|---|
| 104 | var bottomedge=window.innerHeight-e.clientY |
|---|
| 105 | |
|---|
| 106 | //if the horizontal distance isn't enough to accomodate the width of the context menu |
|---|
| 107 | if (rightedge<menuobj.offsetWidth) |
|---|
| 108 | //move the horizontal position of the menu to the left by it's width |
|---|
| 109 | menuobj.style.left= window.pageXOffset+e.clientX-menuobj.offsetWidth |
|---|
| 110 | else |
|---|
| 111 | //position the horizontal position of the menu where the mouse was clicked |
|---|
| 112 | menuobj.style.left=window.pageXOffset+e.clientX |
|---|
| 113 | |
|---|
| 114 | //same concept with the vertical position |
|---|
| 115 | if (bottomedge<menuobj.offsetHeight) |
|---|
| 116 | menuobj.style.top=window.pageYOffset+e.clientY-menuobj.offsetHeight |
|---|
| 117 | else |
|---|
| 118 | menuobj.style.top=window.pageYOffset+e.clientY |
|---|
| 119 | |
|---|
| 120 | menuobj.style.visibility="visible" |
|---|
| 121 | // end of boring stuff |
|---|
| 122 | |
|---|
| 123 | return false ; |
|---|
| 124 | } |
|---|
| 125 | |
|---|
| 126 | function hidemenu(e){ |
|---|
| 127 | menuobj.style.visibility="hidden" ; |
|---|
| 128 | } |
|---|
| 129 | |
|---|
| 130 | //document.oncontextmenu = showmenu ; |
|---|
| 131 | document.addEventListener('contextmenu', showmenu, false); |
|---|
| 132 | document.onclick = hidemenu ; |
|---|
| 133 | </script> |
|---|
| 134 | |
|---|
| 135 | </body> |
|---|
| 136 | </html> |
|---|
