Wizard Navigation Plugin

#1

With the help of several community members, I have created an alpha version of a simple plugin to add previous/next navigation to an ordered subset of tiddlers. You can see it at Wizard Nav Demo — A simple previous/next navigation for a group of tiddlers.

As well as a stylesheet tiddler, I have $:/plugins/scott-sauyet/wizard-nav, which contains

<$set name="currentNavStep" value={{!!title}}>

<$list filter="[is[current]tags[]tag[$:/plugins/scott-sauyet/wizard-nav]sort[]]">
  <div class="wizard-nav">
    <div>
      <$list filter="[enlist{!!list}before<currentNavStep>]">
        <$link to=<<currentTiddler>>>« {{!!title}}</$link>
      </$list>
    </div>
    <div><$link to=<<title>>><<currentTiddler>> ^</$link></div>
    <div>
      <$list filter="[enlist{!!list}after<currentNavStep>]">
        <$link to=<<currentTiddler>>>{{!!title}}  »</$link>
      </$list>
    </div>
  </div>
</$list>

</$set>

<$list filter="[is[current]tag[$:/plugins/scott-sauyet/wizard-nav]]">
  <<list-links filter:"[all[current]tagging[]]">>
</$list>

It’s working to my current needs, but I have many questions. If anyone has time to answer any of them, I would appreciate it. They are in that demo, but here they are again:

  • Is this something useful to anyone but me? I have a need for this, and as it stands, this seems good enough for what I want. I have no idea whether after fixing up the outstanding issues I should try to put this someplace more prominent so others can find and use it.

  • Is there a good way to pick up the color of the border line from the user’s theme? And if so, is there a standard named property that would make sense?

  • Is this breakdown into just two tiddlers appropriate? I have one that is simply a stylesheet, but the other serves as a ViewTemplate and its name also serves as the tag name pathways have to use. I have no idea if that is common, is unheard of, or somewhere between. Is there another more logical breakdown? This concerns me mostly because "$:/plugins/scott-sauyet/wizard-nav" is a mouthful, and I’m not sure that I would want to require users to use it, but that seems to be the most common namespacing technique for plugins. If I just required them to tag their tags with “Wizard”, I’d be afraid of naming conflicts.

  • There some duplication I don’t like. The string "$:/plugins/scott-sauyet/wizard-nav" appears as the title of a tiddler, and also twice within the tiddler. Can a template tiddler somehow refer to its own title? This would be irrelevant if the answer to the previous question is no, and I should separate the tiddler name from the name users have to supply.

  • This is my second attempt at a plugin. (The first ran into problems on Windows when I had no Windows machine to test with, and it was quickly abandoned.) Are there standards or common recommendations I’m ignoring in my ignorance? In other words, how would I make this more standard? (I know it’s technically not a plugin yet. I’ll figure that out later.)

And one I didn’t include there:

  • Is this already done? Is there previous art – a built-in technique, a very similar plug-in, something else – that means that this was nothing more than an interesting learning exercise for me?

Edit And one more I just thought of:

  • Is there some convention for naming CSS classes to avoid potential conflicts? I have an element with the class "wizard-nav". Should that be namespaced somehow?

WizardNav Plugin: Initial Release
#2

Thanks for sharing @Scott_Sauyet I will try and respond to a few of you questions; low hanging fruit first;

Yes I think it is, some similar things have being built but look a little different, such as in slideshow/presentation solutions and I myself have an interest on doing it on the tag pills.

If you do this say something like puts next and previous tiddler titles as links at the bottom of all tiddlers tagged … This allows people to see if it meets with their needs more rapidly.

  • Consider a hub listed tiddlyhost site and as you have already a talk.tiddlywiki.thread, and link back here for feedback. Also submit it to link.tiddlywiki

