Framework Turbulences : TUTO 5 - Intégration de script à l'application + Utilisation d'une fonction

Intégration de script à l'application

Le script utilisé est jquery.js . Clic droit - enregistrer la cible sous pour obtenir le fichier.
Pour utiliser une fonction présente dans le script JQuery.js (par exemple), il faut inclure la librairie.
* Soit la librairie est pour toute l'application :

+ dans ce cas là, le fichier doit être copié dans le dossier /turbapp/public/script/lib/jquery/jquery.js.
+ pour insérer ce script, il faut écrire dans le fichier /turbapp/modules/layout/LayoutView.php :

$this->assign_js(
'lib:jquery/jquery.js' // de base il va chercher dans le dossier turbapp/public/script/
);

* Soit la librairie est relative à un module en particulier :

+ dans ce cas, le fichier doit être copié dans le dossier du module /turbapp/modules/administrator/views/script/jquery.js.
+ pour insérer ce script, il faut écrire dans la vue du module /turbapp/modules/administrator/AdministratorView.php :

$this->assign_js(
'jquery.js' // de base il va chercher dans le dossier turbapp/modules/administrator/views/script/
);

Le script est maintenant chargé. Il ne reste qu'à l'utiliser.

Utilisation d'une fonction

LA TEMPLATE
On veut pouvoir déplacer des éléments en direct sur la page. Pour cela, une fonction éxiste dans la librairie JQuery Sortable. Cette fonction a besoin de définir quels éléments sont susceptibles d'être déplacés (quels "items" et entre quels groupes d'items ("boxes")) et par quelle poignée ("handle") ils se font déplacer.

On ajoute donc dans la template list.tpl les élements dont on a besoin :
/turbapp/modules/administrator/views/html/list.tpl.

<div class="maDiv">
<hr/>1ere série d'admins
<div class="maBox">
{if $administrators|@count neq 0}
{foreach from=$administrators item=i}
<div class="monItem" style="background-color: red"><div class="maPoignee">o</div> {$i->id}-{$i->level}-{$i->address_id}</div>
{/foreach}
{else}
<p>Aucun élément dans la liste</p>
{/if}
</div>
<hr/>2eme série d'admins
<div class="maBox">
{if $administrators|@count neq 0}
{foreach from=$administrators item=i}

<div class="monItem" style="background-color: green">
<div class="maPoignee">o</div> {$i->id}-{$i->level}-{$i->address_id}</div>
{/foreach}
{else}
<p>Aucun élément dans la liste</p>
{/if}
</div>
</div>

Une fois que l'on a bien formaté la template, on peut passer à l'écriture du script.

LE SCRIPT
Le script jquery est désormais intégré à l'application ou au module.
On veut pouvoir déplacer les utilisateurs sur la plage et les trier à notre gré.
On créé un fichier, ou script, dans le dossier script du module :
/turbapp/modules/administrator/views/script/sortable.js.
dans lequel on va mettre ce code :

$('.maDiv').sortable(
{items:'.monItem', boxes:'.maBox', handle:'.maPoignee'}
);

Ce code signifie que l'on va effectuer la fonction sortable sur la classe maDiv (il s'agira ici d'une div), que l'on pourra déplacer les élements de classe monItem et que ces items seront déplacables en "cliquant/déplacant" la poignée de classe maPoignee.

ESSAYONS SUR UNE AUTRE FONCTION,
la fonction autogrow (permet d'étirer automatiquement un textarea au besoin )

LA TEMPLATE
On veut pouvoir étirer automatiquement un textarea dans un formulaire. Pour cela, une fonction éxiste dans la librairie JQuery Autogrow. Cette fonction n'a besoin que d'un textarea pour fonctionner.

On ajoute donc dans la template list.tpl un textarea :
/turbapp/modules/administrator/views/html/edit.tpl.

<textarea id="autogrowableTA" name="name" style="overflow: hidden; height: 105px;"> Test you text, that wil autogrow
</textarea>

LE SCRIPT

On créé un fichier, ou script, dans le dossier script du module :
/turbapp/modules/administrator/views/script/autogrow.js.
dans lequel on va mettre ce code :

$('#autogrowableTA').autogrow();

Ce code signifie que l'on va effectuer la fonction autogrow sur l'id autogrowableTA. Si on voulait le faire sur tous les textarea, on aurait pu mettre simplement textarea.