fix sticky titles - performant version

[BurningTreeC]

this fixes the sticky-titles issue where more-popups are hidden by titles of following tiddlers in the story river

• assigns z-index 520 to the tiddler with the more-popup open
• assigns z-index 519 - 500 to the following 20 tiddlers in the river

this PR has two advantages over #3567

• doesn't use calc() - works in browsers that don't support calc, too
• is performant when there are many tiddlers in the river

missing part to make this complete: a filter that correctly escapes characters that need to be escaped to be used within data-tiddler-title and that doesn't replace special characters, making the escaped string invalid (discussion here: #3546 )

[BurningTreeC]

Note that I've created the macro-sequences within the current Dynaview demo to make sure this doesn't cause notable performance drops

[BurningTreeC]

We should probably do the same for the tags, type and fieldname dropdowns in edit-mode

... and apply the z-index to the tiddler-frame

[BurningTreeC]

Or we make the popup mechanism also set the focus-tiddler field like the navigator in #3590 - then we can use that title and don't have to change any state-titles

[BurningTreeC]

Hi @Jermolene , @pmario and @ALL ...
We can fix this sticky-titles problem in two ways, and we should fix it for the dropdowns in edit-mode, too

one way would be to change all popup state titles so that they end with the title of the current tiddler, which would allow easy access to the tiddler-title and using the escapecss filter we set the z-indices like I'm doing here

the other way would be not to change the state titles and to use the numhash filter (#3752) to identify the title of the tiddler that has an open popup

the second way has a bigger performance cost but is more universal

[BurningTreeC]

there would be a third way by setting a state tiddler to the title of the tiddler with the popup through the reveal widget -> if the currentTiddler variable is defined and it's a popup

[Jermolene]

Hi @BurningTreeC I've just tried something else that seems like it might be promising. Try including this after the definition of .tc-tiddler-title in $:/themes/tiddlywiki/vanilla/sticky:

.tc-story-river .tc-tiddler-frame:nth-child(100n+001) {z-index: 200;}
.tc-story-river .tc-tiddler-frame:nth-child(100n+002) {z-index: 199;}
.tc-story-river .tc-tiddler-frame:nth-child(100n+003) {z-index: 198;}
.tc-story-river .tc-tiddler-frame:nth-child(100n+004) {z-index: 197;}
.tc-story-river .tc-tiddler-frame:nth-child(100n+005) {z-index: 196;}
.tc-story-river .tc-tiddler-frame:nth-child(100n+006) {z-index: 195;}
.tc-story-river .tc-tiddler-frame:nth-child(100n+007) {z-index: 194;}
.tc-story-river .tc-tiddler-frame:nth-child(100n+008) {z-index: 193;}
.tc-story-river .tc-tiddler-frame:nth-child(100n+009) {z-index: 192;}
.tc-story-river .tc-tiddler-frame:nth-child(100n+010) {z-index: 191;}

In my brief tests, this fixes all the dropdown overlapping problems. We'd need to find a way to programmatically generate those 100 definitions (and perhaps have a hidden setting so that users could increase the number).

[BurningTreeC]

@Jermolene ... that's perfect 👍 !

[Jermolene]

Thanks @BurningTreeC! The maddening thing is that I can't see a way to generate those declarations without adding maths support to the core... (needless to say, one can't use calc() with z-index!).

[BurningTreeC]

@Jermolene , there's a way ...

[BurningTreeC]

\define createZIndices()
<$set name="reversedIndex" value={{{ [range[$(startingZIndex)$,1]nth[$(index)$]] }}}>

`.tc-story-river .tc-tiddler-frame:nth-child(`<<max>>+<<index>>`) { z-index: ` <<reversedIndex>> `; }`

</$set>
\end

<$set name="max" value={{$:/config/sticky/range}}>
<$set name="startingZIndex" value={{{ [range{$:/config/sticky/range}] [range{$:/config/sticky/range}addprefix[:]] +[count[]] }}}>
<$list filter="[range{$:/config/sticky/range}]" variable="index">

<<createZIndices>>

</$list>
</$set>
</$set>

[BurningTreeC]

I forgot the n in my example:

\define createZIndices()
<$set name="reversedIndex" value={{{ [range[$(startingZIndex)$,1]nth[$(index)$]] }}}>

`.tc-story-river .tc-tiddler-frame:nth-child(`<<max>>n+<<index>>`) { z-index: ` <<reversedIndex>> `; }`

</$set>
\end

<$set name="max" value={{$:/config/sticky/range}}>
<$set name="startingZIndex" value={{{ [range{$:/config/sticky/range}] [range{$:/config/sticky/range}addprefix[:]] +[count[]] }}}>
<$list filter="[range{$:/config/sticky/range}]" variable="index">

<<createZIndices>>

</$list>
</$set>
</$set>

[BurningTreeC]