Timeline_CustomEventClickHandler - simile-widgets - create a custom handler for event click

Updated Mar 29, 2009 by larrykluger

Timeline_CustomEventClickHandler

create a custom handler for event click

If you want to use your own handler instead of showing the bubble when clicking on an event, use the following Javascript code after loading the .js files:

  Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
   alert (evt.getDescription ());
   }

In this example just an alert is generated when you click on an event, instead of the usual bubble being shown.

If you would like to have a page load when the user clicks on an event, instead of a bubble, use the following code after loading your timeline:

  Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
   document.location.href=evt.getLink();
  }

Beware that both of these calls can limit functionality. When a user clicks inside of the containing div (which is displaying as a block, so it may extend outside of the title), the action will execute. Since the same area can be used for navigating through the Timeline, there may be a inadvertent calls to the showBubble function.

Comment by litobyte...@gmail.com, Jul 11, 2009

This works only with the Original Event Painter, I tried. But when I tried the same with the Compact Event Painter an error was rised by firebug and the instruction was not executed.

The code follows:

Timeline.CompactEventPainter.prototype._showBubble = function(x, y, evt) {

    document.location.href=evt.getLink(); 

    }

error: evt.getLink is not a function

Comment by litobyte...@gmail.com, Jul 11, 2009

Here is my patch for timeline-bundle.js from line 785 to line 806:

basically you replace the four methods

onClickInstantEvent, onClickMultiplePreciseInstantEvent onClickDurationEvent showBubble

In the CompactEventPainter ??.prototype

Timeline.CompactEventPainter.prototype._onClickMultiplePreciseInstantEvent=function(E,A,B){var F=SimileAjax.DOM.getPageCoordinates(E);
this._showBubble(F.left+Math.ceil(E.offsetWidth/2),F.top+Math.ceil(E.offsetHeight/2),B);
var D=[];
for(var C=0;
C<B.length;
C++){D.push(B[C].getID());
}this._fireOnSelect(D);
A.cancelBubble=true;
SimileAjax.DOM.cancelEvent(A);
return false;
};
Timeline.CompactEventPainter.prototype._onClickInstantEvent=function(C,A,B){var D=SimileAjax.DOM.getPageCoordinates(C);
this._showBubble(D.left+Math.ceil(C.offsetWidth/2),D.top+Math.ceil(C.offsetHeight/2),B);
this._fireOnSelect(B.getID());
A.cancelBubble=true;
SimileAjax.DOM.cancelEvent(A);
return false;
};
Timeline.CompactEventPainter.prototype._onClickDurationEvent=function(F,B,C){if("pageX" in B){var A=B.pageX;
var E=B.pageY;
}else{var D=SimileAjax.DOM.getPageCoordinates(F);
var A=B.offsetX+D.left;
var E=B.offsetY+D.top;
}this._showBubble(A,E,C);
this._fireOnSelect(C.getID());
B.cancelBubble=true;
SimileAjax.DOM.cancelEvent(B);
return false;
};
Timeline.CompactEventPainter.prototype.showBubble=function(A){var B=this._eventIdToElmt[A.getID()];
if(B){var C=SimileAjax.DOM.getPageCoordinates(B);
this._showBubble(C.left+B.offsetWidth/2,C.top+B.offsetHeight/2,A);
}};

It doesn't break the defeault Bubble behaviour, but it allows finally to extend the method showBubble for CompactEventPainter??.

The difference was just the square brackets around the B and A where this letters are the events passed. I removed them and written as they were in other Painters.

That's it. Bug gone.

Can somebody take this on ? I'm too lazy to checkout the file :-P