Navigation with $Button and $Reveal

#1

I am reworking my in tiddler navigation layout with $button and $reveal and wonder if I am missing an easier way to manage a menu and submenu within a very large tiddler. All data is contained within a single tiddler with the exception of transcluding of the various echarts tiddlers.

Needs to be node and single file compatible.

Mock-up is here: https://wvwlogs.com/#TestLayout

No real data, just png/text placeholders.

Current version example that I am looking to rework is here:https://flux.wvwlogs.com/#20230419-WvW-Log-Review

#2

My first thought is that this seems like a good place for the tabs macro, which you can certainly style to look more like buttons, if you prefer. In fact, if you look at the macro code, that’s essentially what it is: a dynamic way to generate buttons and reveal widgets.

You’d need to either split your data up across tiddlers (one per tab/sub-tab) or use a template to generate the content displayed by each tab in a programmatic way, but it would save you a lot of time hard-coding your own buttons and reveal widgets. And it’s generally good practice to split content into “smallest reusable units” anyway; it makes it much easier if you decide you want to reorganize in the future.

1 Like
#3

Not a popular approach, but here’s one to look at for the giggles:

BASIC Anywhere Machine User Guide and Programming Reference

#4

In your mockup, you did remove the edit button. So it’s hard to see the code of your tiddlers. How can we enable the edit button?

#5

Thanks for pointing that out, makes the mockup pointless for seeing the implementation. I don’t think I can enable the edit button based on the way I have the credentials set for the server.

abbreviated version:

<$button class="btn btn-sm btn-dark" style=""> <$action-setfield $tiddler="$:/state/MenuTab" $field="text" $value="General"/> <$action-setfield $tiddler="$:/state/SubMenulTab" $field="text" $value="Overview Summary"/> General </$button>
<$button class="btn btn-sm btn-dark" style=""> <$action-setfield $tiddler="$:/state/MenuTab" $field="text" $value="Offensive"/> <$action-setfield $tiddler="$:/state/SubMenulTab" $field="text" $value="Offensive Stats"/> Offensive </$button>
<$button class="btn btn-sm btn-dark" style=""> <$action-setfield $tiddler="$:/state/MenuTab" $field="text" $value="Defensive"/> <$action-setfield $tiddler="$:/state/SubMenulTab" $field="text" $value="Defensive Stats"/> Defensive </$button>
<$button class="btn btn-sm btn-dark" style=""> <$action-setfield $tiddler="$:/state/MenuTab" $field="text" $value="Support"/> <$action-setfield $tiddler="$:/state/SubMenulTab" $field="text" $value="Healing"/> Support</$button>
<$button class="btn btn-sm btn-dark" style=""> <$action-setfield $tiddler="$:/state/MenuTab" $field="text" $value="Boons"/> <$action-setfield $tiddler="$:/state/SubMenulTab" $field="text" $value="Stability"/> Boons</$button>
<$button class="btn btn-sm btn-dark" style=""> <$action-setfield $tiddler="$:/state/MenuTab" $field="text" $value="Dashboard"/> <$action-setfield $tiddler="$:/state/SubMenulTab" $field="text" $value="Bubble Charts"/> Dashboard</$button>

<$reveal type="match" state="$:/state/MenuTab" text="General">

---
<$button setTitle="$:/state/SubMenulTab" setTo="Overview Summary" selectedClass="" class="btn btn-sm btn-dark" style=""> Overview </$button>
<$button setTitle="$:/state/SubMenulTab" setTo="Fight Review" selectedClass="" class="btn btn-sm btn-dark" style=""> Fight Review</$button>
<$button setTitle="$:/state/SubMenulTab" setTo="Spike Damage" selectedClass="" class="btn btn-sm btn-dark" style=""> Spike Damage</$button>
<$button setTitle="$:/state/SubMenulTab" setTo="Squad Composition" selectedClass="" class="btn btn-sm btn-dark" style=""> Squad Composition</$button>
<$button setTitle="$:/state/SubMenulTab" setTo="Attendance" selectedClass="" class="btn btn-sm btn-dark" style=""> Attendance</$button>
<$button setTitle="$:/state/SubMenulTab" setTo="Support Players" selectedClass="" class="btn btn-sm btn-dark" style=""> Support Players</$button>
<$button setTitle="$:/state/SubMenulTab" setTo="Distance to Tag" selectedClass="" class="btn btn-sm btn-dark" style=""> Distance to Tag</$button>
<$button setTitle="$:/state/SubMenulTab" setTo="On Tag Review" selectedClass="" class="btn btn-sm btn-dark" style=""> On Tag Review</$button>

</$reveal>

<$reveal type="match" state="$:/state/SubMenulTab" text="Overview Summary">

!!Overview Summary Placeholder
{{Overview.PNG}}

</$reveal>

<$reveal type="match" state="$:/state/SubMenulTab" text="Fight Review">

!!Fight Review Placeholder

</$reveal>

<$reveal type="match" state="$:/state/SubMenulTab" text="Spike Damage">

!!Spike Damage Placeholder

</$reveal>

full version less placeholder png’s
TestLayout.json (15.5 KB)