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 !