[Javascript] Menu contextuel

[Ter Rowan]

slut, j ai un soucis "d'esthétique" de programmation, c'est à dire que j'ai les moyens de réaliser moi même mon besoin (manipulation de divers tableaux, etc...) mais que je n'aime pas les solutions que j'imagine. Elles fonctionneront mais seront lourdes, etc...

Donc voici mon besoin

le personnage "explore" un site et trouve différentes choses, par exemple :

un pommier (arbre à fruit)
un poirier (arbre à fruit)
un chat sauvage (animal)
un cerf (animal)
une rivière (point d'eau)
un chêne (arbre)

lorsque le joueur clique sur l'icône d'une de ces "choses", un menu contextuel apparaît, ne proposant que les options "pertinentes" pour la sélection.

Par exemple,
si je clique sur un arbre à fruit, j'ai les options "grimper", "couper du bois", "cueillir un fruit"
si je clique sur un animal, j'ai les options "fuir", "chasser", "attraper"
si je clique sur un point d'eau, j'ai les options "pêcher", "se laver", "puiser de l'eau"
si je clique sur un arbre, j'ai les options "grimper", "couper du bois"

Je ne souhaite pas créer autant de menu qu'il y a de "types" de chose mais un seul, qui n'afficherait (display = ....) que les options pertinentes grâce au calcul javascript.

Code PHP :

<?php 

<ul id="monMenu">

<li id="a1">chasser</li>

<li id="a2">grimper</li>

<li id="a3">fuir</li>

<li id="a4">attraper</li>

<li id="a5">couper du bois</li>

etc... avec toutes les options

</ul> 

[rygnes]

Je n'aime pas du tout les popup, je vais donc te donner plus particulièrement quelque chose qui me convient (je ne dis pas que c'est mieux même si je le pense fortement ^^).

Dans ta page tu as un menu par exemple :

<p>des objets, images, etc. avec un objet onClick=menuContextuel(this.value)</p>
<p id="menuContexte" ><select id="menuSpecifique"><option></option></select></p>

La feuille de style contient au moins ceci :

#menuContexte{
display:none;
}

function menuContextuel(valeur){

document.getElementById('menuContexte').style.display = 'block';

swicth(valeur){
case 'pommier': //création nouveau formulaire (ou sous une autre formle) et affichage
break;

case 'chat': //idem
break;

//Ainsi de suite...
...
}
}

C'est très fonctionnel, je t'ai donné la logique, à toi de construire quelque chose de propre avec cela.

[Ter Rowan]

yop
merci pour ta réponse mais, hélas, cela ne répond pas.

En effet je pense faire un truc du style swtich case

switch type
case : arbre
fonction_menu_global ( les param qui vont bien );
case : point d'eau
fonction_menu_global ( les param qui vont bien 2 );

etc...

mais ce qui ne me va pas dans ta réponse ,c'est que finalement, tu ne fais pas appel à un gestionnaire générique d'événement mais qu'à chaque cas(e) , tu développes ton menu

pas sur d'être clair :heuuu:

[Karedas]

Tu peux avoir un div caché

Sur click droit de l'element:

une requete ajax rempli le div avec la liste qui va bien
tu place le div à la position de la souris
tu le fait apparaitre

[Ter Rowan]

merci, mais je ne dois vraiment pas être clair ^^

je sais faire (bon j ai bien ramé pour ^^) afficher un menu sous la souris lors du clic, la question est ailleurs

la question est comment définir proprement les options d'un menu générique, faire en sorte que si je rajoute un nouveau type, je n'ai qu'à envoyer les id des options (par exemple) à la fonction générique, que si je rajoute une option, je n'ai qu'à modifier les options des types qui utiliseront cette option mais ne rien faire pour les autres, etc...

que ce soit un menu, ou autre chose revient finalement au même. C'est plus la manipulation des variables javascript le sujet

[rygnes]

Effectivement, tu n'es pas très clair.
La fonction que je t'ai proposé est déjà générique.
Cela ne te correspond pas.
Je te donne une autre methode plus proche de ce que tu demandes.

function menuContexte(value){

tabMenu = new Array([menu1],[menu2],[menu3],...);
//Soit un tableau multidimensionnel indicé avec des valeur telles 'pommier', 'poirier' ou indicé numériquement.


//Accès : tabMenu[value]
//affichage du menu générique en fonction du tableau
}

[Ter Rowan]

voilà c'est déjà plus cela, mais ce qui me bloque, c'est de ne pas avoir à gérer une grosse maintenance si je rajoute une option au menu ou un type supplémentaire

avec la matrice telle que tu la décris, rajouter un type, c'est rajouter une ligne paramétrant le type, donc on va dire, ça va, par contre rajouter une option, c'est déjà se taper toutes les lignes (les types) pour dire si oui ou non il faut donner l'option à chaque type. J'aimerais trouver un système où je n'ai à déclarer que les options nécessaires à chaque type, pas à me positionner sur les options possibles et les options impossibles.

mais je crois avoir une idée, à fouiller demain, je vous présenterais le résultat

[rygnes]

Tu peux toujours utiliser ce système en le couplant avec une liste qui comportera les fonctions communes aux différentes parties.

Cela te convient ?

[arcanis]

jContext est parfais pour ce que tu veux en faire, je pense.
Si ce n'est pas le cas, utilise les fonctions createNode et appendChild pour ajouter des lignes manuellement au tableau. Sache qu'il est toujours préférable de manipuler le DOM plutôt que de passer par un sous-fifre tel qu'innerHTML. C'est peut-être plus long, mais c'est beaucoup mieux structuré, au final.
Cependant je te déconseille fortement l'utilisation d'un menu de ce type dans un jeu en ligne, pour cause de chiantise avec le bon navigateur Opera qui à décidé de nous mettre des batons dans les roues en empêchant de désactiver le clic droit avec Javascript. Et donc, au final, tu te retrouve avec ton menu contextuel (glop) et celui d'Opera par dessus (pas glop).

[Anthor]

Sache qu'il est toujours préférable de manipuler le DOM plutôt que de passer par un sous-fifre tel qu'innerHTML.

Aucun intérêt avec jQuery, celui-ci faisant la conversion automatiquement.