That’s fine I believe; actually I would make the plugin tiddler (You have not yet made a plugin, but it may not be necessary)

  • Create $:/plugins/scott-sauyet/wizard-nav/readme containing a guide
  • Rename $:/plugins/scott-sauyet/wizard-nav to $:/plugins/scott-sauyet/wizard-nav/viewTemplate

Its fun and helpful to make single tiddler solutions, but when you can choosing well structured names that follow convention is better.

  • In most cases something tested on Chrome on any operating system should be enough to validate it on all chrome browsers.
  • My previous tiddler naming convention is a start
  • The project name is wizard-nav by scott-sauyet
  • I would no say that, learning exercises are always useful, and more than likely your solution will be different in a way that suits someone else compare to others.

This looks good enough to me, the name allows one to find the tiddler in which the styles are defined.

Thanks again for having a go. You have inspired me to complete my version in the tag Pill.

#3

May I suggest adding another tiddler for configuration, where the user could input its own tag name instead of the default value $:/plugins/scott-sauyet/wizard-nav?

I really like your work on this project, I could use it in simple presentations/slideshows. Thanks for sharing!

Fred

#4

@TW_Tones:

Thank you for your response, and your very helpful suggestions.

I’m glad that it does seem useful.

Thank you. I’ll take all that into consideration as soon as I have a version I’m relatively happy with.

That makes sense. I hadn’t really yet gotten around to learning/thinking about the actual plugin. But this sounds like good advice.

As to “You have not yet made a plugin, but it may not be necessary”, are plug-ins something less than universal as a way to share reusable components? I was assuming that this was simply the way it was done.

Certainly. I wasn’t trying to create a single-tiddler plug-in. It just happened so far, except for the stylesheet. I will definitely expand it.

This had to do with font-handling, something that still seems to have issues across platforms. It was at Fira Code plugin — a monospaced font with programming ligatures, an attempt to add ligatures to get nicer-looking code blocks. It worked on my Ubuntu machine, but I was told that it was failing for Windows users. At the time, I didn’t have any Windows machines to test in. Last week my Ubuntu box died and I’m on a Windows one, and it doesn’t work for me, at least on my default Brave browser.

Yes, and another answer has given an additional useful suggestion.

Yes, that’s how I was thinking about it, but are you suggesting that I need to change something for this?

I would not be bothered to find out it was not useful to others. The learning experience itself is certainly worth the investment in time. I just wasn’t sure whether this was already done, and likely done better by someone else.

Ok, thanks.

I look forward to seeing it! Is the idea that a tag Pill will serve as a hidden-but-easily accessible breadcrumb trail? Something else?

Again, thank you very much!

#5

That makes perfect sense, and definitely cleans up one of the ugly points. I will definitely do this.

Thank you. I’m glad that it might end up being useful to others.

#6

Another way is just to share a tiddler or json file containing tiddlers. See my posts here in the community, that is the main way I share solutions.

No just ensuring you understood what the elements were, Using the project name in the description, tiddler titles and or filename helps ties it all together.

  • The idea is any tiddler with a tag on it, will have the tag pill, and by definition the current tiddler is somewhere in that list (Which can be reordered).
  • Click on that tag pill and it will present a next/previous / First / Last tiddler from the list of all tiddlers so tagged.
#7

Ahh, ok. That does sound easier. Is there any consensus about when a new component should be a plug-in rather than one of these simpler formats?

So very much a functionally similar alternative to what I’m working on. Cool. I do look forward to seeing it.

1 Like
#8

Perhaps the main determinant of when you use a plugin is

  • does it contain javascript tiddlers
  • Be able to disable it
  • or you want to add it to a plugin library

Plugins are listed so are a little easier to find, unless you have a lot.

Others may have a different view

#9

@TW_Tones and @tw-FRed: Thank you very much for all your helpful advice.

I’ll ping here with any major updates.

1 Like
#10

This reminds me a lot of my navigateList viewtemplate: TiddlyTweaks — Small tweaks for TiddlyWiki

In my version, I added a dropdown on the middle of the nav, I think this would be a great feature to have in your version :slight_smile:

