Ticket #11: Context tescase.htm

File Context tescase.htm, 4.8 KB (added by Alfonso Martínez de Lizarrondo, 12 years ago)

testcase for our own contextmenu event

Line 
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
102var menuobj=document.getElementById("ourmenu")
103
104function 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
134function hidemenu(e){
135        menuobj.style.visibility="hidden" ;
136}
137
138//document.oncontextmenu = showmenu ;
139document.addEventListener('contextmenu', showmenu, false);
140document.onclick = hidemenu ;
141</script>
142
143</body>
144</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy