Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB3]Afficher des commentaires sous forme de vignettes


2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 30 Juin 2021 - 19:56

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 :
[PHPBB3]Afficher des commentaires sous forme de vignettes 129

[PHPBB3]Afficher des commentaires sous forme de vignettes 218

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

[PHPBB3]Afficher des commentaires sous forme de vignettes 132

Le script est optimisé pour le tag du membre:

[PHPBB3]Afficher des commentaires sous forme de vignettes 219



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 Valid

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 [PHPBB3]Afficher des commentaires sous forme de vignettes Sans_t10


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>


Dernière édition par Milouze14 le Sam 7 Déc 2024 - 8:06, édité 15 fois

photoclic aime ce message

avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Jeu 1 Juil 2021 - 23:28

Bonjour,
Merci pour ce partage.

Milouze14 aime ce message

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum