How to add navigate-to action to a select widget

#1

This select widget I use in my topbar to list the storylist tiddlers and make the selected tiddler as currentTiddler

<$select tiddler='$:/HistoryList' field="current-tiddler" class="short-storylist">
<$list filter='[list[$:/StoryList]]'>
<option><$view field='title'/></option>
</$list>
</$select>

I also want to the navigate to the selected tiddler when it is selected from the select widget. For this I added the navigator widget, but its not working.

\procedure navigate-storylist-tiddler()
<$let
currentTiddler={{$:/HistoryList!!current-tiddler}}
>
<$action-navigate $to=<<currentTiddler>>/>
</$let>
\end

<$navigator story="$:/StoryList" history="$:/HistoryList">
<$select tiddler='$:/HistoryList' field="current-tiddler" class="short-storylist" actions=<<navigate-storylist-tiddler>>>
<$list filter='[list[$:/StoryList]]'>
<option><$view field='title'/></option>
</$list>
</$select>
</$navigator>

Can someone help ?

Edit: I tested this code in the tiddlywiki.com and it is working. So the issue must be with my custom layout

1 Like
#2

Thank you. It was just what I wanted too. It works perfectly in my wiki.
Are you using a theme? I ask because I have had small annoyances with some of them - especially the older ones :wink:

#3

The “scroll into view” handling in the TWCore relies upon being able to scroll the entire page, which only works if the StoryRiver itself is NOT in a separate scrollable HTML div element, which is the case for the default layout, but might not be the case with your custom layout.

I ran into this issue when I implemented TiddlyTools/Stylesheet/TopBar, which allows you to pin/unpin and scale the TopBar. To make this work properly, it required that the StoryRiver div element can scroll independently of the whole page so that the TopBar doesn’t cover part of the StoryRiver, and optionally also allows the StoryRiver scrollbar to appear on the left side of the page. You can see this effect when you visit https://TiddlyTools.com. Note the pins in the top-left and top-right corners of the page, and the StoryRiver scrollbar on the left.

If your scrolling problem is caused by a similar issue, importing these two tiddler might fix it:

TiddlyTools/Templates/ScrollHere is tagged with $:/tags/ViewTemplate, and contains just these lines:

\whitespace trim
<!-- FORCES MOST-RECENTLY VIEWED HISTORY TIDDLER TO SCROLL INTO VIEW -->
<$list filter="[{$:/HistoryList!!current-tiddler}match<currentTiddler>]"><$scrollhere/></$list>

and TiddlyTools/Widgets/scrollhere.js defines the custom <$scrollhere/> widget, which uses browser-native Javascript functions parent.scrollIntoViewIfNeeded() or parent.scrollIntoView() to achieve the desired result.

After importing the above two tiddlers, save-and-reload so the scrollhere.js widget can take effect. Then you can test your scrolling problem and see if it has gone away.

Let me know how it goes…

enjoy,
-e

2 Likes
#4

Thanks for sharing this @EricShulman

The navigation issue occurs sporadically. So I have to investigate to find the reason. I will try your solutions today evening when I am back on the desktop.