Fardeen GHULAM Parrain de la mafia multimédia

Tutoriel Mootools, la suite (Drag’n Drop et Cookie)

Vu le vif interêt qu'a suscité le précédent tutoriel sur Mootools avec la galerie Ajax, voila donc la suite logique dans laquelle nous allons aborder le drag and drop (ou glisser-déposer pour les puristes) ainsi que la gestion des cookies (non pas les gateaux).

Comme d'hab, on se lance un peu de zik zen et c'est parti pour du drag and drop en folie !

Ce tutoriel est à faire à la suite de ce tutoriel sur Mootools que j'ai fait il y a peu de temps. Je vous conseille vivement de visiter d'abord le tutoriel précédent avant de faire celui ci.

Il vous est possible de rendre votre lecture plus agréable en cliquant sur la petite image en haut à droite.

Nous en étions resté à l'étape 7 de notre exemple de galerie photo en ajax si mes souvenirs sont exacts (et ils le sont)

Voila donc la suite bande de chanceux !

Pour rendre notre petite galerie un peu meilleure, on va ajouter un caddie. Et oui comme ça on pourra prendre n'importe laquelle de nos photos de bonnasses et les glisser-déposer dedans afin de sauvegarder, effacer, charger, admirer celles que nous préférons grâce à un cookie comme on peut le voir en cliquant sur l'image ci-dessous . Oui je sais, c'est formidable.

Etape 8 : Le drag and Drop (glisser-déposer)

Alors pour commencer, nous allons modifier notre fichier recuperer_photo.php pour ajouter ces 3 lignes , afin de pouvoir avoir des elements à glisser/déposer :

echo "
<p class="drag">"; //on ajoute un div pour gerer le drag
echo "<a title="Image : " href="javascript:montrer_image%28%27images_big/%22.$tVals%5B1%5D.%22%27,%27%22.$tVals%5B1%5D.%22%27%29;%5C%22"><img src="images/$tVals%5B1%5D" alt="" /></a>";
echo "";
echo "

";

On ajoute le code HTML du caddie :

<p class="caddie">Ici c'est notre caddie, on a plus qu'a choisir et glisser ces filles ici gratos  </p>

Ensuite on va se remettre un peu de le javascript, parcque je suis sur que vous kiffez ca

Dans notre fonction windows.onload on va ajouter ces quelques lignes commentées afin de déclarer les options et comportements du drag and drop (autres options disponibles):

//les options pour nos objets qui recoit le drop,les caddie
$$('.caddie').each(function(el)
{
el.extend({
onOver: function(el){
if (!this.dragEffect) {
//on definit l'effet si ce n'est pas déjà fait
this.dragEffect = new Fx.Color(this, 'background-color');
}
//effet de clignotement au survol
this.dragEffect.clearTimer().custom('000000', '3399ff');
},
onLeave: function(el){
//effet de clignotement a la fin survol
this.dragEffect.clearTimer().custom('3399ff', '000000');
},
onDrop: function(el, drag){
//effet de clignotement au drop (quand on lache l'element)
this.dragEffect.clearTimer().custom('ff3366', '000000');
//on ajoute l'element dans le div caddie
drag.elementOrg.clone().injectInside(this).draggableTag();
}
})
});

Element.extend({
draggableTag: function(){
this.makeDraggable({
//on recupere les elements ou on peut dropper,
droppables: $$('.caddie'),
//permet de definir quel div permettra la selection
handle: this.getElementsBySelector('.bouton')[0],
onStart: function(){
this.elementOrg = this.element;
//on duplique le div que l'on place dans le div caddie
this.element = this.element.clone().setStyles({
position: 'absolute',
top: this.element.getTop() + 'px',
left: this.element.getLeft() + 'px',
opacity: '0.6'
}).injectInside(document.body);
},
onComplete: function(){
this.element.remove(); //on supprime l'occurence en drag
this.element = this.elementOrg; //on le replace ou il etait
}
});
}
});

Ensuite dans notre fonction photoFinished(), on ajoute ces lignes pour activer l'effet drag'n drop à nos images:

//pr le drag and drop
//on active le drag and drop pour les photos une fois chargées
//on recup ts les div class="drag"
$$('.drag').each(function(el){
//on applique les options de drag  definit plus haut
el.draggableTag();
});

Et enfin evidemment la touche CSS, pour faire joli et aussi pour des raisons techniques sinon ca marche pas. (notamment le position : relative;)

/*classe des elements dans lequel on peut deposer un element*/
.caddie {
clear : both;
border : 1px solid #FF3366;
width : 600px;
position:relative;
float:left;
margin-top : 60px;
padding : 2px;
}

/*apparence de nos images une fois dans le caddie*/
.caddie img{
width : 40px;  /* on fixe la taille des images en miniatures*/
height:40px;
border : 0px;
margin: 0px 0px 0px 0px;
}

.caddie img:hover{  /*au survol*/
border : 1px solid #FF3366;
width : 80px;
height: 80px;
}

.caddie .bouton{
height : 0px; /*on enleve la barre de deplacement de images du caddie*/
width : 0px;
}

/*classe des elements draggables*/
.drag {
/*le position relative est necessaire pour activer le drag and drop*/
position:relative;
cursor : move;
float : left;
position:relative;
padding:0px;
margin-left: 10px;
padding: 0px;
display : block;
text-align : center;
}

