DynCat (DOM, Javascript) 1.2

mangafan · 24-08-2007 20:05:51

Auteur : Bruno Laplace

Petite mod sans prétention, pour m'amuser avec DOM et javascript.

Cette mod sert à cacher ou montrer une catégorie en cliquant sur son titre.
Par défaut, on voit toutes les catégories et on les cache en cliquant dessus.

La position est gardée en mémoire par un cookie (punbb_dyncat).

Note : Aucune modification du fichier index.php, juste un <pun_include "..."> à ajouter au template main.tpl. Testé sur FF 1.5 & 2.0 ainsi qu'IE 6.

Version 1.2 : Tout ce passe désormais en javascript façon DOM dans des fichiers .js séparés du squelette xhtml.

C'est la dernière version de DynCat sauf si besoin d'une correction de bug. La suite se nommera DynBoard.

Cette version n'a été testé que sous Firefox pour le moment mais devrait marcher sur IE & cie.

Dernière modification par mangafan (24-08-2007 20:06:48)

M@x · 24-08-2007 22:40:56

Et ca ressemble à quoi ?!

M@x.

mangafan · 24-08-2007 23:14:48

Elle est installée sur mon forum !

A gauche sous l'avatar wink

Benji_X80 · 25-08-2007 09:49:19

Plugin utile merci a toi! bravo pour la simplicité d'installation

Matthieu · 25-08-2007 10:14:35

merci mais elles s'affichent ou les images fleches ?

foxmask · 25-08-2007 13:29:39

bonjour,
c'est sympa qd on a un bon packet de forum et qu'on veut pas installer la mod sous forum
mais je crois que la même chose peut être réalisé en CSS pure wink

M@x · 25-08-2007 17:15:04

C'est vraiment très sympa ! wink

M@x.

mangafan · 25-08-2007 18:16:57

foxmask a écrit :

bonjour,
c'est sympa qd on a un bon packet de forum et qu'on veut pas installer la mod sous forum
mais je crois que la même chose peut être réalisé en CSS pure

Hum la mod sous forum créait bien des forums dans les forums donc dyncat n'est pas vraiment incompatible par son fonctionnement.

Full css, sincèrement je crois pas ! Pour les images d'icônes oui, mais le reste je vois pas trop ? En plus dans l'idée c'est pas sémantique, les css ne servent pas à ça.

Comment garder les positions en cookie et avec un fonctionnement en temps réel (sans rechargement de la page et ancres inutiles) sans toucher au squelette xhtml ? Tout cela sans javascript et compatible avec tous les brouteurs (*) ?

* ie et les hover sur d'autres éléments qu'une balise <a> il aime pas ! wink

wz16 a écrit :

merci mais elles s'affichent ou les images fleches ?

A gauche du texte de la catégorie, pour le moment, c'est pas en css car ça peut écraser une règle de style déjà inclus avec c'est méthode ou chevaucher un petit logo présent dans le background de la balise <h2> comme sur punbb.fr par exemple. wink

Benji_X80 · 26-08-2007 19:44:31

Dyncat v1.2 ne marche pas si vous avez la chatbox 2.0 (en ajax) sur l'index du forum ça chamboule tout et on peut même pas envoyer de message sur la chatbox a cause d'un bouton qui le remplace

mangafan · 26-08-2007 20:00:48

Cette Chatbox happy Je suis vraiment pas fan de l'outil donc j'ai pas voulu l'installer pour tester jusqu'à maintenant... Je verrais ça dans la soirée. wink

Benji_X80 · 26-08-2007 21:34:05

c'est un problèmes de compatibilité avec l'ajax je penses, j'avais installé un mod avant en ajax (un mod qui agrandit une image dans un post pour ceux qui connaissent, j'ai oublié le nom), ça ne marchait pas, enfin si ça marchait, sauf que la ChatBOX buggé, le petit logo de chargement en .gif obtenait une taille démesuré!!

mangafan · 27-08-2007 02:13:13

J'ai pas le bug en local mais c'est surement parce que j'ai encore modifié dyncat en l'inclut au futur dynboard.

Du coup je met du nouveau fichier common.js :

