Differences

This shows you the differences between two versions of the page.

--- plugin:dwtimeline [2022-06-28 13:06] – [Development] Answer saggi
+++ plugin:dwtimeline [2023-12-08 09:56] (current) – + Jack Jackrum 148.64.24.63
@@ Line 6: / Line 6: @@
 email      : saggi@gmx.de
 type       : syntax
-lastupdate : 2022-06-27
+lastupdate : 2023-04-19
-compatible : Igor, Hogfather
+compatible : Igor, Hogfather, Jack Jackrum
 depends    :
 conflicts  :
@@ Line 14: / Line 14: @@
 downloadurl: https://github.com/saggi-dw/dwtimeline/archive/refs/heads/main.zip
-bugtracker : # eg. http://github.com/saggi/dokuwiki-plugin-dwtimeline/issues
+bugtracker : https://github.com/saggi-dw/dwtimeline/issues
 sourcerepo : https://github.com/saggi-dw/dwtimeline/
 donationurl:
@@ Line 50: / Line 50: @@
 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|
+^Option^Description^possible in^values|
-|''title''|If set the top entry of a box. this is enclosed in an ''<h2>'' tag.|''<dwtimeline>'', ''<milestone>'', ''</dwtimeline>''|
+|''title''|If set: the top entry of a box. |''<dwtimeline>'', ''<milestone>'', ''</dwtimeline>''|''Text''|
-|''description''|If set the second entry of a box. this is enclosed in an <h3> tag.|''<dwtimeline>'', ''<milestone>'', ''</dwtimeline>''|
+|''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>''|
+|''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 ===
@@ Line 79: / Line 84: @@
 <code>
 <dwtimeline title="Title of Timeline" description="A additional description">
-	<milestone title="First milestone" description="My first timeline entry" >
+<milestone title="First milestone" description="My first timeline entry" >
-		Between the milestone start and end, you can even use Wiki markup, e.g. images:
+Between the milestone start and end, you can even use Wiki markup, e.g. images:
-		{{:wiki:dokuwiki-128.png?100|}}
+{{:wiki:dokuwiki-128.png?100|}}
-	</milestone>
+</milestone>
-	<milestone title="Second milestone with link" description="My second timeline entry" link="[[http://example.com|External Link]]">
+<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.
+A milestone entry accepts title, description and link as options.
-		Everytime followed by ''='' and the option surrounded by ''"'':
+Everytime followed by ''='' and the option surrounded by ''"'':
-		< code>
+< code>
-		title="Second milestone with link" description="My second timeline entry" link="[[http://example.com|External Link]]"
+title="Second milestone with link" description="My second timeline entry" link="[[http://example.com|External Link]]"
-		< /code>
+< /code>
-		This one is rendered at the **other** side of the //timeline//
+This one is rendered at the **other** side of the //timeline//
-	</milestone>
+</milestone>
-	<milestone title="Third milestone" description="My third timeline entry" link="[[playground:playground|]]">
+<milestone title="Third milestone" description="My third timeline entry" link="[[playground:playground|]]">
-		This one is rendered at the other side of the timeline
+This one is rendered at the other side of the timeline
-		<WRAP center round info 60%>
+<WRAP center round info 60%>
-		info box
+info box
-		</WRAP>
+</WRAP>
-	</milestone>
+</milestone>
 </dwtimeline title="End of Timeline">
 </code>
@@ Line 102: / Line 107: @@
 {{ 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 =====
@@ Line 107: / Line 139: @@
 ^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.ine|
+^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 =====
@@ Line 123: / Line 158: @@
   * **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 ===
@@ Line 132: / Line 187: @@
   * 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]
+    * <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 =====