[PHPBB3]Afficher des commentaires sous forme de vignettes

Hello les ami(e)s,

voici une astuce (template non modifié) bien sympa.

Astuce incompatible avec les doubles post:
https://forum.forumactif.com/t405404-fusionner-agreger-les-multi-messages-double-post#3380145

Le code html devra être déposé dans un sujet ou tous les membres peuvent répondre via la réponse rapide.

La réponse rapide étant désactivée pour les invités, ces derniers ne pourront donc pas en profiter.
Si cette dernière est absente le formulaire ne s'affichera pas.



On aura un contenu qui sera envoyé seulement si le membre aura tapé X caractères (défini dans le script) .

Pour l'exemple j'ai défini 15 caractères.

Code:


//Le nombre minimum de caracteres
var num=15;


Le zéro (0) correspond au nombre de caractères tapés et à coté le nombre restant.
Une fois les 15 caractères atteint, ces deux parties laisseront la place à un texte
mentionnant que le membre peut envoyer son commentaire (modifiable dans le script):

Code:

//LE TEXTE SI LE COMMENTAIRE PEUT ETRE ENVOYE
var textinfo="Vous pouvez envoyer votre commentaire";

Le membre aura le choix de poster en anonyme et
dans ce cas il cochera la case et un avatar par défaut lui sera attribué.



Cet avatar est modifiable dans le script:

Code:

//LE LIEN DE L AVATAR PAR DEFAUT
var img="https://i.servimg.com/u/f20/20/11/87/27/chat10.png";

Dans le cas ou le membre ne coche pas cette case, son avatar sera donc affiché.

Pour les membres du staff, il pourront soit éditer ou supprimer la vignettes,
les membres verront juste les vignettes.

Toutes les vignettes auront l'id du message, c'est à dire qu'à la publication du message on pointera vers ce dernier.

Pour que cette astuce fonctionne, il est impératif d'activer le premier message:

Le nombre de vignettes sera comptabilisées par page.

Général/Messages et Emails/Configuration/Messages

Toujours afficher le 1er message dans les sujets:
Cocher Oui
Et que la réponse rapide soit activée:
Général/Messages et Emails/Configuration/Messages


Autoriser les Réponses rapides : cocher oui




Les aperçus imagés :




Pour le staff on reprend les images du bouton "Editer" et "Supprimer"



Le script est optimisé pour le tag du membre:





Allez hop le script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher  Sur les sujets


Déposer ceci:

Code:


$(function(){
  
//Si sujet verrouille
var verrou=$('img[alt^="Ce sujet est verrouillé"]').length;
//Si reponse rapide presente
var quick=$('form[id="quick_reply"]').length;
var log=_userdata["session_logged_in"];
//SI VERROUILLE ALORS ON CACHE LE FORMULAIRE
if((verrou)||(log==0)||(quick==0)){$('.M14_formulaire').hide();}
//SI DECONNECTE ON REMPLACE LE CONTENU DES VIGNETTES PAR UN LOGIN/REGISTER
if(log==0){$('.M14_vignette_topic').addClass('InvitE').html('<span class="M14_vignette_reg_log">Vous devez être <a href="/register" class="link">inscrit</a> et <a href="/login"class="link">connecté</a> pour voir ce commentaire</span>');  }
    var user=_userdata["username"];
    //le texte affiché dans le conteneur
    var texta="votre commentaire doit contenir au moins";
    //Le nombre minimum de caracteres
    var num=15;
    var btn=$('#M14_formulaire_Go');
    $('.M14_formulaire_caractere_info').text('Reste:'+num+'');
    $('#M14_formulaire_Comment').attr('placeholder','Bonjour '+user+',\n'+texta+' '+num+' caractéres.');  
    $('#M14_formulaire_Comment').keyup(function(){
    var a=$(this).val().length;
    var result=num-a;
    //LE TEXTE SI LE COMMENTAIRE PEUT ETRE ENVOYE
    var textinfo="Vous pouvez envoyer votre commentaire";
    $('.M14_formulaire_caractere_info').text('Reste:'+result+'');
    if(a>=num)
    {
    $('.M14_formulaire_Titre,.M14_formulaire_caractere_info').css('opacity','0');
    $('input[id="M14_formulaire_Go"]').slideDown();
       $('.M14_formulaire_caractere').attr('title','Envoyer votre commentaire').text(textinfo);
    }
    if(a<num)
    {
    $('.M14_formulaire_Titre,.M14_formulaire_caractere_info').css('opacity','1');
      $('input[id="M14_formulaire_Go"]').slideUp();
       $('.M14_formulaire_caractere').attr('title','Nombre de caractéres').text(a);
    }
    });
    
    $(btn).click(function(){
    var avatar=_userdata["avatar"];
    var pseudo='@"'+_userdata["username"]+'"';
    var commentaire=$('#M14_formulaire_Comment').val();
      //Si pseudo non renseigne
    if($('input[name="M14_formulaire_Anonyme"]').is(':checked')){
    var b=$('input[id="M14_formulaire_Anonyme_hide"]').val();
    //LE LIEN DE L AVATAR PAR DEFAUT
    var img="https://i.servimg.com/u/f20/20/11/87/27/chat10.png";
    var avatar='<img src="'+img+'">';
    var pseudo=$('input#M14_formulaire_Anonyme_hide').val();
        }
        var aujourdhui=new Date();
        var annee=aujourdhui.getFullYear();
        var mois=aujourdhui.getMonth();
        var jour=aujourdhui.getDate();
        var joursemaine=aujourdhui.getDay();
        var tab_mois=new Array("janv.","fév.","mars.","avril.","mai","juin","juil.","aout","sept.","oct.","nov.","déc.");
        var heure=aujourdhui.getHours();
    if (heure<10) {heure = "0" + heure}
        var minutes=aujourdhui.getMinutes();
    if (minutes<10) {minutes = "0" + minutes}
        var fullHeure=heure+' h '+minutes;
        var fullDate='a publié ce commentaire le '+jour+' '+tab_mois[mois]+' '+annee+' à '+fullHeure;
        $editor = $('.sceditor-container');
    if ($editor.hasClass('wysiwygMode')) $editor.removeClass('wysiwygMode').addClass('sourceMode') ;
    $('#quick_reply textarea ').val('<div class="M14_vignette_topic"><div class="M14_vignette_ancre"style="position: relative;top: -30px; width: 1px;"></div><div class="M14_vignette_topic_comment"><div class="M14_vignette_topic_Img">'+avatar+'</div><div class="M14_vignette_topic_Haut"><span class="M14_vignette_topic_Titre">'+pseudo+'</span><span class="M14_vignette_topic_Date">'+fullDate+'</span></div><div class="M14_vignette_topic_Commentaire">'+commentaire+'</div></div>\n</div>');
        $("#quick_reply input[name='post'][value='Envoyer']").click()})
    });

    $(function(){    
    $('.M14_vignette_topic_Titre').each(function(){var $this=$(this);
    var not=$(this).find('a[href^="/u"]').length;
    if(!not){$this.addClass('no_pseudo');}});
    var staff=$('a[href^="/modcp?mode=delete"]').length;
    var a=$(this).find('.M14_vignette_topic').length;
    $(this).find('.M14_vignette_topic').each(function(){
    $(this).closest('div[class*="post--"]').addClass('M14_post_none');
    var link=$(this).closest('div[class*="post--"]').find('div[style]').attr('id');
    $(this).find('.M14_vignette_ancre').attr('id',link);  
    var d=$(this);
    if(staff)
    {
    var b=$(this).closest('div[class*="post--"]').find('a[href$="mode=editpost"]').closest('li').html();
    var c=$(this).closest('div[class*="post--"]').find('a[href$="mode=delete"]').closest('li').html();
    $('.M14_recept_comment').append(d);d.before(''+b+'  '+c+'');}
    $('.M14_recept_comment').append(d);});
    var w=$('div[class*="post--"]:first').find('.M14_vignette_topic').length;
    if(w==0){$('.M14_formulaire_affiche').attr('title','Aucun commentaire').html('( 0 )');  }
    if(w==1){$('.M14_formulaire_affiche').attr('title','1 commentaire').html('( '+w+' )');  }
    if(w>1){$('.M14_formulaire_affiche').attr('title',''+w+' commentaires').html('( '+w+' )');  }
    });


Penser a cliquer sur le bouton

La css a été optimisée afin d'avoir un affichage concret.


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


/*LE CONTENEUR DES VIGNETTES*/
.M14_recept_comment
{
width:100%;
position: relative;
}
/********DEBUT DES VIGNETTES********/
/*LA VIGNETTE*/
.M14_vignette_topic
{
margin-top:5px;
margin-bottom: 3px;
border:1px solid #666;
padding: 2px;
height: 100px;
width: 90%;
}

