Présentation

Cette classe permet de générer facilement des fragments de code Javascript.

Son objectif est de permettre d'ajouter facilement des appels à des libraires Javascript dans une page.

Elle ne permet en aucun cas du code Javascript complexe.

Exemple

Pour générer du code, il faut créer un objet CopixJSWidget. Il est ensuite possible d'effectuer un certain nombre d'opération sur l'objet, qui donneront lieu à la création du code Javascript. Il suffit ensuite d'ajouter l'objet aux en-têtes HTML.

PHP:

<?php

// Tableau
$params = array(5,6,7);

// Initialise un widget.
$js = new CopixJSWidget();

// Ajoute un appel de fonction
$js->AppelDeFonction(true, "bla", $params);

// Insère le code Javascript dans l'en-tête du document HTML.
CopixHTMLHeader::addJSCode($js);
?>

Générera le code suivant:

AppelDeFonction(true, "bla", [5,6,7]);

Référence

Assignation de variable

PHP:

<?php
$js->maVariable = 5;
?>

Javascript:

var maVariable = 5;

N.B. : si la variable a déjà été déclarée, il n'y aura pas de déclaration avec 'var'. Il est possible de prédéclarer des variables à la création du widget.

PHP:

<?php
$js = new CopixJSWidget(array('maVariable'));
$js->maVariable = 7;
?>

Javascript:

maVariable = 7;

La valeur est automatiquement convertie en Javascript :

PHP:

<?php
$js->maVariable = array("x"=>5,"y"=>"toto");
?>

Javascript:

maVariable = {"x":5,"y":"toto"};

Déclaration de variable

PHP:

<?php
$js->var_("maVariable");
?>

Javascript:

var maVariable;

Utilisation de variable

PHP:

<?php
$js->variable2 = $js->variable1;
?>

Javascript:

var variable2 = variable1;

Appel de fonction

Les arguments sont automatiquement convertis en Javascript.

PHP:

<?php
$js->appelDeMaFonction(6, array("x","y",false));
?>

Javascript:

appelDeMaFonction(6, ["x","y",false]);

N.B. : des raccourcis existent pour les fonctions MooTools? $(), $$() et $A() :

PHP:

<?php
$js->monElem = $js->_('idElem');
$js->mesElems = $js->__('body');
$js->tab = $js->_A([5,6]);
?>

Javascript:

var monElem = $("idElem");
var mesElems = $$("Body");
var tab = $A([5,6]);

Déclaration d'une fonction

Fonction nommée

PHP:

<?php
$js->function_("maFonc", "arg1", "faitQuelqueChose(arg1);");
?>

Javascript:

function maFonc(arg1){faitQuelqueChose(arg1);}

Il est possible d'utiliser un autre widget pour le corps de la fonction.

PHP:

<?php
$fbody = new CopixJSWidget(array("arg1"));
$fbody->faitQuelqueChose($fbody->arg1);
$js->function_("maFonc", "arg1", $fbody);
?>

Javascript:

function maFonc(arg1){faitQuelqueChose(arg1);}

Fonction anonyme

PHP:

<?php
$anonFunc = $js->function_(null, "arg1", "faitQuelqueChose(arg1);");
$js->appelAvecCallback(5, $anonFunc);
?>

Javascript:

appelAvecCallback(5, function(arg1){faitQuelqueChose(arg1);});

Programmation objet

Tous les variables et appel de fonction peuvent être utilisées comme des objets et/ou des tableaux.

Construction d'un objet

PHP:

<?php
$js->instance = $js->MaClasse->new_(6, array(8,5));
?>

Javascript:

var instance = new maClasse(6,[8,5]);

Assignation de propriété

PHP:

<?php
$js->monObjet->prop = 5;
?>

Javascript:

monObjet.prop = 5;

Lecture d'une propriété

PHP:

<?php
$js->maVar = $js->monObjet->prop;
?>

Javascript:

var maVar = monObjet.prop;

Appel de méthode

PHP:

<?php
$js->monObjet->faitUnTruc();
?>

Javascript:

monObjet.faitUnTruc();

Tableaux

PHP:

<?php
$js->maVar = $js->monTableau[5];
?>

Javascript:

var maVar = monTableau[5];

Exemple avancé

Tiré de la zone heading|treebrowser :

Avant

<?php
// Initialisation de l'arbre
if($isTreeRoot) {
	_tag('mootools');
	CopixHTMLHeader::addCSSLink(_resource('heading|styles/treeBrowser.css'));
	CopixHTMLHeader::addJSLink(_resource('heading|js/treeBrowser.js'));
		
	// Nb: on utilise le $treeId comme nom de variable
	CopixHTMLHeader::addJSDOMReadyCode($treeId.' = new CopixHeadingTreeBrowser({treeId:\''.$treeId.'\'});');
	$element = "$('$treeId')";
	if($onSelect) {
		CopixHTMLHeader::addJSDOMReadyCode("$element.addEvent('headingSelected', function(headingId){ $onSelect });");
	}
	if($onUnselect) {
		CopixHTMLHeader::addJSDOMReadyCode("$element.addEvent('headingUnselected', function(headingId){ $onUnselect });");
	}
	if($onExpand) {
		CopixHTMLHeader::addJSDOMReadyCode("$element.addEvent('headingExpanded', function(headingId){ $onExpand });");
	}
	if($onCollapse) {
		CopixHTMLHeader::addJSDOMReadyCode("$element.addEvent('headingCollapsed', function(headingId){ $onCollapse });");
	}
}

// Ajoute l'enregistrement des rubriques.
CopixHTMLHeader::addJSDOMReadyCode("$treeId.registerHeadings([".implode(',', $realIds)."]);");
		
// Présélectionne la rubrique si on est au bon niveau
if($selectedId > 0 && in_array($selectedId, $realIds)) {
	CopixHTMLHeader::addJSDOMReadyCode("Copix.queueEvent($($treeId.getCaptionId($selectedId)), 'click');");
}
?>

Après

<?php
$js = new CopixJSWidget();

// Initialisation de l'arbre
if($isTreeRoot) {
	_tag('mootools');
	CopixHTMLHeader::addCSSLink(_resource('heading|styles/treeBrowser.css'));
	CopixHTMLHeader::addJSLink(_resource('heading|js/treeBrowser.js'));
		
	// Nb: on utilise le $treeId comme nom de variable
	$js->$treeId = $js->CopixHeadingTreeBrowser->new_(array('treeId' => $treeId));
	$element = $js->_($treeId);
	if($onSelect) {
		$element->addEvent('headingSelected', $js->function_(null,'headingId',$onSelect));
	}
	if($onUnselect) {
		$element->addEvent('headingUnselected', $js->function_(null,'headingId',$onUnselect));
	}
	if($onExpand) {
		$element->addEvent('headingExpanded', $js->function_(null,'headingId',$onExpand));
	}
	if($onCollapse) {
		$element->addEvent('headingCollapsed', $js->function_(null,'headingId',$onCollapse));
	}
}

// Ajoute l'enregistrement des rubriques.
$js->$treeId->registerHeadings($realIds);
		
// Présélectionne la rubrique si on est au bon niveau
if($selectedId > 0 && in_array($selectedId, $realIds)) {
	$captionId = $js->$treeId->getCaptionId($selectedId);
	$caption = $js->_($captionId);
	$js->Copix->queueEvent($caption, 'click');
}

CopixHTMLHeader::addJSDOMReadyCode($js);
?>