This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
en:template:start [2017/06/22 10:51] Nicolas Ronvel [Styles] |
en:template:start [2017/06/22 11:00] Nicolas Ronvel [Globals] |
||
---|---|---|---|
Line 66: | Line 66: | ||
The ''globals'' part of a template stores data that is repeated through the template, and that can be put in a single global constant, in order to help maintainability. | The ''globals'' part of a template stores data that is repeated through the template, and that can be put in a single global constant, in order to help maintainability. | ||
- | It could be a color that runs through the template, a code variable, or even part of the canvas : | + | It could be a color that runs through the template, a [[en:template:code_variables|code variable]], or even part of the canvas : |
<code javascript> | <code javascript> | ||
Line 74: | Line 74: | ||
"icon-color-old": "#fff5c4", | "icon-color-old": "#fff5c4", | ||
"text-color-auto": "{{value = tinycolor.mostReadable(card[color1].toHexString(), ['#FFF', '#888', '#000']).toHexString();}}", | "text-color-auto": "{{value = tinycolor.mostReadable(card[color1].toHexString(), ['#FFF', '#888', '#000']).toHexString();}}", | ||
- | " | ||
"gradient": { | "gradient": { | ||
"type": "linear", | "type": "linear", | ||
Line 89: | Line 88: | ||
} | } | ||
</code> | </code> | ||
+ | |||
+ | A global is evaluated before any other variables, so it can contain any kind of variables (from text input, choices, color picker, ...) but a global **can not** contain another global. Also, a global is its own variable. It cannot be used inside or with another variable ([[en:template:code_variables|code variable]], [[en:template:advanced_string_variables|advanced string]], ...). | ||
+ | |||
+ | A global will replace any mention of its name surrounded by two square brackets : ''%%[[global-name]]%%''. | ||
+ | |||
+ | <code javascript> | ||
+ | { | ||
+ | "type": "path", | ||
+ | "left": 0, | ||
+ | "top": 0, | ||
+ | "fill": "[[icon-color]]" | ||
+ | }, { | ||
+ | "type": "path", | ||
+ | "left": 0, | ||
+ | "top": 0, | ||
+ | "fill": "[[gradient]]" | ||
+ | }, { | ||
+ | "type": "textbox", | ||
+ | "left": 0, | ||
+ | "top": 0, | ||
+ | "text": "$text$", | ||
+ | "fill": "[[text-color-auto]]" | ||
+ | }, | ||
+ | </code> | ||
+ | |||
+ |