On Sunday, September 6, 2020 at 4:52:32 AM UTC-7, Shareda wrote:
>
> Hello! I want to improve link styling in my TiddlyWiki, and I need some
> help. In my wiki almost every tiddler describes some concept. Each concept
> (tiddler) has a numerical field "weight". I want links to any concept
> tiddler that has a "weight" field to be displayed with style="background:
> rgba(255,0,0,<weight/100>)". I found the widget link.js, but for some
> reason my changes do not affect the display. Where exactly should I insert
> my code so that all wikilinks follow this style. I am new to JavaScript and
> TW inner architecture , so it would be very good to get correct code.
>
You can achieve this styling with just a small change in the way you enter
your links, without modifying any TWCore javascript code.
First, wherever you want to embed a weighted link instead of writing just
TiddlerTitle or [[Tiddler Title]]
you write:
{{TiddlerTitle||wlink}} or {{Tiddler Title||wlink}}
This syntax is called "Transclusion with Templates"
(see https://tiddlywiki.com/#Transclusion%20with%20Templates). What it
does is to render the indicated tiddler title, using the content from
"wlink".
Then, create the "wlink" tiddler (short for "weighted link"), containing
this text:
<$link>
<span style={{{ [[background:rgba(255,0,0,calc(]addsuffix{!!weight}
addsuffix[ / 100));]] }}}>
<<currentTiddler>>
</span>
</$link>
Notes:
* Within this "template" tiddler, the "currentTiddler" value is the
TiddlerTitle you specified in the transclusion syntax
* The $link widget outputs a link (using the currentTiddler value as its
default target)
* The span inside the $link constructs the style using an "inline filter"
(the {{{ [...] }}} syntax)
* This inline filter starts with literal text: "
*background:rgba(255,0,0,calc(*", then appends a value retrieved from the
"weight" field of the current tiddler, and then adds the remaining literal
text: "*/ 100));*"
* Thus, the resulting style is: "*background:rgba(255,0,0,calc(nnn **/
100));*", where "nnn" is the value from the weight field.
* Finally, inside the span, the actual tiddler title is displayed
enjoy,
-e
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/c98a91bf-f2bd-45ef-b38b-7ae0d3c9b9f3o%40googlegroups.com.
