Discussion:
[tw5] TW5 plugin: escapecss[] filter
(too old to reply)
BurningTreeC
2018-12-03 14:00:17 UTC
Permalink
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
--
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 ***@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/85c08e04-50a6-402e-9dc9-b0f932949154%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Mohammad
2018-12-03 14:58:32 UTC
Permalink
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
--
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 ***@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.
Jan
2018-12-03 19:31:42 UTC
Permalink
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
Post by 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
--
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
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
<https://groups.google.com/d/msgid/tiddlywiki/34408b6e-667e-4833-a0eb-7a6cbe9db8ef%40googlegroups.com?utm_medium=email&utm_source=footer>.
For more options, visit https://groups.google.com/d/optout.
--
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 ***@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/5C05849E.2040209%40googlemail.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-12-04 07:01:29 UTC
Permalink
Post by Jan
Thank you Simon,
that is something i have been looking for for some time.
[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...
Post by Jan
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
--
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 ***@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/eca64f6d-cab3-4e32-be9e-64b47e133291%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-12-04 07:05:16 UTC
Permalink
Jan, in the stickytitlesfix I use this macro that allows assigning any css
property to a data attribute of your choice:





\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



\define create-data-tag()
--
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 ***@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/bdf4b56b-6982-485c-b6cf-407e02f7e0b1%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
David Gifford
2018-12-04 11:12:53 UTC
Permalink
Added to the TiddlyWiki toolmap!
Post by 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
https://burningtreec.github.io/TW5-escapecss/
https://github.com/BurningTreeC/TW5-escapecss
I hope everything works well,
BTC
--
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 ***@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/202901a2-aac4-4e5d-bfe2-18c5b90615b4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
BurningTreeC
2018-12-04 12:09:18 UTC
Permalink
Post by David Gifford
Added to the TiddlyWiki toolmap!
Great, thank you David!
--
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 ***@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/e6b3f82e-931b-4bdb-9eb5-3e4130bbdcac%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Loading...