mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-29 08:43:14 +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 created: 20140214215718317
modified: 20140919161514318 modified: 20211127032217828
tags: Learning tags: Learning
title: Creating SubStories title: Creating SubStories
type: text/vnd.tiddlywiki 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!
``` Here is the example code (see also StateMechanism for related discussion):
<$navigator story="MySubStoryList" history="MySubHistoryList">
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"> {{$:/core/ui/SideBarSegments/search}}
<div>
! <$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/> </$navigator>'>
</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>

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

@ -1,5 +1,5 @@
created: 20131228164411884 created: 20131228164411884
modified: 20150221225557000 modified: 20211127033939415
tags: Mechanisms tags: Mechanisms
title: StateMechanism title: StateMechanism
type: text/vnd.tiddlywiki 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: 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 * ''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 * ''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]] * ''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) * ''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 caption: navigator
created: 20131024141900000 created: 20131024141900000
modified: 20211009122821140 modified: 20211127023932158
tags: Widgets MessageHandlerWidgets tags: Widgets MessageHandlerWidgets
title: NavigatorWidget title: NavigatorWidget
type: text/vnd.tiddlywiki 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-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 * <<.vlink tv-history-list>>, giving the name of the tiddler containing the history list
! Examples
See [[Creating SubStories]].