image
image947×278 31.1 KB

Feel free to use my code if you think it can be useful to you !

1 Like
#11

I had similar thoughts. They haven’t made it to the top of my list, but I agree that the middle link would be better if it offered a pop-up free-form navigation within the tag and a you-are-here marker. It hit me that this would be a good idea as soon as I had my layout working; somehow it seemed obvious at this point.

Thank you. I will probably sneak a peek at it sometime soon, but I am still having fun – and some frustration – trying to figure out these issues on my own.

1 Like
#12

I’ve adopted a number of the suggestions in Wizard Nav Demo — A simple previous/next navigation for a group of tiddlers.

I will try to keep the latest working version also at Wizard Nav Demo — A simple previous/next navigation for a group of tiddlers, but will keep the “demo” versions around until I feel close to complete.

Again, thanks everyone for the wonderful suggestions.

2 Likes
#13

I’m using a version that I created that is based on Mohammad’s Simple Navigation from his Utility Plugin.

I only modified the filter from Mohammad’s version to make it specific to my use case. The thing I like most about it is that it will close the current tiddler when you click either the left or right buttons. (Screenshot and code below).

I do like the middle navigation area and am thinking of modifying mine to have something similar. Great work!

image
image1369×1006 72.8 KB 

\define my-simple-navigation(class, close:"no")
  <div class="$class$">
    <table class="table-borderless" style="width: 100%;">
      <tr>
        <td style="width: 50%; text-align: left;">
          <$list filter="[tag[Railroads]subfilter{$:/state/subfilter}subfilter{$:/state/rrfilter}before<currentTiddler>]" variable="prevTiddler">
            <$button to=<<prevTiddler>> tooltip=<<prevTiddler>> class="tc-btn-invisible $class$" style="text-align: left; color: #a8a8a8;">{{$:/images/bootstrap/arrow-left}} <<prevTiddler>>
              <$list filter="[<__close__>match[yes]]" variable=ignore><$action-sendmessage $message="tm-close-tiddler" $param=<<currentTiddler>>/></$list>
            </$button>
          </$list>
        </td>
        <td style="width: 50%; text-align: right;">
          <$list filter="[tag[Railroads]subfilter{$:/state/subfilter}subfilter{$:/state/rrfilter}after<currentTiddler>]" variable="nextTiddler">
            <$button to=<<nextTiddler>> tooltip=<<nextTiddler>> class="tc-btn-invisible $class$" style="text-align: right; color: #a8a8a8;"><<nextTiddler>> {{$:/images/bootstrap/arrow-right}}
              <$list filter="[<__close__>match[yes]]" variable=ignore><$action-sendmessage $message="tm-close-tiddler" $param=<<currentTiddler>>/></$list>
            </$button>
          </$list>
        </td>
      </tr>
    </table>
  </div>
\end
1 Like
#14

Hi @Scott_Sauyet ,

The GrokTiddlyWiki plugin in https://groktiddlywiki.com is another example of using navigation templates.

1 Like
#15

Damn, I’ve seen that before, and forgotten it when I went looking for existing art! Another one of those tools is exactly something I will be looking for soon on that project. Thanks for the reminder.

I think I like my mechanism a bit better, simply creating a tag, tagging that tag with my “Wizard” tag to get the navigation behavior for everything with your tag. And, for my case, the more prominent tiddler name links are fairly important, but Mohammed’s more subtle version makes sense for many cases. It makes me wonder if I can factor out the HTML generation similar to how the stylesheet is entirely replaceable. I’ll probably have a look.

Thank you for the suggestion!

#16

D’oh, I feel stupid. I was half-way through Grok TW, when this current project started, and with TW on my mind, it seemed an obvious way to create it. I put Grok TW aside for a bit while I got into this, and then when the need for this navigation arose, I idiotically didn’t consider Grok TW as a source of inspiration. Thanks for the reminder. Off to go dig into that implementation now…