Discussion:
[tw] Re: [TW5] Unwanted behaviour when clicking duplicated tag pills
(too old to reply)
Thomas Woite
2016-01-30 22:31:12 UTC
Permalink
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/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
--
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.
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/97ae29e1-53fd-41cf-8f75-999c42428ae2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Tobias Beer
2016-01-31 16:42:29 UTC
Permalink
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/64983a1b-b789-4568-a928-ede3565f5547%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
stevesuny
2016-02-12 21:29:10 UTC
Permalink
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.
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/2d1e36b4-893f-423d-9ab9-31a234ba91b5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Tobias Beer
2016-02-13 08:48:22 UTC
Permalink
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 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.
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.
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/2e53d4b5-cc8d-4338-adf6-c79a30a4fc60%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Hegart Dmishiv
2016-02-13 13:22:14 UTC
Permalink
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.
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/e733d8a3-141f-40ae-9e3e-2a5e3b71a8a9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Loading...