Problem with passing the value of the "status" variable in a procedure with a "details" element

[JuanPalomo]

Hello everyone.

I’m having a problem generating the Admonitions macro with the details element and the “open” status.
If I do it with normal macro syntax, everything works as it should.

Sample code:

\define callout(type:"note", src, title, model, status, width:"100%", class)
<$let theme-class   = {{{ [[$:/palette]get[text]get[color-scheme]else[light]addprefix[theme-]] }}} 
      callout-title = {{{ [<__title__>!is[blank]] :else[<__type__>titlecase[]]  }}}
      callout-model = {{{ [<__model__>!is[blank]addprefix[-]] }}}
      icon-tiddler  = {{{ [all[tiddlers+shadows]tag[$:/tags/TimitAdmonitions/Image]contains:callout-type<__type__>]
                        :else$:/plugins/timit/admonitions/images/note }}}
      source        = {{{ [<__src__>get[text]else<__src__>] }}} >
<div class=<<theme-class>> style="width:$width$;">
<details data-callout=<<__type__>>class={{{ [[callout]addsuffix<callout-model>] }}} $status$>
<summary class="callout-title">
<div class="callout-icon"><$transclude tiddler=<<icon-tiddler>> field=text/></div>
<div class="callout-title-inner"><<callout-title>></div>
<div class="callout-fold">{{$:/plugins/timit/admonitions/images/chevron}}</div>
</summary>
<div class="callout-content">
<$transclude tiddler=<<source>> field=title mode=block />
</div>
</details>
</div>
</$let>
\end callout

But if I do it with procedure syntax, it no longer works, and the status value is passed correctly, according to what I’ve seen in the documentation and other threads discussing this case.

This is the code I’m using:

\procedure callout(type:"note", src, title, model, status, width:"100%", class)
<$let theme-class   = {{{ [[$:/palette]get[text]get[color-scheme]else[light]addprefix[theme-]] }}} 
      callout-title = {{{ [<title>!is[blank]] :else[<type>titlecase[]]  }}}
      callout-model = {{{ [<model>!is[blank]addprefix[-]] }}}
      icon-tiddler  = {{{ [all[tiddlers+shadows]tag[$:/tags/TimitAdmonitions/Image]contains:callout-type<type>]
                        :else$:/plugins/timit/admonitions/images/note }}}
      source        = {{{ [<src>get[text]else<src>] }}} >
<div class=<<theme-class>> style="width:$width$;">
<details data-callout=<<type>> class=`callout$(callout-model)$` $(status)$ >
<summary class="callout-title">
<div class="callout-icon"><$transclude tiddler=<<icon-tiddler>> field=text/></div>
<div class="callout-title-inner"><<callout-title>></div>
<div class="callout-fold">{{$:/plugins/timit/admonitions/images/chevron}}</div>
</summary>
<div class="callout-content">
<$transclude tiddler=<<source>> field=title mode=block />
</div>
</details>
</div>
</$let>
\end callout

This is to find out what the problem is, since macros using the old method work perfectly for me. But I tried doing it with procedures to document it, and I ran into this problem.

Since I’m not sure if I’m making a mistake, due to my lack of programming knowledge, I’ve tried following other examples I’ve seen to do a “creative” programming exercise. But it didn’t work for me either.

I’ll leave the alternative suggestions here:

<details data-callout={{{ <<type>> class=`callout$(callout-model)$` [<status>mach[open]then[open]] +[join[  ]] }}}

<details data-callout=<<type>> {{{class=`callout$(callout-model)$` [<status>mach[open]then[open]] +[join[  ]] }}}>

<details data-callout=<<type>> class=`callout$(callout-model)$` [<status>mach[open]then[open]] >

Best regards

[Sunny]

Hi @JuanPalomo
i haven’t used your Admonitions yet

