---

Class ::xowiki::includelet::timeline

::xowiki::includelet::timeline create ... \
           [ -parameter_declaration (default "
          -user_id
          {-data timeline-data}
          {-interval1 DAY}
          {-interval2 MONTH}
        ") ]

Include a timeline of changes (based on yahoo timeline API)

Defined in packages/xowiki/tcl/includelet-procs.tcl

Class Relations

• class: ::xowiki::IncludeletClass
• superclass: ::xowiki::Includelet
• subclass: ::xowiki::includelet::user-timeline

::xowiki::IncludeletClass create ::xowiki::includelet::timeline \
     -superclass ::xowiki::Includelet

Methods (to be applied on instances)

• parameter_declaration (setter)

• render (scripted)

  :get_parameters
  
  ::xo::Page requireJS "/resources/ajaxhelper/yui/yahoo/yahoo.js"
  ::xo::Page requireJS "/resources/ajaxhelper/yui/event/event.js"
  ::xo::Page requireJS "/resources/xowiki/timeline/api/timeline-api.js"
  
  set stamp [clock format [clock seconds] -format "%b %d %Y %X %Z" -gmt true]
  if {[info exists user_id]} {append data "?user_id=$user_id"}
  
  set nonce [security::csp::nonce]
  
  return [subst -nocommands -nobackslashes {
    <div id="my-timeline" style="font-size:70%; height: 350px; border: 1px solid #aaa"></div>
    <script type="text/javascript" nonce='$nonce'>
    var tl;
    function onLoad() {
      var eventSource = new Timeline.DefaultEventSource();
      var bandInfos = [
                       Timeline.createBandInfo({
                         eventSource:    eventSource,
                         date:           "$stamp",
                         width:          "70%",
                         intervalUnit:   Timeline.DateTime.$interval1,
                         intervalPixels: 100
                       }),
                       Timeline.createBandInfo({
                         eventSource:    eventSource,
                         date:           "$stamp",
                         width:          "30%",
                         intervalUnit:   Timeline.DateTime.$interval2,
                         intervalPixels: 200
                       })
                      ];
      //console.info(bandInfos);
      bandInfos[1].syncWith = 0;
      bandInfos[1].highlight = true;
  
      tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
      //console.log('create done');
      Timeline.loadXML("$data", function(xml, url) {eventSource.loadXML(xml,url); });
    }
  
    var resizeTimerID = null;
    function onResize() {
      //   console.log('resize');
  
      if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
          resizeTimerID = null;
          //   console.log('call layout');
          tl.layout();
        }, 500);
      }
    }
  
    YAHOO.util.Event.addListener(window, 'load',   onLoad());
    // YAHOO.util.Event.addListener(window, 'resize', onResize());
  
    </script>
  
  }]

---