Rendre le système de mentions plus facile à utiliser

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

  • 0

Astuce Rendre le système de mentions plus facile à utiliser

Message par Shadow le Mar 19 Mai 2015 - 9:52

Rendre le système de mentions plus facile à utiliser

Par défaut le système de mentions (tags utilisateur) requiert que vous tapiez le nom de l'utilisateur mentionné manuellement, cela cause souvent des erreurs et vous vous retrouvez à mentionner d'autres membres. Cette astuce va vous donner différents moyens de faciliter ce système afin d'éviter ces erreurs Wink .

Informations


Les deux premiers codes Javascript doivent être modifiés suivant la version de votre forum, rien de bien grave vous devrez indiquer comme valeur de la variable version le chiffre correspondant à votre version.

0 : PHPBB2
1 : PHPBB3
2 : PUNBB
3 : INVISION

Un @ devant le nom d'utilisateur dans le profil


Cette modification ajoute un @ devant le nom de l'utilisateur dans les profils de messages. En cliquant sur celui-ci le nom de l'utilisateur sera directement ajouté dans l'éditeur.

Créez un nouveau Javascript avec les paramètres suivant :

Titre : Mentionner via le profil des messages
Placement : sur toutes les pages

Code:
/* FORUM VERSIONS
 * 0 = PHPBB2
 * 1 = PHPBB3
 * 2 = PUNBB
 * 3 = INVISION
 */
$(function() {
   var version = 0;
 
   if (/mode=reply/.test(window.location.search) && my_getcookie('fa_mention')) {
      document.post.message.value += '@"' + my_getcookie('fa_mention') + '" ';
      my_setcookie('fa_mention',''); 
   } if (!/\/t\d+/.test(window.location.pathname)) return;
 
   for (var a = $(['.name strong a', '.postprofile dt strong a', '.username a', '.postprofile dt a ~ a'][version]), b, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'); i<j; i++) {
      b = document.createElement('A');
      b.title = 'Mentionner ' + $(a[i]).text();
      b.style.marginRight = '3px';
      b.className = 'fa-mention';
      b.innerHTML = '@';
      b.href = '#';
      b.onclick = function() {
         var n = this.title.replace(/^.*?\s/,'');
    
         if ($.sceditor) t.insertText('@"' + n + '" ');
         else {
            my_setcookie('fa_mention', n);
            window.location.href = '/post?t=' + window.location.pathname.replace(/\/t(\d+)-.*/,'$1') + '&mode=reply';
         }
    
         return false;
      };
 
      a[i].parentNode.insertBefore(b, a[i]);
   }
 
   $(function(){
      if (!$.sceditor) return;
      t=$(t).sceditor('instance');
   });
});

Si vous voulez styliser cette arobase il faudra ajouter un peu de CSS. Par exemple le code suivant (PA > Affichage > Couleurs > Feuille de style) :

Code:
/* style par défaut */
a.fa-mention {
  color:#333;
}

/* style au survol */
a.fa-mention:hover {
  color:#666;
}

Bouton mentionner dans les options de message


Cette modification vous permettra d'ajouter un bouton aux options de message. Vous pourrez alors citer la personne qui à écrit le message en cliquant sur le bouton.


Créez un nouveau code Javascript avec les paramètres suivants :

Titre : Mentionner via les options de message
Placement : sur toutes les pages
Code:
/* FORUM VERSIONS
 * 0 = PHPBB2
 * 1 = PHPBB3
 * 2 = PUNBB
 * 3 = INVISION
 */
