Latest topics
» "Edit this page" feature
by skouliki Today at 01:36

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Tue 17 Oct 2017, 15:07

» Dark Mode + Another Question
by Ace 1 Tue 17 Oct 2017, 12:42

» [GAME] What are you thinking right now?
by Ace 1 Tue 17 Oct 2017, 08:09

» [GAME] Count to One Million!
by Ace 1 Tue 17 Oct 2017, 08:07

» [GAME] Last Letter Game
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] World Snake
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Never have I ever..
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Animal Game
by universecat Mon 16 Oct 2017, 21:43

» [GAME] Post a random picture
by SLGray Mon 16 Oct 2017, 16:28

» Hi everyone!
by skouliki Mon 16 Oct 2017, 02:01

» Hai Guys~
by skouliki Mon 16 Oct 2017, 01:59

» Add a login popup for the toolbar
by Ape Sun 15 Oct 2017, 13:51

» Mobile Usability Test
by Ange Tuteur Sat 14 Oct 2017, 11:20

» Chit Chat Thread
by Ange Tuteur Sat 14 Oct 2017, 11:20

Recent Tutorials
Who is online?
In total there are 15 users online :: 0 Registered, 0 Hidden and 15 Guests :: 2 Bots

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Nicknames for @Mentions

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 12 Aug 2016, 13:18

This is a silly little plugin that will allow your members to personalize their mention @handle with the nickname that they prefer, without having to change their username on the forum.

For example ; Mentioning @'Ange Tuteur' would display @CoffeeFiend instead, along with an optional tag that shows the member's original @handle.

Click to view demo

Notes :
- Mentioning @CoffeeFiend will not tag @'Ange Tuteur'. You must use the member's default @handle to tag them.
- This will not work in the chatbox


1. Creating the profile field


Before we install this plugin we first need to create a new profile field for our members. Go to Admin Panel > Users & Groups > Profiles and create a new profile field with the following settings.

Type : Text zone ( DO NOT PICK text field )
Name : Nickname
Description : Personalize your @handle with a unique nickname
URL icon : None
Necessarily filled ? : You choose
Display : Profile, and messages if you want nicknames shown in the post profile
Display type : Text
Who can modify the profile field value ? : Members, Moderators ( in case of questionable nicknames )
Display this field for users that are at least : You choose
Separator : Back to the line

Down below there should be additional information under text zone.

Default content :
Paste the following content as the default value for the field.
Code:
[table class="fa_nickname"][tr][td][/td][/tr][/table]

You can set the max length as you like.

When you're finished, your field should look similar to this :


If everything looks okay to you click the save button. Then edit the newly created field and click the "Replace the content" button at the very bottom to force the default value. Once you've done this you're ready to move onto the installation of the script.


2. Installing the JavaScript


So that the new profile field functions properly and our members @handles are personalized, we need to install a script. Go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : @Handle Nicknames
Placement : In all the pages
Code:
$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t883-nicknames-for-mentions#17741';

  if (!window.localStorage || !window.JSON) {
    if (window.console && console.error) {
      console.error('Your browser does not support the Storage API or JSON.');
    }
    return;
  }

  // parsing tags with nicknames
  window.faMentionNickname = {
    cache_time : 1*60*60*1000, // hh*mm*ss*ms
    show_original : true, // shows the default @handle if set to true
    original_tooltip : "{USERNAME}'s original @handle",

    tag : $('.mentiontag'),
    index : -1,
    data : localStorage.fa_mention_nicks ? JSON.parse(localStorage.fa_mention_nicks) : {},

    next : function() {
      var tag = faMentionNickname.tag[++faMentionNickname.index],
          id;

      if (tag) {
        id = tag.href.replace(/.*?\/u(\d+).*/, '$1');

        if (faMentionNickname.data[id] && faMentionNickname.data[id].expires > +new Date - faMentionNickname.cache_time) {

          if (faMentionNickname.data[id].nickname) {
            tag.innerHTML = tag.innerHTML.replace(/@.*?$/, '@' + faMentionNickname.data[id].nickname);

            if (faMentionNickname.show_original) {
              tag.insertAdjacentHTML('afterend', '<span class="mentiontag-original" title="' + faMentionNickname.original_tooltip.replace('{USERNAME}', faMentionNickname.data[id].original) + '">(@' + faMentionNickname.data[id].original + ')</span>');
            }

          }

          faMentionNickname.next();

        } else {
          $.get(tag.href, function(d) {
            var nickname = $('.fa_nickname', d).text(),
                original = tag.innerHTML.replace(/.*?@(.*)/, '$1').toLowerCase();

            if (nickname) {
              tag.innerHTML = tag.innerHTML.replace(/@.*?$/, '@' + nickname);

              if (faMentionNickname.show_original) {
                tag.insertAdjacentHTML('afterend', '<span class="mentiontag-original" title="' + faMentionNickname.original_tooltip.replace('{USERNAME}', original) + '">(@' + original + ')</span>');
              }

            } else {
              nickname = null;
            }

            faMentionNickname.data[id] = {
              nickname : nickname,
              original : original,
              expires : +new Date
            };

            localStorage.fa_mention_nicks = JSON.stringify(faMentionNickname.data);
            faMentionNickname.next();
          });
        }

      }

    }
  };

  faMentionNickname.next();

  // editing of profile field
  if (/\/profile|\/u\d+/.test(window.location.href)) {
    for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
      if (/class="fa_nickname"/.test(a[i].value) && /profile_field/.test(a[i].id)) {
        a[i].onfocus = function() {
          this.value = this.value.replace(/\n|\r/g, '').replace(/\[table class="fa_nickname"\]\[tr\]\[td\](.*?)\[\/td\]\[\/tr\]\[\/table\]/, '$1');
        };

        a[i].onblur = function() {
          this.value = '[table class="fa_nickname"][tr][td]' + this.value + '[/td][/tr][/table]';
        };
      }
    }
  }
});

