IFRAME COMMUNNICATIONS AND EMBEDDED CAPPUCCINO

After deciding to embed cappuccino in an iframe, we noticed that mouse events won’t propagate from the parent frame into child iframes, so if you register for mouse events in cappuccino inside an iframe, certain events won’t continue when the mouse moves outside the iframe. (Especially things like mouseDrag).

After reading through cappuccino’s code and API and asking on IRC, one solution that came up was building custom mouse events through the event system using the mouseEventWithType. While doable, it seemed like a hassle, so I went code browsing.

Looking for example usage of mouseEventWithType, I ran into some code that uses it and noticed that I could pass the raw mouse event to our CPPlatformWindow and have that correctly marshal the mouse data.

In Cappuccino’s applicationDidFinishLaunching, we have something like:

- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
// If we are in an iframe, tell the parent to notify us on mouse events.
var marshalMouseEvent = function(anEvent) {
[[CPPlatformWindow primaryPlatformWindow] mouseEvent:anEvent]
}
if (parent && parent.registerMouseHandler) {
CPLog("Registering for mouse events from parent");
parent.registerMouseHandler(marshalMouseEvent);
}
...
}


Making use of jquery and their excellent position helpers, we have the following javascript in the outer frame:


registerMouseHandler = function(mouseHandler) {
var iframe_position = $("iframe").offset(),
mouseMarshaller = function(data) {
data.pageX -= iframe_position.left;
data.pageY -= iframe_position.top;
data.clientX = data.pageX;
data.clientY = data.pageY;
mouseHandler(data);
};


$(document).mousedown(mouseMarshaller);
$(document).mouseup(mouseMarshaller);
$(document).mousemove(mouseMarshaller);


Now, our mouse events propagate correctly and we have some simple iframe communication channel setup.