Ticket #11: Context tescase.2.htm

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

Updated testcase. The comments about Mac were due to a user js

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        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
97var menuobj=document.getElementById("ourmenu")
98
99function 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
126function hidemenu(e){
127        menuobj.style.visibility="hidden" ;
128}
129
130//document.oncontextmenu = showmenu ;
131document.addEventListener('contextmenu', showmenu, false);
132document.onclick = hidemenu ;
133</script>
134
135</body>
136</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy