plugin:timeline2
This is an old revision of the document!
Table of Contents
timeline2 Plugin
Compatible with DokuWiki
No compatibility info given!
The missing download url means that this extension cannot be installed via the Extension Manager. Please see Publishing a Plugin on dokuwiki.org. Recommended are public repository hosts like GitHub, GitLab or Bitbucket.
This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.
Similar to csstimeline, timeline
Installation
Refer to Plugins on how to install plugins manually.
Create a folder in the plugin-directory named timeline2, then copy the following syntax.php an style.css into that folder.
syntax.php
<?php
/**
* Add TimeLine capability to dokuwiki
*
* <TimeLine interval=dd/mm/yyyy-dd/mm/yyyy [color=hexcolor] [[scale={w|m|y}] [legend]>
* highlite=dd/mm/yyyy-dd/mm/yyyy[:hex color][=internal wiki page link][=Name of link][=lrch]
* ...
* </TimeLine>
*
* @license GNU_GPL_v2
* @author Lasse Ristig a fork from timeline by Oleg Karachevtsev <oleg@karachevtsev.ru>
*/
if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
require_once(DOKU_PLUGIN.'syntax.php');
class syntax_plugin_timeline2 extends DokuWiki_Syntax_Plugin {
var $scale = 0;
var $bgcolor_interval = '11aa11';
var $bgcolor_highlight= 'cc5555';
function getInfo(){
return array(
'author' => 'Lasse Ristig a fork timeline by Oleg Karachevtsev',
'email' => 'ristigl@ratsgymnasium-pe.de',
'date' => '2010-01-27',
'name' => 'TimeLine2 Plugin',
'desc' => 'Add TimeLine Capability (forked from timeline by Oleg Karachevtsev)',
'url' => 'http://www.dokuwiki.org/plugin:timeline2',
);
}
function getType(){ return 'substition'; }
function getPType(){ return 'normal'; }
function getAllowedTypes() {
return array('container','substition','protected','disabled','formatting','paragraphs');
}
function getSort(){ return 195; }
function accepts($mode) {
if ($mode == substr(get_class($this), 7)) return true;
return parent::accepts($mode);
}
function connectTo($mode) {
$this->Lexer->addEntryPattern('<TimeLine.*?>(?=.*?</TimeLine>)',$mode,'plugin_timeline2');
}
function postConnect() {
$this->Lexer->addExitPattern('</TimeLine>','plugin_timeline2');
}
function reinitvars() {
$this->pdf_bar_height=0.5;
$this->scale = 0;
$this->legend = 0;
$this->bgcolor_interval = '11aa11';
$this->bgcolor_highlight= 'cc5555';
$this->lasse_labels= array();
$this->lasse_day=1;
$this->lasse_events=array();
$this->lasse_interval=array();
}
function handle($match, $state, $pos, &$handler){
switch ($state) {
case DOKU_LEXER_ENTER :
$interval = trim(substr($match,9,-1));
if( strlen($interval) ) {
return array($state, $interval);
}
return array($state, $this->default);
case DOKU_LEXER_UNMATCHED :
return array($state, $match);
default:
return array($state);
}
}
function render($mode, &$renderer, $indata) {
if($mode == 'xhtml' or $mode=="latex"){
list($state, $data) = $indata;
switch ($state) {
case DOKU_LEXER_ENTER :
$this->reinitvars();
preg_match("|interval=([\d\/]*)-([\d\/]*)|",$data,$matches);
preg_match("|color=([\dabcdef]*)|i",$data,$color);
preg_match("|scale=([\w])|i",$data,$scale);
preg_match("|(legend)|i",$data,$legend);
if( isset($scale) ) {
$this->scale = $scale[1];
if( isset($legend[1]) ) $this->legend = 1;
}
if( isset($color[1]) ) {
$this->bgcolor_interval = $color[1];
}
# Get interval to by shown
if (preg_match('/^\s*(\d\d?)[^\w](\d\d?)[^\w](\d{1,4}\s*$)/',
$matches[1], $match)) {
$matches[1] = $match[2] . '/' . $match[1] . '/' . $match[3];
}
if (preg_match('/^\s*(\d\d?)[^\w](\d\d?)[^\w](\d{1,4}\s*$)/',
$matches[2], $match)) {
$matches[2] = $match[2] . '/' . $match[1] . '/' . $match[3];
}
$dt=array($matches[1],$matches[2]);
$this->lasse_interval=array($matches[1],$matches[2]);
$i=0;
# Check all days for labels and get number of days in interval
while (strtotime($dt[1])>=strtotime("+".$i." day",strtotime($dt[0]))) {
$daytime = strtotime("+".$i." day",strtotime($dt[0]));
if( isset($this->scale) ) {
if( $this->scale == "w" && date("w",$daytime) == 0 ) {
$this->lasse_labels[] = array(date("W",$daytime),$i);
}
elseif( $this->scale == "m" && date("j",$daytime) == 1 ) {
$this->lasse_labels[] = array(date("n",$daytime),$i);
}
elseif( $this->scale == "y" && date("n",$daytime)==1 && date("j",$daytime) == 1 ) {
$this->lasse_labels[] = array(date("y",$daytime),$i);
}
}
$i++;
}
$this->lasse_days=$i;
break;
case DOKU_LEXER_UNMATCHED :
preg_match_all("|highlight=([\d\/]*)-([\d\/]*):?([^\s=]*)?=?([^=]*)?=?([^=]*)?=?([lrch])?|",$data,$matchesall);
for($m=0;;$m++) {
if( !isset($matchesall[0][$m]) ) {
break;
}
unset($matches);
$matches[1]=$matchesall[1][$m];
$matches[2]=$matchesall[2][$m];
if(isset($matchesall[3][$m])&&strlen($matchesall[3][$m])) $matches[3] = $matchesall[3][$m];
if(isset($matchesall[4][$m])&&strlen($matchesall[4][$m])) $matches[4] = $matchesall[4][$m];
if(isset($matchesall[5][$m])&&strlen($matchesall[5][$m])) $matches[5] = $matchesall[5][$m];
if(isset($matchesall[6][$m])&&strlen($matchesall[6][$m])) $matches[6] = $matchesall[6][$m];
if (preg_match('/^\s*(\d\d?)[^\w](\d\d?)[^\w](\d{1,4}\s*$)/',
$matches[1], $match)) {
$matches[1] = $match[2] . '/' . $match[1] . '/' . $match[3];
}
if (preg_match('/^\s*(\d\d?)[^\w](\d\d?)[^\w](\d{1,4}\s*$)/',
$matches[2], $match)) {
$matches[2] = $match[2] . '/' . $match[1] . '/' . $match[3];
}
$dt=Array($matches[1],$matches[2]);
# Get start and end of event in days in interval
$i=0;
$lasse_event=array();
while (strtotime($this->lasse_interval[1])>=strtotime("+".$i." day",strtotime($this->lasse_interval[0]))) {
$daytime_a = strtotime("+".$i." day",strtotime($this->lasse_interval[0]));
$daytime_b = strtotime("+".($i-1)." day",strtotime($this->lasse_interval[0]));
if ($daytime_a == strtotime($dt[0])) {$lasse_event[0]=$i;}
if ($daytime_b == strtotime($dt[1])) {$lasse_event[1]=$i;}
$i++;
}
# start ,ende ,color ,link ,linkname ,date-start ,date-ende
$this->lasse_events[]=array($lasse_event[0],$lasse_event[1],$matches[3],$matches[4],$matches[5],$matches[1],$matches[2]);
}
break;
case DOKU_LEXER_EXIT :
// ---------------------------------------------------------------------
// xhtml
// ---------------------------------------------------------------------
if ($mode=="xhtml") {
// --------------- Render bars ---------------------
$renderer->doc .= "\n<div class='TimeLineBox'><div class=\"TimeLine\">";
if ($this->scale) foreach($this->lasse_labels as $k => $value) {
$renderer->doc.="<div class='label' style='left:".($value[1]*100/$this->lasse_days)."%;'>$value[0]</div>";
}
foreach($this->lasse_events as $k => $value) {
$renderer->doc.="<div class='bar' style='left:".($value[0]*100/$this->lasse_days)."%; width:".(($value[1]-$value[0])*100/$this->lasse_days)."%; background-color:#$value[2]'></div>";
$renderer->doc.="<div class='bar-hover' style='left:".($value[0]*100/$this->lasse_days)."%; width:".(($value[1]-$value[0])*100/$this->lasse_days)."%; '>";
$renderer->doc.="<span class=hover><span class=label>";
if ($value[3]) {
$renderer->doc.=html_wikilink($value[3],$value[4]);
} else {
$renderer->doc.=($value[4]!="")?$value[4]:" ";
}
$renderer->doc.="</span><span class=datum>";
$renderer->doc.=date("d.m.Y",strtotime($value[5]));
$renderer->doc.="-";
$renderer->doc.=date("d.m.Y",strtotime($value[6]));
$renderer->doc.="</span>";
$renderer->doc.="</div>";
}
$renderer->doc .= "\n</div><br>";
// -------------- Render Legend --------------------
if ($this->legend==1) {
$renderer->doc.="<br><div class='TimeLineLegend'><ul>";
foreach($this->lasse_events as $k => $value) {
$renderer->doc.="<li>";
$renderer->doc.="<span class=legend style='background-color:#$value[2];'></span>";
if ($value[3]) {
$renderer->doc.=html_wikilink($value[3],$value[4]);
} else {
$renderer->doc.=($value[4]!="")?$value[4]:" ";
}
$renderer->doc.=": ";
$renderer->doc.=date("d.m.Y",strtotime($value[5]));
$renderer->doc.="-";
$renderer->doc.=date("d.m.Y",strtotime($value[6]));
$renderer->doc.="</li>";
}
$renderer->doc.="</ul></div>";
}
$renderer->doc .="</div>";
break;
}
// ---------------------------------------------------------------------
// Latex
// ---------------------------------------------------------------------
if ($mode=="latex") {
// ------------------- Render bars -----------------
$w=16;
$h=count($this->lasse_events)*$this->pdf_bar_height;
$renderer->doc.="\\begin{pspicture*}(0,-0.7)($w,".($h+0.7).")\n";
$renderer->doc.=" \\pcline[linewidth=1.5pt](0,0)($w,0)\n"; # bottom line
$renderer->doc.=" \\pcline[linewidth=1.5pt](0,$h)($w,$h)\n"; # upper line
# date at top
$renderer->doc.=" \\rput[r]($w,".($h+0.3)."){\\small\\textsf{".date("d.m.Y",strtotime($this->lasse_interval[0]))." bis ".date("d.m.Y",strtotime($this->lasse_interval[1]))."}}\n";
$renderer->doc.=" %Ticks \n";
# Ticks
if ($this->scale) foreach($this->lasse_labels as $k => $value) {
$xp=($value[1]*$w/$this->lasse_days);
$renderer->doc.=" \\pcline[linestyle=dotted,linewidth=0.5pt]($xp,-0.1)($xp,$h)\n";
$renderer->doc.=" \\rput($xp,-0.4){\\textsf{".$value[0]."}}\n";
}
# Events
$i=0;
foreach($this->lasse_events as $k => $value) {
$i++;
$xps=($value[0]*$w/$this->lasse_days);
$xpe=($value[1]*$w/$this->lasse_days);
$yp=$h-($i-0.5)*$this->pdf_bar_height;
$renderer->doc.="\\pcline[offset=0pt]{|-|}($xps,$yp)($xpe,$yp)\n";
if ($value[3] or $value[4]) {
if ($xpe-$xps > 3) {
$renderer->doc.="\\lput*{:U}";
} else {
if ($xps > $w/3) {
$renderer->doc.="\\rput[r]($xps,$yp)";
} else {
$renderer->doc.="\\rput[l]($xpe,$yp)";
}
}
if ($value[4]) {$a=$value[4]; } else { $a=$value[3]; }
$renderer->doc.="{\\textsf{\\quad ".$a."\\quad}}\n";
}
$renderer->doc.="";
}
// ----------------- Render Legend -----------------
$renderer->doc .= "\n\\end{pspicture*}\n";
if ($this->legend==1) {
$renderer->doc.="\\begin{itemize}\n";
foreach($this->lasse_events as $k => $value) {
$renderer->doc.=" \\dokuitem ";
if ($value[4]) {
$renderer->doc.=$value[4];
} else {
$renderer->doc.=($value[3]!="")?$value[3]:"- ";
}
$renderer->doc.=": ";
$renderer->doc.=date("d.m.Y",strtotime($value[5]));
$renderer->doc.=" bis ";
$renderer->doc.=date("d.m.Y",strtotime($value[6]));
$renderer->doc.="\n";
}
$renderer->doc.="\\end{itemize}\n";
}
break;
}
}
return true;
}
return false;
}
}
//Setup VIM: ex: et ts=4 enc=utf-8 :
?>
style.css
div.TimeLine a, div.TimeLine a.wikilink1, div.TimeLine a.wikilink2 {
text-decoration: none;
}
/* Styles von TimeLine (timeline2) */
div.TimeLineBox {
display:inline-box;
position:relative;
width:95%;
}
div.TimeLine {
font-family:"sans serif";
width:100%;
height:1.4em;
position:absolute;
display:block;
background-color:#c0c0c0;
left:0%;
}
div.TimeLine div.ticks {
border-left:1px solid black;
position:absolute;
height:1.4em;
}
div.TimeLine div.label {
border-left:1px solid black;
height:1.4em;
position:absolute;
top:1.4em;
}
div.TimeLine div.bar, div.TimeLine div.bar-hover{
display:block;
position:absolute;
height:1.4em;
}
div.TimeLine div.bar{
opacity:0.5;
}
div.TimeLine div.bar-hover span.hover {
position:absolute;
padding-bottom:1.8em;
display:none;
width:100%;
top:-2.8em;
left:-1px;
border:1px solid black;
background:#ffffff;
z-index:200;
}
div.TimeLine span.datum {
display:block;
font-size:80%;
padding: 0em 0.3em 0em 0.3em;
}
div.TimeLine span.label {
display:block;
padding: 0em 0.3em 0em 0.3em;
}
div.TimeLine div.bar-hover:hover span.hover {
display:block;
}
div.TimeLine div.bar-hover:hover {
border-left:1px solid black;
border-right:1px solid black;
}
div.TimeLine div.bar-left, div.TimeLine div.bar-center, div.TimeLine div.bar-right,div.TimeLine div.bar-start {
position:absolute;
}
div.TimeLine div.bar-left {
left:0px;
}
div.TimeLine div.bar-right {
right:0px;
}
div.TimeLine div.bar-center {
left: 0px;
right:0px;
text-align:center;
}
div.TimeLineLegend span.legend {
display:inline-block;
width:2em;
height:1em;
margin-right:1em;
}
Examples/Usage
<TimeLine interval=01/01/2010-31/12/2010 color=c0c0c0 scale=m> highlight=01/07/2010-01/09/2010:00ff00=test highlight=01/03/2010-01/08/2010:ff0000=include=Include highlight=15/08/2010-15/12/2010:0000ff=test2 </TimeLine>\\ hmm hmm <TimeLine interval=01/01/2010-10/02/2010 color=c0c0c0 scale=w> highlight=02/01/2010-31/01/2010:00ff00=test </TimeLine> <TimeLine interval=01/01/2010-10/02/2010 color=c0c0c0 scale=m legend> highlight=02/01/2010-02/01/2010:00ff00=test highlight=05/01/2010-07/01/2010:0080ff=test2 </TimeLine> hmm
There is a hover effekt for the events that isn't shown on the screenshot.
Syntax
<TimeLine interval=dd/mm/yyyy-dd/mm/yyyy [color=hexcolor] [[scale={w|m|y}] [legend]>
highlite=dd/mm/yyyy-dd/mm/yyyy[:hex color][=internal wiki page link][=Name of link][=lrch]
...
</TimeLine>
Configuration and Settings
[also CSS style tips]
Development
Change Log
Known Bugs and Issues
- Alignment of labels not done yet.
- Idea: left, right, center, hover
- At the moment all labels are automatically positioned as seen in screenshots.
ToDo/Wish List
- Align labels manually
- ODT-Export !! Help ist very wellcome!!
FAQ
[discussions should ideally be deleted and turned into FAQ entries along the way]
Discussion
Could be placed on an external page (e.g. plugin:pluginname:discussion) to have a distinction between user comments and author docs
plugin/timeline2.1303852308.txt.gz · Last modified: 2011-04-26 23:11 by 77.7.174.171