$(function() {
  var version = 0,
      image = 'http://i19.servimg.com/u/f19/18/21/60/73/mentio10.png';
 
  if (/mode=reply/.test(window.location.search) && my_getcookie('fa_mention')) {
    document.post.message.value += '@"' + my_getcookie('fa_mention') + '" ';
    my_setcookie('fa_mention',''); 
  } if (!/\/t\d+/.test(window.location.pathname)) return;
 
  for (var a = $(['.post-options', '.profile-icons', '.post-options', '.posting-icons'][version]), b, c, d = ['.name strong a', '.author a', '.username a', '.author a'][version], e, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'), l = version == 1 || version == 3; i<j; i++) {
    b = document.createElement('IMG');
    b.src = image;
    b.alt = 'Mentionner';
    b.title = 'Mentionner ' + $(a[i]).closest('.post').find(d + ':not(.fa-mention)').text();
    b.className = 'i_icon_mention';
    b.onclick = function() {
      var n = this.title.replace(/^.*?\s/,'');
     
      if ($.sceditor) t.insertText('@"' + n + '" ');
      else {
        my_setcookie('fa_mention', n);
        window.location.href = '/post?t=' + window.location.pathname.replace(/\/t(\d+)-.*/,'$1') + '&mode=reply';
      }
    };

    if (l) {
      c = document.createElement('LI');
      c.appendChild(b);
    }
   
    a[i].insertBefore(l ? c : b, a[i].firstChild);
  }
 
  $(function(){
    if (!$.sceditor) return;
    t=$(t).sceditor('instance');
  });
});

Afin de changer l'image du bouton il vous faudra changer l'adresse de la variable image au début du script.

Bouton mentionner dans l'éditeur


Cette modification vous permettra d'ajouter un bouton à l'éditeur de message. Vous pourrez alors mentionner un membre lambda ou en choisir un parmi vos amis Smile .


Créez un nouveau code javascript avec les paramètres suivants.

Titre : Bouton mentionner dans l'éditeur
placement : sur toutes les pages

Code:
$(function(){
   if (!$.sceditor || /\/privmsg/.test(window.location.pathname)) return;
   var storage = window.localStorage, s = document.createElement('SELECT'), amis;
 
   if (storage && storage.faAmis && storage.faAmisExp > +new Date - 29*59*1000 && storage.faAmisUser == _userdata.username) s.innerHTML = storage.faAmis;
   else {
      $.get('/privmsg?mode=post', function(d) {
         amis = $('select[name="userfriend"]', d)[0] || 0;
   
         if (amis) {
            amis.firstChild.innerHTML = 'Sélectionner un ami';
            s.innerHTML = amis.innerHTML;
         }
   
         if (storage) {
            storage.faAmis = amis ? amis.innerHTML : 0;
            storage.faAmisUser = _userdata.username;
            storage.faAmisExp = +new Date;
         }
      });
   }
 
 
   $.sceditor.command.set('mention', {
      dropDown : function(editor, caller, callback) {
         var a = document.createElement('DIV'), b = document.createElement('INPUT'), c = document.createElement('INPUT');
         b.type = 'button';
         b.value = 'Insert';
         b.className = 'button';
 
         c.type = 'text';
         c.id = 'fa-mention';
 
         a.innerHTML = '<div><label for="fa-mention">Pseudo de l\'utilisateur :</label></div>' + ( s.innerHTML ? '<div><label>Mentionner un ami :</label></div>' : '' ) + '<div></div>';
         a.firstChild.appendChild(c);
         a.lastChild.appendChild(b);
 
         if (s.innerHTML != 0) {
            s.value = '';
            a.getElementsByTagName('DIV')[1].appendChild(s);
            s.onchange = function() {
               c.value = s.value;
            };
         }
 
         b.onclick = function() {
            c.value && callback(c.value);
            editor.closeDropDown(true);
         };

         editor.createDropDown(caller, 'insertmention', a);
      },

      exec : function(c) { mention(c, this) },
      txtExec : function(c) { mention(c, this) },
 
      tooltip : 'Mentionner un membre'
   });
 
   toolbar = toolbar.replace(/quote,/,'mention,quote,');
 
   function mention(c, e) {
      $.sceditor.command.get('mention').dropDown(e, c, function(pseudo) {
         e.insertText('@"' + pseudo + '" ');
      });
   }
});

Ajoutez maintenant le code CSS suivant à votre feuille de style CSS (PA > Affichage > Couleurs > Feuille de style) :

Code:
/* image du bouton mentionner */
.sceditor-button-mention div { background-image:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }

/* menu déroulant du bouton mentionner */
#fa-mention {
  background:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}

Vous voilà prêt à mentionner tous vos membres et amis Mr. Green !



Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

Féminin
Messages : 23786
Inscrit(e) le : 30/03/2007

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.

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


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