AccueilDernières imagesRechercherS'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.

Le Deal du moment :
Jeux, jouets et Lego : le deuxième à ...
Voir le deal

    Conseils & Avis pour un code d'aperçu des MPs

    Syx
    Syx
    MasculinAge : 25Messages : 206

    Dim 7 Mar 2021 - 13:21

    Salutations o/
    J'ai fait en sorte de pouvoir afficher les derniers MPs dans une p'tite fenêtre sans aller charger toute la page avec un bouton pour en afficher +; ça fonctionne, mais je suis certain que ma manière de faire est.. moyenne. Quelqu'un aurait du temps et de la volonté pour me conseiller un peu sur ce code ?

    Le code:
    Code:
    <div class="PMbox" style="display: none;">
    <div class="PMbox_title">Messages privés</div>
    <div class="PMbox_close">X</div>
    <div class="PMbox_list"></div>
    <div class="PMbox_loadmore" style="display: none;">+</div>
    </div>
     
    <script type="text/javascript">
        var NbPM = 3;
     
        $('a.[href="/privmsg?folder=inbox"]').click(function(e) {
          e.preventDefault();
          $('.PMbox_list').load('/privmsg?folder=inbox .pmlist > li.row:lt(' + NbPM + ')', function() {
          $('.PMbox').fadeIn(100);

          var nbrows = $('.PMbox_list > li').length;
         
            if(nbrows == NbPM) {
             $('.PMbox_loadmore').show(); }
       
          });
        });
     
        $('.PMbox_close').click(function() {
          $('.PMbox').fadeOut(100);
        });
     
        $('.PMbox_loadmore').click(function() {
     
        var x = 1;
        var y = NbPM + x;
        var c = $('.PMbox_list > li').length;
     
          $('.PMbox_list').load('/privmsg?folder=inbox .pmlist > li.row:lt(' + y + ')', function() {
        NbPM = x + y;
     
          if ($('.PMbox_list > li').length == c && !$('.PMbox_loadmore').hasClass('PMbox_nomore')) {
            $('.PMbox_loadmore').addClass('PMbox_nomore'); }
      });
      });
    </script>

    Un aperçu gifé:
    Conseils & Avis pour un code d'aperçu des MPs KQiC2ez

    Marci d'avance ♥




    ~
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 8 Mar 2021 - 20:38

    Coucou Syx !

    Déjà bravo pour ton code, avoir quelque chose qui marche c'est déjà une 1ère étape importante, surtout quand on cherche à se lancer des défis de code :)

    Si je peux te conseiller quelque chose quand tu demandes un avis sur un code, c'est de rajouter des commentaires qui explique ce que tu fais et pourquoi.
    De cette façon, la personne qui va lire et donner son avis va plus facilement comprendre.
    Après ne t'inquiète, pas ton code est suffisamment clair pour être compréhensible qui connait forumactif, c'est juste une "bonne habitude" à prendre. Même pour toi quand tu re-liras le code dans X mois :)

    Là par exemple ça ferait quelque chose comme :
    1 - On définit le nombre de MP qu'on veut charger à chaque fois
    2 - Quand l'utilisateur clique sur le lien des MPs, on va chercher sur la page des MP les X (enfin NbPM) premiers messages dans le HTML et on l'injecte dans .PMbox_list
    2.a - On regarde le nombre de rows dans .PMbox_list, et si on en a autant que le nombre de MP qu'on voulait charger, ça veut dire qu'il y a peut-être des MPs en plus à afficher, du coup on affiche le bouton load more
    etc...
    Le second avantage aussi en faisant ce travail là, c'est que parfois on s'aperçoit qu'on a des morceaux qui se répètent, et ça peut être un indicateur qu'il y a quelque chose de peut-être améliorable

    Est ce que toi de ton côté tu vois des points où tu aimerais bien améliorer mais tu n'es pas trop sûr de comment faire ?

    Quelques petites questions d'abord :
    - dans quel template est ce que tu comptes mettre ce code, et vas tu laisser le Javascript dans le template, ou bien le mettre dans la section "Modules Javascript" du panneau d'administration ? (c'est juste pour savoir haha)

    - si quelqu'un poste un lien vers la section MP dans un topic, est ce que tu veux que si un utilisateur clique dessus, cela ouvre la popup ou bien que cela ouvre le vrai lien de la page ?

    Petite note au niveau pratique pour l'utilisateur en regardant le GIF
    - j'ai pas l'impression d'en voir, ça serait pratique un lien pour permettre à la personne d'aller quand même sur la "vraie" page des MP si besoin.
    Je dis ça car du coup, l'utilisateur doit "ouvrir le lien dans un nouvel onglet" s'il veut accéder à la vraie page MP (que cela soit par confort ou bien pour pouvoir écrire un nouveau MP)

    Aussi, je ne sais pas si tu veux aller jusqu'à gérer la pagination dans les MP (pour les membres extrême, par exemple j'ai 4 pages de MP sur NU xD). Si ce n'est pas le cas, peut-être juste prévoir un petit message qui prévient qu'on charge seulement les MP de la 1ère page.
    D'un autre côté, si quelqu'un veut retourner à un vieux MP, a priori il va se lasser de cliquer plein de fois sur le bouton load more, et il va ouvrir la page dédiée haha.

    Syx
    Syx
    MasculinAge : 25Messages : 206

    Lun 8 Mar 2021 - 23:10

    Salut Nihil,
    Merci pour ta réponse ! :heart:

    Déjà bravo pour ton code, avoir quelque chose qui marche c'est déjà une 1ère étape importante, surtout quand on cherche à se lancer des défis de code :)

    Si je peux te conseiller quelque chose quand tu demandes un avis sur un code, c'est de rajouter des commentaires qui explique ce que tu fais et pourquoi.
    De cette façon, la personne qui va lire et donner son avis va plus facilement comprendre.
    Après ne t'inquiète, pas ton code est suffisamment clair pour être compréhensible qui connait forumactif, c'est juste une "bonne habitude" à prendre. Même pour toi quand tu re-liras le code dans X mois :)

    Je vais essayer de m'y mettre, c'est un grand défaut que j'ai de garder le tout dans un coin de la tête :/

    Est ce que toi de ton côté tu vois des points où tu aimerais bien améliorer mais tu n'es pas trop sûr de comment faire ?

    J'ai l'impression d'avoir eu recours à une 'méthode' trop longue et un peu tricheuse pour parvenir à mes besoins ici; est-ce qu'une utilisation du for ou do/while (bien que je n'ai jamais utilisé aucun des deux x_x) aurait été plus judicieuse ? Je pense que mon approche est loin d'être la meilleure, je ne sais pas pourquoi j'ai ce ressenti :|

    - dans quel template est ce que tu comptes mettre ce code, et vas tu laisser le Javascript dans le template, ou bien le mettre dans la section "Modules Javascript" du panneau d'administration ? (c'est juste pour savoir haha)

    Alors, j'adore cette question et ton avis m'intéresse là-dessus également: j'ai pris pour habitude de mettre les JS directement dans les templates; choisir exactement à quel moment le script s'exécute me paraît mieux :) Pour le template, j'ai travaillé sur overall_header et penserait rester sur celui-ci ~

    - si quelqu'un poste un lien vers la section MP dans un topic, est ce que tu veux que si un utilisateur clique dessus, cela ouvre la popup ou bien que cela ouvre le vrai lien de la page ?

    Pour le coup, le vrai lien de la page; je trouve ça plus 'juste', plus simple que le raccourci ne soit que sur le lien dans la navigation et pas sur chaque lien menant vers la boîte MP. Après, ça aurait pu être sur tous les liens si la pop-up était plus discrète :b

    Petite note au niveau pratique pour l'utilisateur en regardant le GIF
    - j'ai pas l'impression d'en voir, ça serait pratique un lien pour permettre à la personne d'aller quand même sur la "vraie" page des MP si besoin.
    Je dis ça car du coup, l'utilisateur doit "ouvrir le lien dans un nouvel onglet" s'il veut accéder à la vraie page MP (que cela soit par confort ou bien pour pouvoir écrire un nouveau MP)

    Justement, j'ai ajouté ce lien dans l'après-midi:
    Conseils & Avis pour un code d'aperçu des MPs 1UuSXkm

    ^ j'ai corrigé la vilaine faute :>

    J'ai commencé en pensant qu'un clic avec la molette de la souris sur le lien pour ouvrir la vraie boîte MP était suffisant, mais en y repensant, c'est pas le plus 'ergonomique' :B

    Aussi, je ne sais pas si tu veux aller jusqu'à gérer la pagination dans les MP (pour les membres extrême, par exemple j'ai 4 pages de MP sur NU xD). Si ce n'est pas le cas, peut-être juste prévoir un petit message qui prévient qu'on charge seulement les MP de la 1ère page.
    D'un autre côté, si quelqu'un veut retourner à un vieux MP, a priori il va se lasser de cliquer plein de fois sur le bouton load more, et il va ouvrir la page dédiée haha.

    Alors, pour le coup, c'est pas l'envie qui manquait pour la pagination mais les connaissances. D:
    J'ai absolument aucune idée de comment faire pour load la boîte MP et derrière encore load les autres pages. :/

    L'idée du message pour prévenir est une bonne idée; soit ça, soit ce à quoi m'a fait penser ta dernière page; je pourrais simplement définir un nombre de MPs plus grands et insérer un overflow: auto; à la fenêtre avec une hauteur maximale définie pour avoir le scroll; ça éviterait d'avoir un gros block de 800px de hauteur pour charger toute la première page :toto:

    Encore merci pour ta réponse ! :ninjahug:




    ~
    Contenu sponsorisé


      La date/heure actuelle est Sam 27 Avr 2024 - 22:14