mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-18 11:29:55 +00:00
Code Issues Releases Wiki Activity

Add NavigatorWidget example (#6285)

Browse Source 
* Add NavigatorWidget example

* Moved NavigatorWidget example into the 'Creating SubStories' tiddler

* Fixed link: NavigationMechanism => HistoryMechanism
This commit is contained in:
btheado 2021-11-27 02:58:29 -05:00 committed by GitHub
parent 1c4b2243a6
commit 3798a3c7d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
editions/tw5.com/tiddlers/howtos/Creating SubStories.tid
View File

@ -1,44 +1,32 @@
created: 20140214215718317
modified: 20140919161514318
modified: 20211127032217828
tags: Learning
title: Creating SubStories
type: text/vnd.tiddlywiki
This example shows how to create a sub-story within a tiddler that is independent of the main story.
This example shows how to create a sub-story within a tiddler that is independent of the main [[story|Story River]]. The NavigatorWidget and ListWidget work together to:
Here's the code:
# Add tiddlers to the [[story|Story River]] when links are clicked. Navigate to the tiddler corresponding to the link click. (''story'' attribute of the NavigatorWidget)
# Remove tiddlers from the [[story|Story River]] 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|DraftMechanism]]. (''editTemplate'' attribute of the ListWidget)
# Track [[navigation history|HistoryMechanism]]. (''history'' attribute of both NavigatorWidget and ListWidget)
# And more!
```
<$navigator story="MySubStoryList" history="MySubHistoryList">
Here is the example code (see also StateMechanism for related discussion):
Click this link to get started: HelloThere
<$macrocall $name='wikitext-example-without-html'
src='<$navigator story="$:/temp/DemoStoryList" history="$:/temp/DemoHistoryList">
<$list filter="[list[MySubStoryList]]" history="MySubHistoryList">
<div>
{{$:/core/ui/SideBarSegments/search}}
! <$button message="tm-close-tiddler" class="tc-btn-invisible">{{$:/core/images/close-button}}</$button> <$view field="title"/>
<$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>"/>
<$transclude/>
</div>
</$list>
</$navigator>
```
Note how you can open the HelloThere tiddler in the substory by clicking on the link below. Links within the substory open within the substory, and not in the main story.
<$navigator story="MySubStoryList" history="MySubHistoryList">
Click this link to get started: HelloThere
<$list filter="[list[MySubStoryList]]" history="MySubHistoryList">
<div>
! <$button message="tm-close-tiddler" class="tc-btn-invisible">{{$:/core/images/close-button}}</$button> <$view field="title"/>
<$transclude/>
</div>
</$list>
</$navigator>
</$navigator>'>

4
editions/tw5.com/tiddlers/mechanisms/StateMechanism.tid
View File

@ -1,5 +1,5 @@
created: 20131228164411884
modified: 20150221225557000
modified: 20211127033939415
tags: Mechanisms
title: StateMechanism
type: text/vnd.tiddlywiki
@ -17,7 +17,7 @@ The stack of templates that make up the TiddlyWiki display are complex but we'll
Breaking down the attributes applied to the list widget:
* ''filter'': selects the list of tiddlers in the `list` field of the tiddler [[$:/StoryList]]. If a tiddler is added or removed from that list then it is automatically reflected in the displayed list
* ''history'': references the tiddler to be used to store the history stack (see the NavigationMechanism)
* ''history'': references the tiddler to be used to store the history stack (see the HistoryMechanism)
* ''template'': identifies a template tiddler to be used for rendering each tiddler in the list
* ''editTemplate'': identifies a different template tiddler to be used for rendering tiddlers that are in [[draft mode|DraftMechanism]]
* ''storyview'': specifies the story view to be used (eg classic, or zoomin)

5
editions/tw5.com/tiddlers/widgets/NavigatorWidget.tid
View File

@ -1,6 +1,6 @@
caption: navigator
created: 20131024141900000
modified: 20211009122821140
modified: 20211127023932158
tags: Widgets MessageHandlerWidgets
title: NavigatorWidget
type: text/vnd.tiddlywiki
@ -39,3 +39,6 @@ The following [[Variables]] are assigned by the navigator widget:
* <<.vlink tv-story-list>>, giving the name of the tiddler containing the story list
* <<.vlink tv-history-list>>, giving the name of the tiddler containing the history list
! Examples
See [[Creating SubStories]].