bd actions imbriquees fr

Il est possible d'imbriquer des actions, d'utiliser des actions comme arguments d'autres actions.
Mais comment cela fonctionne-t-il ?

Shortcodes imbriqués

Il est possible de mettre le shortcode d'une action comme contenu ou comme argument d'une option.

Les actions sont autonomes et indépendantes.
Elles utilisent directement le résultat fournit par une action incluse.
C'est pour cela que :

  • les actions sont évaluées en commençant par la fin de l'article et les plus inclus en premier.
  • les actions doivent retourner un résultat compatible et compréhensible par l'action parente

Pour bien comprendre le principe, voici le processus étape par étape.
note: les sauts de lignes, surlignages et numérotations sont uniquement là pour faciliter la lecture.

Contenu de l'article
Explications
{up table-par-lignes} 
  {up csv2table | header=id;titre} 
     {up jcontent-by-categories=8  
          | maxi=3 | main-tag=0 | item-tag=0          | template=##id##;##title## 
          | new-html={up icon=etoile} 
      }
   {/up csv2table}
{/up table-par-lignes}

L'action icon étant la plus incluse, elle est évaluée en premier.

Elle retourne : 

<span style="font-size:24px">⭐</span>
{up table-par-lignes} 
  {up csv2table | header=id;titre} 
     {up jcontent-by-categories=8  
          | maxi=3 | main-tag=0 | item-tag=0          | template=##id##;##title## 
          | new-html=<span style="font-size:24px">⭐</span> 
      }
   {/up csv2table}
{/up table-par-lignes}
Avant la deuxième phase, le code HTML de l'article est celui ci-contre.le shortcode jcontent-by-categories retourne le code suivant :

<span style="font-size:24px">⭐</span>;353;geocode ~ récupérer les coordonnées d'une adresse postale
;349;loadmodule ~ charger un module
;351;upclass2style ~ créer le fichier référence
{up table-par-lignes} 
  {up csv2table | header=id;titre} 
<span style="font-size:24px">⭐</span>;353;geocode ~ récupérer les coordonnées d'une adresse postale
;349;loadmodule ~ charger un module
;351;upclass2style ~ créer le fichier référence
   {/up csv2table}
{/up table-par-lignes}
La troisième étape est de transformer le code CSV entre les shortcodes de csv2table.

<table id="up-98-2" class="csv2table">
<thead>
<tr>
<th>new</th>
<th>id</th>
<th>titre</th>
</tr>
</thead>
<tbody>
<tr>
<td><span style="font-size:24px">⭐</span></td>
<td>353</td>
<td>geocode ~ récupérer les coordonnées d'une adresse postale</td>
</tr>
<tr>
<td></td>
<td>349</td>
<td>loadmodule ~ charger un module</td>
</tr>
<tr>
<td></td>
<td>351</td>
<td>upclass2style ~ créer le fichier référence</td>
</tr>
</tbody>
</table>
{up table-par-lignes}
    <table id="up-98-2" class="csv2table">
    ... le contenu de la table
    </table>
{/up table-par-lignes}
La dernière étape consiste pour l'action d'ajouter le code Javascript pour rendre responsive la table ciblée par son identifiant. Elle retourne le code reçu comme contenu sans ses shortcodes, soit :

<table id="up-98-2" class="csv2table">
... le contenu de la table
</table>

Voici une copie d'écran du résultat final :

Parcours récursif

La méthode ci-dessus, qui fonctionne parfaitement depuis 5 ans, a 2 impossibilités :

  • utiliser une action comme argument d'un prefset 
  • l'ajout dynamique d'actions par des actions

A partir de la version v5.2 de UP, ces 2 limites sont partiellement levées.
UP va réanalyser le contenu de l'article ou du module, tant qu'il reste des shortcode non résolus.

Voyons cela en pratique ...

Une action comme prefset

Imaginons que nous voulons mettre par défaut une étoile dans l'option new-html de l'action jcontent-by-categories
en ajoutant new-html="{up icon=etoile}" dans la section options de son fichier custom/prefs.ini.

Si nous utilisons l'action icon, en sortie de l'analyse de l'action jcontent-by-categories, nous aurions le code :

Le shortcode 

{up jcontent-by-categories=8 | maxi=3 | main-tag=0 | item-tag=0 | template=##new##;##id##;##title## }

Le résultat

{up icon=etoile};353;geocode ~ récupérer les coordonnées d'une adresse postale
;349;loadmodule ~ charger un module
;351;upclass2style ~ créer le fichier référence

Depuis la version v5.2 de UP, ce cas ne pose plus de problème, car il sera résolu lors d'un second passage de la boucle de résolution des shortcodes.

Ajout d'action par des actions

Un exemple avec une action snippet très simplifiée

    Le contenu de l'article

    {up div=box-info}
      {up snippet=test}
    {/up div}

    Contenu du snippet test

    {up icon=plus,red,2rem} du texte ...

    1. Lors de l'affichage de l'article, UP va résoudre les actions à partir de la fin, les enfants d'abord. Soit snippet en premier
    2. UP va ensuite résoudre l'action div en ignorant le contenu ajouté par snippet qui se trouve après
    3. La nouveauté est qu'une fois toutes les actions résolues, UP va à nouveau vérifier et résoudre les nouvelles actions à partir de la fin

    Les limites de la méthode

    Prefset qui écrit dans le head

    Admettons, exemple idiot, que l'on désire que le contenu de toutes les actions div soit rouge sur mobile, on serait tenté d'ajouter un preset css-head avec l'action mq.

    Le shortcode

    {up div}un texte{/up div}

    Le prefset

    [options]
    css-head="{up mq=#id | mobile=color:red !important}" 
    Le résultat HTML

    <div id="up-98-1">un texte</div>

    L'ajout dans le HEAD

    <style>{up mq=#up-98-1 | mobile=color:red !important}</style>

    Résultat, l'action div va écrire le contenu de css-head dans le head en changeant uniquement #id par l'id de l'action div.
    Un second passage pour résoudre les shortcodes oubliés examine seulement le contenu et pas le head.
    Dans ce cas, il faut mettre la règle CSS dans le prefset, soit

    [options]
    css-head="#id[@media (max-width:480px)[color:red !important]]"

    Astuce : vous pouvez exécuter le shortcode pour récupérer la règle médiaquerie qu'il suffira de copier dans le prefset.

    Action qui écrit dans le head

    Imaginons ces 2 shortcodes pour afficher un beau fond d'écran pour la période Noël

    {up filter=period:1215,0110}
      {up bg-image=noel.jpg}
    {up filter}
    
    L'action bg-image, exécutée en premier, va ajouter une règle CSS dans le head pour que

    <style>body{background-image:url(images/noel.jpg)}</style>

    L'action filter n'aura plus rien à filtrer, car l'image de fond est déjà programmée.

    Dans ce cas, utilisez l'option filter de l'action qui va interdire l'exécution de l'action bg-image si les conditions ne sont pas remplies.

    {up bg-image=noel.jpg | filter=period:1215,0110}