====== dwtimeline Plugin ======

---- plugin ----
description: Provides a timeline in the style of DokuWiki
author     : saggi 
email      : saggi@gmx.de 
type       : syntax
lastupdate : 2023-04-19
compatible : Igor, Hogfather, Jack Jackrum, Kaos
depends    : 
conflicts  : 
similar    : csstimeline
tags       : timeline

downloadurl: https://github.com/saggi-dw/dwtimeline/archive/refs/heads/main.zip
bugtracker : https://github.com/saggi-dw/dwtimeline/issues
sourcerepo : https://github.com/saggi-dw/dwtimeline/
donationurl: 

screenshot_img : https://i.ibb.co/WxM98KM/2022-06-27-15h55-55.png
----

dwtimeline provides a timeline with alternating boxes formatted in the style of the DokuWiki settings. Boxes for start and end are also possible.

===== Installation =====

Install the plugin using the [[plugin:plugin|Plugin Manager]] and the download URL above, which points to latest version of the plugin. Refer to [[:Plugins]] on how to install plugins manually.

===== Examples/Usage =====

An entry in the timeline is made via milestones. The entry should have at least the following format:
<code>
<dwtimeline>
<milestone>
Between the milestone start and end, you can even use Wiki markup
</milestone>
</dwtimeline>
</code>