Your sample code looks to me as if there is a spelling mistake.
Correct me if I’m wrong but should
<status>mach[open not read <status>match[open

<details data-callout={{{ <<type>> class=callout$(callout-model)$ [<status>mach[open]then[open]] +[join[ ]] }}}

[tw-FRed]

Procedures will no longer substitute raw parameter values everywhere like macros did using $(paramname)$ syntax.

Inside procedures, parameters are made available as variables.

These variables, like any other variable, can be inserted inside wikitext using the <$transclude> widget, or its shortcut syntax <<variable>>.

For attribute values, it’s also possible to use substitution syntax like this:

<tag attributeName=`blah $(variableName)$ blah`> ... </tag>

Note that the substitution happens only on the right-side of the = sign, which is the value. It won’t work on the left-side of =, which is the attribute name (whether there is a value or not, like the open attribute of the details tag which has no value).

In your procedure code, this line uses 3 variable substitution attempts:

<details data-callout=<<type>> class=`callout$(callout-model)$` $(status)$ >

• The data-callout=<<type>> part is OK, because the attribute value is the whole type variable value
• The class=`callout$(callout-model)$` part is OK, because the backquote substitution syntax is used for the attribute value
• The $(status)$ part doesn’t work because what you try to do is to add an attribute, not its value. This kind of raw substitution isn’t available inside procedures.

The solution here is to wrap the <details> tag inside a <$genesis> widget like I suggested in a previous thread.

Fred

[JuanPalomo]

Hi Sunny.

Well, you’re right. I do have a spelling mistake in the “experiments” code. I’ll try correcting it just in case.

Best regards, and thank you.

[JuanPalomo]

Hi tw-FRed.

I understand. Etardiff already told me about this for another case, but it was different because it changed the value of one parameter to another in a regular variable, and it couldn’t be done directly. I’ll take another look at the explanations because when I make the modifications with the translated macro parameters, I’ll definitely have to use “genesis.”

Best regards, and thank you.

[etardiff]

Actually, the variable names were a bit of a red herring: the real issue (there and here) was that the details element needs special handling for the open attribute. This requires either a substituted macro parameter in $param$ format (as Mohammad does in his Shiraz version; note that this won’t work in a procedure) or the $genesis widget solution we discussed in the previous thread. So you should be able to largely reuse the code I gave you there, changing variable names as necessary.

[Springer]

I too have struggled with getting the html details to have something like a conditional open parameter!

One other option — if the $param$ or $genesis approaches are too much of a learning curve — is just to duplicate most of your <details> code, and use an <% if %> conditional shortcut syntax framing to cope with the difference between the open / abierto condition and its alternative.

[Scott_Sauyet]

@Springer

One other option [ … ] is just to duplicate most of your <details> code, and use an <% if %> conditional shortcut syntax framing to cope with the difference between the open / abierto condition and its alternative.

You can do this without only a little duplication by extracting the contents inside the <details> element into its own procedure.

\procedure callout-body()
<summary class="callout-title">
<div class="callout-icon"><$transclude tiddler=<<icon-tiddler>> field=text/></div>
<div class="callout-title-inner"><<callout-title>></div>
<div class="callout-fold">{{$:/plugins/timit/admonitions/images/chevron}}</div>
</summary>
<div class="callout-content">
<$transclude tiddler=<<source>> field=title mode=block />
</div>
\end

\procedure callout(type:"note", src, title, model, status, width:"100%", class)
<$let theme-class   = {{{ [[$:/palette]get[text]get[color-scheme]else[light]addprefix[theme-]] }}} 
      callout-title = {{{ [<title>!is[blank]] :else[<type>titlecase[]]  }}}
      callout-model = {{{ [<model>!is[blank]addprefix[-]] }}}
      icon-tiddler  = {{{ [all[tiddlers+shadows]tag[$:/tags/TimitAdmonitions/Image]contains:callout-type<type>]
                        :else$:/plugins/timit/admonitions/images/note }}}
      source        = {{{ [<src>get[text]else<src>] }}} >
<div class=<<theme-class>> style="width:$width$;">
<% if [<status>match[open]] %>
<details data-callout=<<type>> class=`callout$(callout-model)$` open><<callout-body>></details>
<% else %>
<details data-callout=<<type>> class=`callout$(callout-model)$`><<callout-body>></details>
<% endif %>
</div>
</$let>
\end callout

Now only the open and close elements for <details> and the call to the new procedure are duplicated between the <% if / else %> branches.

---

One other option not discussed yet is to replace the <details> element with a $reveal widget. I remain a fan of <details>, but $reveal seems a little more in keeping with the rest of TW, where most hide-show decisions are remembered, at least for the session.

[JuanPalomo]

Thanks so much for the sample code, Scott.

I’m sure that between what I’m learning and the different options I have, I’ll come up with some decent code.

Best regards.

[Springer]

@Scott_Sauyet

One other option not discussed yet is to replace the <details> element with a $reveal widget. I remain a fan of <details>, but $reveal seems a little more in keeping with the rest of TW, where most hide-show decisions are remembered, at least for the session.

Indeed. For years I relied on the <$details> plugin by telmiger, which did have great flexibility for letting the “open” parameter be responsive to conditions. But I have switched to using standard html details exclusively, largely because I wanted to be able to lift or export bits of html form TiddlyWiki, for use in other html environments.

There are many factors that can influence our choice as to what’s the best tool for the job at hand!