ContextMenu - now working in browser.
I finally got all of the rendering logic finished and spent this morning working "in the client" on some positional bugs. Basically, I had the menu working fine until the user selected a menu which was at a position greater the 1 window height down the page. In other words, if the page was tall enough to require a scrollbar down the side, the positioning of the menu was screwy when you had to scroll down. I've fixed that though with a nice little hack :-) Basically, I wire-up a delegate to handle the mousedown event on the document like so:
// wire up the mousedown event to the handler window.document.onmousedown = MarkItUp_ContextMenu_HandleDocumentClick ; // the handler function MarkItUp_ContextMenu_HandleDocumentClick() { if( MarkItUp_ContextMenu_Menu ) MarkItUp_ContextMenu_Menu.Hide() ; }
...so clearly, whenever the user mouses down on the document, the menu will be hidden. Because I don't want this to happen in the instance where the user mouses down on my menu, I disable the handler when the user mouses over the menu and re-wire it when they mouse out again:
MenuItem.prototype.GetHtml = function() { var delegateFunction = ( this.LinkType == LinkType.Delegate ) ? this.InvokeCallback : "''" ; var s = "<div class=\"MarkItUp_ContextMenu_MenuItemBar MarkItUp_ContextMenu_MenuItem\" " + " onClick=\"javascript: MarkItUp_ContextMenu_HandleItemClick( this, " + delegateFunction + " ) ; " + " event.cancelBubble = true ; \"" + " onMouseOut=\"javascript: MarkItUp_ContextMenu_MenuItemOver(this, 'out') ; " + " document.onmousedown = MarkItUp_ContextMenu_HandleDocumentClick ;\" " + " onMouseOver=\"javascript: MarkItUp_ContextMenu_MenuItemOver(this, 'over') ; " + " document.onmousedown = null ;\"" + ">" + this.DisplayName + "</div>" ; return s } // GetHtml
The only task left remaining is to hook up the IPostBackEventHandler
stuff so that events can be handled on the server. That's pretty cool because you can already choose to handle the events in the client by setting the ClientNotificationFunction
property of the MenuItem
to the name of your client-side function.
Here's a picture of the menu being produced by clicking on a MenuItem
which renders itself as an Image:
I should have code and a working demo available on GotDotNet by mid-week if I can get the .chm file finished by then.