Discussion:
[tw] Re: [TW5] Unwanted behaviour when clicking duplicated tag pills
Thomas Woite
2016-01-30 22:31:12 UTC
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 -- 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 ***@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/61a37e9c-d2b9-4962-ab4f-3060af1527a1%40googlegroups.com. For more options, visit https://groups.google.com/d/optout. Eric Shulman 2016-01-30 23:30:24 UTC Permalink Post by Thomas Woite 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. Post by Thomas Woite 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. Post by Thomas Woite 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/tagtitle$$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 -- 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 ***@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d33e4093-988d-4319-8399-d5738e241746%40googlegroups.com. For more options, visit https://groups.google.com/d/optout. Thomas Woite 2016-01-31 12:26:09 UTC Permalink 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 Post by 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. Post by Matabele The problem is that the state="..." param in the reveal widget *must* be the same value as the popup="..." param in the corresponding button <button popup=<<qualify """state""">>... <reveal state=<<qualify """state""">> ... <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 Post by Matabele ... 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 <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 tasklisk template, 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, 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>>/>
--
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 ***@googlegroups.com.
Tobias Beer
2016-01-31 16:42:29 UTC
Hi Thomas,

The appear widget from the plugin tobibeer/appear
<http://tobibeer.github.io/tw5-plugins/#appear>
makes popups and state handling easy as pie
...and then some.

Best wishes,

Tobias.
--
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 ***@googlegroups.com.
stevesuny
2016-02-12 21:29:10 UTC
Hello every, but especially Tobias :)

I'm trying to implement the plubin tobibeer/appear
<http://tobibeer.github.io/tw5-plugins/#appear> at {{DesignWrite}}
<https://dl.dropboxusercontent.com/s/tk91wqty552z6z1/designwrite.html?dl=0#Appear>,
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.
Post by Tobias Beer
Hi Thomas,
The appear widget from the plugin tobibeer/appear
<http://tobibeer.github.io/tw5-plugins/#appear>
makes popups and state handling easy as pie
...and then some.
Best wishes,
Tobias.
--
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 ***@googlegroups.com.
Tobias Beer
2016-02-13 08:48:22 UTC
Hi Steve,

<< """before <$appear> Haha,m :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 <http://tobibeer.github.io/tw5-plugins/#%24%3A%2F.tb%2Fmacros%2F%60> 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. -- 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 ***@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/cbeb8002-6c73-4509-a367-8557a7262b4d%40googlegroups.com. For more options, visit https://groups.google.com/d/optout. Hegart Dmishiv 2016-02-13 09:04:16 UTC Permalink Hi Steve, Further to Tobias's answer, I have created a tiddler in my own {{DesignWrite}} wiki <https://dl.dropboxusercontent.com/s/y5yubous01eyifc/HegartDmishiv-on-DesignWrite.html#appear%20%C2%BB%20Examples> 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. Post by stevesuny Hello every, but especially Tobias :) I'm trying to implement the plubin tobibeer/appear <http://tobibeer.github.io/tw5-plugins/#appear> at {{DesignWrite}} <https://dl.dropboxusercontent.com/s/tk91wqty552z6z1/designwrite.html?dl=0#Appear>, 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 << """before <$appear>
Some more text.</$appear> after""">> and have it work, but perhaps not? Thanks, //steve. Post by Tobias Beer Hi Thomas, The appear widget from the plugin tobibeer/appear <http://tobibeer.github.io/tw5-plugins/#appear> makes popups and state handling easy as pie ...and then some. Best wishes, Tobias. -- 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 ***@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9819367b-8a7f-47b1-a21d-dc6358ddcd8b%40googlegroups.com. For more options, visit https://groups.google.com/d/optout. Tobias Beer 2016-02-13 12:40:40 UTC Permalink Hi Hegart, would come in from your$:/plugins/tobibeer/appear/styles
<https://dl.dropboxusercontent.com/s/y5yubous01eyifc/HegartDmishiv-on-DesignWrite.html#%24%3A%2Fplugins%2Ftobibeer%2Fappear%2Fstyles>
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
<https://dl.dropboxusercontent.com/s/y5yubous01eyifc/HegartDmishiv-on-DesignWrite.html#appear%20%C2%BB%20Examples>.
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.
--
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 ***@googlegroups.com.
Hegart Dmishiv
2016-02-13 13:22:14 UTC
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.
Post by Tobias Beer
Hi Hegart,
would come in from your $:/plugins/tobibeer/appear/styles <https://dl.dropboxusercontent.com/s/y5yubous01eyifc/HegartDmishiv-on-DesignWrite.html#%24%3A%2Fplugins%2Ftobibeer%2Fappear%2Fstyles> 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 <https://dl.dropboxusercontent.com/s/y5yubous01eyifc/HegartDmishiv-on-DesignWrite.html#appear%20%C2%BB%20Examples>. 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. -- 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 ***@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4fb4b5a7-47e3-4412-91b1-a51180d7ff31%40googlegroups.com. For more options, visit https://groups.google.com/d/optout. Matabele 2016-01-31 03:25:19 UTC Permalink 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
Post by 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.
--
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 ***@googlegroups.com.