Hi guys!
Soo I'm really desperate and some hints or solution would be really appreciated!
I'm building custom framework for more than a year now that have some classes handling UI elements, since I want to draw elements exactly as I want. I've managed to make some goodies as drawing dashed lines, stack multiple images to build a skin with single element, but I have problems with the event handling.
I came to conclusion that you can override Group element behavior and design it quite nice, but at the moment you add custom .onDraw function, the group stops to receive MouseEvent-s, except in the Bubbling phase from a child element.
Best scenario:
Group 2 has images, borders and so on (custom onDraw) + receives mouse events (mouseover, mouseout, click) - simulates button element, but can have child elements. In this case Group 3 and 4 are children of Group 2 and Group 2 is child of Group 1:
Closest so far:
Group 3 and Group 4 are children of Group 2. Group 2 and Button 1 are children of Group 1.
The problem:
Button 1 does not receive "mouseover" when the mouse is over the Group 2 area. And because Group 2 is not child of Button 1, Button 1 can't have .addEventListener( 'mouseover', handlerFunction, false ) for the bubbling phase.
My workaround and the new problem:
I've decided to simulate "mouseover" event and update the onDraw method of Button 1 using the notify method of the element, but the onDraw method's DrawState always has mouseOver = false no matter what!
Simple code:
buttonOne.onDraw = function( /*DrawState*/ $drawState ){
$.writeln( $drawState.mouseOver ) // always false except if the mouse is really over the button
}
function buttonOneMouseover( /*MouseEvent*/ $e ){
$e.target.notify( 'onDraw' );
}
function simulateButtonOver( /*MouseEvent*/ $e ){
var fakeMouseEvent = ScriptUI.events.createEvent('MouseEvent');
fakeMouseEvent.initMouseEvent( "mouseover", true, true, $e.target.parent.buttonOne, 1, $e.target.window.location[0]+5, $e.target.window.location[1]+5, 1, 1, undefined, undefined, undefined, -1 );
$e.target.parent.buttonOne.dispatchEvent( fakeMouseEvent );
}
groupTwo.addEventListener( 'mouseover', simulateButtonOver, false );
buttonOne.addEventListener( 'mouseover', buttonOneMouseover, false );
Any help is REALLY appreciated!
Cheers,
Tony