Latest topics
» Star in navbar
by Kisskiss Today at 13:10

» Icons
by Kisskiss Today at 13:07

» Chit Chat Thread
by Samantha Today at 12:58

» Starred Forums
by Milouze14 Today at 12:11

» [GAME] Post a random picture
by  Yesterday at 22:31

» [GAME] What are you doing right now?
by Valoish Yesterday at 17:25

» [GAME] Count to 999 using odd numbers Van-Helsing Edition
by Valoish Yesterday at 17:23

» [GAME] What are you listening to right now?
by Valoish Yesterday at 17:23

» Change the style of tooltips with tooltipster !
by  Yesterday at 12:17

» Flat Browser Buttons
by  Yesterday at 12:15

» #12 Pick a Theme
by SLGray Sat 14 Jan 2017, 20:07

» IconSkouliki
by skouliki Sat 14 Jan 2017, 03:07

» _userdata.usergroup
by STBW Sat 14 Jan 2017, 01:11

» Add more topic title colors
by Samantha Fri 13 Jan 2017, 19:43

» Browsers & Updates
by brandon_g Wed 11 Jan 2017, 10:37

Recent Tutorials
Top posting users this month
Who is online?
In total there are 9 users online :: 0 Registered, 0 Hidden and 9 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 : 4202
Points : 8666
Reputation : 2108
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 : 2242
Points : 4201
Reputation : 263
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 : 4202
Points : 8666
Reputation : 2108
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 : 2242
Points : 4201
Reputation : 263
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 : 4202
Points : 8666
Reputation : 2108
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 : 2242
Points : 4201
Reputation : 263
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 : 4202
Points : 8666
Reputation : 2108
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 : 2242
Points : 4201
Reputation : 263
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 : 435
Points : 1372
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 : 4202
Points : 8666
Reputation : 2108
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