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

Migliorare il sistema di @tag utente


Tutorial Migliorare il sistema di @tag utente

Messaggio Da Niko il Gio 21 Mag 2015, 18:25

Migliorare il sistema di @tag utente


Di default, il sistema per taggare i membri consiste nell'inserire il nickname di un utente, preceduto da un @ a spesso ci sono errori e tag sbagliati verso altri membri. Questo tutorial vi fornirà tre diversi modi per rendere questo sistema #user-friendly ! Wink


Informazioni

Il metodo di installazione è con i codici #javascript quindi assicuratevi che sia attivato e andate verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice javascript-

I primi due codici script sono ottimizzati per tutte le versioni (se non avete modificato in modo troppo pesante i templates). Vedrete all'inziio dei codici una variabile a seconda della vostra versione: assicuratevi di cambiare il valore secondo la versione del vostro forum :bene:

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

Ora... si comincia! :W:

  • @ prima dell'username nel profilo
  • Bottone per taggare i membri
  • Bottone SCEditor per taggare i membri


@ prima dell'username nel profilo

Questa modifica ti permetterà di aggiungere il simbolo @ prima del nickname nel profilo all'interno dei messaggi. Cliccando il segno @ verrà automaticamente inserito il nickname taggato nell'editor !


Crea un nuovo codice javascript :new:

  • Titolo: a tua scelta
  • Dove: In tutte le pagine
  • Codice:
    Codice:
    /* VERSIONI DEI FORUM
     * 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 = 'Tagga ' + $(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');
      });
    });


Modifiche : All'inizio del codice troverete delle variabili. Assicuratevi che nel codice sia assegnata la versione del vostro forum Wink

Se volete migliorare lo stile del simbolo @ potete farlo con i codici CSS! (Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS)
Codice:
/* default styles */
a.fa-mention {
  color:#333;
}

/* hover styles */
a.fa-mention:hover {
  color:#666;
}

Se volete cambiare il simbolo @ con un qualunque altro simbolo, cercate b.innerHTML = '@'; e cambiate il simbolo @

quando avrai finito, salva le modifiche Very Happy

Bottone per taggare i membri

Queste modifiche ti permetteranno di aggiungere un bottone! Cliccando il bottone il nome verrà aggiunto nell'editor


Crea un nuovo codice javascript :new:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    /* 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 = 'Mention';
        b.title = 'Tagga ' + $(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');
      });
    });


Modifica : come per il codice precedente, all'inizio del codice è necessario modificare la versione del proprio forum assegnando il numero corretto

In aggiunta potrete anche cambiare l'immagine che verrà visualizzata nel bottone, cambiandolo a vostra scelta Wink

quando avete fatto le modifiche desiderate, salvate :ne:

Bottone SCEditor per taggare membri

Questa modifica ti permetterà di aggiungere un bottone BBcode nell'editor per menzionare membri e amici Wink
Potrai inserire il nome dell'utente o, se hai aggiunto degli amici, scegliergli da una lista predefinita. Una volta finito, clicca per aggiungere il membro nel tag Wink


Crea un nuovo codice javascript :new:

  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(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 = 'Select a friend';
            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 = 'Inserisci';
          b.className = 'button';
     
          c.type = 'text';
          c.id = 'fa-mention';
     
          a.innerHTML = '<div><label for="fa-mention">Username :</label></div>' + ( s.innerHTML ? '<div><label>Tagga un amico :</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 : 'Tagga un membro'
      });
     
      toolbar = toolbar.replace(/quote,/,'mention,quote,');
     
      function mention(c, e) {
        $.sceditor.command.get('mention').dropDown(e, c, function(pseudo) {
          e.insertText('@"' + pseudo + '" ');
        });
      }
    });


Ora aggiungiamo un po' di stile nel nostro foglio di stile CSS e salviamo le modifiche :new:
Codice:
/* button image */
.sceditor-button-mention div { background-image:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }

/* drop down input */
#fa-mention {
  background:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}

Ora... cosa aspettate? Taggate i vostri membri e amici ! Di festa :W:


Niko
Veterano dello staff


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

- Argomenti simili

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