Timeline

Last modified by Vincent Massol on 2021/03/18 11:29

clockDisplays a timeline of recent changes made on your wiki
TypeSnippet
Category
Developed by

Jean-Vincent Drean

Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

Description

This snippets is using Simile Timeline.

{{velocity}}
#set($changesNb="200")
#if("$!request.changesNb" != "")
  #set($changesNb=$request.changesNb)
#end
#if("$!request.action" == "xml")
$response.setContentType('text/xml')
<?xml version="1.0" encoding="$xwiki.encoding"?>
<data>
  #set($hqlQuery = ", XWikiRCSNodeInfo as ni where doc.id=ni.id.docId and ni.author <> 'XWiki.Admin' and ni.author <> 'superadmin' group by doc.space, doc.name order by max(ni.date) desc")
  #set($recentlyChangedDocuments = $xwiki.searchDocuments($hqlQuery, $util.parseInt($request.changesNb), 0))
  #set($openLi = $escapetool.xml("<li>"))
  #set($closeLi = $escapetool.xml("</li>"))
  #foreach($rcName in $recentlyChangedDocuments)
    #set($rcDoc = $xwiki.getDocument($rcName))
    #if("$!rcDoc" != "")
    #set($rcUrl = $rcDoc.getURL('view'))
    #set($date = $datetool.format('d MMM yyyy hh:mm:ss z', $rcDoc.date))
    <event start="$date" end="$date" isDuration="false" title="$escapetool.xml($rcDoc.getDisplayTitle())">
      $escapetool.xml("<ul>")
      ${openLi}Last modification: $xwiki.formatDate($rcDoc.date, "MMMM dd, hh:mm")${closeLi}
      ${openLi}Author: $xwiki.getLocalUserName($rcDoc.author, false)${closeLi}
      ${openLi}Goto $escapetool.xml("<a href='$rcUrl'>$rcDoc.getDisplayTitle()</a>")${closeLi}
      $escapetool.xml("</ul>")
    </event>
    #end
  #end
</data>
#else
{{html}}
<div id="wiki-timeline" style="height: 500px; border: 1px solid #aaa"></div>
<script type="text/javascript">
var tl;
function onLoad() {
var today = new Date();
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
    Timeline.createBandInfo({
      eventSource:    eventSource,
      date:           today.toUTCString(),
      width:          "75%",
      intervalUnit:   Timeline.DateTime.DAY,
      intervalPixels: 100
    }),
    Timeline.createBandInfo({
      eventSource:    eventSource,
      showEventText:  false,
      trackHeight:    0.5,
      trackGap:       0.2,
      date:           today.toUTCString(),
      width:          "25%",
      intervalUnit:   Timeline.DateTime.MONTH,
      intervalPixels: 200
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());

  tl = Timeline.create(document.getElementById("wiki-timeline"), bandInfos);
  Timeline.loadXML("$doc.getURL("view", "action=xml&xpage=plain&outputSyntax=plain&changesNb=${changesNb}")", function(xml, url) { eventSource.loadXML(xml, url); });
}

var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
    resizeTimerID = window.setTimeout(function() {
      resizeTimerID = null;
      tl.layout();
    }, 500);
  }
}
Event.observe(window, "load", onLoad);
Event.observe($('wiki-timeline'), "resize", onResize);
</script>
{{/html}}
#end
{{/velocity}}

Prerequisites & Installation Instructions

You should create a JavaScript extension object in your page, with the following code:

Event.observe(document, 'xwiki:dom:loaded', function() {
 var heads = document.getElementsByTagName('head');
 if (heads.length > 0) {
    heads[0].appendChild(new Element('script', {src: 'http://simile.mit.edu/timeline/api/timeline-api.js', type: 'text/javascript'}));
  }
});

Also to improve the appearance (with smaller fonts), you should create a stylesheet extension object in your page, with the following code:

.timeline-event-bubble-title {
 font-size: 100%;
}

.timeline-event-bubble-body {
 font-size: 90%;
}

.timeline-event-bubble-time {
 display: none; /* we write the time in the bubble ourselves, so hide the automatic dates shown */
}

.timeline-container {
 font-size: 65%;
}

Note: To create objects, click the Edit button and choose 'Objects'.  You may not be able to see the little button if your user doesn't have enough permissions.

Alternatively (for older XWiki Enterprise versions that don't support Skin Extensions), you can add the following line at the bottom of the "HTTP Meta Information" field in Administration > Presentation:

<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
     

Get Connected