[patch] ContextMenu: do not overflow window boundaries

[tloo@…]

This patch (against rev. 477) fixes two issues I am having with the contextmenu in Mozilla-based browsers. Patch attached inline aswell as attached.

A) [object DOMDocument].createElement() will by default create a visible element. Hide it initially as we don't want the menu visible until it is positioned according to the mouseposition. The current rev. (477) shows the menu initially at pos 0:0, before it replaced beside the mousepointer. Fix that as it looks nicer.

B) Keep contextmenu from overflowing the window boundaries. When positioning a menu, take into account its width/height relative to the current windows inner height/width and adjust positions if neccessary.

--- context-menu.js.orig	2005-10-31 06:33:41.000000000 +0100
+++ context-menu.js	2006-03-23 14:58:39.000000000 +0100
@@ -319,8 +319,10 @@
 		div.unselectable = "on";
 	div.oncontextmenu = function() { return false; };
 	div.className = "htmlarea-context-menu";
-	if (!HTMLArea.is_ie)
-		div.style.left = div.style.top = "0px";
+	if (!HTMLArea.is_ie) {
+	    div.style.visibility = "hidden";
+	    div.style.left = div.style.top = "-200px";
+	}
 	doc.body.appendChild(div);
 
 	var table = doc.createElement("table");
@@ -416,15 +418,23 @@
 	}
 
 	if (!HTMLArea.is_ie) {
-    /* FIXME: I think this is to stop the popup from running off the bottom of the screen?
-		var dx = x + div.offsetWidth - window.innerWidth + 4;
-		var dy = y + div.offsetHeight - window.innerHeight + 4;
-    // alert('dy= (' + y + '+' + div.offsetHeight + '-' + window.innerHeight + ' + 4 ) = ' + dy);
-		if (dx > 0) x -= dx;
-		if (dy > 0) y -= dy;
-    */
-		div.style.left = x + "px";
-		div.style.top = y + "px";
+	    /* keep then menu from overflowing the client window boundaries */ 
+	
+	    /*	provide a virtual margin to leave a swoosh of air between the
+		meny and the window edge. This should probably go into the menu
+		container css as margin 10px instead...
+	     */
+	    var margin = 10;
+	    
+	    if (y + div.offsetHeight + margin > window.innerHeight)
+		y = window.innerHeight - div.offsetHeight - margin;
+	    if (x + div.offsetWidth + margin > window.innerWidth)
+		x = window.innerWidth - div.offsetWidth - margin;
+	    
+	    div.style.left = x + "px";
+	    div.style.top = y + "px";
+	    div.style.visibility = "visible";
+
 	} else {
     // To get the size we need to display the popup with some width/height
     // then we can get the actual size of the div and redisplay the popup at the

[ray]

rev [1038]: finally applied and seems to work :)