Recipe 40: Timeline

Ingredients
• Timeline module: http://www.drupal.org/project/timeline
• Timeline widget:http://www.miccolis.net/random/timeline-1-2.tar.gz

The Timeline module implements a nice interactive script developed originally by the SIMILE project at MIT. The project “graduated” in 2008, to become its own stand-alone open source project, hosted at Google Code.

1. Log on to the host and enter the following commands. This is almost a garden-variety module installation, however, we also need to download all of the SIMILE timeline code and place it in an api subdirectory. The Timeline widget tarball expands to the timeline-1-2 directory, so in the last step we use the mv command to rename it to api.

   cd home/DRUPALACCOUNT/public_html/sites/all/modules
   wget http://ftp.drupal.org/files/projects/timeline-5.x-1.0.tar.gz
   tar xvf timeline-5.x-1.0.tar.gz
   cd timeline/
   wget http://www.miccolis.net/random/timeline-1-2.tar.gz 
   tar xvf timeline-1-2.tar.gz 
   mv timeline-1-2 api
   

2. Enable the Timeline module.
3. Explore the configuration settings at admin/settings/timeline. Here you may set the width, height, and initial date focus. Also note the Advanced settings for the path to the Timeline widget JavaScript. If, for some reason, you are unsuccessful making the widget available, you may temporarily try pointing to: http://simile.mit.edu/timeline/api/timeline-api.js. (This will work for as long as MIT continues to host this.)
4. Read the README.txt file, and INSTALL.txt file (this is always a good practice when installing new modules). This is a summary of the Views field requirements for setting up a timeline in Drupal.

5. Edit the timeline view created in Recipe 34.
6. In the Page fieldset, change the View Type to Timeline: Horizontal.



7. Scroll down to the Fields fieldset. Note that in our original view, the Title is the first field followed by Date as the second field. We will reverse this. Click on the up arrow in the Date row to Move this item to the top.



8. Add the Text: Description (field_workshop_description) as the third field.
9. Save the view and browse to timeline.



Move the cursor around the timeline. Click on the events to see the associated pop-up box. Click and drag to the left to go forward in time. Click and drag works in both the upper and lower timeline bands.

10. Configuration settings for individual timelines are available at admin/build/timeline (these settings will override default settings at admin/settings/timeline). A particularly interesting setting is the one to enable controls.



With controls enabled, the user will have the opportunity to filter, or highlight the timeline based on text either in the title or the description.



Regular expressions will also work when filtering or highlighting timeline items.

Cooking|Recipes	Find items that contain either Cooking or Recipes in the title or description
^L	Find titles that start with L
asagna	Find Lasagna-partial words work fine.
hea[rl]t	Find Health or Heart

The searches are case-insensitive.

Recipe notes

• For examples of basic and sophisticated SIMILE Timelines see http://simile.mit.edu/timeline/examples/.
• More information about Timeline is available at http://code.google.com/p/simile-widgets/ including a mailing list, a wiki, and an independent issue queue for various SIMILE web widgets.
• There is also an archived listerv available at http://www.nabble.com/SIMILE—General-f27660.html. The listserv remains active for other SIMILE projects but does not accept content regarding “graduated” projects such as Timeline. However, you may find older posts helpful.
• If you like Timeline, try some of the other SIMILE projects as well, at http://simile.mit.edu/. (Perhaps you can write the next module to make them available in Drupal.)
• Exposed Filters are incompatible with the Timeline module.
• Arguments will work. For instance, if you add a Taxonomy item argument the URL: http://YOURSITE.com/timeline/Cooking would show only the workshops in the Cooking category.
• To incorporate color coding by taxonomy, consider installing the patch at http://drupal.org/node/121298. There is also a nice patch to include icons by taxonomy term at http://drupal.org/node/104890.
• The Timeline module integrates with the Events module.
• If no fields are included in the timeline, the timeline displays the date the content was posted.

Recipe 41: Views Popup

Ingredients
• Completed Recipe 34, views_popup view
• Views Popup module: http://drupal.org/project/views_popup

The Views Popup module displays a list of up to three fields and then, upon mouseover, displays additional fields in a pop-up box. This is not a date-specific module, but we’ll use it to display a workshop description when you move the mouse over the date. We’ll also take a look at the views_style_plugins hook, which in this article enabled the Date Browser, Timeline, Calendar, and now List View as Popup View Types.

1. Install and enable the Views Popup module.
2. Open the views_popup view at views_popup/edit.
3. In the Page fieldset, change the View Type to List View as Popup, Show 2 Fields
4. In the Fields fieldset, change the order of the Datestamp and Title fields so that the datestamp is first.
5. Add the Text: Description (field_workshop_description) field.



The first two of these fields will display. The third will be hidden by default.

6. Save and view the views_popup view. Note than when you mouse over the date, the description appears



7. Take a look at hook_views_style_plugins in the views_popup.module file:

   function views_popup_views_style_plugins() {
    return array(
    'list_hint' => array(
    'name' => t('List View as Popup, Show 1 field'),
    'theme' => 'views_view_list_hint_popup1',
    'validate' => 'views_ui_plugin_validate_list',
    'needs_fields' => true,
    'weight' => -10,
    ),
    'list_hint2' => array(
    'name' => t('List View as Popup, Show 2 fields'),
    'theme' => 'views_view_list_hint_popup2',
    'validate' => 'views_ui_plugin_validate_list',
    'needs_fields' => true,
    'weight' => -10,
    ),
    'list_hint3' => array(
    'name' => t('List View as Popup, Show 3 fields'),
    'theme' => 'views_view_list_hint_popup3',
    'validate' => 'views_ui_plugin_validate_list',
    'needs_fields' => true,
    'weight' => -10,
    )
    );
   

   The critical elements in this array are the name and the specified theme callback function. The function appears below in the same file and does the actual work of producing the output, in this case, creating a pop-up.

Recipe notes

• Documentation on hook_views_style_plugins is available in the Drupal handbook at http://drupal.org/node/193448.
• Think of the style plugin as a way to modify the output of a whole node, while the field formatters apply to a single field.