Timeline in Tiddlywiki

[Mohammad]

While having Journal in Tiddlywiki and then one can display them in different format Is having a small to create timeline like below is beneficial or no?

Is there any interest in that?

Look, this is created using $list widget with pure CSS. Each part in timeline is a transcluded tiddler using some template!

--Mohammad

[Mohammad]

Note this is different from timeline macro in TW! This can be customized in many ways! BUT the own TW macro can be used also with some modification!

--Mohammad

[@TiddlyTweeter]

Mohammad wrote:

Is there any interest in that?

Look, this is created using $list widget with pure CSS. Each part in timeline is a transcluded tiddler using some template!

Its visually very striking. I like the look of it.

Could it be user for Tiddlers other than Journal entries?

For example, say for a series of Tiddlers that describe how to install software--where you have steps 1, 2, 3 etc. you should follow in order?

Best wishes

Josiah

[Joshua Fontany]

Very good design. Mahalo (thanks) for sharing!

Best,
Josh F

[TonyM]

Mohammad,

I think if you generalise it more as a way to list things with custom css it would be of greater value than simply as a timeline.

Perhaps others will be inspired to provide similar designer lists, or list interesting content.

I am not sure I would use the example for other than myself, with only odd or even numbering.

Love your contributions
Tony

[Mohammad]

Thanks Josiah and Joshua,

 This actually can be used for any filter, but my preferences is tags!

This is an idea now and I was asking if it is useful for TW or not!

It uses pure CSS and TW script.

--Mohammad

[TonyM]

Sorry I missed the odd numbers on the mobile. I would use this format for a general audience.

We need a pallet of better designed listing formats since lists is a tw strength.

Tony

[Mohammad]

Hi Tony!

 That's a good idea! So, if I understand correctly you suggest to have a template to format the output of list!

and then one template could be a timeline!

--Mohammad

[TonyM]

Mohammad

Almost.

The list widget has a template parameter. You could create a template that formats whatever the content of the list widget as per your design.

Now you create a list timeline or any other list that uses your list template.

I can create another list template and we can all share them.

Regards
Tony

[TonyM]

Actualy I can take this even further.

I will get back to you
Tony

[TonyM]

Mohammad,

Could you share your wiki text and css for this with me, even if not yet for publication so I can demonstrate my idea?

Regards

Tony

[Mohammad]

Hi Tony!

 See attached the code including macro/stylesheet and demo for timeline01.

Simply drag and drop on https://tiddlywiki.com to see how it works!

--Mohammad

[Mohammad]

One place I like to use this to show the changelog of plugins during development period

Other cases are my Journals, where it needs a little tweaking!

[Mohammad]

This is how it looks like

[Riz]

Stunning!! Well done Mohammed!

[TonyM]

Mohammad,

Thanks for that. It appears not so easy to use for my special case as I want. Rather than call it with a tag, and have it iterate with [tag[$myTag$]]

I wanted to use the list widget like this;

<$list filter="any filter" template=list-template></$list>

Such that for each tiddler it applies your "style" in the list-template

Here is a different example of this method

Eg my-list-template

<div class="tc-menu-list-item">
<h3>__<$link to={{!!title}}>
<$view field="title"/>
</$link>__</h3>
{{||$:/core/ui/ViewTemplate/subtitle}}
<pre><$view field=text /></pre>
</div>

Then in any tiddler
<$list filter="[tag[xx]]" template=my-list-template></$list>

Lists all the tiddlers using the above template, which displays a link to the tiddler and displays the text within it.

I was hoping to retrofit your design into the list-template but I do not know enough.

If we could it would allow your nice formating to be applied to any desired list one chooses aqnd defines how to handle each item in the list-template

Regards

Tony

[Mohammad]

Tony,

It is possible. Remember how toc-menu is used

<div class="tc-table-of-contents">
<<toc-expandable "Contents">>
</div>

Then you have to use something like this

<div class="timeline01">

<$list filter="[tag[xx]]" template="my-list-template"/>

</div>

Where your  my-list-template is as below

<div class="item">
<h3>__<$link to={{!!title}}>
<$view field="title"/>
</$link>__</h3>
{{||$:/core/ui/ViewTemplate/subtitle}}
<pre><$view field=text /></pre>
</div>

other cases

<div class="timeline01">

<$list filter="[search:title[Tid0]]" template="my-list-template"/>

</div>

--Mohammad

[Mohammad]

Thanks Riz,

I am happy you fount it useful!

--Mohammad

On Sunday, July 28, 2019 at 8:21:33 AM UTC+4:30, Riz wrote:

Stunning!! Well done Mohammed!

[TonyM]

Mohammad,

Thanks for that

<div class="timeline01">
<$list filter="[search:title[Tid0]]" template="my-list-template"/>
</div>

and inside the template wrapping it with the item class has no ill effect when not using timeline01, so basically I am only making use of your stylesheet.

I did create the following macro

\define preview-tiddlers(filter class)
<div class="$class$">
<$list filter="$filter$" template="Preview"/>
</div>
\end

<<preview-tiddlers "[tag[TableOfContents]]" "timeline01">>

It looks great, I learned alot today.

Regards

Tony

[Sapphireslinger]

Mohammad, it would definitely be interesting as a journal! Your timeline reminds me of the Universum diary (Google Play store) which I was using before Stories (Google Play store) which I was using before I discovered I could get TiddlyWiki working on my phone a month or so ago.

Only your timeline, with its border running between entries, fixes one thing that bugged me about the Universum timeline which was that when there were entries on two consecutive days, there was no more border between days, and it looked like all one entry instead of two. Yours has each day clearly bordered.

TiddlyWiki is awesome! It can be turned into all those apps I was using before and which I am now slowly deleting off my phone.

A big thank you to you, and everybody, for their creativity!

[Mohammad]

Thanks!

Please see attached a prerelease of timeline plugin!

Code and demo soon will be uploaded!

Feedback is highly appreciated!

--Mohammad

[Joshua Fontany]

This is really good work Mohammad! I can see from the many example Styles that this can be a very powerful presentation tool.

For example, nearly every fictional universe has a time-line of events that the readers/players have to become familiar with. This plugin would be a great way to display that information in a digestible way.

Example using complicated javascript: https://prezi.com/w5kk-wlz9mkn/alices-adventures-in-wonderland-timeline/

Best,
Joshua F

[Mohammad]

Thanks Joshua,

 I am working on this to develop a plugin!
I will publish a beta soon!

Also thank you for sharing the Prezi sample! It is a dynamic timeline!

--Mohammad