timesheets.js

One of the most powerful SMIL Timing features is the ability to describe user interactions in a declarative way -- see the event-values section below.

Reciprocally, SMIL Timing triggers begin/end events that can be used to hook your own JS scripts -- see the Event Listeners section.

Event Values in begin/end Attributes

Example #1: Collapsable Blocks

click me

The quick brown fox jumps over the lazy dog.

click me

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<dl smil:timeContainer="par" smil:timeAction="display">
  <dt id="fold1"> click me </dt>
  <dd smil:begin="fold1.click" smil:end="fold1.click">
    The quick brown fox jumps over the lazy dog.
  </dd>
  <dt id="fold2"> click me </dt>
  <dd smil:begin="fold2.click" smil:end="fold2.click">
    Lorem ipsum dolor sit amet […]
  </dd>
</dl>

Example #2: Accordion List

• first item
  1. one
  2. two
  3. three
  4. four
• second item
  1. un
  2. deux
  3. trois
  4. quatre
• last item
  1. uno
  2. dos
  3. tres
  4. cuatro

<ul smil:timeContainer="excl" smil:timeAction="class:active">
  <li smil:begin="click" smil:end="click"> first item
    <ol>
      <li> one   </li>
      <li> two   </li>
      <li> three </li>
      <li> four  </li>
    </ol>
  </li>
  <li smil:begin="click" smil:end="click"> second item
    <ol>
      <li> un     </li>
      <li> deux   </li>
      <li> trois  </li>
      <li> quatre </li>
    </ol>
  </li>
  <li smil:begin="click" smil:end="click"> last item
    <ol>
      <li> uno    </li>
      <li> dos    </li>
      <li> tres   </li>
      <li> cuatro </li>
    </ol>
  </li>
</ul>
    

begin/end Event Listeners

Each time an DOM element is activated or desactivated by our timesheet scheduler, a 'begin' or 'end' event is sent.

1. first item
2. second item
3. third item
4. fourth item
5. last item

<ol smil:timeContainer="seq" smil:timeAction="visibility" smil:repeatCount="indefinite">
    <li smil:dur="1s" smil:begin="0:01">                              first item </li>
    <li smil:dur="1s" smil:onbegin="color(this.parentNode, '#dff')"> second item </li>
    <li smil:dur="1s" smil:onend  ="color(this.parentNode, '')">      third item </li>
    <li smil:dur="1s">                                               fourth item </li>
    <li smil:dur="1s" id="lastItem">                                   last item </li>
</ol>

onbegin / onend Attributes

When the second list item is activated, the background-color of its container node is changed -- see the color() function below. The container's background color is reset to normal when the third list item is deactivated.

function color(elt, bgcolor) {
  elt.style.backgroundColor = bgcolor;
}

Our timesheet scheduler evaluates the contents of the onbegin/onend attributes when it activates / deactivates a target element. As with any other on[event] attribute, the this statement refers to the element node.

addEventListener()

You can also set begin/end event listeners dynamically with the standard addEventListener() method:

window.addEventListener("DOMContentLoaded", function() {
  var targetNode = document.getElementById("lastItem");
  targetNode.addEventListener("begin", function() {
    color(this.parentNode, "#fdd");
  }, true);
  targetNode.addEventListener("end", function() {
    color(this.parentNode, "");
  }, true);
}, true);

In this case, the last list item changes its container background color when it's activated, and resets the background color to normal when it's deactivated.

EVENTS.bind()

Neither addEventListener() nor custom events like begin/end are supported by IE<9. If you want your HTML Timing document to work on old IE versions, you'll have to use our window.EVENTS object as an event management abstraction layer:

EVENTS.onDOMReady(function() {
  var targetNode = document.getElementById("lastItem");
  EVENTS.bind(targetNode, "begin", function() {
    color(this.parentNode, "#fdd");
  });
  EVENTS.bind(targetNode, "end", function() {
    color(this.parentNode, "");
  });
});

This jQuery-like syntax should be equivalent to addEventListener(): same thing, but working on IE<9 too.