FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

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

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

EmotiUser - Become your own personal emoticon !

View previous topic View next topic Go down

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.

EmotiUser - Become your own personal emoticon ! Captur16

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() {
  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 ! 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 : 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 ! 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
SLGray
Valued Member
Gender : Male
Age : 51
Posts : 2465
Points : 7106
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray 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
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
SLGray
Valued Member
Gender : Male
Age : 51
Posts : 2465
Points : 7106
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray 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
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
SLGray
Valued Member
Gender : Male
Age : 51
Posts : 2465
Points : 7106
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray Wed 23 Mar 2016, 15:58

It has been re-installed.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
SLGray
Valued Member
Gender : Male
Age : 51
Posts : 2465
Points : 7106
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray Wed 23 Mar 2016, 16:22

You're welcome.
brandon_g
brandon_g

Gender : Unspecified
Age : 26
Posts : 458
Points : 4047
Reputation : 67
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://broadcastingduo.forumotion.com

Postbrandon_g 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
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Sponsored content

PostSponsored content

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