EmotiUser - Become your own personal emoticon !

With this plugin you can become your very own emoticon by using your avatar ! Not only that, you can choose from dozens of EmotiUser's by changing the id to that of the desired user.

Click to view demo

Since I'm "u1" it'll parse the text as my beautiful avatar. You can also change the id to use other member's avatars as emoticons !

Note : Avatars are dynamically retrieved, so if the user changes their avatar it'll also change in older posts.

Installation

To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : EmotiUser
Placement : In all the pages
Paste the following script and submit :

Code:

(function() {
  window.EmotiUser = {
    default_icon : 'http://2img.net/i/fa/invision/pp-blank-thumb-38px.png', // default avatar
    cacheTime : 1*60*60*1000, // amount of time the avatar is cached ( 1 hour )
   
    // tagType influences the type of tags used
    // 0 = BBCode
    // 1 = HTML
    tagType : 0,
   
    // markup format
    tag : [
      '[table class="emotiuser"][tr][td]:u{UID}:[/td][/tr][/table]',
      '<span class="emotiuser">:u{UID}:</span>'
    ],

    parse : function() {
      if (!EmotiUser.tags) {
        EmotiUser.tags = $('.emotiuser');
        EmotiUser.index = -1;
      }

      var tag = EmotiUser.tags[++EmotiUser.index];
      if (tag) {
        var txt = $(tag).text(),
            tag_id = txt.replace(/:u(\d+):/, '$1'),
            storage = window.localStorage;
           
        if (storage && storage['emotiuser_' + tag_id] && storage['emotiuser_' + tag_id + '_exp'] > +new Date - EmotiUser.cacheTime) {
          var icon = document.createElement('IMG'),
              data = JSON.parse(storage['emotiuser_' + tag_id]);
             
          icon.className = 'emotiuser_icon';
          icon.src = data.src;
          icon.alt = data.alt;
          icon.title = data.title;
         
          tag.parentNode.insertBefore(icon, tag);
          tag.parentNode.removeChild(tag);
          EmotiUser.parse();
        } else {
          $.get('/ajax/index.php?f=m&user_id=' + tag_id, function(d) {
            var icon = $('.tooltip-content > img', d)[0],
                name = $('.tooltip-title', d).text() || d;
         
            if (!icon) {
              icon = document.createElement('IMG');
              icon.src = EmotiUser.default_icon;
            }
           
            icon.className = 'emotiuser_icon';
            icon.title = name;
            icon.alt = txt;
         
            if (storage && window.JSON) {
              storage['emotiuser_' + tag_id] = JSON.stringify({
                src : icon.src,
                alt : icon.alt,
                title : icon.title
              });
              storage['emotiuser_' + tag_id + '_exp'] = +new Date;
            }
           
            tag.parentNode.insertBefore(icon, tag);
            tag.parentNode.removeChild(tag);
            EmotiUser.parse();
          });
        }
      } else {
        delete EmotiUser.tags;
        delete EmotiUser.index;
      }
    }
  };

  document.write('<style type="text/css">.emotiuser, .emotiuser * { display:inline-block; } .emotiuser_icon { height:30px; vertical-align:middle; margin:3px; } .sceditor-button-emotiuser div { background:none !important; }</style>');

  $(function(){
    EmotiUser.parse();
   
    if ($.sceditor && toolbar) {
      $.sceditor.command.set('emotiuser', {
        dropDown : function(editor, caller, callback) {
          var content = document.createElement('DIV'),
              input = document.createElement('INPUT'),
              submit = document.createElement('INPUT');

          input.type = 'text';
          input.value = _userdata.user_id;
          input.id = 'emotiuser_number';

          submit.type = 'button';
          submit.className = 'button';
          submit.value = 'Insert';
          submit.onclick = function() {
            var id = +$('#emotiuser_number', this.parentNode)[0].value;
            if (typeof id === 'number' && id > 0) {
              callback(id);
              editor.closeDropDown(true);
            } else {
              alert('Please insert a valid user id');
            }
          };

          content.innerHTML = '<div><label for="emotiuser_number">User Id</label></div>';
          content.firstChild.appendChild(input);
          content.appendChild(submit);

          editor.createDropDown(caller, 'emotiuser', content);
        },

        exec : function(c) {
          var e = this;
          $.sceditor.command.get('emotiuser').dropDown(e, c, function(content) {
            e.insertText(EmotiUser.tag[EmotiUser.tagType].replace(/\{UID\}/, content));
          });
        },

        txtExec : function(c) {
          var e = this;
          $.sceditor.command.get('emotiuser').dropDown(e, c, function(content) {
            e.insertText(EmotiUser.tag[EmotiUser.tagType].replace(/\{UID\}/, content));
          });
        },
       
        tooltip : 'EmotiUser'
      });
     
      toolbar = toolbar.replace(/date/, 'emotiuser,date');
     
      $(function() {
        var button = $('.sceditor-button-emotiuser div')[0];
        if (button) {
          $(button).append(_userdata.avatar.replace(/<img/, '<img style="height:16px;width:16px;"'));
          button.style.textIndent = '0px';
        }
      });
    }
  });
}());

Once you submit the script you should be good and ready to use EmotiUser ! Go to post a new message and click your avatar which should be displayed in the editor toolbar to start inserting some EmotiUser icons !

Modifications

If you want to make modifications to the script please read on.

These are the three settings that are available for modifications in the script :

default_icon : This contains the image URL of the default avatar to be used if the specified user is not available. You can change this to the default icon you want displayed. By default it is : https://2img.net/i/fa/invision/pp-blank-thumb-38px.png

cacheTime : When parsed the avatar of the user is retrieved via AJAX, so in an attempt to speed up load times the avatar is cached for 1 hour. ( 1*60*60*1000 ) Modify this value if you want the cache time to be longer or shorter.

tagType : Takes a number that specifies the type of tag to be used for the EmotiUser icons. By default it's set to 0 which means it's using a BBCode table. If you want to use HTML change this value to 1.


If you have any questions or comments feel free to leave them below. Have fun being an emoticon !

Notice

Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author.

It this how it should work, the avatar does not appear until the page finishes loading?

Also I notice when you change your avatar, the avatars in posts are not changing and not showing the avatars.

SLGray wrote:It this how it should work, the avatar does not appear until the page finishes loading?

It may take a few seconds for the avatars to load since it has to send a request for each user. However, once a user has been loaded their avatar will be cached for 1 hour, so it should load faster once the avatar is cached.

SLGray wrote:Also I notice when you change your avatar, the avatars in posts are not changing and not showing the avatars.

The avatar may not be changing due to it being cached. You can clear the cache or set the cacheTime variable to 1000 to manually purge the cache. The avatars are not appearing at all, though ?

I changed my avatar to test it, but now the avatar is not appearing at all.

I removed the code.

http://fmthemes.forumotion.com/

Do you want me to re-install it?

Hmm.. yeah try it again to see if the problem happens again. I actually made a quick test of it to see.

It has been re-installed.

It appeared to be running okay on my end. The only thing I can assume is that it may have been a caching error. I'm not 100%, so I'll do some more testing on my test forum. Thanks for testing it though.

You're welcome.

I admit that is a pretty cool feature.

I sometimes cant help but wonder, where you get these awesome ideas for features from.

brandon_g wrote:I admit that is a pretty cool feature.

I sometimes cant help but wonder, where you get these awesome ideas for features from.

Yeah, it's a neat little plugin. I can see people creating new accounts just for a new emotiuser.

I pull them out of my magic hat.