[BESTOF] [PHPBB3]Bouton pour copier les liens des messages

Coucou Serge,

alors je vais te proposer le script suivant:







Il va ajouter un bouton représenté par une image( que tu pourras modifier dans le script en t'aidant des commentaires).
Seulement sur les messages ayant des images supérieures à 200px.
On va intervenir dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body

Afin de faire fonctionner les balises code le cas échéant.
juste avant:

Code:

<div>{postrow.displayed.MESSAGE}</div>

Déposes ceci:

Code:

<div class="M14_reception_photos"style="display:none"></div>

Penses a enregistrer puis à valider en cliquant respectivement sur   puis


En fait, lorsque tu vas cliquer sur le bouton, tu auras les balises code
avec les balises img bbcode et le lien de ou des images présentes dans le message.

En ajoutant ce script pour la sélection automatique:
https://forum.forumactif.com/t309759-bouton-selectionner-le-contenu-pour-les-balises-de-code#2705324


Et pour finir les deux scripts,
le premier pour ajouter le bouton selon le type d'image sur les forums concernés,puis l'autre qui affichera les liens dans le corps du message.


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(){
if($('a.nav[href^="/f1-"],a.nav[href^="/f4-"],a.nav[href^="/f5-"],a.nav[href^="/f6-"],a.nav[href^="/f18-"]').length) {
//L IMAGE DU BOUTON
var img="https://i.servimg.com/u/f20/20/11/87/27/image10.png";
//On importe le bouton
$('.postbody').find('ul.profile-icons li:first').before('<li class="M14_copieLi"style="display:none;"><img src="'+img+'"class="M14_clickSRC"title="Copier le(s) photo(s)"/></li>');
$('.postbody').find('.content').find('img:not([longdesc])').filter(function(){
return this.width>200&&this.height>200;}).each(function(){
//on ajoute une class
$(this).addClass('M14_copie');
//on cherche le nombre
var number=$(this).length;
if(number)
{
$(this).closest('.postbody').find('li.M14_copieLi').show();
}

});

};
    
});
$(function(){
$('.M14_clickSRC').click(function(){
//on copie le ou les liens
$(this).closest('.postbody').find('.content').find('img.M14_copie').each(function(){
var link=$(this).attr('src');
$(this).closest('.postbody').find('.M14_reception_photos').show().append('<dl class="codebox"><dt>Code:<span onclick="selectCode(this)" class="selectCode">Sélectionner</span></dt><dd><code>[img]'+link+'[/img]</code></dd></dl>');

  });});
    
});


Penser a cliquer sur le bouton

Bonjour Philippe,

Encore une merveille que je ne pensais pas possible.
C'est génial! Un grand merci l'ami.

Je me permets  ces demandes pour peaufiner, en espérant ne pas abuser:
. serait-il possible de ne pas dupliquer la fenêtre lorsque l'on reclique sur le bouton, ou mieux la masquer
. Un petit bouton comme sur FA pour sélectionner le lien ou comme ici pour copier directement le lien serait un plus, mais c'est déjà très bien ainsi Phil.

Re Serge,
alors pour masquer le bouton dès lors que l'on a cliqué dessus,
remplaces le script par celui-ci:

Code:

$(function(){
if($('a.nav[href^="/f1-"],a.nav[href^="/f4-"],a.nav[href^="/f5-"],a.nav[href^="/f6-"],a.nav[href^="/f18-"]').length) {
//L IMAGE DU BOUTON
var img="https://i.servimg.com/u/f20/20/11/87/27/image10.png";
//On importe le bouton
$('.postbody').find('ul.profile-icons li:first').before('<li class="M14_copieLi"style="display:none;"><img src="'+img+'"class="M14_clickSRC"title="Copier le(s) photo(s)"/></li>');
$('.postbody').find('.content').find('img:not([longdesc])').filter(function(){
return this.width>200&&this.height>200;}).each(function(){
//on ajoute une class
$(this).addClass('M14_copie');
//on cherche le nombre
var number=$(this).length;
if(number)
{
$(this).closest('.postbody').find('li.M14_copieLi').show();
}

});

};
   
});
$(function(){
$('.M14_clickSRC').click(function(){
//on copie le ou les liens
$(this).fadeOut().closest('.postbody').find('.content').find('img.M14_copie').each(function(){
var link=$(this).attr('src');
$(this).closest('.postbody').find('.M14_reception_photos').show().append('<dl class="codebox"><dt>Code:<span onclick="selectCode(this)" class="selectCode">Sélectionner</span></dt><dd><code>[img]'+link+'[/img]</code></dd></dl>');

  });});
   
});

Un petit bouton comme sur FA pour sélectionner le lien ou comme ici pour copier directement le lien serait un plus, mais c'est déjà très bien ainsi Phil.

