[Help] Using Macros inside of Macros?

#1

So, I’ve made this details widget that pairs well with tables and lists,
(well- one’s that are set to use 14px font-size and 22px line-height…)

When I use it though, I can’t place one inside another any deeper than two levels.

for instance:

<<jmh-details 'open'
'Summary Level 1'
'''
	<<jmh-details "open"
	"Summary Level 2"
	"""
		Placing another inside would cause them to break.
	"""
	>>
'''
>>

Is there a way to fix this, or is it just the trade off of the convenience of widgets?

I’ve attached the related files for those who want to see how I have it set up. I still have more to improve on, for instance, I need to change the values to use the font-size set in the tiddler, as having font that isn’t 14px causes the <details> to not connect to tables.

jmh-details_Tiddlers.json (1.7 KB)

#2

This is not widget but a macro, To have nesting within a macro you need a recursive macro, a macro that calls itself.

I suppose what you want as an outcome can be imagined, but could you explain what you want rather than just the way you failed to achieve it?

#3

Sure!

So, my goal is to have the ability to use my macro to create togglable sections, using the details tag with some CSS, to either nest them as deep as I wish, or to have them one after the other in a seemless, table-like design.

Something like below is my end goal, I’m not sure what a recursive macro is, but I’d be happy to learn!

<<jmh-details 'open'
'summary 1'
'''
Text Here!
'''
>><!-- 

sidenote, if there is a way I can connect these without having to have the double angle brackets touching would be nice, but not necessary. 

--><<jmh-details 'open'
'summary 2'
'''
	<<jmh-details 'open'
	'summary 2a'
	'''
		<<jmh-details 'open'
		'summary 2aa'
		'''
		Text Here!
		'''
		>>
	'''
	>><<jmh-details 'open'
	'summary 2b'
	'''
	Text Here!
	'''
	>>
'''
>>

In normal HTML it would appear as:

<details class="jmh-details" open>
	<summary>Summary 1</summary>
	<p>
		Text Here!
	</p>
</details>
<details class="jmh-details" open>
	<summary>Summary 2</summary>
	<p>
		<details class="jmh-details" open>
		<summary>Summary 2a</summary>
			<p>

				<details class="jmh-details" open>
				<summary>Summary 2aa</summary>
					<p>
						Text Here!
					</p>
				</details>
			</p>
		</details>
		<details class="jmh-details" open>
		<summary>Summary 2b</summary>
			<p>
				Text Here!
			</p>
		</details>
	</p>
</details>

Also, here is the fix for the wonky font-size and line-height issue, You should be able to drop this into an empty tiddlywiki and press alt+d to paste in the macro.

jmh-details_Tiddlers_Corrected.json (1.8 KB)

Hope this helps!

#4

Thanks for your responce;

My first observation would be why not just use the html details directly?

How would you implement this?

  • such as with an editor toolbar button? Eg stamp
  • what do you gain with a macro?

I will give it some more thought

#5

Hm, well- I chose to do it using a macro just for less text on the page to make it easier to see, but it might just be easier to use it in bare html instead like you suggest.

Yes! I have a keyboard shortcut to paste it in from the editor toolbar, the key combo is alt+d!

Now my only struggle is getting it to apply padding to the paragraphs inside of it, and not to the details tag themselves. hmm…

#6

Do you know you need an empty line between html and wikitext to ensure rendering takes place in block mode?; eg

<details><summary></summary>

wikitext
</details>

Or

<details><summary></summary>
<p>

wikitext
</p>
</details>

Before we take it further,

  • Do consider the details widget plugin in part or whole. Not sure if it can be nested though.
    • a key feature is it can maintain your toggle states

However you do it, we need to decide

  • how you go about nesting your content such that the solution know what is what.
  • Then “parse” the content into the separate nested outputs.

My thoughts on this so far;

I can see such a parser would be helpful, but I would be tempted to generalise it further for all the work that is needed.

  • So the parser needs to be similar to the TOC macros which call themself

First level displays the beginning of the first

<details><summary></summary>
content up to next macro or widget or end of macro or `</details>`

Then calls itself for the next details/widget

Than any additional content
</details>

There is in the back of my mind a much easier and more elegant way to achieve what you ask.

#7

I’m not entirely sure what you mean by this, could you reword it?

I was aware of it, and decided against it, as I just wanted vanilla details, just styled to look as though they were the headers of tables, so that I could collapse tables and preserve storyriver space.

In the end, to save myself the trouble I’ve decided to use vanilla HTML elements, and paste them in using a keyboard shortcut. It’ll be a bit of a hassle if for instance I make a change to how I set up one of the details elements (ie, adding a class to a previously classless tag) but that shouldn’t be that bad if I plan ahead.

#8

Do as you wish,

  • An editor toolbar button that wraps your text with the details html would help.

I am thinking about the challenge a little more.

Keep in mind you can use a stylesheet to target the html details tag without setting a style or class, but for safety give it a little specificity.

  • perhaps you wrap the whole thing in a <div class="nested-details">then your CSS applies only to <details> that are the children of the nested-details class. (I know this will work but it will take time for me to do it, @TiddlyTweeter could tell us.
  • Exactly as I said, if you do not have a blank line after any html including <hr> but in this case <details><summary>summary</summary> before you have text/or wikitext, the display will get “corrupted” as it displays in inline mode not block mode (multiline mode), and will fail to render the wikitext.
  • See in my examples there is a blank line before “wikitext”.
#9

Sorry, I thought you were asking whether or not I needed it, yes I’m aware of the requirements for it to work correctly! I admit sometimes I do mistype things and cause it to mess up :sweat_smile:

This is actually what I am currently doing. I’m having a little bit of trouble with selecting p elements that do not contain details elements, but I can elaborate on that when I return.

EDIT: Thank you @pmario for updating the discussion title, I didn’t think to do that :sweat_smile: