Differences

This shows you the differences between two versions of the page.

@@ Line 1: / Line 1: @@
+====== Javascript code in Variables ======
+Sometimes, it's not convenient to let the user set all the canvas configuration. Also, the value of a variable may result in a specific value set to a property, but with a specific value not linked to the original variable (a width depending on the value of a Checkbox, for instance).
+The **JS Code Variable** is there for this kind of manipulation. It's an //advanced// way to make templates, but with this, you can achieve truly amazing interactive cards.
+===== How to declare a JS Code Variable =====
+For a variable to be used as a **JS Code Variable**, it needs to be encapsulated by //double brackets//. Inside those brackets, you can then put any kind of Javascript code. The goal of this code is to put a value inside a variable name ''value''. The content of this variable will be then put inside the property :
+<code javascript>
+"canvasFields": [
+    { "type": "rect", "width": "{{if (true) { value = 30; } else { value = 10; }}}" }
+]
+</code>
+This example is of course useless, because it will always put 30 to the value variable. But, keep reading.
+===== How to use other fields =====
+The interest of such a variable is to use the content of other variables. For example, the user can have a [[Choice input]] to select a type of card : ''leader'' or ''follower''. This field is named ''cardType''.
+By using ''card[cardType]'' as a JS variable in the code, you can access the value of the ''cardType'' variable. Each variable generated by an editable field can then be accessed this way. And you can, in our example, set the background color of a rectangle this way :
+<code javascript>
+"canvasFields": [
+    { "type": "rect", "backgroundColor": "{{if (card[cardType] == 'leader') { value = "#FF0000"; } else { value = "#00FF00"; }}}" }
+]
+</code>
+Of course, you're not limited to the use of one variable, and can mix with as many variables as you need.
+===== What can I do with this kind of variable =====
+Well, you can make anything you want as long as it is valid in Javascript. That covers a large spectrum of actions. But be reminded that you need the value of the variable ''value'' in order for the canvas property to be filled.
+Don't use the ''return'' keyword in this code, it will not work and could break the display. This function could still evolve, to use things such as functions, constants, and other things. Any idea ? Any need ? Write an [[http://www.github.com/gulix/geckos/issues/new|Issue]] about it !

Geckos Documentation

User Tools

Site Tools

Differences

Page Tools