Custom Avatar Mod by -SyN- For Standalone Ajax chat Users

[ClubSyNXTremeTV]

Attached in this post.

Copied from the Readme:

Ajax chat Avatar Mod by ImmortaL-SyN-

http://clubsyn-x-treme.com

So you have a Stand Alone Version of the Ajax Chat software and you are sick and tired of hearing that you cannot have avatars in your chat unless you have it intergrated with your forums, well guess what, THAT's PURE BULLSHIT! :-)

And I sincerely mean that!

Anyway lest get started shall we?

First extract this package in your chats root directory.  thats the main folder with the index.php inside.

now you should two additional files, and a new directory inside of the img director with a guest.png file.

-avatar-upload.html

-avatar-upload.php

-img/avatars

-img/avatars/guest.png

*Only .png files are accepted. change to whatever you like in the avatar-upload.php

now that we have eveything in place, there are two file edits you will need to make.

in the js/chat.js file, look for this block of code:

addMessageToChatList: function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip) {

        // Prevent adding the same message twice:

        if(this.getMessageNode(messageID)) {

            return;

        }       

        if(!this.onNewMessage(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip)) {

            return;

        }

        this.DOMbufferRowClass = this.DOMbufferRowClass == 'rowEven' ? 'rowOdd' : 'rowEven';

        var rowClass = this.DOMbufferRowClass;

        var userClass = this.getRoleClass(userRole);

        var colon;

        if(messageText.indexOf('/action') == 0 || messageText.indexOf('/me') == 0 || messageText.indexOf('/privaction') == 0) {

            userClass += ' action';

            colon = ' ';

        } else {

            colon = ': ';

        }

        var dateTime = this.settings['dateFormat'] ? ''

                    + this.formatDate(this.settings['dateFormat'], dateObject) + ' ' : '';

        var divNode = document.createElement ('div');

        divNode.setAttribute ('id', this.getMessageDocumentID(messageID));

        divNode.setAttribute ('class', rowClass);

        divNode.innerHTML = this.getDeletionLink(messageID, userID, userRole, channelID) 

                + dateTime  

                + '  <span class="'

                + userClass

                + '"'

                + this.getChatListUserNameTitle(userID, userName, userRole, ip)

                + ' dir="'

                + this.baseDirection

                + '" onclick="ajaxChat.insertText(\'[i]\'+this.firstChild.nodeValue+\'[/i], \');">'

                + userName

                + '</span>'

                + colon

                + this.replaceText(messageText)

        this.dom['chatList'].appendChild (divNode);

        this.DOMbuffer = "";

    },

and replace it with this:

addMessageToChatList: function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip) {

        // Prevent adding the same message twice:

        if(this.getMessageNode(messageID)) {

            return;

        }       

        if(!this.onNewMessage(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip)) {

            return;

        }

        this.DOMbufferRowClass = this.DOMbufferRowClass == 'rowEven' ? 'rowOdd' : 'rowEven';

        var rowClass = this.DOMbufferRowClass;

        var userClass = this.getRoleClass(userRole);

        var colon;

        if(messageText.indexOf('/action') == 0 || messageText.indexOf('/me') == 0 || messageText.indexOf('/privaction') == 0) {

            userClass += ' action';

            colon = ' ';

        } else {

            colon = ': ';

        }

                        

        if (userRole == 0){

                     var avatar = '<img src="img/avatars/guest.png" width="40px" height="40px" />';

                     } else {

                     var avatar = '<img src="img/avatars/'

                     + userName

                     + '.png" width="40px" height="40px" />';

                     }

        var dateTime = this.settings['dateFormat'] ? ''

                    + this.formatDate(this.settings['dateFormat'], dateObject) + ' ' : '';

        var divNode = document.createElement ('div');

        divNode.setAttribute ('id', this.getMessageDocumentID(messageID));

        divNode.setAttribute ('class', rowClass);

        divNode.innerHTML = this.getDeletionLink(messageID, userID, userRole, channelID)

                + avatar  

                + dateTime  

                + '  <span class="'

                + userClass

                + '"'

                + this.getChatListUserNameTitle(userID, userName, userRole, ip)

                + ' dir="'

                + this.baseDirection

                + '" onclick="ajaxChat.insertText(\'[i]\'+this.firstChild.nodeValue+\'[/i], \');">'

                + userName

                + '</span>'

                + colon

                + this.replaceText(messageText)

        this.dom['chatList'].appendChild (divNode);

        this.DOMbuffer = "";

    },

Save and upload.

Now go to your lib/template/loggedin.html file  and look for:

<div id="submitButtonContainer"><br/><br/>

<span id="messageLengthCounter">0/[MESSAGE_TEXT_MAX_LENGTH/]</span>

<input type="button" id="submitButton" value="[LANG]messageSubmit[/LANG]" onclick="ajaxChat.sendMessage();"/>

</div>

and replace with:

<div id="submitButtonContainer"><br/><br/>

