Idea: RFC Generic Next/Previous or back and forward - special navigation

#1

I stumbled upon and idea for tiddly wiki and raise it here for RFC - request for comment.

I value the back or alt-left feature in discourse and though could we have a generic solution. I discovered I have an extra mouse button that does back and forward and wondered about a tool within tiddlywiki. Ie the last visited tiddler.

Back
I can see a way to “go back” with reference to a wikis tiddler history, you can only go back to a tiddler you have already opened in the current session. This is possibly sufficient in many cases and also allows you to “jump” back to a tiddler listed in a side bar tab. But back is often the last tiddler, basically say I visited “Tiddler A” then “Tiddler B” then hit back we would focus on “Tiddler A”, If we now hit back because the last tiddler was “Tiddler B” we would return to “Tiddler B”. This is often a useful behaviour and we can add a drop down so one can jump back more than one tiddler. But back would always return to the last.

Forward
I could make a forward button that is simply the reverse of the history for already visited tiddler but however I thought what if we could load a list of next tiddlers. As illustrated above under Back sometimes going back is returning to the next tiddler.

So I was wondering if any given tiddler can be associated with an ordered list, we can always find its position within the list, in this case the tiddler has a next and previous as it relates to that list. Ie previous is not the back, but the previous in the named list.

With the standard next (not related to a list) I was wondering if a macro/button in a given tiddler could “push” a list of tiddlers into the “Forward/Next tiddler queue”. This would allow a choice in one tiddler to determine the path forward a bit like a “Roll your own adventure” but also ideal for work instructions etc… that have alternative paths.

Other smart methods may allow tiddlers to be added to the Next Queue allowing a list of tiddlers to visit to be accrued.

The combinations can get complex but all are achievable with what I already know, so I open this for discussion and feedback on how you “see and perceive next/previous/back forward” and what you would like.

I know Next/Previous features are available in slideshow plugins and editions but what I am trying to design here is a more generic and adaptable solution.

Thoughts?

2 Likes
#2

You might want to check out:
https://tiddlytools.com/InsideTW/#TiddlyTools%2FHistory

It adds a tiddler toolbar button that provides a popup for navigating the contents of the $:/HistoryList by parsing the $:/HistoryList JSON data (as well as using the “current-tiddler” field value). It also automatically includes the $:/DefaultTiddlers list, as well as any permalink/permaview titles from the URL.

To instantly add it to any TiddlyWiki, just visit the above link and drag-and-drop the “History” tiddler title into your TiddlyWiki. It’s not a “plugin” and is built entirely using wikitext, so you don’t need to save-and-reload for it to start working.

There are also two companion toolbar buttons:
https://tiddlytools.com/InsideTW/#TiddlyTools%2FHistory%2FNext
https://tiddlytools.com/InsideTW/#TiddlyTools%2FHistory%2FPrevious

and a custom SVG image for the toolbar button:
https://tiddlytools.com/InsideTW/#TiddlyTools%2FHistory.svg

Note: These toolbar buttons will work with any Storyview setting (classic, pop, or zoomin), but really works best with zoomin.

enjoy,
-e

4 Likes
#3

Thanks @EricShulman I will check your references out.

What are your thoughts on the other forms in my OT?

#4

How do you make this $:/HistoryList popup hoverable instead of click on the button?
Thanks, Stefan

#5

The History button uses the TWCore standard PopupMechanism, which automatically creates a $:/state/popup/... tiddler when you click on the button. It is this $:/state/popup/... tiddler, used with a <$reveal> widget, that determines when the History popup is actually rendered. The button click also performs some additional processing for the contents of the History popup, in order to ensure that the $:/HistoryList data has been properly initialized.

In contrast, “show-on-mouseover” effects are achieved using just CSS :hover rules, which are handled directly by the browser and don’t trigger any actual TWCore processing. Thus, the handling required by the History button cannot be triggered with a simple “hover” action. The button click is required to make things work.

Sorry.

-e

#6

@EricShulman
Thanks for feedback

#7

A place that a back/forward mechanism would be really handy is when using the Table Of Contents internal ‘toc-tabbed-internal-nav’ macro. Normally the TOC only has a couple levels due to the real estate it takes up on the screen.

For example: Tiddler ‘A’ is a root and Tiddlers ‘A1’,‘A2’,‘A3’ a sub-level as a starting point. The content in the tiddlers link to other tiddlers. Consider also there are 200 tiddlers in the ‘A’ story lines/branches.

