timesheets.js

The timeAction attribute is used to specify how elements should be shown or hidden. Let’s use this simple example to see how this attribute works:

<ol smil:timeContainer="seq" smil:repeatCount="indefinite" smil:timeAction="[…]">
    <li smil:dur="2s" style="color: #f00;">  first item </li>
    <li smil:dur="2s" style="color: #080;"> second item </li>
    <li smil:dur="2s" style="color: #11f;">   last item </li>
</ol>

Note that this timeAction attribute is mostly used with time containers, but it can also be applied to child elements.

Specific timeAction Values

timeAction="none"

The target element is always visible. Useless for time containers, but meaningful to "remove" a child element from a time container.

1. first item
2. second item
3. last item

timeAction="display"

The timesheet scheduler sets the display CSS property to block when the target element is active, none otherwise:

1. first item
2. second item
3. last item

timeAction="visibility"

The timesheet scheduler sets the visibility CSS property to visible when the target element is active, hidden otherwise:

1. first item
2. second item
3. last item

timeAction="style"

The timesheet scheduler applies the style attribute when the target element is active, and removes it otherwise:

1. first item
2. second item
3. last item

timeAction="class: className"

The timesheet scheduler adds className to the class list of the target element when it becomes active:

1. first item
2. second item
3. last item

In this case, we’re using timeAction="class: active" and the active class is defined as follow:

li.active { font-weight: bold; text-decoration: underline; }

Default timeAction Value

timeAction="intrinsic"

When the timeAction attribute is not set, the default intrinsic value is assumed, which lets the timesheet scheduler apply a smil attribute according to the target element’s state:

smil="idle"

the element hasn’t run yet

smil="active"

the element is running

smil="done"

the element is finished running

Warning: with the intrinsic behavior, the timesheet scheduler action won’t be visible unless you specify CSS rules that rely on this "smil" attribute value. Same thing with the "class" timeAction type.

In a perfect world, we’d use pseudo-classes instead of this "smil" attribute.

Asymetric CSS Transitions

An "active" property alone (or the class:[className] timeAction value) wouldn’t be enough to trigger CSS transitions, hence the "idle" and "done" states. With these two values, you can define a specific transition to display the target element, and another transition to hide it. Here, we’re using a translate rule to show the element and an opacity to hide it:

1. first item
2. second item
3. last item

We’re using a slightly different markup here to get a slower execution:

<ol smil:timeContainer="seq" smil:repeatCount="indefinite" smil:dur="8s">
    <li smil:dur="2s" style="color: #f00;"smil:begin="1s">first item</li>
    <li smil:dur="2s" style="color: #080;">              second item</li>
    <li smil:dur="2s" style="color: #11f;">                last item</li>
</ol>

And here’s the CSS markup:

#intrinsic li {
  opacity: 0;
  /* define a 1s transition on all CSS properties */
  transition         : all 0.6s;
  -o-transition      : all 0.6s;
  -moz-transition    : all 0.6s;
  -webkit-transition : all 0.6s;
  /* position and shape before the transition */
  transform         : translate(+200px);
  -o-transform      : translate(+200px);
  -moz-transform    : translate(+200px);
  -webkit-transform : translate(+200px);
}
#intrinsic li[smil=done] {
  /* position and shape after the transition */
  opacity: 0;
  transform         : none;
  -o-transform      : none;
  -moz-transform    : none;
  -webkit-transform : none;
}
#intrinsic li[smil=active] {
  /* position and shape when active */
  opacity: 1;
  transform         : none;
  -o-transform      : none;
  -moz-transform    : none;
  -webkit-transform : none;
}

Timing CSS Transitions

When using CSS transitions along with SMIL Timing, keep in mind that the transition duration will delay the action on the target node: e.g. with a 2s transition duration, the target item will be completely shown/hidden two seconds later than planned.