Global wikilink styling depending on the target "weight" field value

[Shareda]

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.  

[Eric Shulman]

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" (short for "weighted link").

Then, create the "wlink" tiddler, 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 currentTiddler, 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

[Shareda]

Oh, good and clear enough for me! Thank you! One more detail: what if i have links like [[form of keyword|original keyword]] ? How can I remake it or play around?
I already have one mechanism based on macros like <<kw " form of keyword" "original keyword">> but it is not good becuse of backlinks are not tracing throuh this macro. 

воскресенье, 6 сентября 2020 г. в 18:53:15 UTC+6, Eric Shulman:

[Shareda]

(that's why i drill to link.js widget). Soon I will try to apply your way (Transclusion with Templates) with backlinks and other link structure features in my wiki.

воскресенье, 6 сентября 2020 г. в 21:29:27 UTC+6, Shareda: