Add data attributes to ViewTemplate (#3209)

* change 3 set-widgets to 1 var-widget call. Add data-tags and userClass.

* add new documentation and change the existing one accordingly.
print-window-tiddler
Mario Pietsch 2018-04-24 23:08:20 +02:00 zatwierdzone przez Jeremy Ruston
rodzic 200e854814
commit 19085a1277
23 zmienionych plików z 466 dodań i 41 usunięć

Wyświetl plik

@ -1,11 +1,11 @@
title: $:/core/ui/ViewTemplate
\define frame-classes()
tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$
tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$ $(userClass)$
\end
\define folded-state()
$:/state/folded/$(currentTiddler)$
\end
<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>><div class=<<frame-classes>> data-tiddler-title=<<currentTiddler>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
<$vars storyTiddler=<<currentTiddler>> tiddlerInfoState=<<qualify "$:/state/popup/tiddler-info">> userClass={{!!class}}><$tiddler tiddler=<<currentTiddler>>><div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
</div>
</$tiddler></$set></$set>
</$tiddler></$vars>

Wyświetl plik

@ -0,0 +1,39 @@
created: 201804111739
modified: 201804111739
tags: [[How to apply custom styles]]
title: Custom styles by data-tiddler-title
type: text/vnd.tiddlywiki
! Attribute: data-tiddler-title
<<.from-version "5.1.16">>
The ~TiddlyWiki core adds several `attributes` to the rendered content. With those attributes it's possible to apply custom styles to the tiddler content.
For example this tiddler is named: "{{!!title}}" so the attribute looks like this:
```
data-tiddler-title="Custom styles by title"
```
!! Examples
The following CSS is defined in [[Custom data-styles]] and creates a blue border for exactly this tiddler.
```
[data-tiddler-title="Custom styles by title"] {
border: 1px solid blue;
}
```
To create a green border for every tiddler that starts with `$:/` aka system tiddlers, you'd need to use CSS like so: (not applied here but you can experiment with it! )
```
[data-tiddler-title^="$:/"] {
border: 1px solid green;
}
```
!! More Possibilities
{{Attribute Selectors}}

Wyświetl plik

@ -0,0 +1,26 @@
created: 201804111739
modified: 201804111739
title: Custom styles by user-class
tags: [[How to apply custom styles]]
type: text/vnd.tiddlywiki
''Tiddler Field: `class`'' <<.from-version "5.1.16">>
The [[tag manager|$:/TagManager]] allows us to set a tiddler `color` field, that is used to define the "tag-pill" colour. Since: <<.from-version "5.1.16">> we can define a `class` field, that is directly inserted into the [[ViewTemplate|$:/core/ui/ViewTemplate]] and it can be used for styling:
"""
title: `anyName`
tags: `$:/tags/Stylesheet`
class: `myClass`
"""
Every tiddler, that has a `class` field can be styled that way!
```
.myClass {
border: 2px solid blue;
}
```
Learn more at: [[How to apply custom styles]]

Wyświetl plik

@ -0,0 +1,31 @@
created: 20170126152839462
modified: 201804111739
tags: [[Custom data-styles]]
title: Attribute Selectors
type: text/vnd.tiddlywiki
;[attr]
:Represents an element with an attribute name of attr.
;[attr="value"]
:Represents an element with an attribute name of attr and whose value is exactly "value".
;[attr~="value"]
:Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".
;[attr|="value"]
:Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.
;[attr^="value"]
:Represents an element with an attribute name of attr and whose first value is prefixed by "value".
;[attr$="value"]
:Represents an element with an attribute name of attr and whose last value is suffixed by "value".
;[attr*="value"]
:Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.
;[attr "operator value" i]
:Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
Learn more at: [[Attribute selectors - CSS|https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors]] or [[CSS-Specification|https://www.w3.org/TR/CSS22/selector.html#attribute-selectors]]

Wyświetl plik

@ -0,0 +1,9 @@
modified: 201804111739
created: 201804111739
title: Custom Styles FAQ
tags: [[How to apply custom styles]] FAQ-group
type: text/vnd.tiddlywiki
<<.from-version "5.1.16">>
<<list-links "[tag[Custom Styles FAQ]]">>

Wyświetl plik

@ -0,0 +1,35 @@
created: 201804111739
modified: 201804111739
tags: data-tags-styles [[How to apply custom styles]] $:/tags/Stylesheet
title: Custom data-styles
type: text/vnd.tiddlywiki
[data-tiddler-title="Custom styles by title"] {
border: 1px solid blue;
}
[data-tags*="example-test"] {
border: 2px solid pink;
}
[data-tags*="example-hardlinebreaks"] .tc-tiddler-body {
word-break: normal;
word-wrap: break-word;
white-space: pre-wrap;
}
[data-tags*="data-tags-styles"] .tc-tiddler-body {
display: block;
padding: 14px;
margin-top: 1em;
margin-bottom: 1em;
word-break: normal;
word-wrap: break-word;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #cccccc;
padding: 0 3px 2px;
border-radius: 3px;
font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
}

Wyświetl plik

@ -0,0 +1,60 @@
created: 20170124132500000
modified: 201804111739
tags: example-test [[How to apply custom styles]]
title: Custom styles by data-tags
type: text/vnd.tiddlywiki
! Attribute: data-tags
<<.from-version "5.1.16">>
The ~TiddlyWiki core adds several `attributes` to the rendered content. With those attributes it's possible to apply custom styles to the tiddler content.
For example this tiddler is tagged: <<tag "How to apply custom styles">> and <<tag "example-test">> so the attribute looks like this:
```
data-tags="[[How to apply custom styles]] example-test"
```
''Important:'' Tiddler tags are ''not'' sorted, so the order in the rendered output may be different!
!! Examples
The following CSS is defined in [[Custom data-styles]] and creates a pink border for exactly this tiddler.
```
[data-tags*="example-test"] {
border: 2px solid pink;
}
```
!!! Styling Stylesheets
So to display tiddlers tagged: `data-tags-styles` in a decent way we can use the following code. (I could have used: `$:/tags/Stylesheet`, but that would affect all stylesheets in this wiki, which is not intended. amt ;)
''Important:'' Don't forget the `.tc.tiddler.body`, otherwise the whole tiddler, including the title will be changed! see: [[Custom data-styles]]
```
[data-tags*="data-tags-styles"] .tc-tiddler-body {
display: block;
padding: 14px;
margin-top: 1em;
margin-bottom: 1em;
word-break: normal;
word-wrap: break-word;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #cccccc;
padding: 0 3px 2px;
border-radius: 3px;
font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
}
```
!! Hard Linebreaks
This mechanism may be handy for users, who want to write prose text! see: [[Hard Linebreaks with CSS]]
!! More Possibilities
{{Attribute Selectors}}

Wyświetl plik

@ -0,0 +1,26 @@
created: 20170126174506507
modified: 20170126211042714
tags: [[Hard Linebreaks in WikiText]]
title: Hard Linebreaks with CSS
type: text/vnd.tiddlywiki
Since TiddlyWiki Version 5.1.16, it's possible to apply customs styles with `data-` attributes. see: [[How to apply custom styles]]
The [[Custom data-styles]] stylesheet tiddler contains the following definition:
```
[data-tags*="example-hardlinebreaks"] .tc-tiddler-body {
word-break: normal;
word-wrap: break-word;
white-space: pre-wrap;
}
```
If rendered without the tag, the content of "Hard Linebreaks with CSS - Example" will be shown like this:
>{{Hard Linebreaks with CSS - Example}}
----
Open the tiddler to see the custom CSS rules applied: [[Hard Linebreaks with CSS - Example]]

Wyświetl plik

@ -0,0 +1,14 @@
created: 20170126161803543
modified: 20170126211025840
tags: example-hardlinebreaks [[Hard Linebreaks in WikiText]]
title: Hard Linebreaks with CSS - Example
type: text/vnd.tiddlywiki
The following text is rendered without any special WikiText syntax. So most of the ~WikiText functionality will be accessible.
This is a line
and this is a new line
while this is yet another line
and this is the final one
apart from this one

Wyświetl plik

@ -1,9 +1,14 @@
caption: {{!!title}} - ^^deprecated^^
created: 20141001132300000
modified: 20151005074702387
tags: Learning
modified: 201804111739
tags: [[How to apply custom styles]] $:/deprecated
title: How to apply custom styles by tag
type: text/vnd.tiddlywiki
<<.deprecated-since "5.1.16 <- click" "Custom styles by data-tags">>. Also see: [[How to apply custom styles]]
----
You can apply custom styles to tiddlers that have a particular tag by defining a CSS class with the name `tc-tagged-<Tag Name>`.
For example, to make tiddlers tagged "NightReader" appear in a special colour scheme suitable for night-time reading, [[create a stylesheet|Using Stylesheets]] defining the class `tc-tagged-NightReader` like this:

Wyświetl plik

@ -0,0 +1,10 @@
created: 20141001132300000
list: [[Custom styles by data-tags]] [[Custom styles by title]]
modified: 201804111740
tags: [[Customise TiddlyWiki]]
title: How to apply custom styles
type: text/vnd.tiddlywiki
At the moment there are several ways to apply custom styles.
<<list-links filter:"[tag[How to apply custom styles]]">>

Wyświetl plik

@ -1,46 +1,51 @@
created: 20140305091244145
modified: 20150221175658000
modified: 201804111739
tags: [[Customise TiddlyWiki]]
title: Using Stylesheets
type: text/vnd.tiddlywiki
The first steps to changing the appearance of TiddlyWiki are to choose and apply one of the available themes, or to modify the [[colour palette|ColourPalettes]].
\define tv-config-toolbar-text() yes
In addition, custom [[CSS stylesheets|http://www.w3schools.com/css]] can be defined by tagging a tiddler `$:/tags/Stylesheet`. Try creating a custom stylesheet now with the following content in order to change the page background colour to red:
\define openCpTheme()
<$action-setfield $tiddler="$:/state/tab-1749438307" $value="$:/core/ui/ControlPanel/Appearance"/>
<$action-setfield $tiddler="$:/state/tab--1963855381" $value="$:/core/ui/ControlPanel/Theme"/>
<$action-navigate $to="$:/ControlPanel"/>
\end
! Theme and Colorpalette
The first steps to changing the appearance of ~TiddlyWiki are to choose and apply:
* One of the available themes: <span class="tc-btn-standard"> {{$:/core/ui/Buttons/theme}} </span>
* Modify the colour palette: <span class="tc-btn-standard"> {{$:/core/ui/Buttons/palette}} </span>
* Experiment with the <$button actions=<<openCpTheme>> >{{$:/core/images/options-button}} ControlPanel</$button>
! Work with Stylesheets
In addition to the control panel, custom styles can be defined by tagging a tiddler `$:/tags/Stylesheet`. Try creating a custom stylesheet now with the following content in order to change the page background colour to red:
```
html body.tc-body {
body.tc-body {
background: red;
}
```
!! Additional Resrouces
* [[Cascading Style Sheets (CSS) at mozilla|https://developer.mozilla.org/en-US/docs/Web/CSS]]
* [[Cascading Style Sheets (CSS) at w3scools|http://www.w3schools.com/css]]
! Overriding Theme Settings
Custom stylesheets are applied independently from theme stylesheets. Therefore, it is often necessary for the css rules in your custom stylesheet to be more specific than those of the theme you want to override. For example, `html body.tc-body` is more specific than `body.tc-body`.
Custom stylesheets are applied independently from theme stylesheets. Therefore, it is often necessary for the css rules in your custom stylesheet to be more specific than those of the theme you want to override. For example, `html body.tc-body` is more specific than `body.tc-body`.
!!! Ordering of stylesheets
Ordering of stylesheets is controlled in the main stylesheet $:/core/ui/PageStylesheet by the following list filter:
```
<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]]"/>
```
With help of a list-after field in a custom stylesheet, the order of the stylesheets can be rearranged to ease overwriting theme styles.
<<<
To check the order of all stylesheets in use, enter the following filter in the filter tab of Advanced search:
```
[all[shadows+tiddlers]tag[$:/tags/Stylesheet]]
```
<<<
<<.tip "''You should always start with the least specific value that works!''<br><br>">>
! Stylesheet Types
Usually it is best to use the type `text/css` for stylesheets. This treats them as plain stylesheets, and ensures that TiddlyWiki doesn't apply any wiki processing to them.
Usually it is best to use the type `text/css` for stylesheets. This treats them as plain stylesheets, and ensures that ~TiddlyWiki doesn't apply any wiki processing to them.
If you wish to use macros and transclusions in your stylesheets you should instead use the default WikiText type `text/vnd.tiddlywiki`. This allows full WikiText processing to be performed. Here is an example:
If you wish to use macros and transclusions in your stylesheets you should instead use the default WikiText type `text/vnd.tiddlywiki`. This allows full ~WikiText processing to be performed. Here is an example:
```
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html
@ -50,7 +55,7 @@ body.tc-body pre {
}
```
The `\rules` pragma at the top of the tiddler restricts the WikiText to just allow macros and transclusion. This avoids mistakenly triggering unwanted WikiText processing.
The `\rules` pragma at the top of the tiddler restricts the ~WikiText to just allow macros and transclusion. This avoids mistakenly triggering unwanted ~WikiText processing.
A stylesheet tiddler is processed such that it is first wikified and then the text portion of the ouput is extracted to apply as the CSS. Any HTML tags you will use in your stylesheet are thus ignored. For example, HTML elements generated by the RevealWidget will not affect the output. As in the following example, you can wrap CSS rules in `<pre>` tags to display them as a codeblock without affecting processing, including handling the inner macro.

Wyświetl plik

@ -0,0 +1,8 @@
created: 201804111739
modified: 201804111739
title: Q: Is there a way to create dynamic stylesheets?
tags: [[Custom Styles FAQ]]
''Answer:'' <<.from-version "5.1.16">>
Yes, see: [[Q: How can I use a custom field to style a tiddler?]]

Wyświetl plik

@ -0,0 +1,30 @@
created: 201804111739
modified: 201804111739
title: Q: How can I use a custom field to style a tiddler?
tags: [[Custom Styles FAQ]]
''Consider the following usecase:'' <<.from-version "5.1.16">>
There is a field named: `rank`, which can hold different values eg: `species`.
''Answer:''
The idea is now: We dynamically create the stylesheet. The style-sheet can look like this:
"""
title: `myStyles`
tags: `$:/tags/Stylesheet`
"""
```
<$list filter="[rank[species]]">
[data-tiddler-title^="<$view field=title/>"] .tc-tiddler-body {
column-count: 2;
}
</$list>
```
This creates a CSS rule for every tiddler-title, that has a field `rank` and value `species`.
[[Learn more about possible attributes!|Attribute Selectors]]

Wyświetl plik

@ -0,0 +1,19 @@
created: 201804111739
modified: 201804111739
title: Q: What if a tiddler has no tags?
tags: [[Custom Styles FAQ]]
''Answer:'' <<.from-version "5.1.16">>
* If a tiddler has no tags, but needs styling use: `data-tiddler-title` as CSS selector
** There is only one tiddler
* If a user wants to style system tiddlers in a custom way: use: `[data-tiddler-title^="$:"/]` as a selector
** using the TW namespace functionality
* If the user wants special behaviour for tagged tiddlers. eg: Learning
** use: `[data-tags*="Learning"]` as CSS selector.
The names I'm using are only used for documentation purpose, without changing the existing wiki. I don't want, that the docs has side effects.
[[Learn more about possible attributes!|Attribute Selectors]]

Wyświetl plik

@ -0,0 +1,33 @@
created: 201804111739
modified: 201804111739
title: Q: How can I style a tiddler if it has "this" AND "that" tag?
tags: [[Custom Styles FAQ]]
''Answer:'' <<.from-version "5.1.16">>
If tiddler has both: `this` AND tag `that` create an orange border.
```
[data-tags*="bar"][data-tags*="froz"] {
border: 2px solid orange;
}
```
''If your CSS looks like this: ''
```
[data-tags~="this"] {
border: 2px solid blue;
}
[data-tags~="that"] {
border: 2px solid red;
}
```
`this` creates a blue border
`that` creates a red border
If you swap positions, you get it the other way around.
[[Learn more about possible attributes!|Attribute Selectors]]

Wyświetl plik

@ -0,0 +1,17 @@
created: 201804111739
modified: 201804111739
title: Q: How can I style a tiddler if it has "this" OR "that" tag?
tags: [[Custom Styles FAQ]]
''Answer:'' <<.from-version "5.1.16">>
Either tag `this` or tag `that` create a red border.
```
[data-tags~="this"],
[data-tags~="that"] {
border: 2px solid red;
}
```
[[Learn more about possible attributes!|Attribute Selectors]]

Wyświetl plik

@ -0,0 +1,8 @@
created: 20170126143833588
modified: 201804111739
title: $:/deprecated
type: text/vnd.tiddlywiki
<<<
In several fields, deprecation is the discouragement of use of some feature, design or practice; typically because it has been superseded or is no longer considered safe – but without completely removing it or prohibiting its use.
<<< [[wikipedia|https://en.wikipedia.org/wiki/Deprecation]]

Wyświetl plik

@ -0,0 +1,16 @@
created: 20170126142116898
modified: 201804111739
title: Deprecated - What does it mean
type: text/vnd.tiddlywiki
First of all: ''Keep calm!''
{{$:/deprecated}}
For ~TiddlyWiki it means, that you should not use this mechanism for new content anymore! ''AND you should update your existing content''!
Deprecated features have a marker. see: [[Custom styles by tag]]
''Tiddlers tagged `$:/deprecated`''
><<list-links "[tag[$:/deprecated]]">>

Wyświetl plik

@ -1,7 +1,8 @@
created: 20150117152607000
modified: 20150228081437000
title: $:/editions/tw5.com/doc-macros
modified: 201804111739
tags: $:/tags/Macro
title: $:/editions/tw5.com/doc-macros
type: text/vnd.tiddlywiki
\define .concat(1,2,3,4,5) $1$$2$$3$$4$$5$
@ -108,4 +109,6 @@ This is an example tiddler. See [[Table-of-Contents Macros (Examples)]].
</blockquote>
</$reveal>
</$list>
\end
\end
<pre><$view field="text"/></pre>

Wyświetl plik

@ -1,7 +1,8 @@
created: 20150117152612000
modified: 20150226162159000
title: $:/editions/tw5.com/doc-styles
modified: 201804111739
tags: $:/tags/Stylesheet
title: $:/editions/tw5.com/doc-styles
type: text/vnd.tiddlywiki
.doc-def {
font-style: normal;
@ -176,10 +177,23 @@ tr.doc-table-subheading {
vertical-align: text-bottom;
}
.doc-deprecated-version {
display: inline-block;
border-radius: 1em;
background: red;
color: <<colour background>>;
fill: <<colour background>>;
padding: 0 0.4em;
font-size: 0.7em;
text-transform: uppercase;
font-weight: bold;
line-height: 1.5;
vertical-align: text-bottom;
}
.doc-deprecated-version svg,
.doc-from-version svg {
width: 1em;
height: 1em;
vertical-align: text-bottom;
}
}

Wyświetl plik

@ -1,8 +1,15 @@
created: 20161008085627406
modified: 20161008085627406
title: $:/editions/tw5.com/version-macros
modified: 201804111739
tags: $:/tags/Macro
title: $:/editions/tw5.com/version-macros
type: text/vnd.tiddlywiki
\define .from-version(version)
<span class="doc-from-version">{{$:/core/images/warning}} New in $version$</span>
<span class="doc-from-version">{{$:/core/images/warning}} New in: $version$</span>
\end
\define .deprecated-since(version, superseeded:"TODO-Link")
<$button to="Deprecated - What does it mean" class="doc-deprecated-version tc-btn-invisible">{{$:/core/images/warning}} Deprecated since: $version$ </$button> use [[$superseeded$]] instead!
\end
<pre><$view field="text"/></pre>

Wyświetl plik

@ -474,6 +474,16 @@ html body.tc-body .tc-btn-rounded:hover svg {
margin: 0;
}
/* used for documentation "fake" buttons */
.tc-btn-standard {
line-height: 1.8;
color: #667;
background-color: #e0e0e0;
border: 1px solid #888;
padding: 2px 1px 2px 1px;
margin: 1px 4px 1px 4px;
}
.tc-btn-big-green {
display: inline-block;
padding: 8px;