I think the main trick with adding html to a tape is knowing when to do
it...remember that the Timeline does *not* paint all of the events at once.
They're painted in batches, as the user moves the Timeline. -- And a given
event may end up being painted and re-painted many times depending on how the
user scrolls the Timeline.
So everytime an event of interest to you is painted, you need to munge it (add
additional icons to the div, etc)
The following is untested.
1) Define paintListener -- will be attached to the Timeline painting cycle. See
comments at top of original-painter.js
function paintListener(band, op, evt, els) {
/*
* eventPaintListener functions receive calls about painting.
* function(op, evt, els)
* context: 'this' will be an OriginalEventPainter object.
* It has properties and methods for obtaining
* the relevant band, timeline, etc
* op = 'paintStarting' // the painter is about to remove
* all previously painted events, if any. It will
* then start painting all of the visible events that
* pass the filter.
* evt = null, els = null
* op = 'paintEnded' // the painter has finished painting
* all of the visible events that passed the filter
* evt = null, els = null
* op = 'paintedEvent' // the painter just finished painting an event
* evt = event just painted
* els = array of painted elements' divs. Depending on the event,
* the array could be just a tape or icon (if no label).
* Or could include label, multiple tape divs (imprecise
event),
* highlight divs. The array is not ordered. The meaning of
* each el is available by decoding the el's id
* Note that there may be no paintedEvent calls if no events were
visible
* or passed the filter.
*/
if (op != "paintedEvent") {return;} // Early return
// find tape el amongst els
var tape_el;
for (var i=0; i < els.length; i++) {
var el = els[i];
if (YAHOO.util.Dom.hasClass(el, 'timeline-event-tape'){tape_el = el;} //
using YUI. Can use jquery or other lib instead
}
if (!tape_el){return;} // Early return -- no tape for this event
// assuming json events
if (evt.getProperty('telephone_icon')) { // do we want to add something to
this event? -- Checking additional attributes of the event
// Yes! Add a telephone_icon to the tape's div
var img_el = document.createElement("img");
img_el.src = "telephone.png";
image_el.className = "tape_extra_icon"; // use for css rules that will only
affect the img elements inside the tapes
tape_el.appendChild(img_el);
}
}
2) Hook into the paint cycle
See comments at top of original-painter.js
var band = tl.getBand(0),
painter = band.getEventPainter();
painter.addEventPaintListener(paintListener); // hook into paint cycle
Pay it forward: please make an example that uses the above technique. Send it
to me and I'll add it to the examples in the sources.
Regards,
Larry
________________________________
From: JadedAngel <[email protected]>
To: SIMILE Widgets <[email protected]>
Sent: Thursday, April 2, 2009 1:36:08 PM
Subject: Re: Is there a way to display icons within the tape?
> Easy....
Oh good, I like easy (especially in coding, women, and recipes).
> Depending on the number of combinations of icons you want to shown within the
> tape, there are
> other methods too. Eg you could add content to the tape divs.
I think this is what we're after....users can select several icons (up
to 6) and we'd like to display them in a line within the tape.
Multiple icons, and maybe some text. Can you give me an example of
adding content to the tape? I'm thinking this is what would work best
for what we want to do.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