<span id="messageLengthCounter">0/[MESSAGE_TEXT_MAX_LENGTH/]</span>

<input type="button" id="submitButton" value="[LANG]messageSubmit[/LANG]" onclick="ajaxChat.sendMessage();"/><br/><br/><center>

  <a href="./ava-upload.html" onclick="javascript:void window.open('./ava-upload.html','1372012826129','width=640,height=150,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=0,top=0');return false;"><b>Avatar Upload</b></a></center>

</div>

END!

Final Notes:

All of your users MUST have their images match their current username. if you change your name and are registered, you will have to upload another image that matches your name in use until i come up with a work around.

the style of everything can be edited to match your layout.

Hope you like, Enjoy!

-SyN-

http://clubsyn-x-treme.com 

[ClubSyNXTremeTV]

Sorry one other thing, I accidentally named the folder avatar, it should be avatars.

[Aji Nalo]

Any idea how to make it work on version 0.8.6 ? It does not show the avatar...

[ClubSyNXTremeTV]

it is for 0.8.6.
Apparently you didnt install it correctly. Did you make the proper file edits?

[peterc...@gmail.com]

I also have standalone 0.8.6. The above tekst you mention does not totally corresponding with the text in my chat.js. Some of the lines are different. Maybe that's the problem why it is not working? This is what I have (after fresh install):

addMessageToChatList: function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip) {
  // Prevent adding the same message twice:
  if(this.getMessageNode(messageID)) {
   return;
  }  
  if(!this.onNewMessage(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip)) {
   return;
  }
  this.DOMbufferRowClass = this.DOMbufferRowClass == 'rowEven' ? 'rowOdd' : 'rowEven';

  this.DOMbuffer = this.DOMbuffer +
   this.getChatListMessageString(

    dateObject, userID, userName, userRole, messageID, messageText, channelID, ip

   );
  if(!this.DOMbuffering){
    this.updateDOM('chatList', this.DOMbuffer)
    this.DOMbuffer = "";
   }
 },

Op zaterdag 23 november 2013 22:28:25 UTC+1 schreef ClubSyNXTremeTV:

[ClubSyNXTremeTV]

And you got your ajax chat package from here?

http://frug.github.io/AJAX-Chat/

If so then thats weird for everyone else but you have an issue with making the proper edits...

[peterc...@gmail.com]

Yep, latest stable version, just downloaded it again (clicked on the link you gave me, just to make sure) and in chat.js the mentioned text is exactly the same as mine. Regarding making the proper edits, i have no clue what to change to make it work with my version.

Op woensdag 27 november 2013 23:27:32 UTC+1 schreef ClubSyNXTremeTV:

[ClubSyNXTremeTV]

I think the chat recieved a minor update none of us was aware of because in my demo chat for the public with my admin script, I had the same issue as you.

Anyway I figured it out, here is what you need to do:

Look for:

var dateTime = this.settings['dateFormat'] ? '<span class="dateTime">'
                        + this.formatDate(this.settings['dateFormat'], dateObject) + '</span> ' : '';
        return    '<div id="'
                + this.getMessageDocumentID(messageID)
                + '" class="'
                + rowClass
                + '">'
                + this.getDeletionLink(messageID, userID, userRole, channelID)

                + dateTime
                + '<span class="'
                + userClass
                + '"'
                + this.getChatListUserNameTitle(userID, userName, userRole, ip)
                + ' dir="'
                + this.

baseDirection
                + '" onclick="ajaxChat.insertText(this.firstChild.nodeValue);">'

                + userName
                + '</span>'
                + colon
                + this.replaceText(messageText)

                + '</div>';
    },

Replace with:

                    if (userRole == 0){
                         var avatar = '<img src="img/avatars/guest.png" width="40px" height="40px" />';
                         }else{
                         var avatar = '<img src="img/avatars/'
                         + userName
                         + '.png" width="40px" height="40px" />';
                         }

        var dateTime = this.settings['dateFormat'] ? '<span class="dateTime">'
                        + this.formatDate(this.settings['dateFormat'], dateObject) + '</span> ' : '';
        return    '<div id="'
                + this.getMessageDocumentID(messageID)
                + '" class="'
                + rowClass
                + '">'
                + this.getDeletionLink(messageID, userID, userRole, channelID)

                + avatar
                + dateTime
                + '<span class="'
                + userClass
                + '"'
                + this.getChatListUserNameTitle(userID, userName, userRole, ip)
                + ' dir="'
                + this.

baseDirection
                + '" onclick="ajaxChat.insertText(this.firstChild.nodeValue);">'

                + userName
                + '</span>'
                + colon
                + this.replaceText(messageText)

                + '</div>';
    },

[geneviv...@gmail.com]

Will this work with the latest version? Also if i could make a request, I am using ajaxchat for an 18+ adult audience and would like avatars linked rather than hosted or uploaded to my server to prevent any abuse.

thanks in advance!