Basic Usage: Conditional Logic

Richard edited this page Jun 26, 2016 · 4 revisions

Conditional Logic

Basic if statements

To conditionally hide or show blocks in Transphporm you can inspect the contents of the data array using the :data pseudo-element.

The :data pseudo element can be used in the same way as the [attribute] pseudo element in CSS. For example:

div:data[loggedin=false] {display: none;}

will select any div's on the page if loggedin is set to false in the data object. This can be used with any selector (or chain of selectors). For example, a class name such as .admin:

.admin:data[loggedin=false] {display: none;}

This will hide any element with the class name admin when loggedin is set to false. :data always references the data variable that was assigned to the template:

$data = [
    'loggedin' => true
];

$template = new \Transphporm\Builder($xml, $tss);

echo $template->output($data)->body;

When applied to this HTML:

<div class="admin">
Welcome back, Administrator
</div>

<div>
Lorem ipsum
</div>

The div with the class name admin will be hidden only if the data's loggedin property is set to false.

Alternate Syntax

This tss from the first example

div:data[loggedin=false] {display: none;}

could also be written as

div:[data(loggedin)=false] {display: none;}

If-else

This can be combined to write an if-else. For example, to show a different block depending on whether the user is logged in or not, you can do the following.

Firstly set up the HTML with the two blocks:

<div class="loggedin">
Welcome back, you are currently logged in.
</div>

<div class="notloggedin">
You are not logged in, please log in or register
</div>

Then apply the TSS to hide or show the relevant block:

.loggedin:data[loggedin=false] {display: none; }
.notloggedin:data[loggedin=true] {display: none;}

Other conditional statements

You can also use conditional logic for any TSS property e.g. content or repeat. For example:

HTML

<div class="welcomemessage">

</div>

TSS

.welcomemessage:data[loggedin=true] {content: "Welcome back"; }
.welcomemessage:data[loggedin=false] {content: "You are not logged in"; }

Conditions inside loops

You can use :data to inspect values inside the data array, however you can also use :iteration to inspect an iteration's value.

See the section on loops for information on how to create a loop. Given the example on the loops page:

HTML

<ul>
    <li>
       <h2>Title</h2>
       <h3>Year</h3>
       <p>Director</p>
    </li>
</ul>

TSS:

ul li {repeat: data(films); }
ul li h2 {content: key(); } /* Note the use of key() instead of iteration() to read the array key */
ul li h3 {content: iteration(year); }
ul li p {content: iteration(director) ;}

PHP code

$data = [
    'films' => [
        'Pulp Fiction' => [
            'year' => '1994',
            'director' => 'Quentin Tarantino'
         ],
         'Jaws' => [
             'year' => '1975',
             'director' => 'Steven Spielberg'
         ],
         'Titanic' => [
            'year' => '1997',
            'director' => 'James Cameron'
         ]
    ]
];

$template = new \Transphporm\Builder($xml, $tss);
echo $template->output($data)->body;

This will loop through the listed films and generate the following HTML:

<ul>
    <li>
       <h2>Pulp Fiction</h2>
       <h3>1994</h3>
       <p>Quentin Tarantino</p>
    </li>
    <li>
       <h2>Jaws</h2>
       <h3>1975</h3>
       <p>Steven Speilberg</p>
    </li>
    <li>
       <h2>Titanic</h2>
       <h3>1997</h3>
       <p>James Cameron</p>
    </li>
</ul>

If you wanted to hide any films released in 1997 you can do the following in the TSS:

ul li {repeat: data(films); }
ul li:iteration[year=1997] {display: none;}
ul li h2 {content: key(); } /* Note the use of key() instead of iteration() to read the array key */
ul li h3 {content: iteration(year); }
ul li p {content: iteration(director) ;}

The line

ul li:iteration[year=1997] {display: none;}

ul li:iteration[year=1997] will match any li where the iteration value for year is equal to 1997.

For both :data and :iteration Transphporm supports field=value for equals and field!=value for not equals.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.