[TW5] Unwanted behaviour when clicking duplicated tag pills

[Alberto Molina]

Hi everybody,

When you have the same tag pill repeated several times in a tiddler, then clicking on it opens several dropdowns. This (little) problem is not specific to 5.0.9

For instance:

• Go to http://tiddlywiki.com
• Create a new tiddler with the following content:

{{introduction||$:/core/ui/TagTemplate}}

{{introduction||$:/core/ui/TagTemplate}}

{{introduction||$:/core/ui/TagTemplate}}

• Click on any of the tag pills:
• you will see 3 dropdowns instead of only 1 for the tag pill you have clicked.

(By the way, I like very much 5.0.9. Thanks!)

Alberto

[Jeremy Ruston]

Hi Alberto

> When you have the same tag pill repeated several times in a tiddler, then clicking on it opens several dropdowns. 

The problem is that each of the tag pill dropdowns is referencing the same state tiddler. If you can arrange things so that each tag pill is within a separate transclusion then they will be assigned different state tiddlers, and will no longer be coupled together.

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[Alberto Molina]

The problem is that each of the tag pill dropdowns is referencing the same state tiddler. If you can arrange things so that each tag pill is within a separate transclusion then they will be assigned different state tiddlers, and will no longer be coupled together.

Ok, I'll try to have them in separate transclusions (but inside the same tiddler).

Thanks!

Alberto

[Danielo Rodríguez]

I don't understand the concept of separated transclusions. I have similar problems so if you explain the solution to me I will be grateful.

[Jeremy Ruston]

Hi Danielo

On Thu, Apr 17, 2014 at 7:53 PM, Danielo Rodríguez <rdan...@gmail.com> wrote:

I don't understand the concept of separated transclusions. I have similar problems so if you explain the solution to me I will be grateful.

To understand what's going on here you need to understand how the qualify macro is used. As the docs say, given a base string it returns a tiddler title that is unique to the current position in the tree of transclusions. Conversely, if you call the qualify macro with the same base string twice within the same transcluded tiddler, then you'll get the same tiddler title back.

So, if you want to keep tag pills independent, you have to make sure that they are given a different state title by the qualify macro, which is done by arranging them into different transclusions.

The tabs macro copes with this situation by providing an additional `state` parameter that can be used to distinguish between multiple invocations of the tabs macro in the same tiddler.

We need to refactor the tag pill template into a macro so that we can add that additional parameter.

Best wishes

Jeremy.

 

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Thomas Woite]

Hi all,

I am all knew to tiddlywiki and facing the same problem. I try to use the task example from the TW5 Homepage and enhance it, so that right next to each task I can see the tags attached to this tiddler.

Maybe my understanding of what excactly "different transclusions mean" is all wrong and i can't get it fixed.

<$list filter="[!has[draft.of]tag<currentTiddler>!tag[done]sort[created]]">

<$checkbox tag="done"> <$link to={{!!title}}><$view field="title"/></$link></$checkbox>

<$list filter="[all[current]tags[]sort[title]] +[remove[Task todo]] " storyview="pop">

  {{||$:/core/ui/TagTemplate}}

</$list>

</$list>

Isn't what I am doing in the inner list (the {{||}} call of the tag template a seperate transaclusion for each single tag? Or am I on the wrong track here somehow?

 Nevertheless I tried to build on Jeremys comment, that the tag template in difference to the tab macro does not have the ability to define a custom state.

I tried my own version of the tag template and enhanced the macros with a custom state parameter to be passed in, but all I accomplished was, that the click on my tags

did not give any result at all. No popup, nothing.

// my altered version of the tag-body-inner macro
[...]

\define tag-body-inner(colour,fallbackTarget,colourA,colourB, state)

<$set name="foregroundColor" value=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">>>

<$set name="backgroundColor" value="""$colour$""">

<$button popup=<<qualify "$state$">> class="tc-btn-invisible tc-tag-label" style=<<tag-styles>>>

<$transclude tiddler={{!!icon}}/> <$view field="title" format="text" />

</$button>

<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes"><div class="tc-drop-down"><$transclude tiddler="$:/core/ui/ListItemTemplate"/>

<hr>

<$list filter="[all[current]tagging[]]" template="$:/core/ui/ListItemTemplate"/>

</div>

</$reveal>