As you are reading through it - clicking from tiddler to tiddler - and end up on tiddler ‘A154’ - it would be handy to just go back a couple tiddlers in the history to follow a different branch. From a reader’s perspective they are just flipping back and forth through pages.

I don’t think the internal TOC mechanism updates $:/HistoryList. I looked at it and that macro is way over my skill level.

1 Like
#8

@EricShulman Thanks for sharing this. This is useful when using this solution by @pmario and when using the close tiddler to the right feature of krystal horizontal layout plug in.

But I found one strange thing in the history when used in my wiki. The filter for default tiddllers used in my wiki is

[<now "DDth MMM YYYY">is[tiddler]] :else[default-tiddler[yes]]

This is seen in my history like this

image

#9

The [enlist{$:/DefaultTiddlers}] in the line

\define history() [{$:/HistoryList}split["title": "]splitbefore["]removesuffix["]reverse[]is[tiddler]] [enlist{$:/StoryList!!list}] [enlist{$:/DefaultTiddlers}]

of the TiddlyTools/History tiddler doesn’t work when $:/DefaultTiddlers is not just a list of tiddlers. You could just remove that filter part and the history button would work identically in almost all cases.
Have a great day
Yaisog

#10

Thanks @EricShulman, finally a use for the $:/HistoryList tiddler! I could never really figure out what that was good for. This button will save me many a trip to the Recent tab and the frustration of not finding things there because I didn’t modify but only read.
I did take the liberty to simplify the popup significantly and also removed the $:/StoryList contents, since I already have a list of open tiddlers always showing in a top menubar. My version of the button is just a couple of lines:

<$button popup=<<qualify "$:/state/popup/history">> class="tc-btn-invisible mwi-history-button" tooltip="Show tiddler history">
  {{$:/mwi/images/history}}
</$button>
<$reveal type="popup" state=<<qualify "$:/state/popup/history">> position="belowleft">
  <div class="tc-drop-down" >
    <h2 class="mwi-history-title">Tiddler History</h2>
    <ul class="tc-toc">
      <$list filter="""[{$:/HistoryList}split["title": "]splitbefore["]removesuffix["]reverse[]!is[draft]is[tiddler]]""">
        <li class="toc-item">
          <$link class={{{ [{$:/HistoryList!!current-tiddler}match<currentTiddler>]then[mwi-history-list-current]] }}}>
            <$let fieldName={{{ [all[current]is[system]then[title]] ~[all[current]has[caption]then[caption]else[title]] }}}>
              <$view field=<<fieldName>> />
            </$let>
          </$link>
        </li>
      </$list>
    </ul>
  </div>
</$reveal>

Admittedly, there is another tiddler for the image and the CSS is moved to the stylesheet, but that’s it. But the inspiration (and the history parser filter) is 100% from you.
Have a very nice day
Yaisog

System Tiddlers in Recent tab and adding a History tab
#11

Since the $:/DefaultTiddlers content allows filter syntax and not just a simple space-separated list of tiddler titles, we can use subfilter{$:/DefaultTiddlers} instead of enlist{$:/DefaultTiddlers} to evaluate the $:/DefaultTiddlers contents and get the resulting space-separated list to titles.

I’ve updated https://tiddlytools.com/InsideTW/#TiddlyTools%2FHistory to use subfilter{$:/DefaultTiddlers} so it will now work with your wiki.

enjoy,
-e

2 Likes
#12

In relation to the use of “filters and code” in $:/DefaultTiddlersI just want to point out to all, this is because it is being transcluded when used by the core and thus getting “Evaluated” to generate the list of default tiddlers.

I would urge designers and hackers to adopt this approach in your solutions where possible because it adds a lot of potential features. Such configurable elements let new and interesting things to be done with only a different value provided. Otherwise the behaviour is identical to a simple title list.

#13

@Yaisog Did you modified the appearance of the pop up. Am interested in seeing how it looks

#14

Like I wrote, it’s a very basic popup with a toc-like list:

x2scrap

The CSS is

.mwi-history-title {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.mwi-history-list .tc-toc {
	list-style-type: none;
	padding-left: 0;
}
.mwi-history-list .tc-toc a {
	padding-left: 2em;
	color: #888;
	font-size: 14px;
	background: none;
}
.mwi-history-list .tc-toc a:hover {
	color: #444;
}

and the icon is from https://fonts.google.com/icons.
The mwi-history-list class must be added to the <div class="tc-drop-down" > in the code above.
Does exactly what I need and nothing more.
Have an awesome day
Yaisog

1 Like