1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-26 18:10:27 +00:00

Add visible transclusions component and demo

Very useful to see transclusions explicitly

Makes a good demo of a super-complicated widget override.
This commit is contained in:
jeremy@jermolene.com 2022-05-06 15:39:45 +01:00
parent e01dfa1507
commit c5b10d5c1d
2 changed files with 56 additions and 0 deletions

View File

@ -0,0 +1,45 @@
title: $:/core/ui/VisibleTransclude
<!--
Import this component to make all the child transclusions visible.
Block transclusions are shown in red, and inline transclusions are shown in green.
-->
\function <$transclude>(tiddler,$tiddler,mode,$mode)
<!-- Replicate the logic of the transclude widget to determine the output mode, and hence the tag and colour to use for output -->
<$let
mode={{{ [[$mode]is[variable]then<$mode>!is[blank]] :else[[mode]is[variable]then<mode>!is[blank]] :else[<parseAsInline>match[yes]then[inline]else[block]] }}}
outputTag={{{ [<mode>match[inline]then[span]else[div]] }}}
outputColour={{{ [<mode>match[inline]then[green]else[red]] }}}
>
<!-- Use divs or spans according to the mode -->
<$genesis $type="element" $tag=<<outputTag>> style="color:white;padding:4px;" style.background=<<outputColour>>>
<$genesis $type="element" $tag=<<outputTag>> style="display: inline-block;">
<div style="background:white;color:black;font-size: 12px;line-height:1.2;text-align:left;font-weight:normal;padding:4px;margin:4px;">
<!-- Render the parameters to the transclusion -->
<$list filter="[enlist:raw<paramNames>]" counter="counter" emptyMessage="(none)">
<div>
<$text text=<<currentTiddler>>/><$text text=": "/><$text text={{{ [enlist:raw<paramValues>nth<counter>] }}}/>
</div>
</$list>
</div>
</$genesis>
<$genesis $type="element" $tag=<<outputTag>> style="background:white;color:black;padding:4px;">
<!-- Look for a parameter starting with $ to determine if we are in legacy mode -->
<$list filter="[enlist:raw<paramNames>] :filter[<currentTiddler>prefix[$]] +[limit[1]]" variable="ignore" emptyMessage="""
<!-- Legacy mode: we render the transclusion without a dollar sign for recursionMarker and mode -->
<$genesis $type="transclude" $remappable="no" $names="[enlist:raw<paramNames>]" $values="[enlist:raw<paramValues>]" recursionMarker="no" mode=<<mode>>>
<!-- Reach back up to the grandparent transclusion to get the correct slot value -->
<$slot $name="ts-raw" $depth="2"/>
</$genesis>
""">
<!-- Non-legacy mode: we use dollar signs for the recursionMarker and mode -->
<$genesis $type="transclude" $remappable="no" $names="[enlist:raw<paramNames>]" $values="[enlist:raw<paramValues>]" $$recursionMarker="no" $$mode=<<mode>>>
<!-- Reach back up to the grandparent transclusion to get the correct slot value -->
<$slot $name="ts-raw" $depth="2"/>
</$genesis>
</$list>
</$genesis>
</$genesis>
<$let>
\end

View File

@ -0,0 +1,11 @@
title: Visible Transclusions
tags: Learning
!! Visible Transclusions
Block transclusions are shown in red, and inline transclusions are shown in green.
<$button>
<$action-setfield $tiddler="$:/temp/VisibleTransclusions" tags="$:/tags/Macro/View/Body" text={{$:/core/ui/VisibleTransclude}}/>
Click here to make transclusions visible within story river tiddlers
</$button>