document.write('<style type="text/css">.mentiontag-original { color:rgba(0, 0, 0, 0.5); font-size:9px; font-style:italic; font-family:Arial, sans-serif; vertical-align:super; margin-left:3px; cursor:help; }.mentiontag-original:hover { color:rgba(0, 0, 0, 1); }</style>');

Modifications
Before you save the script, here are some modifications that you may make :

1. cache_time
By default, nicknames are stored for 1 hour to speed up the script and prevent multiple requests to the server. This time can be changed by modifying this line :
Code:
cache_time : 1*60*60*1000, // hh*mm*ss*ms
Each set of digits represents an hour, minute, second, etc.. Use the comment as a guide, and modify the caching time as you like. Smile


2. show_original
By default, the original @handle is shown after mentions that are disguised with a nickname. This is to help prevent confusion and show who's who. However, if you don't like this feature, you can disable it by finding this line of code :
Code:
show_original : true, // shows the default @handle if set to true
and changing "true" to "false".


3. original_tooltip
This variable determines the texts shown when you hover over a member's original @handle. If you want to translate or change these texts, find this line of code :
Code:
original_tooltip : "{USERNAME}'s original @handle",


Once you're finished making modifications, save the script and the plugin will be installed ! High Five

See the final section for information on how it works ! study


3. Notes


Inputting your nickname
To input your own nickname for your @handles go to the edit profile page which should be accessible from the navbar. Find the field and insert your nickname.
If JavaScript is enabled, your nickname will automatically be wrapped with the necessary tags. Otherwise, you should type your nickname between the table tags manually.


Why should my nickname be between table tags ?
It's necessary for your nickname to be between table tags so that the script can quickly identify your nickname and place it in your @handle. Removing the table tags will prevent your nickname from being displayed in your @handle.


I changed my nickname, but it's still the same !!
Don't worry, nicknames are cached for *1 hour to prevent repeated requests to the server. You can force your new nickname on your end by clearing your cache.
*This time can be changed by an administrator.


If you have any questions or comments feel free to leave a reply below. Go make some silly @handles ! Razz


Notice
Tutorial written by Ange Tuteur.
Special thanks to @Samantha for the idea and to the Beta Testers for testing this plugin.
Reproduction not permitted without consent from the author.
avatar
Wilson

Title : Did I mentioned I like banana? Gender : Unspecified
Age : 31
Posts : 868
Points : 2230
Reputation : 124
Language : Filipino and Engrish
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://generalaxis.forums.com.bz/

PostWilson on Fri 12 Aug 2016, 18:34

I love how you bold that part I missed before

--------

A banana a banana does not banana doctor banana. -Poetic
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1712
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Sat 13 Aug 2016, 01:32

lol that is not sily
its nice Script Very Happy
when im home ill test it and make translation to my language
avatar
Paradiseng

Title :
Gender : Male
Posts : 98
Points : 1491
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.nigerianpalace.com

PostParadiseng on Sat 13 Aug 2016, 18:26

lovely
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9536
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 15 Aug 2016, 17:25

Wilson wrote:I love how you bold that part I missed before
LOL yeah, I decided to do that because a few other people missed it as well. Razz

Michael_vx wrote:lol that is not sily
its nice Script Very Happy
when im home ill test it and make translation to my language
Thanks, I think it's silly because you can use it to play tricks, but it does have its uses. ^^

Paradiseng wrote:lovely
Thank you loove
avatar
SSYT
Member
Title :
SSYT Codes
Gender : Male
Age : 23
Posts : 19
Points : 1500
Reputation : 13
Language : Romanian, English
Browser : Browser : Opera Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://www.forumcodes.com

PostSSYT on Thu 18 Aug 2016, 14:18

Wow, very nice and usefull code Ange, thanks for sharing Smile
avatar
Jazeon

Title :
ポジティブな精神的態度
Gender : Unspecified
Posts : 116
Points : 797
Reputation : 29
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://foruminion.forumotion.com/

PostJazeon on Sun 21 Aug 2016, 13:26

This is new stuff, thanks for sharing!
avatar
red
Member
Title :
Im Afraid To Be Alone
Gender : Unspecified
Age : 22
Posts : 16
Points : 236
Reputation : 3
Location : india
Language : english
Browser : Browser : Opera Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://nimbuzzmasters.forumotions.in/

Postred on Mon 15 May 2017, 11:37


--------

REAL LOVER HERE
avatar
jucarese
New Member
Title :
Gender : Male
Posts : 7
Points : 112
Reputation : 0
Location : foroactivo.com
Language : spanish
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

Postjucarese on Fri 18 Aug 2017, 08:24

thanks @Ange Tuteur, A funny cunning though it can be chaotic lol

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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