</$set>

</$set>

\end
[...]

The state parameter I am passing in is build in a own macro, concatenated from a the tiddler title and the current tag

\define createTag(title, tag)

<$set name="id" value="$:/state/popup/tag$title$$tag$">

<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}  state=$(id)$/>

</$set>

\end

Am I completely off track here?

Regards,

Thomas

[Eric Shulman]

On Saturday, January 30, 2016 at 2:31:12 PM UTC-8, Thomas Woite wrote:

 

Isn't what I am doing in the inner list (the {{||}} call of the tag template a seperate transaclusion for each single tag? Or am I on the wrong track here somehow?

That seems correct.  The transclusion creates a separate branch in the parse tree, so any <<qualify>> macros it contains will produce a unique hash value for each tag template that is transcluded by the $list widget.

 Nevertheless I tried to build on Jeremys comment, that the tag template in difference to the tab macro does not have the ability to define a custom state.

I tried my own version of the tag template and enhanced the macros with a custom state parameter to be passed in, but all I accomplished was, that the click on my tags

did not give any result at all. No popup, nothing.

// my altered version of the tag-body-inner macro
[...]

\define tag-body-inner(colour,fallbackTarget,colourA,colourB, state)

<$set name="foregroundColor" value=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">>>

<$set name="backgroundColor" value="""$colour$""">

<$button popup=<<qualify "$state$">> class="tc-btn-invisible tc-tag-label" style=<<tag-styles>>>

<$transclude tiddler={{!!icon}}/> <$view field="title" format="text" />

</$button>

<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes"><div class="tc-drop-down"><$transclude tiddler="$:/core/ui/ListItemTemplate"/>

<hr>

<$list filter="[all[current]tagging[]]" template="$:/core/ui/ListItemTemplate"/>

</div>

</$reveal>

</$set>

</$set>

\end
[...]

The problem is that the state="..." param in the $reveal widget *must* be the same value as the popup="..." param in the corresponding $button widget.  Thus, you need to write:

<$button popup=<<qualify """$state$""">>...
<$reveal state=<<qualify """$state$""">> ...

or perhaps this would be even better:

<$button popup=<<qualify """$:/state/popup/tag/$state$""">>
<$reveal state=<<qualify """$:/state/popup/tag/$state$""">>

Also, note the use of tripled quotes around the parameters.  This is important, because the $state$ value MIGHT contain a double quote since you are constructing it from a tiddler title, which is allows to have quotes in it.  The triple quotes ensure that any quotes embedded in the value are not treated as a closing delimiter for the parameter itself.

 

The state parameter I am passing in is build in a own macro, concatenated from a the tiddler title and the current tag

\define createTag(title, tag)

<$set name="id" value="$:/state/popup/tag$title$$tag$">

<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}  state=$(id)$/>

</$set>

\end

One small problem here is that you forgot the quotes are $(id)$.  Since the id value MIGHT contains spaces (from the tiddler title), you should write:

... state="""$(id)$"""

Howevr, the much bigger problem here is that you can't use the $(id)$ syntax to insert the value from a variable that was just $set.  Macros do NOT "run" their content and return the output.  Rather, then ONLY expand the $(variable)$ and $param$ references that exist when it is invoked and then return THAT content for processing in the calling context.  Thus, your macro, when called with <<createTag foo bar>> produces this output:

<$set name="id" value="$:/state/popup/tagfoobar">

<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}  state=$(id)$/>
</$set>

Note that the $(id)$ syntax remains, because the variable was NOT defined when the macro was *invoked*.

Fortunately, for this particular use case, there is a proper syntax that WILL work.  Since you are using the variable as a macro param, you can use <<id>> in place of $(id)$:

\define createTag(title, tag)
<$set name="id" value="$:/state/popup/tag$title$$tag$">

<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}  state=<<id>>/>
</$set>
\end

Unlike the $(variable)$ expansion that occurs within macros, <<variable>> references are evaluated whenever they occur in a "wikitext" rendering context, which includes the processing of widget parameter values.  Thus, unlike $(id)$, using <<id>> DOES retrieve the variable value that was just $set.

I hope this makes things a bit clearer....

let me know how it goes.

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

Inside TiddlyWiki: The Missing Manuals

[Matabele]

Hi Thomas

