Compatible with DokuWiki

• 2022-07-31 "Igor" yes
• 2020-07-29 "Hogfather" yes
• 2018-04-22 "Greebo" unknown
• 2017-02-19 "Frusterick Manners" unknown

• Download

Provides a timeline in the style of DokuWiki

Last updated on

2023-01-12

Provides

Syntax

Repository

Source

Similar to csstimeline

Tagged with timeline

By saggi

• structprogress

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

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

An entry in the timeline is made via milestones. The entry should have at least the following format:

<dwtimeline>
<milestone>
Between the milestone start and end, you can even use Wiki markup
</milestone>
</dwtimeline>

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).

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

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

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

<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">

<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">

The following settings are available in the configuration manager:

The following colours are used and depend on the style chosen:

Those colors are easily changed. The bundled styling plugin available via “admin” → “template style setting” allows easy changes. Alternatively, one can directly edit style.ini file.

• 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
  • 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

• Fix for CSS Error on small screens (2023-01-12 09:08)
• version upped (2022-12-14 16:19)
• Some cleanup (2022-12-14 16:16)
• Merge pull request #5 from saggi-dw/master (2022-07-22 11:16)
• Add container arround timeline (2022-07-22 11:09)
• Merge pull request #4 from saggi-dw/master (2022-07-13 10:36)
• more compatibility for style.css (2022-07-13 10:27)
• Merge pull request #2 from saggi-dw/master (2022-07-11 19:26)

1. Nested milestone blocks are not possible

• 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.
  • Not at the moment, but I'm thinking about it. [saggi] Two chars now possible — 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. — dgy18787 2023-01-09 13:56
  • Done since Version 2023-01-12 — saggi 2023-01-12 09:23