[PHPBB3] Bouton Favoris sous l'avatar

Hello Serge,

alors dans un premier temps, on va s'assurer de bien prendre le pseudo de chaque membre:

Dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body

Recherches ceci:

Code:


<strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>




Supprimes et remplaces par:

Code:

  <strong class="M14_get"style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>

Si tu as supprimé la balise strong, remplaces là par un span..

On va positionner la ligne est testé sa fonctionnalité.
On importera le contenu après.

Une fois le template modifié et publié.


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

Mettre un titre explicite.

Cocher Sur les sujets

Déposes ceci:

Code:


$(function(){
var M14_user=_userdata["username"];
$('div[id^="profile"][class="postprofile"]').each(function(){var $this=$(this);
var text=$(this).find('strong.M14_get a[href^="/u"]').text();
if(M14_user==text){$.get('/search?search_id=favouritesearch' , function(data){
$(data).find('h1.page-title').each(function(){var str=$(this).text();
var result= str.match(/\d+/);
$this.find('dd:last').before(' <dd><span style="color:#27aab8;">Mes photos favorites:</span> <span style="color:white!important;margin-left:5px;">'+result+'</span></dd>');
});});}});});


Penses a cliquer sur le bouton

Le style est présent dans le script Serge.

Je reviens que ce soir mon ami.

Bonjour Philippe,

Un grand merci pour ce travail.

Concernant le template viewtopic_body, la modification n'a pas été nécessaire car il y avait déjà une class d'attribuée pour le membre ainsi:

Code:

<strong class="M14_member"style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>

J'ai donc remplacé dans le JS .M14_get par .M14_member

Juste ajouté aussi un peu de css, ce qui donne pour le JS:

Code:


//Bouton favoris sous avatar
$(function(){
    var M14_user=_userdata["username"];
    $('div[id^="profile"][class="postprofile"]').each(function(){var $this=$(this);
    var text=$(this).find('strong.M14_member a[href^="/u"]').text();
    if(M14_user==text){$.get('/search?search_id=favouritesearch' , function(data){
    $(data).find('h1.page-title').each(function(){var str=$(this).text();
    var result= str.match(/\d+/);
    $this.find('dd:last').before(' <dd><span style="color:#27aab8;top: -6px;position: relative;">Mes photos favorites:</span> <span style="color:white!important;margin-left:5px;top: -6px;position: relative;">'+result+'</span></dd>');
    });});}});});


Et ça fonctionne bien Phil, on prend bien le pseudo de chaque membre ainsi que son nombre de favoris  

Si j'ai bien compris, il resterait à afficher les favoris au clic sur ce bouton..

Merci encore Philippe.

Hello Serge,

Si j'ai bien compris, il resterait à afficher les favoris au clic sur ce bouton..

, en faite, au clic sur ce bouton , celui-ci disparaitra car il faut penser que le membre peut être présent plusieurs fois sur une même page
et comme on importe .append() , si on clic une deuxième fois on importera une deuxième fois les photos.



Alors voici un script qui va rechercher la première photo (hors smileys)
dans la liste de ses favoris mais seulement sur la première page.
Si le membre n'a aucun favori, le bouton ne s'affichera pas.




Donc, il faut peut-être voir a mettre l'affichage au maximum dans ton P.A:
Ne pas confondre avec les sujets...

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

Nombre de messages par page :


Comme il est pratiquement impossible de dire que le membre a choisi de mettre en favoris un sujet car il aime le sujet parce qu'il contient une photo mais peut être sur le XX message...

Le chiffre annoncé ne sera pas forcément en relation avec les photos affichées Serge.
Comme sur ton fofo, tu as surement des photos sur les premiers messages, tu n'auras peut être pas ce problème.


Ensuite, j'ai cherché comment afficher l'importation des photos..
Le mieux est de les afficher en bas en position fixed.
Tu pourras te servir des commentaires pour te repérer.

L'affichage sera interprété ainsi:
tu auras l'auteur du sujet.
Le lien du sujet,la photo (si elle est dans le premier message).
Ce qui donne en visu:



Allez, à toi de t'amuser mon ami.


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

Mettre un titre explicite.

Cocher  Sur les sujets

Déposer ceci:

Code:


//Bouton favoris sous avatar
    $(function(){
      $('body').append('<div id="M14_recept_fav_photo"><img src="https://i.servimg.com/u/f20/20/11/87/27/button14.png"class="M14_closedDiv" title="Fermer"/></div>');
        var M14_user=_userdata["username"];
        $('div[id^="profile"][class="postprofile"]').each(function(){
          var $this=$(this);
        var text=$(this).find('strong.M14_member a[href^="/u"]').text();
if(M14_user==text)
{
$.get('/search?search_id=favouritesearch' , function(data){
$(data).find('h1.page-title').each(function(){
var test=$(data).find('.table1').find('a.topictitle').length;
var str=$(this).text();
var result= str.match(/\d+/);
if(test>=1)
{
$this.find('dd:last').before(' <dd class="M14_dd_toggle_import"><span class="M14_toogle_import"style="color:#27aab8;top: -6px;position: relative;" title="Voir mes photos favorites">Mes photos favorites:</span> <span style="color:white!important;margin-left:5px;top: -6px;position: relative;">'+result+'</span></dd>');
$(data).find('a.topictitle').each(function(){
var pseudo=$(this).closest('tr').find('td.posts:eq(2) .postdetails a[href^="/u"]').text();
var linkfav=$(this).attr('href');
var text=$(this).text();
$.get(linkfav , function(data){
$(data).find('div[class*="post--"]:first').each(function(){
var src=$(this).find('.content:first div:not(.M14_reception_photos):first img:not([longdesc]):first').attr('src');  


if(src)
{
$this.find('.M14_toogle_import').click(function(){
$('#M14_recept_fav_photoF4').hide();
$(this).closest('dd').hide();
  $('#M14_recept_fav_photo').show().append('<a class="M14_href" href="'+linkfav+'"><span class="M14_Pseudo_Favo" title="Pseudo du créateur du sujet">'+pseudo+'</span><img src="'+src+'" title="Voir la photo favorite du sujet '+text+'"/></a>');  
});}
});}); });
$('img.M14_closedDiv').click(function(){  
$(this).closest('div').find('a.M14_href').remove();
$(this).closest('div').hide();
});
}  
        
                                                    
});});
 }
});});


Penser a cliquer sur le bouton

Puis la c.s.s:

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

Ajouter ceci:

Code:


/*RECEPTION PHOTOS FAVORITES SUR LES MESSAGES*/
#M14_recept_fav_photo
{
display:none;
position:fixed;
z-index:999;
bottom:0px;
left:0px;
right:0px;
width:100%;
height:100px;
background-color: #2e2e2e;  
padding:8px 5px;
overflow-x:auto;
}
/*CHAQUE LIEN ENGLOBANT LA PHOTO*/
#M14_recept_fav_photo a.M14_href
{
margin:20px 3px;
width:80px;
height:90px;
display: inline-table;
}
/*CHAQUE PHOTO*/
#M14_recept_fav_photo img
{
width:80px;
height:80px;
}
/*CHAQUE PSEUDO*/
#M14_recept_fav_photo .M14_Pseudo_Favo
{
color:white!important;
font-size:10px !important;
position: absolute;
width: 80px;
height: 20px;
margin-top: -20px;
text-align: center;
}
/*LE BOUTON DE FERMETURE*/
.M14_closedDiv
{
margin-top:-4px;
width:24px!important;
height:24px!important;
position: absolute;
right: 30px;
}
 


Penser a cliquer sur le bouton

Bonjour Philippe,

Un grand merci pour ce nouveau et excellent script.

Alors, ça fonctionne Phil  