There's a <<tag>> macro which often simplifies things -- for example, try this (in a tiddler with some tags.)

<$list filter="[tags[]]"><<tag>></$list>

This can then be placed within another list -- for example try this on tw5.com:

<$list filter="[tag[Concepts]]">

{{!!title}} <$list filter="[is[current]tags[]]"><<tag>></$list>
</$list>

-- the outer listing uses a filter to select the tiddlers from which you wish to view the tags

-- the inner list then displays the list of tags for the current tiddler

regards

[Thomas Woite]

Hi Eric, hi Matabele,

thank you so much for your very quick and helpfull response.

Summary: it's working now :)

To get more into detail:

@Matabele

There's a <<tag>> macro which often simplifies things -- for example, try this (in a tiddler with some tags.)

<$list filter="[tags[]]"><<tag>></$list>

I tried working with the tag macro as well, but is has the same basic problem. If you have more than one occurence of the same tag  within  the tiddler text, all will open up when you click on the tag pill.

Reason for that imho is, that the tag macro uses the $:/core/ui/TagTemplate as well, so it faces the same qualifier/ state problem metioned above by Alberto and Jeremy.

@Eric:

The problem is that the state="..." param in the $reveal widget *must* be the same value as the popup="..." param in the corresponding $button widget.  Thus, you need to write:

<$button popup=<<qualify """$state$""">>...
<$reveal state=<<qualify """$state$""">> ...


or perhaps this would be even better:

<$button popup=<<qualify """$:/state/popup/tag/$state$""">>
<$reveal state=<<qualify """$:/state/popup/tag/$state$""">>

Thank you so much, for pointing that out. And it does make absolute sense, when I think about it.

Quick question: Why using the $:/state/popup/tag prefix? Is this just best practice to make it obvious that we are dealing with a state here? Or is there more to that? To be honest, I tried to work myself through  http://tiddlywiki.com/static/StateMechanism.html but did not really understand it. :)

One small problem here is that you forgot the quotes are $(id)$.  Since the id value MIGHT contains spaces (from the tiddler title), you should write:

... state="""$(id)$"""

Howevr, the much bigger problem here is that you can't use the $(id)$ syntax to insert the value from a variable that was just $set.  Macros do NOT "run" their content and return the output.  Rather, then ONLY expand the $(variable)$ and $param$ references that exist when it is invoked and then return THAT content for processing in the calling context.  Thus, your macro, when called with <<createTag foo bar>> produces this output:

<$set name="id" value="$:/state/popup/tagfoobar">

<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}  state=$(id)$/>
</$set>

Note that the $(id)$ syntax remains, because the variable was NOT defined when the macro was *invoked*.

I am still somehow struggling on how to call Variables, Parameters, Tiddler-fields in certain situation. Especially for sometimes you have to call the same object like a variable like $(myVar)$ and other times like <<myVar>>. At this point it is usually try and error for me, the documenation and transclusions, variables and parameters helps, but seems not cover all situations.

But anyway: thank you very much for the help.

If somebody is interessted in the final solution, here it is:

1. Transclusion in the target tiddler, where I want to display the results:

{{||$:_/woto/ui/TasklistTemplate}}

 2. The tasklist template ($:_/woto/ui/TasklistTemplate), to show open tasks with their assigned task inline with the task title:

!! Offen 

<$list filter="[!has[draft.of]tag<currentTiddler>!tag[done]sort[created]]">

<$checkbox tag="done"> <$link to={{!!title}}><$view field="title"/></$link></$checkbox>

<$set name="tiddlerTitle" value={{!!title}}>

<$list filter="[all[current]tags[]sort[title]]" storyview="pop">

<$set name="currentTag" value={{!!title}}>

{{||$:_/woto/ui/TagTemplateUnique}}

</$set>

</$list>

</$set>

</$list>

3. and the rewritten tagTemplate($:_/woto/ui/TagTemplateUnique), just to keep it more structured for me. It would probably be better, to put all this in an macro, to make the parameter input more obvious:

\define tag-styles()

background-color:$(backgroundColor)$;

fill:$(foregroundColor)$;

color:$(foregroundColor)$;

\end

\define tag-body-inner(colour,fallbackTarget,colourA,colourB, state)

<$set name="foregroundColor" value=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">>>

<$set name="backgroundColor" value="""$colour$""">

