The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Make the mentioning system easier to use

3 posters

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

Go down

Tutorial Make the mentioning system easier to use

Post by Ange Tuteur April 24th 2015, 7:48 am

Make the mentioning system easier to use



By default, the mentioning system relies on the user to type out the name of the person you want to mention, sometimes causing errors and mistakenly tagging other members. This tutorial will provide you with three different ways to make mentioning your members more user friendly ! Smile

Make the mentioning system easier to use Captur29


Make the mentioning system easier to use 09615110 Information



The method of installation will be via JavaScript, so make sure to navigate to JavaScript codes management in your Administration Panel. Wink
( Administration Panel > Modules > JavaScript codes management )

If you've recently created a forum, be sure that you enabled JS codes management by choosing Yes.


The first two scripts provided are optimized for all forum versions, provided you have not heavily modified your templates. You will see a variable at the top of these scripts titled version. Be sure to change the number to the one that corresponds to your forum version. The options are :

0 : PHPBB2
1 : PHPBB3
2 : PUNBB
3 : INVISION
4 : MODERNBB
5 : AWESOMEBB

( See this topic to find out your version )

Now, feel free to choose the features you want to install. Smile

  1. @ before the username in the profile
  2. Button for mentioning members
  3. SCEditor button for mentioning members



Make the mentioning system easier to use 09615110 @ before the username in the profile



This modification will allow you to add the @ sign before the usernames in the posting profile. Clicking the @ sign will instantly insert that member's name into the editor !

Make the mentioning system easier to use Taggeg10


Create a new script with the following settings. Add

Title : Postprofile Mention
Placement : In all the pages
Code:
        /* FORUM VERSIONS
         * 0 = PHPBB2
         * 1 = PHPBB3
         * 2 = PUNBB
         * 3 = INVISION
         * 4 = MODERNBB
         * 5 = AWESOMEBB
         */
        $(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', '.postprofile-name a', '.post-author-name a'][version]), b, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'); i<j; i++) {
            b = document.createElement('A');
            b.title = 'Mention ' + $(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 (version == 5) {
                var area = document.getElementById('quick-reply-textarea');
              
                if (area) {
                  area.value += '@"' + n + '" ';
                  area.focus();
                }
              
                return false;
              
              } {
                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');
          });
        });

Modifications : At the top of the script you will see a version variable. Make sure that the number corresponds to your forum version. Wink

If you want to style the @ sign, you can use the following CSS style rules.
( Display > Colors > CSS stylesheet )
Code:
/* default styles */
a.fa-mention {
  color:#333;
}

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


If you want to change the @ to something else, then find b.innerHTML = '@'; and change the @ sign to whatever you want ! Smile

When you're finished, go ahead and save the script.


Make the mentioning system easier to use 09615110 Button for mentioning members



This modification will allow you to add a button to the existing post options for mentioning members. Clicking the button will add the username of that member to the editor.

Make the mentioning system easier to use Imgmen10

Create a new script with the following settings. Add

Title : Mention button
Placement : In all the pages
Code:
        /* FORUM VERSIONS
         * 0 = PHPBB2
         * 1 = PHPBB3
         * 2 = PUNBB
         * 3 = INVISION
         * 4 = MODERNBB
         * 5 = AWESOMEBB
         */
        $(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', '.profile-icons', '.post-buttons ul'][version]), b, c, d = ['.name strong a', '.author a', '.username a', '.author a', '.postprofile-name a', '.post-author-name a'][version], e, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'), l = version == 1 || version == 3 || version == 4 || version == 5; i<j; i++) {
            b = document.createElement('IMG');
            b.src = image;
            b.alt = 'Mention';
            b.title = 'Mention ' + $(a[i]).closest(version == 5 ? '.post-wrap' : '.post').find(d + ':not(.fa-mention)').text();
            b.className = 'i_icon_mention';
            b.onclick = function() {
              var n = this.title.replace(/^.*?\s/,'');
            
              if (version == 5) {
                var area = document.getElementById('quick-reply-textarea');
              
                if (area) {
                  area.value += '@"' + n + '" ';
                  area.focus();
                }
              
                return false;
              
              } else {
                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');
          });
        });

Modifications : At the top of the script you will see a version variable. Make sure that the number corresponds to your forum version. Wink

Additionally you will also see an image variable. This is the image for the button, you can changes this with the URL of your own button if you like. Smile

When you're finished, go ahead and save the script.


Make the mentioning system easier to use 09615110 SCEditor button for mentioning members



This modification will allow you to add a new button to your editor for mentioning members and friends. You can either type the name of the user, or if you have friends, select them from a predefined list. Once you're finish, you can click insert to add the mention into the editor.

Make the mentioning system easier to use Scemen11

Go to JavaScript codes management, and create a new script with the following settings. Add

Title : SCEditor Mention Button
Placement : In all the 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 = '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 = 'Insert';
      b.className = 'button';
  
      c.type = 'text';
      c.id = 'fa-mention';
  
      a.innerHTML = '<div><label for="fa-mention">Username :</label></div>' + ( s.innerHTML ? '<div><label>Mention a friend :</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 : 'Mention a member'
  });
 
  toolbar = toolbar.replace(/quote,/,'mention,quote,');
 
  function mention(c, e) {
    $.sceditor.command.get('mention').dropDown(e, c, function(pseudo) {
      e.insertText('@"' + pseudo + '" ');
    });
  }
});


Now, let's add some styles to the stylesheet so our button has the correct image. Go to Administration Panel > Display > Colors > CSS stylesheet paste the following rules and submit.
Code:
/* button image */
.sceditor-button-mention div { background-image:url(https://i.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }

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


Click submit and you're ready to mention your members and friends !  Mr. Green




This tutorial was written by Ange Tuteur.
Updated: 04.09.2020 to add version : MODERNBB and AWESOMEBB By @APE Coded by @Ange Tuteur
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

SarkZKalie, TonnyKamper and AngelM like this post

Back to top Go down

Tutorial Re: Make the mentioning system easier to use

Post by Ape April 9th 2020, 7:07 pm

This Tutorial was updated to add the following 2 Forum version : MODERNBB and AWESOMEBB

With thanks to our great Friend @Ange Tuteur salut


Make the mentioning system easier to use Left1212Make the mentioning system easier to use Center11Make the mentioning system easier to use Right112
Make the mentioning system easier to use Ape_b110
Make the mentioning system easier to use Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19160
Reputation : 1995
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

TonnyKamper and trajce like this post

Back to top Go down

Tutorial Re: Make the mentioning system easier to use

Post by skouliki March 13th 2022, 1:41 pm

This code was updated to fit in with the new HTTPS address

updated 13.03.2022 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 15180
Reputation : 1696
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

 
Permissions in this forum:
You cannot reply to topics in this forum