function dyncat(i, titre) {
    var h2 = document.getElementById("idx"+i).getElementsByTagName("h2")[0];
    var box = document.getElementById("idx"+i).getElementsByTagName("div")[0];
    
    if (box.style.display=='none') {
        box.style.display=''; 
        h2.getElementsByTagName("span")[0].innerHTML = '<img src="img/dynboard/min.gif" title="Réduire" /> ' + titre;
        pref[i] = 1;
    } else {
        box.style.display='none';
        h2.getElementsByTagName("span")[0].innerHTML = '<img src="img/dynboard/plus.gif" title="Développer" /> ' + titre;
        pref[i] = 0;
    }
}

function ArrayIdx() {
    var category = new Array();    
    for ( i = 1; document.getElementById("idx"+i) != null; i++)
    {
    if( document.getElementById("idx"+i) != null)
        {
            category[""+i] = document.getElementById("idx"+i);
        }
    }
    category.shift();
    return category.length;
}

date = new Date;
date.setFullYear(date.getFullYear()+1);

var pref = new Array();

function catfind() {
    if( document.getElementById("punindex") ) {
    
        if (LireCookie("punbb_dyncat")) {
            var cookie_value = LireCookie("punbb_dyncat");
            var pref_save = cookie_value.split('_');
        } else {
            var pref_save = new Array();
        }

        var nbcat = ArrayIdx();

        for( i = 1; i <= nbcat; i++)
        {
            (pref_save[i]) ? pref[i] = pref_save[i] : pref[i] = 1;

            var h2 = document.getElementById("idx"+i).getElementsByTagName("h2")[0];
            var box = document.getElementById("idx"+i).getElementsByTagName("div")[0];
            var dh = h2.getElementsByTagName("span")[0].firstChild.data;

            if(pref[i] == 1) {
                h2.getElementsByTagName("span")[0].innerHTML = '<img src="img/dynboard/min.gif" title="Réduire" /> ' + dh;
                box.style.display='';
            } else {
                h2.getElementsByTagName("span")[0].innerHTML = '<img src="img/dynboard/plus.gif" title="Développer" /> ' + dh;
                box.style.display='none';
            }

            h2.i = i;
            h2.titre = dh;
            h2.setAttribute("onclick",function() {
                dyncat(this.i, this.titre);
                var pref_save = pref.join('_');
                EcrireCookie("punbb_dyncat", pref_save, date);
            });
            h2.onclick = function() {
                dyncat(this.i, this.titre);
                var pref_save = pref.join('_');
                EcrireCookie("punbb_dyncat", pref_save, date);
            };
        }
    }
}
    
document.write('<'+'style type="text/css" media="screen">');
document.write('.hide { display: none; }');
document.write('<'+'/style>');
document.write('<div class="hide"><img src="img/dynboard/plus.gif" /><img src="img/dynboard/min.gif" /><\/div>');

if (window.attachEvent) {
    window.attachEvent("onload",catfind);
} else if (window.addEventListener) {
    window.addEventListener("load",catfind, false);
}

Ca fera de la lecture en plus et c'est pas que j'ai la flemme de faire une 1.2.1 pour ça ( siffle ) mais DynBoard devrait arriver bientôt donc wink

Benji_X80 · 30-08-2007 14:19:25

Ok on patientera! Je n'ai pas le temps de voir non plus a cause des sites que je fais donc désolé j'aurais aimé du moins. Je verrai plus tard a bientôt

steve2206 · 07-09-2007 18:58:33

salut mangafan,

j'ai essayé de faire un collapse pour un tableau personnalisé en bas de mon forum, le collapse marche bien mais j'ai un problème avec les cookies; je te renvois à cette discussion où j'explique mon problème.
Si tu peux me donner un coup de main ce serait super cool, merci.

M@x · 13-01-2008 03:08:46

Bonsoir,

Je viens juste d'installer cette mod pour Easy-Forums (Tests en local) mais en effet j'ai du tester avec la chatbox sur l'index :

Après quelques recherches voici ce que j'aimerais : (Juste un lien à droite plutôt que toute la barre de la catégorie cliquable)

Il saggit de la même base, ou d'une autre modification ?

Merci de votre aide.
M@x.

EDIT : Je pense que j'ai trouvé sur PunRes : http://www.punres.org/files.php?pid=84

Dernière modification par M@x (13-01-2008 03:15:10)

mangafan · 13-01-2008 05:32:51

Le bug avec la chatbox, on en a déjà parlé ici ou pas loin (edit : quelques messages plus haut en fait). Et j'y peux pas grand chose. Enfin si faut que je fasse une bonne fois pour toute une version finale modifiable aisément.

Parce qu'il faudra m'expliquer pourquoi la chatbox (outil que j'exècre en général) utilise des balises h2 pour le look (la grande barre grise sur ton screen avec le moins et celle avec une chackbox en bas *) alors qu'il suffisait de faire un border sur la div qui contient les blabla fabuleusement intéressant de la chatbox...

Chatbox en générale a écrit :

Machin dit : Salut ça va.
Machine dit : Oui ça va.
Testeur dit : Up.
Trucmuche dit : Il faut bô.
Osef dit : J'ai mangé une pomme ce midi.
Bidulle dit : J'ai démouler un cake ce matin.
D.V. dit : Luke, je suis ton père.

* Une checkbox dans une balise h2 du snobisme juste pour dire moi je serais pas conforme au norme happy lol

Tu peux utiliser collapse en effet mais c'est plus long à installer ça touche à tout, là où dyncat ne nécessite que 2-3 lignes.

Dernière modification par mangafan (13-01-2008 05:48:53)

M@x · 13-01-2008 14:58:14

En effet l'installation est plus longue. POur ce qui est de la chatBox je suis complètement d'accord avec toi mais bon ce n'est pas moi qui choisie : j'héberge des forums, ils font ce qu'il souhaitent... (Parfois ça ne rime à rien big_smile ) happy

M@x.

tms · 04-02-2008 13:44:02

mangafan : je viens de modifier ta mod pour en faire une extension de punbb 1.3
Je poste un lien si ça te dérange pas (j'ai pas trouvé d'informations sur la licence).

mangafan · 04-02-2008 18:36:57

Y a pas de soucis, je pensais le faire mais y a un truc qui m'a dérouté dans le système des hooks. Une boucle maudite... qui rend l'astuce des hooks assez contraignante, je trouve.

http://punbb.org/forums/viewtopic.php?id=18254

Pour la petite histoire, j'ai enfin saisi l'astuce pour avoir ma petite image au bon endroit mais je ne pourrais jamais l'avoir après la fermeture du tableau vu le positionnement du hook et la manière dont la boucle se termine...

Du coup je suis curieux de voir comment tu as adapté le code. Personnellement je voulais me débarasser du compte des tag H2 pour éviter les collision avec les nombreuses extensions à venir.

Dernière modification par mangafan (04-02-2008 18:37:14)

tms · 04-02-2008 19:46:44

Bah je me suis pas embêté, j'ai juste inclus les deux fichiers JS avec le hook hd_index_head. Et changé un poil le javascript.
Pour les h2, c'est vrai que ça peut poser problème. J'ai pas apporté de modification, mais il suffirait de sélectionner la "category+i" puis de prendre le nœud précédent (div de classe main-head), et enfin de prendre le premier nœud enfant, ou sélectionner avec un getByTagName('h2')[0].

Dernière modification par tms (04-02-2008 19:47:09)

mangafan · 05-02-2008 01:20:53

C'est vrai que ça s'adapte assez vite avec la vieille méthode de la 1.2...

Faut voir, j'aurais vraiment préféré faire ça se fasse différement mais si tu veux diffuser ton adaptation tu peux le faire y a pas de soucis.

Dernière modification par mangafan (05-02-2008 01:23:06)

mangafan · 05-02-2008 22:56:00

Bon du coup tms, tu m'as remit dans le bains de cette mod/extension et j'en ai refait une version en lisant tes remarques.

Permettant d'éviter tout les bugs que j'ai croisé jusque la avec les autres mods.

Me reste à voir un truc avec les noeuds car le moteur Gecko est très joueurs. Du coup il fat que je cherche un peut mieux si [c]if ( navigator.product == 'Gecko' )[/c] suffit à éviter tout les bugs et si d'autres broutteurs sont tout aussi joueur que lui.

Un petit truc en passant assez sympa d'aiileurs, si tu es confronté au mêmes ennuis que moi.

http://www.thewatchmakerproject.com/jou … oussibling

tms · 15-03-2008 12:08:23

Un lien qui devrait t'intéresser :

http://developer.mozilla.org/en/docs/Wh … in_the_DOM

Tu as un lien vers ta nouvelle version ?

mangafan · 15-03-2008 20:26:42

Oui une des dernières versions par ici.

http://www.punbb.fr/forums/viewtopic.php?id=7105

Mais maintenant c'est la façon dont Opera gère le dom qui me met des bâtons dans les roues et ie qui fait un caca nerveux en appliquant les modifs à sa façon.

J'ai une autre version en local ou ie ne plante pas car j'utilisais l'ancienne méthode en partie en gardant le clique sur le h2 de la catégorie.

Là j'ai voulu faire plus propre en plaçant une div avant les catégories et sous Firefox, ça roule comme d'habitude, après avoir bidouiller pour qu'il arrête de planter à voir des nœuds là ou il n'y en a pas, mais les deux autres broutteurs mettent leur grain de sel.

Sous Opéra du grand art il me place la div après le h2 de la catégorie et sous ie la mise en page saute après la première catégorie.

Dans l'ensemble, je dois pouvoir me contenter avec un mélange de l'ancienne et de la nouvelle méthode. Mais cela aurait été bien plus propre et plus souple avec une nouvelle div que tout le monde aurait pu modifier à sa guise sans trop s'embêter (la mettre à gauche, à droite ou au milieu, cahnger son visuel...).

VisuTeam · 19-04-2008 18:32:23

Bonjour, j'installe le mod et tout marche parfaitement. Sauf que quand je veux masquer (par exemple) la catégorie "Aide", c'est la catégorie d'au-dessus qui se masque ?
Voici un petit apercu : http://keve.kv.free.fr/visu-team/forums … /index.php
Quel est le moyen de résoudre ce problème génant ? (merci)

EDIT: PB REGLÉ

Dernière modification par VisuTeam (20-04-2008 08:23:52)

Archives FluxBB.fr

#1 24-08-2007 20:05:51

DynCat (DOM, Javascript) 1.2

#2 24-08-2007 22:40:56

Re : DynCat (DOM, Javascript) 1.2

#3 24-08-2007 23:14:48

Re : DynCat (DOM, Javascript) 1.2

#4 25-08-2007 09:49:19

Re : DynCat (DOM, Javascript) 1.2

#5 25-08-2007 10:14:35

Re : DynCat (DOM, Javascript) 1.2

#6 25-08-2007 13:29:39

Re : DynCat (DOM, Javascript) 1.2

#7 25-08-2007 17:15:04

Re : DynCat (DOM, Javascript) 1.2

#8 25-08-2007 18:16:57

Re : DynCat (DOM, Javascript) 1.2

#9 26-08-2007 19:44:31

Re : DynCat (DOM, Javascript) 1.2

#10 26-08-2007 20:00:48

Re : DynCat (DOM, Javascript) 1.2

#11 26-08-2007 21:34:05

Re : DynCat (DOM, Javascript) 1.2

#12 27-08-2007 02:13:13

Re : DynCat (DOM, Javascript) 1.2

#13 30-08-2007 14:19:25

Re : DynCat (DOM, Javascript) 1.2

#14 07-09-2007 18:58:33

Re : DynCat (DOM, Javascript) 1.2

#15 13-01-2008 03:08:46

Re : DynCat (DOM, Javascript) 1.2

#16 13-01-2008 05:32:51

Re : DynCat (DOM, Javascript) 1.2

#17 13-01-2008 14:58:14

Re : DynCat (DOM, Javascript) 1.2

#18 04-02-2008 13:44:02

Re : DynCat (DOM, Javascript) 1.2

#19 04-02-2008 18:36:57

Re : DynCat (DOM, Javascript) 1.2

#20 04-02-2008 19:46:44

Re : DynCat (DOM, Javascript) 1.2

#21 05-02-2008 01:20:53

Re : DynCat (DOM, Javascript) 1.2

#22 05-02-2008 22:56:00

Re : DynCat (DOM, Javascript) 1.2

#23 15-03-2008 12:08:23

Re : DynCat (DOM, Javascript) 1.2

#24 15-03-2008 20:26:42

Re : DynCat (DOM, Javascript) 1.2

#25 19-04-2008 18:32:23

Re : DynCat (DOM, Javascript) 1.2

Pied de page des forums