<$button popup=<<qualify """$state$""">> class="tc-btn-invisible tc-tag-label" style=<<tag-styles>>>

<$transclude tiddler={{!!icon}}/> <$view field="title" format="text" />

</$button>

<$reveal state=<<qualify """$state$""">> type="popup" position="below" animate="yes"><div class="tc-drop-down"><$transclude tiddler="$:/core/ui/ListItemTemplate"/>

<hr>

<$list filter="[all[current]tagging[]]" template="$:/core/ui/ListItemTemplate"/>

</div>

</$reveal>

</$set>

</$set>

\end

\define tag-body(colour,palette,state)

<span class="tc-tag-list-item">

<$macrocall $name="tag-body-inner" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}} state="""$state$"""/>

</span>

\end

\define createTag(title, tag)

<$set name="id" value="$:/state/popup/tag/$title$$tag$">

<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}  state=<<id>>/>

</$set>

\end

<$macrocall $name="createTag" title=<<tiddlerTitle>> tag=<<currentTag>>/>

[Tobias Beer]

Hi Thomas,

The appear widget from the plugin tobibeer/appear

makes popups and state handling easy as pie

...and then some.

Best wishes,

Tobias. 

[stevesuny]

Hello every, but especially Tobias :)

I'm trying to implement the plubin tobibeer/appear at {{DesignWrite}}, the wiki serving the TiddlyWiki open course I'm teaching. I've dragged quite a few tiddlers over, but can't quite seem to get the examples to show up appropriately. Any thoughts as to what I've done or not done?

I really like what is happening there, and wanted to provide a simple set of instructions for students to follow to install and them actually use the techniques. But I must not quite understand how it works: I'm looking for copy/paste code. I thought I'd be able to paste this:

<<` """before <$appear>

! Some Heading

Some more text.</$appear> after""">>

and have it work, but perhaps not?

Thanks,

//steve.

[Tobias Beer]

Hi Steve,

<<` """before <$appear>

Haha, :D ...it's simpler much than you think.

Actually, what you do want to copy is not what you find INSIDE the tiddler source in edit-mode, but what is shown when it is rendered :-)

I created and use the ` macro to both show the source-code that is needed as well as the result of it.

So, all you need to do is mark the code in the code-blocks, copy and paste.

No need to actually look at the source-code of those doc tiddlers,

unless, of course, you wanted to figure out how I did that. ;-)

Best wishes.

[Hegart Dmishiv]

Hi Steve,

Further to Tobias's answer, I have created a tiddler in my own {{DesignWrite}} wiki which demonstrates this, using my own copy of your <<hilite>> macro, and my custom <<codeline>> macro to build an example page using Tobi's example code. This way I didn't need to find and copy in Tobi's additional documentation macros. I was just coming back here to post a reply to you but Tobi got there first. ;-)

Hegart.

PS. @TobiBeer, I can't get your CSS working in my wiki, I had assumed it would come in from your $:/plugins/tobibeer/appear/styles sub-tiddler in my TW, but it's not working. See the Simple Slider With Button With Selected Class example in my copy of the appear » Examples tiddler. It's not turning pink for me.

[Tobias Beer]

Hi Hegart,

 

PS. @TobiBeer, I can't get your CSS working in my wiki, I had assumed it would come in from your $:/plugins/tobibeer/appear/styles sub-tiddler in my TW, but it's not working. See the Simple Slider With Button With Selected Class example in my copy of the appear » Examples tiddler. It's not turning pink for me.

Indeed, the pink class indeed is not part of that plugin, because, why would it? It's just a demo. ;-)
The actual css is literally "buried" in the demo tiddler, rather than part of some StyleSheet.

If I was to actually use it, I would sure put it in a suitable stylesheet, of course.

But for a simple, self-contained demo that wasn't needed.

It's possible the demo codeblock doesn't show the css, I should remedy that.
I imagine I didn't put it there to not further the practice of abusing tiddler contents for stylesheets,

since generally I cannot see that as good practice, except for a very constrained particular demo, like this one.

Best wishes, Tobias.

[Hegart Dmishiv]

Sorry Tobias, once again this is a reflection of my naïvety when it comes to programming. I see now that your demo is about "how to use my own CSS with this", and not "how to use Tobias' CSS with this". My mistake. ;-)

Hegart.