AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Afficher la zone Lancés de dés dans une catégorie précise

    Partagez
    Nihil Scar Winspeare
    Messages : 3942

    le Lun 16 Mar 2015 - 13:01

    Afficher la zone "Lancés de dés" seulement dans un forum en particulier



    Ce code permet d'afficher la zone "lancer de dés" seulement dans certaines catégories / forums ! (version phpBB2)

    Note : le code n'est pas sous hide, je tenterai de vérifier les commentaires donc si vous avez la moindre question pour une amélioration / une précision, n'hésitez pas. ♥

    Ce code a été créé pour un forum en phphbb2, mais il fonctionne aussi sur PunBB et Invision :)


    Rendu



    Pour en savoir plus sur le lancé de dés, je vous invite à lire le Tutoriel officiel de ForumActif ainsi que le Tutoriel par Halloween sur Never Utopia


    Par défaut, le lancé de dés est disponible dans tous les sujets de votre forum.
    Mais, parfois on ne l'utilise que dans une zone précise du forum, et on n'en a pas besoin partout.
    Cette option permet de masquer la zone "Lancé de dés" par défaut puis l'afficher seulement dans un forum / catégorie :)
    /!\ Attention, je parle ici de l'ensemble de zone lancé de dé, pas d'afficher seulement un dé en particulier Wink

    Ce code peut-il totalement empêcher le lancé de dés dans les forums non autorisés ? Non. Dans les catégories où on ne souhaite pas avoir le lancé de dés, la zone est seulement masquée visuellement, les membres peuvent toujours y accéder dans le code source.


    Attention, il ne faut pas accepter l'option "Activer le bbcode [ roll ] pour le lancé de dé"
    En effet, cette option permet d'éditer un message pour changer le lancé de dé.


    Connaissances



    Avant de se lancer dans le code, on commence par réfléchir à ce qu'on sait :)

    Où se trouvent la zone lancé de dé ? → dans les pages "Répondre" et quand on prévisualise un message de réponse.
    On va donc commencer par regarder si on est bien sur une page pour poster un message. Quand on envoie un message, notre URL ressemble à ceci : http://www.never-utopia.com/post

    Comment savoir dans quelle catégorie / forum on est ? → le fil d’Ariane
    Quand on répond à un sujet, on a le fil d'Ariane en haut.

    Ce fil d’Ariane est constitué de liens qui permettent de naviguer sur le forum, et on peut donc regarder si les liens sont dans notre liste des forums "autorisés" ou non.

    Fonctionnement



    Donc, si on suit la logique, voici ce qu'on peut faire :
    (il y a souvent 100 manières de faire la même chose. Ici j'ai fait un choix d'appréhender le problème comme ça, mais on aurait pu s'y prendre autrement Very Happy)


    1. On établit une liste de forums et catégories où le lancé de dés est autorisé.
    2. On va vérifier si le chemin de la page sur laquelle on se trouve est bien /post.
    3. On regarde une zone de lancé de dé sur la page (si la zone n'est pas là, ça ne sert à rien de continuer le reste du code) et si elle est là, on la cache.
      Pourquoi ne pas cacher l'élément par défaut tout simplement (en CSS), puis l'afficher à certains moments ? Par ce que si la personne a le javascript désactivé ou bien qu'il y a une erreur de JS dans la page... Notre JS pour afficher la zone de lancé de dé juste aux bons endroits ne fonctionnera pas.

    4. On récupère les liens du fil d’Ariane.
    5. On regarde si l'un de ces liens est présent dans notre liste "Fora / catégories autorisés".
      → si oui : on affiche la zone lancé de dés



    Template posting_body


    PA > Affichages > Templates > Poster & Messages privés

    On va commencer par entourer toute la zone dans une div, pour pouvoir la sélectionner ensuite en javascript.

    On va repérer toute la zone qui correspond au lancé de dé, elle commence ici :
    Code:
    <!-- BEGIN switch_roll_dice -->

    Et se finit ici
    Code:
    <!-- END switch_roll_dice -->

    Tout le code au milieu ne s'affiche que si le lancé de dé est activé :)

    On va donc remplacer
    Code:
    <!-- BEGIN switch_roll_dice -->
    Par :
    Code:
    <!-- BEGIN switch_roll_dice -->
        <div class="js-roll-dice">
        <!-- modification pour le javascript "afficher le lancer de dés seulement sur certaines pages" -->

    Et ensuite
    Code:
    <!-- END switch_roll_dice -->

    Par
    Code:
     </div> <!-- fermeture de .js-roll-dice -->
    <!-- END switch_roll_dice -->

    On valide, on publie, et normalement, il n'y a aucun changement visuel.

    Javascript


    PA > Modules > Html & Javascript
    On crée un nouveau javascript activé sur toutes les pages avec un nom clair.

    Je vous mets l'ensemble du code :
    Code:
    /*
     * Tuto lancé de dés
     * Masquer la zone lancé de dés partout sauf dans certains forums
     *
     * version : phpbb2
     * Never Utopia
     */
    $(function () {
        if (document.location.pathname === "/post") {

            /* url des parties autorisées
             * MODIFIER ICI
             * */
            /* url des parties autorisées */
            var exceptions = [
                "/f6-banniere-concours-ga",
                "/f3-presentations",
                "/c5-arene"
            ];
            
            var $dices = $(".js-roll-dice").hide();

            if ($dices.length < 1) return;

            $("a.nav").each(function () {
                if (exceptions.indexOf($(this).attr("href")) > -1) {
                    $dices.show();
                    return false;
                }
            });
        }
    });

    La version avec plus de commentaires :
    Spoiler:

    Code:
    /*
     * Tuto lancé de dés
     * Masquer la zone lancé de dés partout sauf dans certains forums
     *
     * version : phpbb2
     * Never Utopia
     */
    $(function () {
        /* on vérifie si on est dans une page pour poster */
        if (document.location.pathname === "/post") {

            /* url des parties autorisées */
            var exceptions = [
                "/f6-banniere-concours-ga",
                "/f3-presentations",
                "/c5-arene"
            ];
            
            /* on sélectionne la zone lancé de dé et on la masque */
            var $dices = $(".js-roll-dice").hide();

            /* on vérifie s'il y a bien le lancé de dés sur la page */
            if ($dices.length < 1) return;

            /* On regarde chaque liens sur le fil d'Arianne */
            $("a.nav").each(function () {
                /*On regarde s'il est présent dans les exceptions  */
                if (exceptions.indexOf($(this).attr("href")) > -1) {
                    /* si on est dans un forum autorisé */
                    $dices.show(); /* on affiche le lancé de dé */
                    return false; /* on sort du each */
                }
            });
        }
    });

    Rajouter les lien des catégories autoriseés


    On modifie cette partie là :
    Code:
    /* url des parties autorisées */
    var exceptions = [
        "/f6-banniere-concours-ga",
        "/f3-presentations",
        "/c5-arene"
    ];

    Prenez l'url de votre catégorie exemple, et gardez juste la partie après le nom de domaine.
    Ainsi si vous avez : http://www.never-utopia.com/f3-presentations
    Il faut mettre "/f3-presentations".

    De la même manière, si on a http://www.never-utopia.com/c21-communaute
    On va mettre : "/c21-communaute".

    Attention, il y a des virgules entre chaque lien, mais pas de virgule à la fin Wink

    Exemples:
    Exemple avec seulement 2 liens :
    Code:
    /* url des parties autorisées */
    var exceptions = [
        "/f3-presentations",
        "/c5-arene"
    ];

    Vous pouvez très bien les mettre sur la même ligne :
    Code:
    /* url des parties autorisées */
    var exceptions = ["/f3-presentations","/c5-arene"];

    Exemple avec seulement 1 lien :
    Code:
    /* url des parties autorisées */
    var exceptions = ["/f3-presentations"];

    Toutes les sous catégories et sous forums à l'intérieur des liens que vous mettrez seront pris en compte. Ainsi si je mets "Communauté" dans les exceptions, tous les sous forums de cette catégorie auront la zone "Lancé de dés" affichée.


    Conclusion



    A partir de ce principe là, on pourrait aussi autoriser le lancé de dés partout, sauf sur certains forums (^-^).

    Pour tout problème, je vous invite à vous rendre dans la section "Problème en codage".


    Dernière édition par Nihil Scar Winspeare le Ven 9 Oct 2015 - 11:10, édité 2 fois




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Nihil Scar Winspeare
    Messages : 3942

    le Jeu 11 Juin 2015 - 10:01

    Hello ♥

    Après une longue période sans y toucher, je viens de modifier le code, normalement c'est fini maintenant :)




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Yvan75
    MasculinAge : 36Messages : 10

    le Dim 12 Juil 2015 - 8:43

    Coucou Nihil,
    Merci pour ce tutoriel intéressant et le code propre associé. Voici mes quelques suggestions d'améliorations:

    - Ce qui identifie une catégorie ou un forum c'est ce qui est avant le premier tiret dans l'URL. A partir de la, je trouve que ce serait plus simple d'utiliser le vrai identifiant unique minimal de la page pour le tableau d'exceptions. Sachant que dans tout les cas, si le nom de la catégorie est modifiée, la redirection aura tout de même lieu. De même si le nom de catégorie est modifiée ça peut éviter une erreur 404. Le code devient donc plus souple.

    Autrement dit remplacer:  
    Code:
    var exceptions = [
        "/f6-banniere-concours-ga",
        "/f3-presentations",
        "/c5-arene"
    ];

    Par:
    Code:
    var exceptions = [
        "/f6-",
        "/f3-",
        "/c5-"
    ];

    Voir même directement:
    Code:
    var exceptions = [
        "f6",
        "f3",
        "c5"
    ];

    - Ce qui me gêne avec la ligne suivante:
    Code:
    if ($dices.length < 1) return;

    C'est que l'on quitte immédiatement la fonction document ready de jQuery si aucune zone de lancé n'est trouvée. C'est problématique car si on souhaite ajouter du code après, on risque de se retrouver dans une situation ou le code ne sera pas exécuté au motif que la zone de lancé n'est pas présente (y compris lorsque ça n'a aucun rapport avec le reste du code). Je verrais donc plutôt:

    Code:
    if($dices.length!==0){
           $("a.nav").each(function () {
           /* ... */
    }

    - Dans la même idée, on peut probablement éviter le parcours des a.nav, si le tableau est vide pour une raison quelconque:

    Code:
    if($dices.length!==0&&exceptions.length!==0){
           $("a.nav").each(function () {
           /* ... */
    }


    Bien à toi,
    Yvan
    Nihil Scar Winspeare
    Messages : 3942

    le Dim 12 Juil 2015 - 11:12

    Hello :)

    Quelqu'un qui regarde mon tuto *-*

    Pour ce qui est des URL, j'avais eu une hésitation. En effet, je veux garder quelque chose de simple, et j'ai tendance à me dire que c'est plus simple pour l'utilisateur d'avoir une "url longue" pour s'y retrouver. Par contre en cas de modif de titre c'est embêtant. :/
    Le seconde chose, c'est que ça demandait de complexifier un petit peu la suite du javascript, et je veux garder un tutoriel tout simple.

    Du coup si je fais ça, je vais partir sur une version différente. Au lieu de parcourir les liens de la nav, je vais parcourir le tableau des exceptions. J'avais beaucoup hésité entre les 2 je dois dire >o<
    Pour le faire vite fait en pseudo code  :
    Pour chaque élément dans le tableau exceptions, on regarde s'il y a une url de navigation qui commence par ce qu'il y dans l'élément des exceptions.

    Ca me donnerait au final quelque chose comme ça (j'ai pas testé, mais ça devrait marcher :toto:)
    Code:
    /*
     * Tuto lancé de dés
     * Masquer la zone lancé de dés partout sauf dans certains forums
     *
     * version : phpbb2
     * Never Utopia
     */
    $(function () {
        if (document.location.pathname === "/post") {

            /* ID des parties autorisées
             * MODIFIER ICI
             * */
            var exceptions = ["f6", "f3","c5"];
            
            var nbExceptions = exceptions.length;
            
            var $dices = $(".js-roll-dice").hide();

            if ($dices.length > 0 || nbExceptions > 1) {
                
                for (var i=0; i < nbExceptions; i++) {
                    
                        if ($(".nav:[href^='/" + exceptions + "-']")) {
                            $dices.show();
                            break;
                        }
                        
                }
                
            }
            
        }
    });

    J'ai mis ici ta modification par rapport au return. Personnellement j'ai tendance à mettre un return dans mes codes pour "une fonction = un truc" (donc ici, "un nouveau javascript dans le PA de NU"), du coup c'est logique de sortir ^-^.... Mais je vais faire la modif si tu penses que c'est mieux Wink




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Mer 7 Oct 2015 - 12:16

    Coucou Nihil! Excuse-moi du retard!
    Bref, j'ai regardé un peu ton tuto et je ne vois pas vraiment pourquoi tu limites ça au PHPBB2. Car en effet, ces exact commentaires existent sur toutes les versions de forums, du coup, est-ce qu'il y a une raison spécifique pour que ça ne marche que sur PHPBB2, ou alors est-ce que c'est parce que tu n'as testé que sur cette version? ^^ Si c'est le deuxième cas, il faut me le dire, comme ça je regarde sur toutes les versions de mon côté et tu pourras retirer la mention sur le PHPBB2 Wink

    Sinon ça me semble tout bon, donc dès que tu éclaircis ça, je classerais =D



    Nihil Scar Winspeare
    Messages : 3942

    le Mer 7 Oct 2015 - 21:14

    Pas de problème pour le retard, ça ne me gène pas du tout :p

    Pour le phpbb2, j'avais fait le code pour un forum en phpbb2 et je n'avais pas pris le temps de checker sur toutes les versions... Du coup, dans le doute, j'ai préféré laisser phphbb2.

    Si tu as le courage / l'énergie / la sainte volonté de le faire, n'hésite pas ♥




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Ven 9 Oct 2015 - 10:45

    Après vérification, ça marche sur PHPBB2 (pas de suprises x) ), PunBB et Invision. Sur PHPBB3, ça masque la zone mais elle ne réapparait pas dans les sections voulues. Je ne sais pas du tout pourquoi vu que rien ne diffère vraiment des autres versions xD

    Tu peux donc juste mettre ça dans le tuto et après je le classe ^^

    Edit : Ça nemarche pas sur PHPBB3 car il n'ya pas de fil d'Arianne lorsquetu postes une réponse. Explication trouvée!



    FAUCHEUSE ☠
    FémininAge : 20Messages : 36

    le Jeu 8 Sep 2016 - 23:23

    Bioup !
    Merci pour le tuto, j'avoue que c'est un truc assez simple mais esthétiquement agréable o/ J'ai repris le principe pour choisir de masquer le lancé de dé dans certains sous-forums comme tu suggérais à la fin, c'est plus rapide comme ça sur mon forum :3
    Shaïka
    FémininAge : 20Messages : 60

    le Mer 21 Sep 2016 - 22:14

    Merci !
    Contenu sponsorisé

    Aujourd'hui à 19:06


      La date/heure actuelle est Jeu 8 Déc 2016 - 19:06