Cum să faceți sistemul de mențiuni mai ușor de utilizat

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Cum să faceți sistemul de mențiuni mai ușor de utilizat

Mesaj Scris de Kames la data de 16.12.18 20:43

Cum să faceți sistemul de mențiuni mai ușor de utilizat

Introducere

Acest tutorial vă va ajuta să personalizați și să faceți sistemul de mențiuni mai ușor de utilizat. În mod implicit, sistemul de mențiuni (etichete de utilizator) impune introducerea manuală a numelui utilizatorului, ceea ce cauzează adesea erori și puteți menționa alt utilizator. Acest tutorial vă va oferi modalități diferite de a menționa un utiliator și de a evita eventualele greșeli. Acest tutorial funcționează doar pentru versiunile phpBB2, phpBB3, punBB și Invision. Codurile nu sunt compatibile și cu versiunile noi.

Instalare

Înainte de a instala codurile, trebuie să aflați ce versiune de forum folosiți. Pentru a face asta navigați în Panoul de administrare » Afișare » Teme » Alegere temă » Versiune, exact ca în imaginea de mai jos:
Trebuie să modificați codurile în felul următor:
0 pentru phpBB2,
1 pentru phpBB3,
2 pentru punBB,
și 3 pentru Invision.

Adăugare @ în fața numelui de utilizator

Această modificare adaugă un @ în fața numelui utilizatorului în profilurile mesajelor. Dacă veți apăsa pe @, numele de utilizator va fi adăugat direct în editorul de mesaje. Pentru a beneficia de această modificare trebuie să instalați un cod JavaScript. Pentru a-l instala, mergeți în Panoul de administrare » Diverse » HTML & JAVASCRIPT » Gestiunea codurilor JavaScript, urmând să apăsați pe . Totodată, verificați dacă codurile JavaScript sunt activate.
  • Titlu: Adăugare @ în fața numelui de utilizator
  • Amplasare: Toate paginile
  • Cod JavaScript: Copiați și introduceți codul de mai jos
Cod:
/* VERSIUNI FORUM - NU UITA SA MODIFICI!
 * 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 = 'Mentioneaza pe ' + $(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');
  });
});
Nu uitați să modificați var version = 0, cu versiunea dvs. de forum.

De asemenea, puteți personaliza acest mod de menționare cu un cod CSS:
Cod:
   
        a.fa-mention {
          color:#333;
        }
       
     
        a.fa-mention:hover {
          color:#666;
        }
Rezultat:

Adăugarea unui buton de menționare

Acest cod vă va permite să adăugați un buton la opțiunile mesajului. Puteți menționa persoana care a scris mesajul apăsând pe buton. Pentru a beneficia de această modificare trebuie să instalați un cod JavaScript. Pentru a-l instala, mergeți în Panoul de administrare » Diverse » HTML & JAVASCRIPT » Gestiunea codurilor JavaScript, urmând să apăsați pe . Totodată, verificați dacă codurile JavaScript sunt activate.
  • Titlu: Adăugarea unui buton de menționare
  • Amplasare: Toate paginile
  • Cod JavaScript: Copiați și introduceți codul de mai jos
Cod:
/* VERSIUNI DE FORUM - NU UITA SA MODIFICI!
        * 0 = PHPBB2
        * 1 = PHPBB3
        * 2 = PUNBB
        * 3 = INVISION
        */
        $(function() {
          var version = 0,
              image = 'https://i.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 = 'Mentioneaza';
            b.title = 'Mentioneaza ' + $(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');
          });
        });
Nu uitați să modificați var version = 0, cu versiunea dvs. de forum.
Rezultat:

Adăugarea unui buton de menționare în editorul de mesaje

Acest cod vă va permite să adăugați un buton de menționare în editorul de mesaje. Puteți menționa persoana dorită folosind acest buton. Pentru a beneficia de această modificare trebuie să instalați un cod JavaScript. Pentru a-l instala, mergeți în Panoul de administrare » Diverse » HTML & JAVASCRIPT » Gestiunea codurilor JavaScript, urmând să apăsați pe . Totodată, verificați dacă codurile JavaScript sunt activate.
  • Titlu: Adăugarea unui buton de menționare în editorul de mesaje
  • Amplasare: Toate paginile
  • Cod JavaScript: Copiați și introduceți codul de mai jos
Cod:
$(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 = 'Selecteaza un prieten';
                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 = 'Mentioneaza';
              b.className = 'button';
         
              c.type = 'text';
              c.id = 'fa-mention';
         
              a.innerHTML = '<div><label for="fa-mention">Nume utilizator:</label></div>' + ( s.innerHTML ? '<div><label>Mentioneaza un prieten:</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 : 'Mentioneaza un membru'
          });
       
          toolbar = toolbar.replace(/quote,/,'mention,quote,');
       
          function mention(c, e) {
            $.sceditor.command.get('mention').dropDown(e, c, function(pseudo) {
              e.insertText('@"' + pseudo + '" ');
            });
          }
        });
Totodată, instalați acest cod CSS:
Cod:
        /* Imaginea butonului */
        .sceditor-button-mention div { background-image:url(https://i.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }
       
        /* Aspect meniu drop-down */
        #fa-mention {
          background:url(https://i.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
          padding-left:22px;
        }
Puteți modifica codul după bunul plac.
Rezultat:

Asta a fost tot, felicitări! Da


avatar

Kames
Asistent
Asistent

Mesaje : 58
Varsta : 19
Data înscrierii : 11/02/2017
Multumiri : 11
Niciun avertisment

Vezi profilul utilizatorului https://www.wikifg.net
Kames a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum