27th November 2021 at 3:22am
This example shows how to create a sub-story within a tiddler that is independent of the main story. The NavigatorWidget and ListWidget work together to:
- Add tiddlers to the story when links are clicked. Navigate to the tiddler corresponding to the link click. (story attribute of the NavigatorWidget)
- Remove tiddlers from the story when tiddler close buttons are clicked. (story attribute of NavigatorWidget)
- Animate the opening and closing of tiddlers. (storyview attribute of the ListWidget)
- Display the list of open tiddlers. (filter and template attributes of the ListWidget)
- Display tiddlers in draft mode. (editTemplate attribute of the ListWidget)
- Track navigation history. (history attribute of both NavigatorWidget and ListWidget)
- And more!
Here is the example code (see also StateMechanism for related discussion):
<$navigator story="$:/temp/DemoStoryList" history="$:/temp/DemoHistoryList">
{{$:/core/ui/SideBarSegments/search}}
<$list
filter="[list[$:/temp/DemoStoryList]]"
history="$:/temp/DemoHistoryList"
template={{$:/config/ui/ViewTemplate}}
editTemplate={{$:/config/ui/EditTemplate}}
storyview="classic"
emptyMessage="Use search box above. Clicked search links will open here instead of in the main story.<p>No search ideas? Click this link to get started: HelloThere</p>"/>
</$navigator>
That renders as:
Use search box above. Clicked search links will open here instead of in the main story.No search ideas? Click this link to get started: HelloThere