Has anyone tried having tags dropdown display as TOC?

,
#1

I’m not entirely sure how difficult it might be to do so, but has anyone attempted to change the template for the tags dropdown popup to use the tag in question as the tag for a toc dropdown list?

I took a brief look through the tags system tiddlers and, well I would be lying if I said I knew where to start, but I’m curious if it’s possible.

If so, I’d like to help create it, if just to see how well it performs for someone who uses a tw like I do (primarily relying on tags, that is.)

#2

You can test this pretty easily by editing $:/core/ui/TagTemplate. The part of the template responsible for generating the list of links is <$macrocall $name="list-tagged-draggable" tag=<<currentTiddler>>/>, which you can replace with your preferred TOC macro. I tested it with toc-selective-expandable:

\whitespace trim

<style>
.tc-drop-down li.toc-item button { display: inline-block; width: fit-content; padding: 0; }
</style>

<span class="tc-tag-list-item" data-tag-title=<<currentTiddler>>>
<$set name="transclusion" value=<<currentTiddler>>>
	<$macrocall $name="tag-pill-body"
		tag=<<currentTiddler>>
		icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
		colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
		palette={{$:/palette}}
		element-tag="$button"
		element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter="[all[current]tagging[]]" tag='span'"""
	/>
	<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes" class="tc-drop-down">
		<$set name="tv-show-missing-links" value="yes">
			<$transclude tiddler="$:/core/ui/ListItemTemplate"/>
		</$set>
		<$list filter="[all[shadows+tiddlers]tag[$:/tags/TagDropdown]!has[draft.of]]" variable="listItem"> 
			<$transclude tiddler=<<listItem>>/> 
		</$list>
		<hr>
		<$macrocall $name="toc-selective-expandable" tag=<<currentTiddler>>/>
	</$reveal>
</$set>
</span>

Here’s a JSON of the above code if you’d like to test it: $ _core_ui_TagTemplate.json (1.4 KB). I started from the prerelease, but it seems to work with 5.3.3 as well.

In addition to the macrocall I changed, I also added a line of CSS to prevent the TOC carets from appearing on a separate line (as all buttons do by default in the tag dropdown). You may want to make some further CSS tweaks to get it looking the way you want—and ideally, you’ll move the CSS from the <style> tags I added into a separate tiddler with the $:/tags/Stylesheet tag.

You’ll notice that in replacing the list-tagged-draggable macro, we lost the ability to reorder the tagged tiddlers through drag-and-drop. I imagine you could keep list-tagged-draggable and use its itemTemplate attribute to render each list item as the head of a TOC, but it’s probably easier just to use one of Eric’s alternate TOC macros as discussed in this recent thread, since he already has drag-and-drop functionality built in.

I hope this is enough to get you started!

1 Like
#3

Nice POC – If you cover the whole thing in a SPAN with a class tc-table-of-contents as shown below, the redundant numbering goes away and you have a working TOC inside the tag pills

		<span class="tc-table-of-contents">
			<$macrocall $name="toc-selective-expandable" tag=<<currentTiddler>>/>
		</span>
2 Likes
#4

I did change it a bit more. It’s now possible to toggle the display between tag-mode and toc-mode.
The code is a bit hacky atm but it’s cool.

$ _core_ui_TagTemplate-tag-toc.json (2.1 KB)

2 Likes
#5

Thanks pmario! Very fun et useful hack

1 Like
#6

Hi Jean Philippe,
Thanks for the kind words and welcome to the community. All “kudos” go to @etardiff for the initial work.

1 Like
#7

Ahh, Finally back~ unfortunately I couldn’t check this out sooner thanks to a certain feline knocking over my laptop. RIP pocket change. 🥲

And, this way is cooler than I expected it to be haha

I am currently tinkering with it in hopes of removing the odd behavior from it closing the dropdown when you toggle the arrows (as by default all of the arrows seem to be closed) but otherwise, I’d say it is less a POC and a completely usable modification, or mini plugin I suppose. (still not 100% sure on how complex something should be in order to classify as a plugin, but that’s a topic for another time.)

#8

It does not close the dialogue if you click the Chevron. It only closes the popup if the mode is changed.

#9

According to pop-ups see the docs button widget parameter: popup and the popup mechanism.
The renewal widget needs a tc-popup-keep class

1 Like