Basic Usage: Conditional Logic

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.

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.