Options supplémentaires pour les hashtags

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

  • 0

Astuce Options supplémentaires pour les hashtags

Message par Shadow le Ven 15 Mai 2015 - 14:39

Options supplémentaires pour les hashtags

Cette astuce vous permettra d'améliorer l'utilisation des hashtags (tags des mots-clés) sur votre forum.
Nous vous proposons pour cela deux codes Javascript, assurez-vous donc avant de commencer que la gestion des codes Javascript soit bien activée.

Options des hashtags


Cette modification vous apportera un panel d'options pour vos hashtags, vous pourrez rapidement suivre le hashtag, voir les sujets tagués avec celui-ci et gérer vos tags.

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

Titre : Hashtag popup
Placement : sur toutes les pages

Code:
$(function() {
   var a = document.getElementsByTagName('A'), b = document.createElement('DIV'), i = 0, j = a.length, actif, t;
   b.className = 'fa-hashtag-options';
   b.style.display = 'none';
   document.body.appendChild(b);
 
   for (; i<j; i++) {
      if (a[i].title && /\/tags\//.test(a[i].href) && /^#/.test(a[i].innerHTML)) {
         a[i].className += ' fa-hashtag';
   
         a[i].onclick = function() {
    
            if (actif != this) {
               actif = this, t = this.innerHTML;
               t.length > 24 && (t = t.slice(0, 25).replace(/^\s+|\s+$/g, '') + '...');
      
               b.style.left = $(this).offset().left + 'px';
               b.style.top = $(this).offset().top + 'px';
               b.innerHTML = '<div class="fa-hashtag-title">Options pour <span class="fa-hashtag-tag">' + t + '</span></div><b>• </b><a href="' + this.href + '">Voir les sujets tagués</a>' + (_userdata.session_logged_in ? '<form method="post" name="addtag_form" action="/profile?mode=editprofile&page_profil=tags&start&submit=1"><b>• </b><a href="#" onclick="this.parentNode.submit();return false;">Suivre <span class="fa-hashtag-tag">' + t + '</span></a><input name="addtag" type="hidden" value="' + this.innerHTML.slice(1) + '"></form><b>• </b><a href="/profile?mode=editprofile&page_profil=tags">Gérer mes tags</a>' : '');
      
               /none/.test(b.style.display) && (b.style.display = 'block');
            } else {
               actif = null;
               b.style.display = 'none';
            }
    
            return false;
           };
      }
   }
});

Maintenant afin que la popup s'affiche correctement nous avons besoin d'ajouter un peu de CSS. Collez le code suivant dans votre feuille de style CSS (PA > Affichage > Couleurs > Feuille de style) :

Code:
/* options du menu des hashtags */
.fa-hashtag-options {
  color:#666;
  font-size:11px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  line-height:14px;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:0 3px 6px rgba(0, 0, 0, 0.175);
  margin-top:20px;
  padding:3px;
  position:absolute;
  z-index:100;
}

/* options du titre */
.fa-hashtag-title {
  font-size:12px;
  border-bottom:1px solid #CCC;
  padding-bottom:3px;
  margin-bottom:3px;
}

/* options des liens */
.fa-hashtag-options a {
  color:#333;
  text-decoration:none;
  display:inline-block;
  padding:2px 6px 2px 0;
}

.fa-hashtag-options a:hover {
  color:#666;
  text-decoration:underline;
}

/* options des mots gras */
.fa-hashtag-options b {
  color:#333;
  padding-left:6px;
}

/* options des tags */
.fa-hashtag-tag {
  color:#000;
  font-weight:bold;
}

Le script ajoute une classe à tous les hashtags dans les messages, donc si vous désirez ajouter un style unique aux hashtags, vous pouvez avec ce code :

Code:
/* hashtag style */
a.fa-hashtag {
  color:#666;
  text-decoration:none;
  background-color:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  display:inline-block;
  padding:3px;
}

a.fa-hashtag:hover {
  color:#333;
  background-color:#DDD;
  border-color:#999;
}

Le résultat par défaut est celui-ci, mais vous pouvez le changer à votre convenance Smile .



Bouton hashtag dans l'éditeur de message


Cette modification vous permettra d'ajouter un bouton à l'éditeur de message. Vous pourrez alors insérer un hashtag ou en choisir un dans une liste prédéfinie de tags que vous suivez.


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

Titre : Bouton hashtag 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'), tags = '';
 
   if (storage && storage.faTags && storage.faTagsExp > +new Date - 29*59*1000 && storage.faTagsUser == _userdata.username) s.innerHTML = storage.faTags;
   else {
      $.get('/profile?mode=editprofile&page_profil=tags', function(d) {
         var h = $('form[name="tag_list"] a', d);
 
         if (h.length) {
            for (var i = 0, j = h.length, txt; i<j; i++) {
                 txt = h[i].innerHTML.replace(/^\s+|\s+$/g,'');
                 if (/^#/.test(txt)) {
                  !tags && (tags += '<option value="">Sélectionner un tag</option>');
                  tags += '<option value="'+ txt.slice(1) +'">' + (txt.length > 24 ? txt.slice(0, 25) + '...' : txt) + '</option>';
                 }
            }
            s.innerHTML = tags;
         }
 
         if (storage) {
            storage.faTags = tags ? tags : 0;
            storage.faTagsUser = _userdata.username;
            storage.faTagsExp = +new Date;
         }
      });
   }
 
 
   $.sceditor.command.set('hashtag', {
      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-hashtag';
   
         a.innerHTML = '<div><label for="fa-hashtag">Hashtag :</label></div>' + ( s.innerHTML ? '<div><label>Tags suivis :</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, 'inserthashtag', a);
      },

      exec : function(c) { tag(c, this) },
      txtExec : function(c) { tag(c, this) },
 
      tooltip : 'Insert a hashtag'
   });
 
   toolbar = toolbar.replace(/quote,/,'hashtag,quote,');
 
   function tag(c, e) {
      $.sceditor.command.get('hashtag').dropDown(e, c, function(tag) {
         e.insertText('#' + tag.replace(/^#/,'').replace(/[\xD7\xF7\x00-\x2F\x3A-\x40\x5B-\x60\x7B-\xBF]/g, '_') + ' ');
      });
   }
});

Exclamation Attention : les caractères invalides seront remplacés par un _ à l'insertion.

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

Code:
/* image du bouton hashtag */
.sceditor-button-hashtag div { background-image:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) !important }

/* menu déroulant des hashtags */
#fa-hashtag {
  background:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}

Validez et vous voilà prêt à taguer 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 : 23753
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