/*bouton qui permet de dragger*/
.bouton {
position: relative;
background-color: #FF3366;
padding: 0px;
cursor: move;
height : 8px;
color : white;
font-size : 8px;
}

/*hack special IE de merde*/
* html .bouton {
width : 100px;
margin-top : 2px;
}

On obtient ce résultat pour l'étape 8.

Il faut noter que je n'ai testé que sous Firefox et IE et que de nombreuses choses restent à faire (suppresion d'un element du caddie, empecher les doublons...) pour obtenir quelque chose de vraiment fonctionnel mais ce n'est pas l'objectif de ce tutoriel.

Etape 9 : Gestion des Cookies

Maintenant que notre caddie est à peu près fonctionnel, on va s'occuper de l'enregistrement, chargement et suppression de notre caddie grâce à un cookie. (=petit fichier qui s'enregistre sur l'ordinateur du visiteur)

Pour vérifier les cookies n'hesitez pas à utiliser l'extension Firefox Web developper Toolbar qui est vraiment très puissante et utile.

On va commencer par ajouter le HTML nécessaire pour ajouter nos boutons de controles du caddie.

<p id="menu_cookie"> </p>
<p class="bouton_cookie"><a href="javascript:sauvegarder_caddie();">Sauvegarder caddie</a></p>
<p class="bouton_cookie"><a href="javascript:charger_caddie();">Charger caddie</a></p>
<p class="bouton_cookie"><a href="javascript:effacer_caddie();">Effacer caddie</a></p>
<p class="bouton_cookie"><a href="javascript:vider_caddie();">Vider caddie</a></p>

On ajoute une pincée de CSS histoire de rendre notre menu un peu moins triste.

/*pr les boutons de gestion de cookies*/
#menu_cookie {
clear : both ;
margin : 0;
}

.bouton_cookie  {
float : left;
background-color: #000;
color : white;
margin-left : 40px;
margin-top : 10px;
padding : 2px;
}

.bouton_cookie:hover  {
background-color: #FF3366;
}

.bouton_cookie a  {
color : white ;
}

Et enfin le Javascript qui va gérer le tout:

//vider le caddie
function vider_caddie() {
//on recupere toutes les div avec la class .drag dans le caddie
var images = $$('.caddie .drag');
images.each(function(el){
//on les efface
el.remove();
});
}

//effacer le caddie (cookie)
function effacer_caddie() {
Cookie.remove("tutoriel_mootools");
alert('Cookie effacé.')
}

//charge les images du caddie
function charger_caddie() {
//on recuper le contenu du cookie
var contenu_caddie = Cookie.get("tutoriel_mootools");
//si le caddie n'est pas vide
if(contenu_caddie != undefined) {
//on separe chaque nom d'image
contenu_caddie = contenu_caddie.split('|');
//on parcout le tableau d'image qu'on reinjecte dans le div caddie
var caddie_html = "";
for(var i = 0 ; i < contenu_caddie.length - 1; i++) {
      //on recrée le HTML nécessaire pour chaque image
      caddie_html = caddie_html + "<a href=\"javascript:montrer_image('images_big/"+contenu_caddie[i]+"','"+contenu_caddie[i]+"');\" ><img src='images/"+contenu_caddie[i]+"' alt='"+contenu_caddie[i]+"'></a> ";
    }
//on rempli notre caddie
$('caddie').setHTML("Caddie chargé 
" + caddie_html);
}
else {
alert('Caddie inexistant (Verifier que les cookies sont activés si le problème persiste)')
}
}

//sauvegarde les images du caddie
function sauvegarder_caddie() {
//on recupere toutes les images dans le caddie
var images = $$('.caddie .drag img');
var contenu_caddie ="";
//un petit compteur pour savoir le nombre d'images sauvegardée
var compteur = 0 ;
images.each(function(el){
//on ajoute a la variable contenu caddie les noms des images contenus dans le ALT
contenu_caddie = el.getProperty('alt') + "|" + contenu_caddie ;
compteur++;
});
//si le caddie n'est pas vide
if(contenu_caddie.length > 0) {
//on creer le cookie tutoriel_mootools avec le contenu contenu_caddie pour 1 journée
Cookie.set("tutoriel_mootools", contenu_caddie, 1);
alert("Caddie enregistré. ( "+compteur+" element(s) )")
}
else {
alert("Le caddie est vide.");
}
}

Et voila le résultat pour notre étape 9.

Conclusion

Vous êtes maintenant capable de réaliser une gallerie AJAX avec navigation en accordeon, drag and drop, gestion de caddie par cookie, ainsi que des effets graphiques simples. Vous êtes des winners !

Quelques de nouvelles de Mootools avant de clore ce chapitre, aujourd'hui est sortie une documentation par l'exemple de Mootools, Mootools-Primer ainsi qu'un exemple d'upload-multiple en Flash-Mootools qui déchire vraiment et qui sera bientôt finalisé. (sur lequel je reviendrais quand il sera correctement terminé)

Vous maitrisez le framework Mootools , à vous de développez les super applications du Web2.0 !

PS: Comme d'hab si vous avez des questions, remarques ou éloges à faire, n'hésitez pas, je me ferais un plaisir de vous répondre dans les commentaires.

Vous pouvez consultez le tutoriel sur la super administration de base de données, facilement réalisable et modifiable avec PHPMyEdit, pour que vous puissiez par exemple lier la gallerie AJAX avec une base de donnée.