Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Più opzioni per i tuoi #hashtag


Tutorial Più opzioni per i tuoi #hashtag

Messaggio Da Niko il Ven 01 Mag 2015, 12:26

Più opzioni per i tuoi #hashtag


Questo tutorial vi permetterà di scoprire due modi per migliorare l'utilizzo del sistema di #hashtag presente sul tuo forum Forumattivo. Entrambe le funzioni utilizzano il codice #javascript quindi assicurati di averlo attivato Wink

Pannello di amministrazione ► Moduli ► Gestione del codice javascript

Se sei nuovo su Forumattivo, assicurati che sia attivata la gestione del codice javascript (in questa stessa pagina appena aperta). Ora scegli quale o quali opzion installare Wink

  • Hashtag popup options
  • SCEditor hashtag button




Popup per gli Hashtag

Questa modifica fornisce un'opzione avanzata per una migliore interazione con gli hashtag, permettendoti di seguire velocemente nuoti #hashtag, visualizzare i soggetti taggati e gestire i tuoi tag


Crea un nuovo codice javascript con queste impostazioni :new:

  • Titolo: Popup hashtag
  • Dove: In tutte le pagine
  • Codice:
    Codice:
    $(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">Opzioni per <span class="fa-hashtag-tag">' + t + '</span></div><b>• </b><a href="' + this.href + '">Visualizza topic taggati</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;">Segui <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">Gestisci Hashtag</a>' : '');
             
              /none/.test(b.style.display) && (b.style.display = 'block');
            } else {
              actif = null;
              b.style.display = 'none';
            }
           
            return false;
          };
        }
      }
    });


Adesso abbiamo solo bisogno di aggiungere un po' di #css in modo che il popup venga visualizzato correttamente. Andate quindi verso Pannello di amministrazione ► Visualizzazione ► Colori ► Foglio di stile CSS e incollate questo codice di stile
Codice:
/* options drop down */
.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 title */
.fa-hashtag-title {
  font-size:12px;
  border-bottom:1px solid #CCC;
  padding-bottom:3px;
  margin-bottom:3px;
}

/* option links */
.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;
}

/* option bullets */
.fa-hashtag-options b {
  color:#333;
  padding-left:6px;
}

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

Il codice script aggiunge una classname a tutti gli hashtag nei post, in questo modo potrai aggiungere uno stile unico ai tuoi hashtag, utilizzando questi codici di base:
Codice:
/* hashtag styles */
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;
}

Questo è l'effetto di default, ma potete personalizzarlo in tutti i modi che preferite! Di festa




ScEditor: bottone per gli hashtag

Questa modifica aggiungerà un bottone extra al vostro editor. Con questo bottone potrete inserire il nome di un hashtag, o sceglierlo da una lista di tag predefiniti che stai seguendo


Andate per creare un nuovo codice javascript :new:

  • Titolo: Bottone sceditor hashtag
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(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="">Seleziona 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 seguiti :</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 : 'Aggiungi un 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 Attenzione: i caratteri no validi saranno sostituiti da un _

Quindi il bottone ha una sua icona e anche il menu a comparsa, è quindi necessario aggiungere del css al vostro foglio di stile. Andate quindi verso Pannello di amministrazione ► Visualizzazione ► Colori ► Foglio di stile CSS e incollate questo codice di stile
Codice:
/* button image */
.sceditor-button-hashtag div { background-image:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) !important }

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

Cliccate Conferma e sarete pronti per taggare i vostri topic :W:


Niko
+ Iperattivo +


Sesso : Maschile
Età : 20
Messaggi : 7668
Località : Provincia di Varese


Vedere il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto


 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum