Utilisation de prototype et regex

Bonsoir tout le monde,

Tout d'abord je tiens a dire que je suis débutant en Javascript, merci d'être indulgent :)

Voilà, j'aimerai me lancer dans la création d'une fonction (j'ai essayé d'écrire une classe mais je n'ai pas encore les bonnes notions pour en faire en JavaScript).

Je vous explique tout d'abord mon code HTML...

Cela va être du genre :

Code:

---

1 2 3 4 5 6 7 8

<div id="portefolio"> <div id="picture_1" class="picture_portefolio"></div> <div id="content_2" class="content_portefolio"></div> <div id="picture_2" class="picture_portefolio"></div> <div id="content_2" class="content_portefolio"></div> <div id="picture_3" class="picture_portefolio"></div> <div id="content_2" class="content_portefolio"></div> </div>

---

Lors du clique sur un picture_[0-9*] j'aimerai qu'il récupère le nombre pour ouvrir l'élément content_[nombre_reçu]

Sachant que j'aimerai que quand je clique sur un autre élément, il me ferme celui qui est ouvert.

Le problème pour moi est enfaite de récupérer le nombre dérrière et de lister les éléments déjà ouvert.

Je pense que pour pouvoir lister tout les éléments déjà ouvert il faut utiliser Event.findElement()...


Voilàa ce que j'ai fais :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

var Portefolio = Class.create();   Portefolio.prototype = { initialize : function(element) { this.element = $(element); },   getInit : function() {   Event.observe('picture_[0-9*]', 'click', function() { content_open = Event.findElement(this.element, 'content_'); if(content_open != null) { Effect.BlindUp(content_open.tagName); } else { nbr = ??; id_content = 'content_' + nbr; Effect.toggle(id_content, 'slide'); if(id_content.visible()) { Effect.ScrollTo(id_content); } }   }   }     }   Event.observe(window,'load',function(){ new Portefolio('portefolio'); });

---

Pouvez vous me donner un coup de main s'il vous plait ?

Merci d'avance,
Cordialement

Bonjour et bienvenue sur le forum,

Tout d'abord, je ne sais pas quelle version de prototype tu utilises, mais depuis les dernières versions (1.6), la création de classes a été simplifiée :
plus besoin de faire

Code:

---

1 2 3 4 5 6 7 8 9

var MaClasse = Classe.create(); MaClasse.prototype = { initilaize: function() { }, methode1: function() {   } };

---

tu peux faire directement

Code:

---

1 2 3 4 5 6 7 8

var MaClasse = Classe.create({ initilaize: function() { }, methode1: function() {   } });

---

Pour revenir maintenant à test questions, tu peux certainement stocker le dernier élément ouvert

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

var Portefolio = Class.create({ initialize: function(element) { this.element = $(element); // definition d'un membre pour stocker le // dernier element ouvert par defaut à null this.openedPicture = null; // appelons l'init tout de suite this.getInit(); } // ... });

---

Ensuite, la syntaxe de sélection d'élément par expression régulière ne va pas fonctionner, Event.observe attend en premier paramètre un id ou un element. Pour toi l'objectif est d'appliquer le même listener à tous les éléments dont l'id suit l'expression régulière que tu as saisi, mais plus simplement à tous les enfants de element dont la classe css est picture_portefolio.
Tu peux récupérer tous ces éléments dans un tableau en faisant :

Code:

---

1 2	this.element.select(".picture_portefolio")

---

Comme tu auras un tableau, tu dois soit boucler sur ce tableau pour attacher le listener via une boucle simple ou via la méthode each que prototype fourni pour les Enumerable, soit en invoquant pour tous ces éléments la méthode observe :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var pictures = this.element.select(".picture_portefolio"); for(var i=0,size=pictures.length;i<size;i++) { pictures[0].observe("click", function(e){}); // equavalent à Event.observe(pictures[0], "click", function(e){}); } // ou bien var pictures = this.element.select(".picture_portefolio"); // la méthode each appel la fonction passée en paramètre // pour chacun des éléments de l'Enumerable pictures.each(function(picture) { picture.observe("click", function(e){}); // equavalent à Event.observe(picture, "click", function(e){}); }); // ou bien var pictures = this.element.select(".picture_portefolio"); pictures.invoke("observe", "click", function(){});

---

Pour ce qui est du code du listener "click", le problème c'est que tu as besoin d'une référence à l'objet Portfolio courant (pour avoir this.element ou this.openedPicture) Cependant, dans le contexte d'un listener, la fonction est hors du scope de l'objet, il faut donc explicitement lier le listener à l'objet courant, ceci est fait en appelant la méthode bindAsEventListener de l'objet function.

Code:

---

1 2 3 4 5 6 7

for(var i=0,size=pictures.length;i<size;i++) { pictures[0].observe("click", function(e){}.bindAsEventListener(this)); // equavalent à Event.observe(pictures[0], "click", function(e){}.bindAsEventListener(this)); } // ou bien pictures.invoke("observe", "click", function(e){}.bindAsEventListener(this));

---

petite remarque, avec la syntaxe .each, on se trouve aussi dans une fonction "anonyme", il faut donc passer en deuxième paramètre du each le contexte courant (qui est this dans la méthode d'itération) en l'occurence c'est this :

Code:

---

1 2 3 4

pictures.each(function(picture) { picture.observe("click", function(e){}.bindAsEventListener(this)); // equavalent à Event.observe(picture, "click", function(){}.bindAsEventListener(this)); }, this);

---

En ayant fait ça, quand le listener sera executé, le this courant sera l'objet portfolio.
on peut donc
1/ recuperer l'element cliqué via l'evenement (le paramètre e du listener)
2/ avec l'element cliqué, on peut trouver l'element contenu correspondant (grace à une expression reguliere par exemple)
3/ masquer l'element ouvert s'il n'est pas null et different de l'element à afficher
et ca donne ca :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

pictures.invoke("observe", "click", function(e){ // recuperons l'element clique var clickedElem = e.element(); // son id var clickedElemID = clickedElem.identify(); // determinons l'id de l'element à afficher var displayElementID = "content_" + clickedElemID.match(/picture_([0-9]*)/)[1]; // si l'element actuellement visible est celui actuellement visible, on a fini if(this.openedPicture != null && this.openedPicture.identify() == displayElementID ) { return; } // si l'element visible n'est pas null, on le masque if(this.openedPicture != null ) { new Effect.BlindUp(this.openedPicture); } // l'element affiché est maintenant celui dont l'id est displayElementID this.openedPicture = $(displayElementID); // affichons le new Effect.BlindDown(this.openedPicture); }.bindAsEventListener(this));

---

Merci pour toutes ses réponses !

En effet j'utilise la version 1.6, merci pour la suggestion :)

Concernant tes réponses, j'avoue ne pas avoir tout compris.. Mais étant donné que je débute, c'est normal... J'ai un peu regardé la doc de prototype des fonctions que tu m'as suggéré d'utiliser et j'y vois un peu plus clair...

Si je comprend bien je dois procéder ainsi ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

var Portefolio = Class.create({ initialize: function(element) { this.element = $(element); // definition d'un membre pour stocker le // dernier element ouvert par defaut à null this.openedPicture = null; // appelons l'init tout de suite this.getInit(); } getInit : function() { pictures.invoke("observe", "click", function(e){ // recuperons l'element clique var clickedElem = e.element(); // son id var clickedElemID = clickedElem.identify(); // determinons l'id de l'element à afficher var displayElementID = "content_" + clickedElemID.match(/picture_([0-9]*)/)[1]; // si l'element actuellement visible est celui actuellement visible, on a fini if(this.openedPicture != null && this.openedPicture.identify() == displayElementID ) { return; } // si l'element visible n'est pas null, on le masque if(this.openedPicture != null ) { new Effect.BlindUp(this.openedPicture); } // l'element affiché est maintenant celui dont l'id est displayElementID this.openedPicture = $(displayElementID); // affichons le new Effect.BlindDown(this.openedPicture); }.bindAsEventListener(this)); } });

---

oui, c'est presque ça : dans ton code pictures n'est jamais défini...

Je ne peux que t'encourager à lire l'API prototype dans son ensemble ; ca parait long, mais on découvre des outils dont on ne soupçonne même pas l'existence... qui en général facilitent énormément la vie.

Bonne chance pour la suite

En effet...

Comme cela alors ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

var Portefolio = Class.create({ initialize: function(element) { this.element = $(element); // definition d'un membre pour stocker le // dernier element ouvert par defaut à null this.openedPicture = null; // appelons l'init tout de suite this.getInit(); } getInit : function() { var pictures = this.element.select(".picture_portefolio"); pictures.invoke("observe", "click", function(e){ // recuperons l'element clique var clickedElem = e.element(); // son id var clickedElemID = clickedElem.identify(); // determinons l'id de l'element à afficher var displayElementID = "content_" + clickedElemID.match(/picture_([0-9]*)/)[1]; // si l'element actuellement visible est celui actuellement visible, on a fini if(this.openedPicture != null && this.openedPicture.identify() == displayElementID ) { return; } // si l'element visible n'est pas null, on le masque if(this.openedPicture != null ) { new Effect.BlindUp(this.openedPicture); } // l'element affiché est maintenant celui dont l'id est displayElementID this.openedPicture = $(displayElementID); // affichons le new Effect.BlindDown(this.openedPicture); }.bindAsEventListener(this)); } });

---

Pour la doc de prototype, je suis d'accord.

En tout cas bravo à toi, combien d'années dans le JS et l'utilisation de l'API prototype ?

lors du

Code:

---

new Effect.BlindUp(this.openedPicture);

---

Code:

---

this.openedPicture

---

Vaut bien le nom de l'id, mais étant donné qu'il est lui même dans l'id portefolio cela pose un problème.. Enfin du moins cela ne fonctionne pas ... J'ai mis des alert un peu partout... Tout es bien renvoyé correctement .. Après c'est pour ouvrir et fermer ... As tu une idée ?

je suis pas sur d'avoir saisi le problème.
Teste en remplaçant

Code:

---

1 2 3 4 5 6 7

new Effect.BlindUp(this.openedPicture); //par this.openedPicture.hide(); // et new Effect.BlindDown(this.openedPicture); //par this.openedPicture.show()

---

Si ca fonctionne, on a peut-être une collision de reference, essaye alors avec

Code:

---

new Effect.BlindUp(this.openedPicture.identify());

---

Ne fonctionne malheureusement pas ...

Rien ne se ferme, ou s'ouvre...

J'ai réussi a me faire un petit truc sympa ...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

function addEvent(obj, type, fn) { if( obj.attachEvent ) { obj["e"+type+fn] = fn; obj[type+fn] = function(){obj["e"+type+fn]( window.event );}; obj.attachEvent( "on"+type, obj[type+fn] ); } else { obj.addEventListener( type, fn, true ); }; }   Event.observe(window, 'load', function() { $$('.portefolio').each(function(obj,index){ addEvent(obj,'click',function(){ // Quand on reclique sur l'élément on le ferme if($('portefolio'+obj.id.replace('picture_','content_')).visible()){ Effect.BlindUp($('portefolio'+obj.id.replace('picture_','content_')), {duration:0.4}); } else { // on ferme les autres éléments ouvert $$('.portefolio').each(function(obj,index){ if($('portefolio'+obj.id.replace('picture_','content_')).visible()) { Effect.BlindUp($('portefolio'+obj.id.replace('picture_','content_')), {duration:0.4}); } }); // On ouvre l'élément Effect.BlindDown($('portefolio'+obj.id.replace('picture_','content_')), {duration:0.5}); Effect.ScrollTo($('portefolio'+obj.id.replace('picture_','content_'))); } }); });   // On ferme tout les éléments $$('.portefolio').each(function(obj,index){ if($('portefolio'+obj.id.replace('picture_','content_')).visible()) { $('portefolio'+obj.id.replace('picture_','content_')).hide(); } });   });

---

Voilà la source, si ça intéresse quelqu'un :)

Merci de ton aide !