Faire un bandeau diaporama avec eZ Publish (Partie 2)

• Publié le 10 Janvier 2009
• 3 commentaire(s)
• Catégorie : Technologies Web

Maintenant que nos diaporamas sont crées, rangés et associés à nos pages principales en Back Office, on va pouvoir les afficher en frontal. Ce billet détaille :

• Quelques concepts et prérequis
• Le préchargement des images via Mootools
• La génération progressive du XHTML contenant les bandeaux
• L'effet de fondue enchaînée
• Le template eZ Publish de génération des tableaux JavaScript

Quelques concepts et prérequis

L'utilisation de FrameWorks JavaScript tels que Mootools ou JQuery, apportent certes une bonne alternative à Flash pour afficher de jolies effets tel que ce bandeau, mais pas seulement. Ces FrameWorks permettent surtout de faciliter la séparation stricte entre la présentation XHTML et l'interactivité JavaScript. C'est à dire que le code XHTML ne contient plus aucun code JavaScript, dont les horribles "onMouseOver" par exemple et autres codes mélangés aux codes XHTML. Le site fonctionne donc parfaitement sans JavaScript, qui ne fait qu'apporter un enrichissement, une interactivité ou un confort lorsqu'il est activé. Cette démarche est d'ailleurs indispensable pour garantir l'accessibilité de son contenu (parmi d'autres critères).

Concernant le diaporama, la logique complète de fabrication est la suivante :

• Chargement progressif des images (à partir d'un tableau d'images généré par eZ Publish)
• Pour chaque image chargée, positionnement dynamique des balises XHTML permettant de l'afficher
• Exécution régulière d'une fonction Mootools pour enchaîner les fondues

Le chargement progressif des images

Mootools propose un objet de préchargement d'images (et aussi de JavaScript et de CSS), l'objet Assets. Dès que la première image est chargée, le code exécute la fonction startslideshow(), et programme l'exécution différée de cette même fonction toutes les 5 secondes avec periodical. Je ne détaille pas quelques gadgets inutiles, comme par exemple la barre de chargement au dessus du bandeau... (si si, le truc hachuré est une barre de chargement)

var loader = new Asset.images(images_files, { 
  
 onProgress: function(counter,index) {
  //Mise à jour de la barre de progression
  progressBar.set((counter + 1) * (100 / images_files.length));
   
  //Création du conteneur pour le bandeau chargé
  var mydiv = new Element('div', {id:_BANDEAU_DIV_ID+counter}).inject($(_BANDEAU_RACINE_ID));
  mydiv.setOpacity(0); //Bandeau invisible par défaut
   
  //Création de la légende
  var mydivtitre = new Element('div',{'class': _BANDEAU_TITRE_ID, 'style':'display:none' }).inject(mydiv);
  mydivtitre.setOpacity(_BANDEAU_TITRE_OPACITY); // Opacité hors CSS pour validation W3C
  mydivtitre.set({html: '<b>' + tab_bandeaux[counter].titre + '</b><br />' + tab_bandeaux[counter].legende });
   
  //Création de l'image
  var myimg = new Element('img',{ src:tab_bandeaux[counter].src, 'style':'display:none'}).inject(mydiv);
  
  bandeaux_loading_count = counter+1;
   
  if (counter == 0) {
   startslideshow();
   startslideshow.periodical(_SLIDESHOW_TIMING);
  }
 }
});
 
 

On remarque que certaines variables comme _BANDEAU_DIV_ID ont été définies au préalable dans un fichier de configuration.

• Le tableau images_files est généré par eZ Publish et contient les images à précharger (l'objet Assets attend en paramètre un simple tableau à une entrée)
• La tableau tab_bandeaux est généré par eZ Publish et contient des objets "bandeau" dont voici la classe Mootools

var bandeau = new Class({
  initialize: function(src, titre, legende){
 this.src = src;
 this.titre = titre;
 this.legende = legende;
  }
});
 
 

La génération progressive du XHTML

Le plus simple est d'observer avec FireBug le résultat de la génération dynamique du XHTML par Mootools. On observe que chaque bandeau est contenu dans un <div/>, qui encapsule un autre <div/> pour la légende et une <img/> pour l'image.

Les bandeaux sont donc empilés les uns sur les autres, et se masquent respectivement, à l'aide d'une propriété CSS magique :

#bandeau div {
 position: absolute;
}
 
 

L'effet de fondu enchaînée

Une fois nos bandeaux empilés, il suffit donc :

• De masquer tous les bandeaux au démarrage
• De masquer / démasquer toutes les 5 secondes les bandeaux mitoyens, deux à deux, avec des effets Mootools de fading.

var startslideshow = function() {
 if (currentbandeau >= 0) {
  $(_BANDEAU_DIV_ID + currentbandeau).fade(1, 0);
 } else {
  currentbandeau = 0;
 }
 
 if (currentbandeau >= (bandeaux_loading_count-1)) {
  currentbandeau = 0;
 } else {
  currentbandeau++;
 }
 
 $(_BANDEAU_DIV_ID + currentbandeau).getElement('div').setStyle('display', '');
 $(_BANDEAU_DIV_ID + currentbandeau).fade(0, 1);
 $$('#'+_BANDEAU_RACINE_ID+' img').setStyle('display', 'block');
}
 
 

On remarquera quelques bizarreries poussives dans la gestion des styles, mais qui ont été nécessaire pour une compatibilité IE6 et IE7. Alors quand ca marche, on y touche plus...

Le template eZ Publish de génération des tableaux JavaScript

Premièrement il faut inclure un template dédié au JavaScript dans son pagelayout.tpl

<script type="text/javascript">
 {cache-block keys=array( $module_result.uri)}
  {include uri='design:blocks/javascript.tpl'}
 {/cache-block}
</script>
 
 

Voici une portion de code du template javascript.tpl

<script type="text/javascript">
{literal}
var images_files = new Array();
var tab_bandeaux = new Array();
var currentbandeau = -1;
{/literal}
 
{* On récupère le noeud courant *}
{def $current_node=fetch('content','node',hash(node_id,$current_node_id))}
 
{* Tant que le noeud courant ne contient pas de diaporama, on remonte un niveau *}
{while $current_node.data_map.diaporama|is_object()|not()}
 {set $current_node = $current_node.parent}
{/while}
 
{* On a trouvé une page parent content un diaporama, alors on va boucler sur toutes les photos de son diaporama *}
{foreach $current_node.data_map.diaporama.content.data_map.photos.content.relation_list as $key =&gt; $current}
 {def $node=fetch(content,node,hash(node_id,$current.node_id))}
 images_files[{$key}] = {$node.data_map.image.content.original.full_path|ezroot};
 tab_bandeaux[{$key}] = new bandeau(images_files[{$key}],'{$node.name|wash|addslashes}', '{$node.data_map.legende.content|wash|addslashes}'); 
 {undef $node}
{/foreach}
 
{undef $current_node}
 
 

A noter, la présence de l'opérateur addslashes, qui n'est pas un opérateur natif sur eZ Publish mais nécessaire pour éviter un BUG JavaScript, dans le cas d'une légende contenant une simple côte. Pour pouvoir exploiter cette classique fonction PHP addslashes dans ses templates, il suffit de la déclarer dans le fichier template.ini.append.php :

<?php /*
 
[PHP]
PHPOperatorList[addslashes]=addslashes
 
*/ ?>
 
 

• Tags :
• CSS
• FireBug
• eZ Publish
• mootools
• Diaporama
• Object Relations