Sidebar Navigation: Trying to use TW as an SRD

[Kyle Yates]

Hello!

I'm a complete noob and trying to get my TW dialed in to where it's just right for me. That may sound like a recipe for disaster, but I've actually got it looking and functioning almost exactly how I want with the inclusion of a few plugins. Except for one thing... Since I'm trying to use TW as an SRD for a tabletop game I'm hoping to emulate the navigation of another SRD I'm very familiar with, over on https://www.d20pfsrd.com the left nav lets you either click a link to go to the page or click the arrow to open up more options of things to click on. You can click the arrow again to close it, closed is right triangle and open is down triangle.

What I've got so far looks pretty close, but there's still a long way for me to go. The roadblock I've hit is that all the instructional content I can find online for creating this kind of thing rely on Javascript, and TW filters out script tags.

I've attached my code so far, but here's a brief list of the issues I can't quite figure my way around yet:

1. The triangle/arrow is always facing right, I know I can replace ⏵ with ⏷ but I'm not sure how to make it happen under the right conditions.
2. Clicking the triangle/arrow a second time doesn't close it, because I'm using the focus selector.
3. Another consequence of the focus selector is that only one section can be open at a time, I've tried a variety of other things like before, after, active, hover, and target but of the options I'm aware of focus is the closest to what I'm aiming for.
4. The last and most glaring issue is that when I try to click any of the links in the expanded area it loses focus and closes that area quickly before clicking the link, so alas this is mostly useless atm...

To get this positioned right and looking how I want it, in the same spot as where d20pfsrd puts theirs. I'm using Left Bar by TWaddle and replacing the contents of $:/plugins/TWaddle/LeftBar/Menu with {{SRDNav}}. I suspect if I have to make my own plugin for the srd-style nav that I can put something like {{$:/plugins/Squid/SRDNav/Nav}} inside LeftBar/Menu as long as my Nav content type is text/vnd.tiddlywiki? I've tried putting {{}} links to pages of different content types like json and they always display as code blocks instead, TW5 content seems to work.

Any help at all would be greatly appreciated, be it a plugin that already does what I want (or similar enough that I can hack away at tweaking it), a code snippet so I can get script tags working (file is accessed locally by myself only, so not a huge security concern?), or anything I can read that might make it easier for me to get started with making this as a plugin myself.

[Charlie Veniot]

Would you consider using details disclosure element as an alternative?

For the giggles, sample attached.

[Eric Shulman]

The TiddlyWiki standard distribution includes a set of macros to display a hierarchical "Table of Contents"

https://tiddlywiki.com/#Table-of-Contents%20Macros

https://tiddlywiki.com/#Table-of-Contents%20Macros%20(Examples)

For your purposes, you probably want to use the `<<toc-selective-expandable ...>>` macro.

enjoy,

-e

[Kyle Yates]

Thank you both so much! Either option seems like it'll do what I want with a bit of adjusting! It's hard to believe I was overcomplicating this so much, but I suppose it's as they say and all of the world really is just a nail when all you have is a hammer. I guess now I just have to decide between having the triangles that I want or having the list easily expanded using the tags system.

  

Using details has this quirk that the em2 margin applies to everything, though I've fixed it by removing the * from .indent_details  *{

  

Using Table of Contents gave me numbers that I thankfully already knew how to remove from my past muddlings: 

<style>ol {list-style-type: none;}</style>

<<toc-selective-expandable "TableOfContents" "sort[tocpos]">>

tocpos is just a value I made up so I can assign value 1 to Home and 2 to Character Advancement, a bit messy but it seems I can use decimals if I need to jam something in the middle later. This way I get whatever arbitrary sorting I want instead of going purely alphabetical (looks like it uses the alphabet for tie breakers which is nice). Unlike with [[Home|SQPFSRD]] that I can put in details I had to make a Home page to contain {{SQPFSRD}} and add that to my table instead, but most of my pages won't need this treatment (I could just rename the page, but having this option as well is reassuring).

Leaning towards Table of Contents purely for how much less work it is. I suppose now my goal is figuring out how to style the ToC so that it doesn't indent as far, and maybe getting it to use triangles somehow.

[Charlie Veniot]

That's good stuff.

If you like to tag content for a menu to be automatic reflect the content, the built-in stuff in TiddlyWiki is right awesome.

Me, I tend to like control on my menus, adding menu items which then take me to the content.

It is a bit like one approach is bottom up, and the other is top down.  (Not sure which would be which.)  Either way equally good, probably a difference in right-brain versus left-brain thinking.  Maybe more so the purpose of the menu.  Meh ...

That details thing I suggested, that was very rough around the edges, just to throw the quick thought together.  It could be oh-so-sweet with some proper design.  But only of value if you're of a "menu-first-towards-content" mindset versus "content-first-towards-menu" mindset.

Either way, so much fun !

[Paul Hampshire]

I use tiddlywiki's for a lot of rpg stuff and it can be a challenge to come up with unique name for some of the tiddlers and fields. If you add a caption field to a tiddler the table of contents macro will display it instead. That can help clean things up.

[Kyle Yates]

I hadn't run into the issue with duplicate names yet, but when I get to class archetypes I'm going to need dozens of duplicates so thank you! Saved me from a future headache. :)