Clemens,
#1 Usually, you don't need to set this on the decorator, but it was handy for
my needs so I added it to the constructor for SpanHighlightDecorator. To get
this attribute onto the decorator, you'll need to change the Javascript. Add:
this._id = ("id" in params) ? params.id : 0;
to the constructor for the decorator and it will be a member of your decorator
object.
#2 You're right. I forgot I had written the remove fn for the decorator:
Timeline.SpanHighlightDecorator.prototype.remove = function() {
if (this._layerDiv != null) {
this._band.removeLayerDiv(this._layerDiv);
}
};
#3 Getting the label in the center of the decorator will take some javascript
coding to override the .paint() method of the SpanHighlightDecorator class.
Unfortunately, you'll have to think about how you want to handle this. What do
you wish to happen if the text of the label is wider than the width of the
highlight? Do you want it to spill out over the left and right sides? Do you
want the label aligned to the left or the right of the highlight?
Each of these requires a slightly different approach to how the elements
containing the label text are added to the timeline. And it's made trickier by
the fact that the width of the highlight gets specified in pixels, while the
width of the table element containing the label is specified in em's.
You also need to decide if you want to add support for a single centered label,
replacing the current support for startLabel and endLabel, or if you want to
extend the decorator class to support any combination of start, middle, end
labels.
--Mike
On Nov 9, 2010, at 2:03 PM, Clemens Hahn wrote:
> Thanks a lot Mike, adding a decorator works now great!
> I have some problem removing the decorator and a few new questions in this
> context:
>
> 1. You set an ID attribute while initializing the SpanHighlightDecorator.
> This is a good idea (I need this id for removing exactly this decorator). I
> have looked into the source-code (decorators.js) and there isn't an
> id-attribute defined. Can i modify (adding) this id-param from extern without
> changing the source-code of the timeline? (Sorry, I'm a Javascript newbie..)
>
> 2. In your proposed removing function the this._decorators[index].remove();
> doesn't work for me, the _decorator object has no method remove(). The splice
> works, but the decorator doesn't disappear in the timeline.
>
> 3. How difficult is it to set an label to the center of a decorator? I don't
> need a start and end label, but an "description" for the highlighted area.
>
> Clemens
>
> Am 09.11.2010 um 17:55 schrieb Michael Nosal:
>
>> Clemens,
>> Yes, it is possible (and easy) to add/remove decorators dynamically. I
>> needed to do exactly this.
>>
>> The decorators for a band are stored in an array in the band. We just need a
>> function to add them:
>>
>> Timeline._Band.prototype.addDecorator = function(decorator) {
>> this._decorators.push(decorator);
>> decorator.initialize(this,this._timeline);
>> decorator.paint();
>> }
>>
>> Create a new decorator and add to the desired band:
>>
>> var band = tl.getBand(1);
>> var theme = Timeline.ClassicTheme.create();
>> band.addDecorator(new Timeline.SpanHighlightDecorator({
>> id:"my_decorator_id",
>> startDate: decorator_start_date,
>> endDate: decorator_end_date,
>> startLabel:"Start",
>> endLabel:"End",
>> theme:theme
>> }));
>>
>> Then your decorator should show up on your timeline.
>>
>> Removing is easy too:
>>
>> Timeline._Band.prototype.removeDecorator = function(index) {
>> this._decorators[index].remove();
>> this._decorators.splice(index,1);
>> }
>>
>>
>> --Mike
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