{{ https://i.ibb.co/HgByFTx/2022-06-27-16h08-08.png?400 |A simple timeline}}


===== Syntax =====

The basic syntax is shown above.
A timeline starts with the ''<dwtimeline>'' tag and ends with the ''</dwtimeline>'' tag. The milestones are placed in between. The content of each milestone box is enclosed between the ''<milestone>'' and ''</milestone>'' tag.The content can contain normal DokuWiki syntax.

Every entry-tag can have options. But only the dwtimeline exit-tag can also have options.
The options must be in the following format: ''<entry option="value">''.
Option and value are separated by ''=''. The value must be enclosed by ''"''. The options do not understand DokuWiki syntax (exception: ''link'').

^Option^Description^possible in^values|
|''title''|If set: the top entry of a box. |''<dwtimeline>'', ''<milestone>'', ''</dwtimeline>''|''Text''|
|''description''|If set: the second entry of a box. |''<dwtimeline>'', ''<milestone>'', ''</dwtimeline>''|''Text''|
|''link''|If set, the title becomes the link. The link must be in DokuWiki format (<nowiki>[[http://example.com|External Link]]</nowiki>).|''<milestone>''|''Text''|
|''align''|overwrite the standard alignment|''<dwtimeline>''|''horz'',''vert''|
|''data''|up to 4 chars for the timeline marker|''<milestone>''|''Text''|
|''backcolor''|set the background color for container|''<milestone>''|valid css color name, hex, rgb|

==== Examples: ====

:!: In the editor toolbar there is now a button (Timeline) that creates a base skeleton.

=== Entry box ===

<code>
<dwtimeline title="Title of Timeline" description="A additional description">
</dwtimeline>
</code>

{{ https://i.ibb.co/wNWnWWK/2022-06-28-08h20-17.png?400 |Entry box}}

=== Entry and Exit box ===

<code>
<dwtimeline title="Title of Timeline" description="A additional description">
</dwtimeline title="End of Timeline">
</code>

{{ https://i.ibb.co/qJCyZVV/2022-06-28-08h24-11.png?400 |Entry box}}

=== Complete Timeline ===

<code>
<dwtimeline title="Title of Timeline" description="A additional description">
<milestone title="First milestone" description="My first timeline entry" >
Between the milestone start and end, you can even use Wiki markup, e.g. images:
{{:wiki:dokuwiki-128.png?100|}}
</milestone>
<milestone title="Second milestone with link" description="My second timeline entry" link="[[http://example.com|External Link]]">
A milestone entry accepts title, description and link as options.
Everytime followed by ''='' and the option surrounded by ''"'':
< code>
title="Second milestone with link" description="My second timeline entry" link="[[http://example.com|External Link]]"
< /code>
This one is rendered at the **other** side of the //timeline//
</milestone>
<milestone title="Third milestone" description="My third timeline entry" link="[[playground:playground|]]">
This one is rendered at the other side of the timeline
<WRAP center round info 60%>
info box
</WRAP>
</milestone>
</dwtimeline title="End of Timeline">
</code>


{{ https://i.ibb.co/vcJkRJz/2022-06-28-08h31-34.png?400 |Timeline}}

=== Horizontal Timeline ===

<code>
<dwtimeline align="horz" title="Title of Timeline" description="A additional description">
<milestone title="First milestone" description="My first timeline entry" data="22">
Between the milestone start and end, you can even use Wiki markup, e.g. images:
{{:wiki:dokuwiki-128.png?100|}}
</milestone>
<milestone title="Second milestone with link" description="First of the blue era" link="[[http://example.com|External Link]]" data="bl"  backcolor="LightBlue">
A milestone entry accepts title, description and link as options.
Everytime followed by ''='' and the option surrounded by ''"'':
<code>
title="Second milestone with link" description="My second timeline entry" link="[[http://example.com|External Link]]"
< /code>
This one is rendered at the **other** side of the //timeline//
</milestone>
<milestone title="Third milestone" description="My third timeline entry" link="[[playground:playground|]]"  backcolor="LightBlue">
This one is rendered at the other side of the timeline
<WRAP center round info 60%>
info box
</WRAP>
</milestone>
</dwtimeline title="End of Timeline">
</code>

{{ https://i.ibb.co/FDFqtwK/2022-07-22-11h29-40.png?400 |horizontal Timeline}}
===== Configuration and Settings =====

The following settings are available in the configuration manager:
^Setting^Description^Values[default]|
|direction|On which side should the timeline start (left,right)? \\ The position of the first milestone box to the timeline.|[''left''],''right''|
|align|Choose the Standard-Alignment (Vertical[vert], Horizontal[horz])? |''horz'',[''vert'']|

The following colours are used and depend on the style chosen:
^Element^Color in style^style.ini|
|Box background and timeline|Neutral background color|''@ini_background_neu''|
|Text|Main text color|''@ini_text''|
|Timeline circle|The general link color|''@ini_link''|


Those colors are easily changed. The bundled styling plugin available via "admin" -> "template style setting" allows easy changes. Alternatively, one can directly edit [[devel:style.ini|style.ini]] file.
===== Development =====



=== Change Log ===


  * **2022-06-27**
    * Initial release
  * **2022-07-02**
    * Code simplified
  * **2022-07-11**
    * add horizontal timeline
    * add two possible chars in timeline circle
    * add optional background color to container (to mark an era or so)
    * style changes
    * add toolbar button
  * **2022-07-13**
    * [[https://github.com/saggi-dw/dwtimeline/issues/3|more compatibility for style.css]] (class names) 
  * **2022-07-22**
    * Add container arround timeline
      * add basic "print.css"
      * add buttons for timeline and milestone skeleton in editor
      * fix overlapping content of timeline (see title of commit)
      * fix(?) use of milestone outside of the timeline
      * fix change of alignment in milestones
      * fix extend the entry patter to find the fitting exit pattern

{{rss>https://github.com/saggi-dw/dwtimeline/commits/main.atom date}}

=== Known Bugs and Issues ===

  - Nested milestone blocks are not possible


=== ToDo/Wish List ===

  * Something that would be **really** nice would be to allow a date and/or time in the little circles.  I honestly don't know how difficult this would be, or indeed if it is possible.
    * <del>Not at the moment, but I'm thinking about it. [saggi]</del> Two chars now possible  --- [[user>saggi|saggi]] //2022-07-11 19:42//
  * On my dokuwiki with sidebar enabled, the responsive timeline doesn't work, I tried fixed it and paste the modified css on the github repo of the project.  --- [[user>dgy18787|dgy18787]] //2023-01-09 13:56//
    * Done since Version 2023-01-12  --- [[user>saggi|saggi]] //2023-01-12 09:23// 

===== Discussion =====