Classement d'extensions

[calimo]

Soit le code simplifié suivant :

Code : Tout sélectionner

<h2>T</h2>
<ul>
	<li><a href="/TabClickingOptions/">Tab Clicking Options</a></li>
	<li><a href="http://olab.free.fr/OLab/#ext-tabextensions" hreflang="fr">Tabbrowser Extensions (<abbr>TBE</abbr>)</a></li>
	<li><a href="/TabbrowserPreferences/">Tabbrowser Preferences</a> </li>
	<li><a href="/TargetAlert/">TargetAlert</a></li>
	<li><a href="http://olab.free.fr/OLab/#ext-textlink" hreflang="fr">Text Link</a></li>
	<li><a href="http://mozilla.durys.net/textplain/" hreflang="en">text/plain</a></li>
	<li><a href="/TextZoom/">Text Zoom</a></li>
	<li><a href="/TitlebarTweaks/">Titlebar Tweaks</a>.</li>
	<li><a href="http://www.krickelkrackel.de/tooltipenh/tooltipenh.htm" hreflang="en">Tooltip Enhancer</a></li>
	<li><a href="/TweakNetworkSettings/">Tweak Network Settings</a></li>
</ul>

But : permettre un classement par catégories d'extensions.
La page n'est absolument pas dynamique, elle est figée, on peut la modifier mais pas de php ou autre dessus. Reste donc le JavaScript.

Idée : mettre des classes sur les <li> afin de pouvoir masquer tout ce qui n'est pas de la classe voulue.
Ce qui nous donnerait (catégories plus ou moins reprises de u.m.o) :

Code : Tout sélectionner

<h2>T</h2>
<ul>
	<li class="onglets"><a href="/TabClickingOptions/">Tab Clicking Options</a></li>
	<li class="onglets"><a href="http://olab.free.fr/OLab/#ext-tabextensions" hreflang="fr">Tabbrowser Extensions (<abbr>TBE</abbr>)</a></li>
	<li class="onglets"><a href="/TabbrowserPreferences/">Tabbrowser Preferences</a> </li>
	<li class="annoyances"><a href="/TargetAlert/">TargetAlert</a></li>
	<li class="navigation"><a href="http://olab.free.fr/OLab/#ext-textlink" hreflang="fr">Text Link</a></li>
	<li class="navigation"><a href="http://mozilla.durys.net/textplain/" hreflang="en">text/plain</a></li>
	<li class="divers"><a href="/TextZoom/">Text Zoom</a></li>
	<li class="divers"><a href="/TitlebarTweaks/">Titlebar Tweaks</a>.</li>
	<li class="navigation"><a href="http://www.krickelkrackel.de/tooltipenh/tooltipenh.htm" hreflang="en">Tooltip Enhancer</a></li>
	<li class="navigation"><a href="/TweakNetworkSettings/">Tweak Network Settings</a></li>
</ul>

Maintenant ça se complique.
J'imagine donc un formulaire en javascript qui renverrait par exemple vers une fonction par exemple CacheSauf(navigation) :

Code : Tout sélectionner

<form action="#" onsubmit="CacheSauf()">
	<label for="cat">Catégorie à afficher</label>
	<select name="classe" id="cat">
		<option value="onglets">Onglets</option>
		<option value="annoyances">Annoyances</option>
		<option value="divers">Divers</option>
		<option value="navigation">Navigation</option>
	</select>
	<input type="submit" />
</form>

Mais comment appliquer un display:none sur toutes les classes sauf ? Est-ce qu'il existe un document.GetElementByClass ? J'ai essayé ça a pas l'air :

Code : Tout sélectionner

<script type="text/javascript">function CacheSauf(classe) {
	var keep = document.GetElementByClass(classe);
	if (!keep) document.GetElementByClass.style="display:none";
	}
</script>

Ça me retourne une erreur que document.GetElementByClass n'est pas une fonction...

Quelqu'un aurait une idée ? Une piste
Merci d'avance

[Benoit]

C'est une fonction que tu dois écrire toi-même, mais quelqu'un l'a déjà fait (tout le monde pointe vers sa page qui n'existe plus, heureusement il y a web.archive.org)

http://web.archive.org/web/200306041832 ... ssFetching

Si tu n'aimes pas celle-là, Daniel Glazman en propose quatre (!) autres : http://daniel.glazman.free.fr/weblog/ne ... ogarc.html

Plus qu'à les essayer toutes sur une page immense et voir laquelle est la plus rapide

[calimo]

Il me semblait bien que j'avais déjà vu ça, mais je ne savais pas que c'était une fonction "externe". Merci.

J'ai essayé la première et ça n'a pas l'air de marcher
Voici la page : http://smilissimo.free.fr/tests/classement.htm
Visiblement class_name n'a pas de propriétés... je vais essayer une des autre fonctions

Edit : celles de Glazman ne sont pas au point non plus

[calimo]

Avec le script suivant, plus d'erreurs, mais rien ne se passe :

Code : Tout sélectionner

	<script type="text/javascript">
