DokuWiki

It's better when it's simple

User Tools

Site Tools

Trace: • timeline2
plugin:timeline2

This is an old revision of the document!

Table of Contents

timeline2 Plugin

Compatible with DokuWiki

No compatibility info given!

plugin

Last updated on
2011-04-26
Provides
CSS/JS-only

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

Tagged with time, timeline

By Lasse Ristig

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

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]:"&nbsp;";
                                                }
                                                $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]:"&nbsp;";
                                                        }
                                                        $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

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

Much better then my own! 8-) , Wbr, Oleg Karachevtsev

plugin/timeline2.1304509238.txt.gz · Last modified: 2011-05-04 13:40 by 213.234.249.210
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

Global DokuWiki Links