Recent Tutorials
Who is online?
In total there are 8 users online :: 0 Registered, 0 Hidden and 8 Guests :: 1 Bot

None

[ View the whole list ]


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

EmotiUser - Become your own personal emoticon !

View previous topic View next topic Go down

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

PostAnge Tuteur on Wed 23 Mar 2016, 05:53

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. Cool 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() {
  'EmotiUser - Become your own personal emoticon !';
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/';
 
  window.EmotiUser = {
    default_icon : 'http://illiweb.com/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 ! Good


Modifications


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

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 : http://illiweb.com/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 ! Toothless


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


Last edited by Ange Tuteur on Tue 19 Apr 2016, 18:02; edited 1 time in total
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2172
Points : 4069
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Wed 23 Mar 2016, 14:44

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.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 23 Mar 2016, 15:43

@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 ?
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2172
Points : 4069
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Wed 23 Mar 2016, 15:48

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?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 23 Mar 2016, 15:56

Hmm.. yeah try it again to see if the problem happens again. I actually made a quick test of it to see.
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2172
Points : 4069
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Wed 23 Mar 2016, 15:58

It has been re-installed.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 23 Mar 2016, 16:16

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. Very Happy
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2172
Points : 4069
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Wed 23 Mar 2016, 16:22

You're welcome.
brandon_g

Title :
Gender : Unspecified
Age : 19
Posts : 431
Points : 1328
Reputation : 62
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Tue 05 Apr 2016, 09:02

I admit that is a pretty cool feature. Wink

I sometimes cant help but wonder, where you get these awesome ideas for features from. Razz
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 05 Apr 2016, 14:02

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

I sometimes cant help but wonder, where you get these awesome ideas for features from. Razz
Yeah, it's a neat little plugin. I can see people creating new accounts just for a new emotiuser. tongue

I pull them out of my magic hat. Shifty

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