document.getElementByClassName = function(needle) {
  var xpathResult = document.evaluate('//*[@class = needle]', document, null, 0, null);
  var outArray = new Array();
  while ((outArray[outArray.length] = xpathResult.iterateNext())) {
  }
  return outArray;
}

function CacheSauf(classe) {
	var keep = document.getElementByClassName(classe);
	var i;
	for (i = 1; i <= 10 ; i++)
		if (!keep) keep.style="display:none";
	}
	</script>

Si j'essaye de voir le contenu de keep avec des alertes c'est vide... qu'ai-je fait faux ?
Quelle est la forme de ce tableau qui est retourné ?

[Benoit]

C'est un tableau d'éléments que tu reçois hein, contrairement aux ID les classes ne sont pas uniques. D'ailleurs, ton nom de fonction est trompeur, ce devrait être getElementsByClassName().

[Benoit]

Ha en fait je comprends ce que tu veux faire

Mais tu n'as pas besoin de la fonction dont tu parles. Ce que tu dois faire c'est récupérer ta liste (auquel tu mets un id unique, disons "liste") et puis parcourir ses sous-éléments.

Code : Tout sélectionner

var liste = document.getElementById("liste");
var elements = liste.getElementsByTagName("li");
for (e in elements) {
  if (e.className != classe) e.style="display:none";
}

[SB]

Ce qui m'étonne c'est le

Code : Tout sélectionner

<form action="#" onsubmit="CacheSauf()">

Tu es sur que le script arrive à récupérer la variable du formulaire ?

[calimo]

Et en plus ça m'évitera de devoir m'arranger pour ne pas cacher d'autres classes
Merci beaucoup

Par contre j'ai un avertissement : reference to undefined property e.className
Et il ne se passe rien. Voir http://smilissimo.free.fr/tests/classement.htm.

PS : le id="liste" pour bien devrait être sur un div entourant toutes les listes...

[chBok]

Et quelque chose comme ...

Code : Tout sélectionner

<script type="text/javascript">function CacheSauf(classe) {
  var elts = document.getElementsByTagName('li');  //on ne recherche que dans les éléments <LI>
  for(var i=0; i<elts.length; i++) {
    mycls = elts[i].getAttribute('class');
    if (mycls!=null && mycls.indexOf(classe)>=0)
      elts[i].setAttribute('style', 'display:none');
   }
}
</script>

[calimo]

http://smilissimo.free.fr/tests/classement2.htm... pas mieux visiblement
Je ne comprend pas, ça devrait pourtant marcher... et pas le moindre message d'erreur.

[SB]

Regarde plus haut , c'est le

Code : Tout sélectionner

<form action="javascript:CacheSauf()">

qui pose problème. Remplace par

Code : Tout sélectionner

<form action="javascript:CacheSauf(document.forms[0].elements[0].value)">

et le script de chbokk par

Code : Tout sélectionner

<script type="text/javascript">function CacheSauf(classe) {
  var elts = document.getElementsByTagName('li');  //on ne recherche que dans les éléments <LI>
  for(var i=0; i<elts.length; i++) {
    mycls = elts[i].getAttribute('class');
    if (mycls!=null && mycls.indexOf(classe)<0) {
      elts[i].setAttribute('style', 'display:none');}
	  else {elts[i].setAttribute('style', 'display:block');}
   }
}
</script>

et ça marchera.

[chBok]

http://smilissimo.free.fr/tests/classement2.htm... pas mieux visiblement
Je ne comprend pas, ça devrait pourtant marcher... et pas le moindre message d'erreur.

Tout simplement que tu ne gères pas la variable classe...

Dans mon exemple, je supposais que tu passais sa valeur à la fonction.

Modifie ton script comme ceci...

Code : Tout sélectionner

function CacheSauf() {
    var box = document.forms[0].classe;
	var classe = box.options[box.selectedIndex].value;
	var elts = document.getElementsByTagName('li');  //on ne recherche que dans les éléments <LI>
	for(var i=0; i<elts.length; i++) {
		var mycls = elts[i].getAttribute('class');
		if (mycls!=null && mycls.indexOf(classe)>=0)
			elts[i].setAttribute('style', 'display:none');
	}
}

...et hop

Edit : grilled

[calimo]

Splendide ! Merci à tous les deux

C'est avec ce genre de trucs que je me rends compte que je suis une vraie pive en javascript

Pourquoi document.forms[0].elements[0].value ? Ça n'est pas censé envoyer automatiquement le contenu du formulaire ?
Bon, j'essayerai de m'en souvenir pour la prochaine fois 8)

Merci !

[chBok]

Pourquoi document.forms[0].elements[0].value ? Ça n'est pas censé envoyer automatiquement le contenu du formulaire ?

Oui, mais pense à nommer ton formulaire et ton élément <SELECT>, pour éviter d'avoir un script indexé numériquement.

par exemple :

forms[0] => premier formulaire de la page (mais si tu en as d'autres à mettre ?)
forms['choix_classe'] => fait référence à <form name="choix_classe" ...>

[calimo]

Ah oui c'est plus propre en effet

Code : Tout sélectionner

<form action="javascript:CacheSauf(document.forms['choix_classe'].elements['classe'].value)" name="choix_classe">

Merci