How to Control the Generated href via Wikilink

#1

As explained in official docs, one can use core variables to modify the generated href by wikilink.
For example see the nice toolbar button to add a Google calendar event by @vilc here
Button to create Google Calendar event based on the current tiddler - Tips & Tricks - Talk TW (tiddlywiki.org)

The code contains an <a> inside a button.

<$button tooltip={{$:/wilk/buttons/add-to-calendar!!description}} class=<<tv-config-toolbar-class>> actions=<<.addToCalendarActions>> >
	<a href={{{
		[[https://calendar.google.com/calendar/r/eventedit]]
		=[[?text=]]
		=[<currentTiddler>encodeuricomponent[]]
		=[[&details=]]
		=[{$:/info/url/full}append[#]encodeuricomponent[]]
		=[<currentTiddler>encodeuricomponent[]encodeuricomponent[]]
		=[[&dates=]append<now YYYY0MM0DD>append[/]append<now YYYY0MM0DD>]
		+[join[]]
	}}} target="_blank">
		<$list filter="[<tv-config-toolbar-icons>match[yes]]">{{$:/core/images/new-journal-button|1em|G}}</$list>
		<$list filter="[<tv-config-toolbar-text>match[yes]]"><span class=tc-btn-text>Add to calendar</span></$list>
	</a>
</$button>

As explained in doc https://tiddlywiki.com/#tv-wikilink-template%20Variable one can control what is generated for href using tv-wikilink-template for example

\define tv-wikilink-template() ../tiddlers/$uri_encoded$.html

So, I thought one can use something like

\whitespace trim
\function uri_encoded()
		[[https://calendar.google.com/calendar/r/eventedit]]
		=[[?text=]]
		=[<currentTiddler>encodeuricomponent[]]
		=[[&details=]]
		=[{$:/info/url/full}append[#]encodeuricomponent[]]
		=[<currentTiddler>encodeuricomponent[]encodeuricomponent[]]
		=[[&dates=]append<now YYYY0MM0DD>append[/]append<now YYYY0MM0DD>]
		+[join[]]
\end
\define tv-wikilink-template() $uri_encoded$


\procedure addToCalendarActions()
<$fieldmangler>
<$action-sendmessage $message="tm-add-tag" $param="In calendar"/>
</$fieldmangler>
\end


<$button tooltip={{!!description}} class=<<tv-config-toolbar-class>> actions=<<addToCalendarActions>> to=<<currentTiddler>> >
	<$list filter="[<tv-config-toolbar-icons>match[yes]]">{{images/google-calendar}}</$list>
	<$list filter="[<tv-config-toolbar-text>match[yes]]"><span class=tc-btn-text>Add to calendar</span></$list>
</$button>

Here I have used the button to=<<currentTiddler>> and overwritten the uri_encoded.
This does not work. I am not sure the function definition is not allowed or the $uri_encoded$ refer to something else.

Question How to use tv-wikilink-template to generate the href like above (where it opens Google Calender, or Gmail) to be used for wikilink by to= button attribute?

NOTE: Why not directly use the anchor link? Because toolbar uses buttons, and I want to have active button for processing current tiddler content and send to external webpage like Google Gmail, Google Calendar, …

#4

I remember praising @vilc at the time. However after a little reading…

Interactive content (<a href=...) inside a button element is not allowed:

image

Does it matter? That’s up to you.

#5

I expected <$button to=... generate a <a href=.. but seems not!

#6

6 posts were merged into an existing topic: Do TW buttons need to follow the HTML-Spec

#12

Hi Mohammad,
the doc page you quote has this

The tv-wikilink-template variable controls the value of the href attribute on the HTML a element generated by the $link widget.

It doesn’t seem to apply to $button.
Also this:

This variable has no useful effect when TiddlyWiki is running in a browser, as the href attribute is ignored there – links between tiddlers are performed by JavaScript instead. The variable comes into play when one is using the Node.js configuration to generate a static version of a wiki.

Probably also not what you’re doing?

Yaisog

1 Like
#13

Thank you for clarification, Yaisog.
Yes, I tried to generate a custom href by pressing a $button has a value for to attribute! I think I should go with an anchor link in the footnote of tiddler! This seems simpler.

#15

Hi folks,

I did split the thread, while keeping the original message form CodaCoder about button HTML spec here, since Mohammad responded to it.

I did move the portion that did go haywire.

kind regards
Mario

#16

I had to read your OP several times to understand, what you actually wanted to achieve. So I’ll summarize it here, to see if I did.

  • There should be a tiddler toolbar-button with an Google-Calendar icon.
  • This button should follow the TW settings and should be able to show the icon and / or text if configured
  • It should tag the currentTiddler with: In Calendar
  • It should create an external link that sends the current tiddler title as an url-encoded “backlink” to the Google calendar form

If that’s right, IMO it can be done as follows: (I did use the TW core calendar icon since I do not have the Google one)

I did use <$action-listops $tiddler=<<currentTiddler>> $tags="[[In calendar]]"/>, since it makes it easier to tag the current tiddler.

The rest is pretty much as you had it. Your misunderstanding was that the button-to parameter would create an a-href, which is not the case.

I’ll create a new post about this one.

title: test-google-calendar-button
tags: $:/tags/ViewToolbar
caption: {{images/google-calendar}} Google Calendar
description: description for Google Calendar button

\whitespace trim
\function uri_encoded()
		[[https://calendar.google.com/calendar/r/eventedit]]
		=[[?text=]]
		=[<currentTiddler>encodeuricomponent[]]
		=[[&details=]]
		=[{$:/info/url/full}append[#]encodeuricomponent[]]
		=[<currentTiddler>encodeuricomponent[]encodeuricomponent[]]
		=[[&dates=]append<now YYYY0MM0DD>append[/]append<now YYYY0MM0DD>]
		+[join[]]
\end

\procedure addToCalendarActions()
<$action-listops $tiddler=<<currentTiddler>> $tags="[[In calendar]]"/>
\end

<$button tooltip={{!!description}} class=<<tv-config-toolbar-class>> actions=<<addToCalendarActions>> >
<a href=<<uri_encoded>> >
	<!-- I did reuse the new-journal-here button since I do not have the google one -->
	<$list filter="[<tv-config-toolbar-icons>match[yes]]">{{$:/core/images/new-journal-button}}</$list>
	<$list filter="[<tv-config-toolbar-text>match[yes]]"><span class=tc-btn-text>Add to calendar</span></$list>
</a>
</$button>

test-google-calendar-button.json (1.1 KB)

have fun!
mario

2 Likes
Button to create Google Calendar event based on the current tiddler
#17

Thank you, Mario. In the OP I asked to use only button to do this and remove the nested anchor link <a> from the code and instead use button itself to generate the href from to by setting the tv-wikilink-template.

It seems we have to keep the anchor link inside the $button!

#18

Yes. There is no other way at the moment.