Comme sur le même script en html, les photos sont bien importées, sauf pour sergeot où il manque la photo avec les smileys en tête.
(Je n'avais pas ce pb avec ton script initial ici: https://www.milouze14.com/t32525-phpbb3-bouton-favoris-sous-l-avatar#619473)

Pour éviter cela j'ai fait comme sur la page html, j'ai retiré le : first après le longdesc sur cette ligne:

Code:

var src=$(this).find('.content:first div:not(.M14_reception_photos) img:not([longdesc])').attr('src');

J'ai juste ensuite ajusté le css pour avoir le div moins large, et le cursor: pointer sur le bouton.

Juste des questions un peu similaires à l'autre script:
. Serait-il possible d'accrocher le div à droite du module de l'avatar du membre au lieu de l'avoir en bas de page?
. Serait-il possible lorsque l'on clique sur le bouton de fermer la div de "Mes photos dans phototest.
. Serait-il possible de ne lancer la recherche qu'au clic sur le bouton "Mes photos favorites". Le nombre de photos seraient alors renseigné après la recherche sans afficher zéro?

Sinon tant pis Phil.

Encore merci Philippe pour ce travail.

Re Serge,

. Serait-il possible d'accrocher le div à droite du module de l'avatar du membre au lieu de l'avoir en bas de page?

Tu penses bien que j'ai testé toutes les possibilités et le bas de page était la meilleure solution.
Ce que tu proposes est purement incohérent Serge,
tu n'as pas de place ou alors je ne saisis pas ton souhait!!

Serait-il possible lorsque l'on clique sur le bouton de fermer la div de "Mes photos dans phototest.

  , hum, tu es enrhumé   .
J'ai rien compris mon ami .

. Serait-il possible de ne lancer la recherche qu'au clic sur le bouton "Mes photos favorites". Le nombre de photos seraient alors renseigné après la recherche sans afficher zéro?

Tu penses bien que ce soit sur ce script ou l'autre demande, que je fais mon possible afin d'éviter un maximum de requête Serge.
Malheureusement avec ce que tu demandes on a pas trop le choix.


Ma réponse concerne aussi cette demande Serge:
https://www.milouze14.com/t32526-phpbb3-bouton-photos-dans-phototest#619511

Milouze14 a écrit:
Re Serge,

. Serait-il possible d'accrocher le div à droite du module de l'avatar du membre au lieu de l'avoir en bas de page?

Tu penses bien que j'ai testé toutes les possibilités et le bas de page était la meilleure solution.
Ce que tu proposes est purement incohérent Serge,
tu n'as pas de place ou alors je ne saisis pas ton souhait!!

Bonsoir Philippe,

Je vais essayer d'être plus explicite.
Quand tu te connecte avec l'id que tu connais sur mon fofo, en allant sur ce post:
https://photoclic.forum-pro.fr/t20554-semaine-du-26-fevrier-au-11-mars#268211

En cliquant sur le bouton "Voir mes favoris" la div que j'ai redimensionnée en largeur se présente ainsi, à droite du module de l'avatar:

Spoiler:

Serait-il possible quand je monte ou descend avec l'ascenseur que la div suive le module de l'avatar au lieu de rester en bas?

Milouze14 a écrit:

Serait-il possible lorsque l'on clique sur le bouton de fermer la div de "Mes photos dans phototest.

  , hum, tu es enrhumé   .
J'ai rien compris mon ami .

Bon, je me mouche et je reformule

Quand j'ai cliqué sur mes 2 boutons sans avoir fermé les div, l'idée était que quand je clique par exemple sur le bouton des favoris, la div des photos en phototest se ferme systématiquement et inversement.

Milouze14 a écrit:

. Serait-il possible de ne lancer la recherche qu'au clic sur le bouton "Mes photos favorites". Le nombre de photos seraient alors renseigné après la recherche sans afficher zéro?

Tu penses bien que ce soit sur ce script ou l'autre demande, que je fais mon possible afin d'éviter un maximum de requête Serge.
Malheureusement avec ce que tu demandes on a pas trop le choix.


Ma réponse concerne aussi cette demande Serge:
https://www.milouze14.com/t32526-phpbb3-bouton-photos-dans-phototest#619511

Pas de souci Phil.

Si aucune de mes élucubrations n'esr réalisable, pas grave Philippe.

Bonsoir Serge,

Quand j'ai cliqué sur mes 2 boutons sans avoir fermé les div, l'idée était que quand je clique par exemple sur le bouton des favoris, la div des photos en phototest se ferme systématiquement et inversement.

Il est vrai que j'avais zappé cette problématique.
Alors pour ce script :

Recherches ceci:

Code:

$this.find('.M14_toogle_import').click(function(){

ajoutes ceci:

Code:

 $('#M14_recept_fav_photoF4').hide();

Pour le script des favoris:

Recherches ceci:

Code:

$this.find('.M14_toogle_importF4').click(function(){

juste après déposes ceci:

Code:



  $('#M14_recept_fav_photo').hide();



Serait-il possible quand je monte ou descend avec l'ascenseur que la div suive le module de l'avatar au lieu de rester en bas?

J'avais bien compris ta demande Serge.

Je vais regarder mais sans grande conviction Serge.

Re Phil,

C'est tout bon pour la fermeture des div

Voici ce script qui va placer la div dans le message Serge.

Code:

//Bouton favoris sous avatar
        $(function(){
        
            var M14_user=_userdata["username"];
            $('div[id^="profile"][class="postprofile"]').each(function(){
            
              var $this=$(this);
            var text=$(this).find('strong.M14_member a[href^="/u"]').text();
    if(M14_user==text)
    {
$this.find('dt').after('<div id="M14_recept_fav_photo"><img src="https://i.servimg.com/u/f20/20/11/87/27/button14.png"class="M14_closedDiv" title="Fermer"/></div>');
     var essais=0;
    $.get('/search?search_id=favouritesearch' , function(data){
    $(data).find('h1.page-title').each(function(){
    var test=$(data).find('.table1').find('a.topictitle').length;
$this.find('dd:last').before(' <dd class="M14_dd_toggle_import"><span class="M14_toogle_import"style="color:#27aab8;top: -6px;position: relative;" title="Voir mes photos favorites">Mes photos favorites:</span> <span class="resultFav"style="color:white!important;margin-left:5px;top: -6px;position: relative;">0</span></dd>');    
    if(test>=1)
    {

    $(data).find('a.topictitle').each(function(){
    var pseudo=$(this).closest('tr').find('td.posts:eq(2) .postdetails a[href^="/u"]').text();
    var linkfav=$(this).attr('href');
    var text=$(this).text();
    $.get(linkfav , function(data){
    $(data).find('div[class*="post--"]:first').each(function(){
      essais+=$(this).find('.content:first div:not(.M14_reception_photos):first img:not([longdesc])').length;
    var src=$(this).find('.content:first div:not(.M14_reception_photos):first img:not([longdesc])').attr('src');  


    if(src)
    {
    $this.find('.resultFav').text(essais);
    $this.find('.M14_toogle_import').click(function(){
      $('#M14_recept_fav_photoF4').hide();
    $(this).closest('dd').hide();
    $this.find('#M14_recept_fav_photo').show().append('<a class="M14_href" href="'+linkfav+'"><span class="M14_Pseudo_Favo" title="Pseudo du créateur du sujet">'+pseudo+'</span><img src="'+src+'" title="Voir la photo favorite du sujet '+text+'"/></a>');  
    });
    }
    
    });}); });
    $('img.M14_closedDiv').click(function(){  
    $(this).closest('div').find('a.M14_href').remove();
    $(this).closest('div').hide();
    });
    }  
            
                                                        
    });});
     }
    });});

Pour ton autre demande:

Code:

//Bouton fofo F4 sous avatar
    $(function(){
 
    $('div[id^="profile"][class="postprofile"]').each(function(){
    var $this=$(this);
    var text=$(this).find('strong.M14_member a[href^="/u"]').text();
    var st="/st/";
    var wher="&search_where=f4";
    var essai=0;
    $this.find('dd:last').before(' <dd class="M14_dd_toggle_importF4"><span class="M14_toogle_importF4"style="color:#27aab8;top: -6px;position: relative;" title="Voir mes photos sur Phototest">Mes photos dans Phototest:</span> <span class="M14_result"style="color:white!important;margin-left:5px;top: -6px;position: relative;">0</span></dd>');
    $this.find('dt').after('<div id="M14_recept_fav_photoF4"><img src="https://i.servimg.com/u/f20/20/11/87/27/button14.png"class="M14_closedDivF4" title="Fermer"/></div>'); 
    $.get(st+text+wher , function(data){
    $(data).find('a.topictitle').each(function(){
    var linkF4=$(this).attr('href');
    $.get(linkF4 , function(data){
     
    $(data).find('div[class*="post--"]:first').each(function(){   
    essai+=$(this).find('.content:first div:not(.M14_reception_photos):first img:not([longdesc]):first').length;
    var src=$(this).find('.content:first div:not(.M14_reception_photos):first img:not([longdesc]):first').attr('src');

    if(src)
    {
    $this.find('.M14_result').text(essai);
    $this.find('.M14_toogle_importF4').click(function(){
      $('#M14_recept_fav_photo').hide();
    $(this).closest('dd').hide();
    $this.find('#M14_recept_fav_photoF4').show().append('<a class="M14_hrefF4" href="'+linkF4+'"><img src="'+src+'" title="Voir la photo sur le forum Phototest"/></a>'); 
    }); 
    }
    $('img.M14_closedDivF4').click(function(){$(this).closest('div').find('a.M14_hrefF4').remove();$(this).closest('div').hide();
    });});});});});});});

Puis modifies la première partie de la css ainsi:

Code:

   /*RECEPTION PHOTOS FAVORITES SUR LES MESSAGES*/
    #M14_recept_fav_photo, #M14_recept_fav_photoF4
    {
    display:none;
    z-index:999;
 position: absolute;
    width:850px;
    height:100px;
    background-color: #2e2e2e;  
    padding:8px 5px;
    overflow-x:auto;
    }

Il ne te reste plus qu'à placer ces dernières comme tu le souhaites.

Pour une fois , il faudra bien renseigner en pixels et non en pourcentage .

Je vais essayer, mais je crois que tu m'as mis 2 fois le même script.

Je vais essayer, mais je crois que tu m'as mis 2 fois le même script.

Je me suis planté sur le deuxième script, j'ai déposé le même.
Je viens de l'éditer Serge.

ça me parait tout bon Philippe.

Je dois juste affiner le css.

Je valide tout ça avant de passer en résolu tout à l'heure.

Merci pour tout Philippe.
Passe une bonne soirée.

Pas de soucis Serge.
Pour ma pomme, je verrais tout cela demain matin.
Merci et bonne soirée à toi aussi.

Superbe travail Philippe, tout est comme je l'avais imaginé et tu as finalement tout solutionné.

Un grand merci l'ami pour ces scripts

De rien Serge