Timeline CustomEventClickHandler

From SIMILE Widgets
Jump to: navigation, search

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

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

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox