TW5 plugin: escapecss[] filter

[BurningTreeC]

Hi all, I've made this little plugin, it's pretty lightweight adding just a filter and a polyfill (a file that adds functionality if the browser doesn't support it)

It's all about the escapecss[] filter that creates valid css selectors from whatever you give it to eat

Take a look at the plugin Demo: https://burningtreec.github.io/TW5-escapecss/

Take a look at the github Page: https://github.com/BurningTreeC/TW5-escapecss

I hope everything works well,

BTC

[Mohammad]

Wonderful BTC!

Great tool!

By the way many thanks for all your efforts specially during preparing TW 5.1.18, specially the KeeBoord in new release.

-Mohammad

[Jan]

Thank you Simon,
that is something i have been looking for for some time.

Can I do:

[data-tiddler-type="text/vnd.tiddlywiki;flexibility=replace"].tc-tiddler-frame {
border-radius: 50%;
}

Or do I have to do
\define assign-css()
[data-tiddler-title="$(currentTiddler)$"].tc-tiddler-frame {
border-radius: 50%;
}
\end
<$list filter="[all[tiddlers]type[text/vnd.tiddlywiki;flexibility=replace]]">
<<assign-css>>
</$list>

As direct CSS-Trick for Types would be great.

Ahoi  Jan

--
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+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/34408b6e-667e-4833-a0eb-7a6cbe9db8ef%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[BurningTreeC]

Thank you Simon,
that is something i have been looking for for some time.

Can I do:

[data-tiddler-type="text/vnd.tiddlywiki;flexibility=replace"].tc-tiddler-frame {
border-radius: 50%;
}

Hi Jan, I believe it was TiddlyWiki v5.1.16 or v5.1.17 that introduced the data attributes "data-tiddler-title"  and "data-tags". That doesn't mean that data attributes within tiddlywiki are limited to those two, they are just the only two data attributes already applied to tiddlers. So it's convenient to re-use them, instead of adding your own

You can add any data attribute to any html tag you want:

<div data-hello-bla={{!!type}}/> creates a div with the data attribute data-hello-bla and its value is the type of the tiddler...


Or do I have to do
\define assign-css()
[data-tiddler-title="$(currentTiddler)$"].tc-tiddler-frame {
border-radius: 50%;
}
\end
<$list filter="[all[tiddlers]type[text/vnd.tiddlywiki;flexibility=replace]]">
<<assign-css>>
</$list>

As direct CSS-Trick for Types would be great.




This is the way I use it, because the data-tiddler-title is already applied to every tiddler (look at $:/core/ui/ViewTemplate) and this allows flexibility

Note that I always put a rules pragma on top of assign-css (I've updated the plugin readme):

\define assign-css()
\rules only

[data-tiddler-title="$(currentTiddler)$"].tc-tiddler-frame {
border-radius: 50%;
}
\end
<$list filter="[all[tiddlers]type[

text/vnd.tiddlywiki;flexibility=replace]]">
<<assign-css>>
</$list>

This \rules only pragma causes the tiddlywiki parser to skip the assign-css macro, so that wikitext within the title doesn't get rendered and the resulting css selector gets created correctly

[BurningTreeC]

Jan, in the stickytitlesfix I use this macro that allows assigning any css property to a data attribute of your choice:

\define create-data-tag()
\rules only
$(classesBefore)$[$(tagName)$$(tagSelector)$"$(escapedTagValue)$"]$(classesAfter)$ {
$(tagStyles)$
}
\end

\define assign-css-to-data-tag(tagName:"data-tiddler-title",tagSelector:"=",tagValue:"",tagStyles:"",classesBefore:"",classesAfter:"")
\whitespace trim
<$vars escapedTagValue={{{ [<__tagValue__>escapecss[]] }}} tagStyles=<<__tagStyles__>> tagName=<<__tagName__>> tagSelector=<<__tagSelector__>> classesBefore=<<__classesBefore__>> classesAfter=<<__classesAfter__>>>
<<create-data-tag>>
</$vars>
\end

[David Gifford]

Added to the TiddlyWiki toolmap!

[BurningTreeC]

Added to the TiddlyWiki toolmap!

Great, thank you David!

[Mohammad]

Simon,

 This is amazing feature and should be documented!

It gives a lot of flexibility in applying customize css dynamically.

--Mohammad

[BurningTreeC]

Thanks Mohammad,

yes I think using escapeCSS as a filter with a polyfill for browsers that don't support it is the best way to address css selectors flawlessly within tiddlywiki

the reason is that sometimes we want to address something named by tiddler titles through a css selector and tiddler titles can contain all kinds of characters

I'm trying to get this filter into the core, see this pull request: https://github.com/Jermolene/TiddlyWiki5/pull/3546

[TonyM]

Btc,

This seems like a cunning solution, perhaps only a few could invent. Unfortunatly, pehaps I am one of the few who does not understand why you would want to do it.

Could you explain what use there is for a superuser and its use case or possibilities?

Regsrfs
Tony

[BurningTreeC]

Hi Tony, I discovered some problems styling tiddlers using the data-tiddler-title attribute:

[data-tiddler-title="$(myTiddlerTitle)$"].tc-tiddler-frame {

styling

}

where myTiddlerTitle can be any tiddler a filter gives me

a tiddler that contains certain characters like quotes, html entities, other special characters, ... , would not be styled because it would need correct escaping in the "myTiddlerTitle" variable to address the css-selector correctly. TiddlyWiki doesn't ship a way to do correct css escaping but this filter does

so I'm filtering the tiddler title through escapecss[] which escapes all characters that need to be escaped in order for this to work

I'm using this styling in my navigator plugin (burningtreec.github.io/TW5-navigator) to visualize the "selected tiddler"

You can try this in a stylesheet tiddler on tiddlywiki.com to see the effect:

\define style-tiddler()
[data-tiddler-title="$(currentTiddler)$"].tc-tiddler-frame {
background-color: black;
}
\end

<$list filter="[all[tiddlers]tag[Articles]]">
<<style-tiddler>>
</$list>

there are many tiddlers tagged "Articles" that contain quotes. the problem is not just quotes, but tiddlywiki.com avoids such problems

try opening those tiddlers, their background should be black

then you can try escaping quotes through the jsonstringify filter:

\define style-tiddler()
[data-tiddler-title="$(currentTiddler)$"].tc-tiddler-frame {
background-color: black;
}
\end

<$list filter="[all[tiddlers]tag[Articles]jsonstringify[]]">
<<style-tiddler>>
</$list>

this makes them black. but the jsonstringify filter escapes only some characters that should be escaped for css selectors

escapecss escapes them all, by using CSSescape, which is a browser method for doing just that

[BurningTreeC]

@Tony ,

finally, using the escapecss filter I could fix the problem with sticky titles and popups:

https://burningtreec.github.io/TW5-stickytitlesfix/

[Mohammad]

Hi SImon,

That is a good news.

Thank you for detail explanations on escapecss[] filter.

--Mohammad

[TonyM]

Btc,

Thanks so much for that eloquent description. I got it now.

Regards
Tony