/*LA DATE*/
.M14_vignette_topic_Date
{font-size:11px; margin-left:10px;color:#666!important;}
/*LA PARTIE COMMENTAIRE*/
.M14_vignette_topic_Commentaire
{
  color:#666!important;
  font-size:11px!important;
  padding: 2px;
  white-space: pre-wrap;
  height:50px;
  width:85%;
  overflow-y:auto;
  border:1px dotted #666;
}

/*LE CONTENEUR DE L AVATAR*/
.M14_vignette_topic_Img{position: absolute;margin-top:13px;}
/* L AVATAR*/
.M14_vignette_topic_Img img{width:60px!important;height:60px!important;border-radius:100%;}
/*ON DECALE DE 70 PX LES BLOCS DE DROITE EN FONCTION DE L AVATAR*/
.M14_vignette_topic_Haut,.M14_vignette_topic_Commentaire{margin-left:70px;}
/*LE PSEUDO*/
.M14_vignette_topic_Titre:not(.no_pseudo) a[href^="/u"]{color:#666;font-size:11px; }
/*SI ANONYME*/
.M14_vignette_topic_Titre.no_pseudo{color:red;font-style:italic;font-size:11px;}
/*ON CENTRE LA VIGNETTE POUR LES INVITES*/
.M14_vignette_topic.InvitE{text-align: center;}
/*COULEUR ET APPARENCE DU TEXTE/LIEN DANS LA VIGNETTE POUR LES INVITES*/
.M14_vignette_reg_log{color:red!important;line-height: 100px;}
.M14_vignette_reg_log a.link{color:red!important;text-decoration:none!important;}
/********FIN DES VIGNETTES********/
/*ON MASQUE LES MESSAGES*/
.M14_post_none{display:none!important;}
/*LE FORMULAIRE*/
.M14_formulaire
{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 20px 20px;
}
/*LE COMPTEUR DE CARACTERES*/
.M14_formulaire_caractere
{
position: absolute;
color: #666 !important;
font-size: 11px !important;
font-family: Muli;
font-weight: 700;
text-transform: uppercase;
}
.M14_formulaire_caractere_info
{
  position: absolute;
color: #666 !important;
font-size: 11px !important;
font-family: Muli;
font-weight: 700;
text-transform: uppercase;
  margin-left:25px;
}
/*LE TITRE DU FORMULAIRE*/
.M14_formulaire_Titre
{
color:#666!important;
font-size:11px!important;
font-family: Muli;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
/*LE NOMBRE DE VIGNETTES A COTE DU TITRE*/
span.M14_formulaire_affiche
{
margin-left:5px;
font-size: 11px;
color:#666!important;
cursor:pointer;
}
/*LE CONTENU */
#M14_formulaire_Comment
{
color:#000!important;
font-weight:bold;
font-size:11px!important;
border: 1px solid #eee;
height: 100px;
margin: 5px 0;
padding: 10px;
width: 95%;
}
 
/*LE BOUTON ENVOYER*/
#M14_formulaire_Go{display:none;float:right;}
/*LA LIGNE DES BOUTONS*/
.M14_formulaire_btn
{
width:80%;
color: #666;;
font-size:11px;
font-weight: 700;
letter-spacing: 2px;
padding: 3px;
text-transform: uppercase;
}
.M14_formulaire_btn input[type="checkbox"]
{
height: 20px;
padding: 3px;

}


Penser a cliquer sur le bouton


Vous pouvez personnaliser les boutons "Editer" "Supprimer" avec ce style:

Code:


/*LES BOUTONS DU STAFF*/
.M14_recept_comment  img.i_icon_edit,
.M14_recept_comment  img.i_icon_delete
{
VOTRE CSS
}


Il manque l'essentiel le code html que vous allez déposer dans votre premier message (formulaire) :

Code:


<div class="M14_formulaire">
<span class="M14_formulaire_caractere">0</span><span class="M14_formulaire_caractere_info"></span>
<div class="M14_formulaire_Titre"> Laisser un commentaire <span class="M14_formulaire_affiche"></span></div><br />
<textarea id="M14_formulaire_Comment"></textarea><br>
<span class="M14_formulaire_btn"><input type="checkbox" name="M14_formulaire_Anonyme"> Poster en anonyme<input type="button" class="button2" id="M14_formulaire_Go" value="Envoyer" title="Envoyer le commentaire"></span><br />
<input type="hidden" id="M14_formulaire_Anonyme_hide" value="Anonyme"></div>
<div class="M14_recept_comment"></div>


Bonjour,
Merci pour ce partage.