Tu as pris le script que je t'ai donné sur le forum des forums Serge?

Tu veux en fait, la petite main en dessous du texte "Sélectionner le contenu" ?
As tu la librairie font-awesome d'installé sur ton fofo ? :

https://forum.forumactif.com/t377879-comment-installer-et-utiliser-font-awesome-sur-son-forum#3187002

Bonsoir Phil,

Non rien pris sur FA.
Le script installé est le tien.
J'ai juste ajouté une condition pour qu'il ne soit pas visible aux invités, et du css pour que le bouton soit à droite.
Tu es en admin si tu veux voir.

Je vais de ce pas essayer ton nouveau script.

Alors ton dernier script ne change rien Phil.

L'idée était qu'en cliquant sur ce bouton, la fenêtre se referme. Si trop compliqué laisse ainsi Philippe.

Non je n'ai pas la police font awesone d'installée.

Oui, ce serait un bouton pour sélectionner le contenu comme sur FA ou comme sur ton fofo le bouton "copier le code"

Je te demande cela pour la bibliothèque awesome,
c'est pour ajouter la petite main comme cette capture:
Le script est fonctionnel juste au clic, il sera intégré dans le presse papier (copier/coller)



On part du principe que tu installes cette bibliothèque (qui te servira pour ajouter d'autre bouton très facilement car plus léger que des images comme ici:

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

Recherches ceci:

Code:


{T_HEAD_STYLESHEET}


Juste avant déposes ceci:

Code:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Penses a enregistrer puis à valider en cliquant respectivement sur puis

Voilà c'est fait, ensuite voici le site des icônes disponibles:

http://seehowsupport.com/font-awesome

Pour la petite main que tu vois sur la capture,il faudra ajouter dans la feuille de style ceci:

Code:


.fae_copy-code:after
{
content: "\f25a";
font-family: FontAwesome;
position: absolute;
margin-left: -110px;
margin-top: 13px;
color:#000000;
font-size:12px;
}



Le script qui va directement sélectionner le contenu au clic avec une infobulle(que j'ai ajouté) au survol avec l'appel tooltip.
Ce script sera aussi fonctionnel sur toutes les balises codes


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

Mets un titre explicite.
Coches Sur les sujets

Déposes ceci:

Code:


/* -- 12. copy code button -- */
$.getScript('https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', function() {
  window.fae_copyCode = {
    copy : 'Copier le code',
    copied : 'Copié !'
  };

  $(function() {
    var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'),
        i = 0,
        j = a.length;

    if (a[0]) {
      $('head').append('<style type="text/css">.fae_copy-code{float:right;cursor:pointer}.fae_copy-code:before{content:"\\f0ea";font-size:13px;font-family:FontAwesome;text-align:center;color:#69C;background:#FFF;border-radius:100%;display:inline-block;width:19px;height:19px;line-height:19px;margin:-1px 3px 0 3px}.codebox .fae_copy-code:hover:before{color:#EB5}.codebox .fae_copy-code.fae_copied:before{content:"\\f00c";font-weight:700;color:#8B5}</style>');

      for (; i < j; i++) {
        a[i].insertAdjacentHTML('beforeend', '<span class="fae_copy-code" title="Cliquez pour copier directement le lien">' + fae_copyCode.copy + '</span>');
      }

      new Clipboard('.fae_copy-code',{
        target : function (copy) {
          if (copy.innerHTML != fae_copyCode.copied) {
            return $(copy).closest('.codebox').find('code')[0];
          }
        }
      }).on('success', function (e) {
        var copy = e.trigger;

        if (copy.innerHTML != fae_copyCode.copied) {
          copy.innerHTML = fae_copyCode.copied;
          copy.className += ' fae_copied';

          window.setTimeout(function() {
            copy.innerHTML = fae_copyCode.copy;
            copy.className = copy.className.replace('fae_copied', '');
          }, 1000);
        }

        e.clearSelection();
      });
    }

  });
  $('.fae_copy-code').tooltipster({animation : 'fade',arrow : true,speed : 300,delay : 300, onlyOne : true,theme : 'tooltipster-default'});
});


Penses a cliquer sur le bouton




Puis le script modifié avec l'infobulle et aussi l'appel tooltip pour le bouton de copie d'image qui sera accessible qu'aux membres.

A remplacer de l'actuel:

Code:


$(function(){
  if(!_userdata["session_logged_in"])return;
if($('a.nav[href^="/f1-"],a.nav[href^="/f4-"],a.nav[href^="/f5-"],a.nav[href^="/f6-"],a.nav[href^="/f18-"]').length) {
//L IMAGE DU BOUTON
var img="https://i.servimg.com/u/f20/20/11/87/27/image10.png";
//On importe le bouton
$('.postbody').find('ul.profile-icons li:first').before('<li class="M14_copieLi"style="display:none;"><img src="'+img+'"class="M14_clickSRC"title="Copier le(s) photo(s)"/></li>');
$('.postbody').find('.content').find('img:not([longdesc])').filter(function(){
return this.width>200&&this.height>200;}).each(function(){
//on ajoute une class
$(this).addClass('M14_copie');
//on cherche le nombre
var number=$(this).length;
if(number)
{
$(this).closest('.postbody').find('li.M14_copieLi').show();
}

});

};
   
});
$(function(){
$('.M14_clickSRC').click(function(){
//on copie le ou les liens
$(this).fadeOut().closest('.postbody').find('.content').find('img.M14_copie').each(function(){
var link=$(this).attr('src');
$(this).closest('.postbody').find('.M14_reception_photos').show().append('<dl class="codebox"><dt class="M14_dt">Code:<span class="fae_copy-code"title="Cliquez pour sélectionner le lien">Copier le code</span></dt><dd><code>[img]'+link+'[/img]</code></dd></dl>');
 $('dt.M14_dt span').tooltipster({animation : 'fade',arrow : true,speed : 300,delay : 300,onlyOne : true,theme : 'tooltipster-default'});
  });});
   
});




Ah oui, gros morceau. Merci Phil.

j'essaie de suite et je reviens.

Je me sauve pour ce soir, fête oblige .
Bonne soirée et à demain matin de bonne heure (6h00/8h00 car après je serais absent).

Edit:
je viens de faire des modifications sur le positionnement des script, et je viens de me rendre compte que le script n'est plus fonctionnel.
Je vois tout cela demain matin Serge.

Tout me semble en place.

J'ai bien la main qui apparait, mais rien n'est sélectionné et copié me semble-t-il quans je clique dessus.

Oui, je comprends Phil, pas de souci à demain.
Bonne soirée et passe de bonnes fêtes.

Re Philippe,

J'ai fait des tas d'essais sur mon forum test je suis tombé par hasard sur la découverte d'un conflit.

Lorsque dans le sujet il y a un message contenant un code, le message "Copier le code" apparait et en cliquant dessus, on a bien le message "Copié" qui apparait, c'est le code anglais qui agit.
C'est le cas ici où j'ai mis un message avec un code en bas du sujet
https://photoclic.forum-pro.fr/t21458-instants_de_vie_et_rue-les-lunettes-noires#276150:

Par contre quand on n'a pas dans le sujet un message avec un code, c'est ton script qui prend la relève avec tes textes.
C'est le cas ici où il n'y a pas de message avec code:
https://photoclic.forum-pro.fr/t21461-paysages-ca-decoiffait-ce-matin#276190

PS:Le bouton pour copier le code est à droite en haut du message avec cette image:

Hello Serge,
je ne sais pas ce que tu fais lorsque tu édites tes messages ,
mais ne touches pas aux icônes de message s'il te plait.


effectivement, ça fonctionne beaucoup moins bien comme disait un grand comique malheureusement disparu....

Alors les bonnes nouvelles (enfin) .
Tout est fonctionnel sur ton fofo (les modifications ont été apporté).

Alors j'ai supprimé ce script sur ton fofo(tu peux le remettre si tu le désires)

Code:


    /* -- 12. copy code button -- */
    $.getScript('https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', function() {
      window.fae_copyCode = {
        copy : 'Copier le code',
        copied : 'Copié !'
      };

      $(function() {
        var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'),
            i = 0,
            j = a.length;

        if (a[0]) {
          $('head').append('<style type="text/css">.fae_copy-code{float:right;cursor:pointer}.fae_copy-code:before{content:"\\f0ea";font-size:13px;font-family:FontAwesome;text-align:center;color:#69C;background:#FFF;border-radius:100%;display:inline-block;width:19px;height:19px;line-height:19px;margin:-1px 3px 0 3px}.codebox .fae_copy-code:hover:before{color:#EB5}.codebox .fae_copy-code.fae_copied:before{content:"\\f00c";font-weight:700;color:#8B5}</style>');

          for (; i < j; i++) {
            a[i].insertAdjacentHTML('beforeend', '<span class="fae_copy-code" title="Cliquez pour copier directement le lien">' + fae_copyCode.copy + '</span>');
          }

          new Clipboard('.fae_copy-code',{
            target : function (copy) {
              if (copy.innerHTML != fae_copyCode.copied) {
                return $(copy).closest('.codebox').find('code')[0];
              }
            }
          }).on('success', function (e) {
            var copy = e.trigger;

            if (copy.innerHTML != fae_copyCode.copied) {
              copy.innerHTML = fae_copyCode.copied;
              copy.className += ' fae_copied';

              window.setTimeout(function() {
                copy.innerHTML = fae_copyCode.copy;
                copy.className = copy.className.replace('fae_copied', '');
              }, 1000);
            }

            e.clearSelection();
          });
        }

      });
      $('.fae_copy-code').tooltipster({animation : 'fade',arrow : true,speed : 300,delay : 300, onlyOne : true,theme : 'tooltipster-default'});
    });


Et remplacé ce script:

Code:


    $(function(){
      if(!_userdata["session_logged_in"])return;
    if($('a.nav[href^="/f1-"],a.nav[href^="/f4-"],a.nav[href^="/f5-"],a.nav[href^="/f6-"],a.nav[href^="/f18-"]').length) {
    //L IMAGE DU BOUTON
    var img="https://i.servimg.com/u/f31/19/32/37/01/index_10.png";
    //On importe le bouton
    $('.postbody').find('ul.profile-icons li:first').before('<li class="M14_copieLi"style="display:none;"><img src="'+img+'"class="M14_clickSRC"title="Copier le(s) photo(s)"/></li>');
    $('.postbody').find('.content').find('img:not([longdesc])').filter(function(){
    return this.width>200&&this.height>200;}).each(function(){
    //on ajoute une class
    $(this).addClass('M14_copie');
    //on cherche le nombre
    var number=$(this).length;
    if(number)
    {
    $(this).closest('.postbody').find('li.M14_copieLi').show();
    }

    });

    };
      
    });
    $(function(){
    $('.M14_clickSRC').click(function(){
    //on copie le ou les liens
    $(this).fadeOut().closest('.postbody').find('.content').find('img.M14_copie').each(function(){
    var link=$(this).attr('src');
    $(this).closest('.postbody').find('.M14_reception_photos').show().append('<dl class="codebox"><dt class="M14_dt">Code:<span class="fae_copy-code"title="Cliquez pour sélectionner le lien">Copier le code</span></dt><dd><code>[img]'+link+'[/img]</code></dd></dl>');
     $('dt.M14_dt span').tooltipster({animation : 'fade',arrow : true,speed : 300,delay : 300,onlyOne : true,theme : 'tooltipster-default'});
      });});
      
    });




Par celui-ci:

Code:


$(function(){
          if(!_userdata["session_logged_in"])return;
        if($('a.nav[href^="/f1-"],a.nav[href^="/f4-"],a.nav[href^="/f5-"],a.nav[href^="/f6-"],a.nav[href^="/f18-"]').length) {
        //L IMAGE DU BOUTON
        var img="https://i.servimg.com/u/f31/19/32/37/01/index_10.png";
        //On importe le bouton
        $('.postbody').find('ul.profile-icons li:first').before('<li class="M14_copieLi"style="display:none;"><img src="'+img+'"class="M14_clickSRC"title="Copier le(s) photo(s)"/></li>');
        $('.postbody').find('.content').find('img:not([longdesc])').filter(function(){
        return this.width>200&&this.height>200;}).each(function(){
        //on ajoute une class
        $(this).addClass('M14_copie');
        //on cherche le nombre
        var number=$(this).length;
        if(number)
        {
        $(this).closest('.postbody').find('li.M14_copieLi').show();
        }

        });

        };
        
        });
      
$(function(){
$('.M14_clickSRC').click(function(){
//on copie le ou les liens
$(this).fadeOut().closest('.postbody').find('.content').find('img.M14_copie').each(function(){
var link=$(this).attr('src');
$(this).closest('.postbody').find('.M14_reception_photos').show().append('<dl id="M14_code"class="codebox"><dt>Code:<span class="M14_copy-code"title="Cliquez pour sélectionner le lien">Copier le code</span></dt><dd><code><textarea class="texta">[img]'+link+'[/img]</textarea></code></dd></dl>');
   $('.M14_copy-code').tooltipster({animation : 'fade',arrow : true,speed : 300,delay : 300,onlyOne : true,theme : 'tooltipster-default'});
$('.M14_copy-code').on( 'click', function() {
var copyText =$(this).closest('dl').find('textarea');
copyText.select();
document.execCommand("copy");
$(this).replaceWith('<span class="M14_copy-code_ok"> Copié </span>');
});
});});});


Et ajouté ceci dans ta feuille de style:

Code:


.M14_copy-code_ok:after
{
content: "\f00c";
font-family: FontAwesome;
position: absolute;
margin-left:10px;
color:darkgreen;
font-size:12px;
}





L'ajout de css correspond au bouton lorsque que le membre aura cliqué sur "Copier le code"
Un texte de remplacement sera effectué ==>  "Copié".

Bonjour Philippe,

Cette fois tout est parfait l'ami, t'es génial.

Un grand merci pour tout ça.

Je te souhaite de bonnes fêtes de fin d'année pour toi et tous tes proches.

Je passe en résolu

De rien Serge, passes de très bonnes fêtes de Noël.