Ajax Chat Emoticons Container Popup

This will show you how to add a small ox next to your BB codes that allows a popup box for storing more emoticons. I am doing this on a standalone version but it should work on all versions. 

Easy steps first: Put the emoticons in the correct folder for your chat to recognize (/img/emoticons), and make sure that config.js array's have been configured correctly with proper names and whatnot. 

While you're in config.js, you're going to have to create another array which tells the chat where the images are placed. Your options are display under the text area, display in the popup, or display both. But first, we have to make sure we have the container declared for the emoticons to be placed in.

In Config.js.

Find:

// The ID of the emoticons container:

        emoticonsContainer: 'emoticonsContainer',

Add After:

// The ID of the emoticonsPopup container:

        emoticonsContainerPopUp: 'emoticonsContainerPopUp',

Find:

emoticonFiles: new Array(

'Example1.png',
'Example2.jpg',
'Example3.gif'
);

Add After:

// Defines whether the associated emoticon will display (3 will only display outside popup, 2 will always display, 1 will display in the pop up, 0 is hidden):

emoticonDisplay: new Array(
 1,
 2,
 3
),

Now we have to declare the array and allow the CSS to get data from it.

Open chat,js

Find:

this.emoticonFiles                      = config['emoticonFiles'];

Add After:

this.emoticonDisplay            = config['emoticonDisplay'];

Find:

initEmoticons: function() {

  this.DOMbuffer = "";

Add After:

var emoticonDisplayPopUpCount=0;

Find:

this.emoticonCodes[i] = this.encodeSpecialChars(this.emoticonCodes[i]);

Add After:

if(this.emoticonDisplay[i] == 2 || this.emoticonDisplay[i] == 3){
            if(this.dom['emoticonsContainer']) {
                    this.updateDOM(
                        'emoticonsContainer',
                        '
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');">
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                        + '"/>

'
                    );
            }
            }
            if((this.emoticonDisplay[i] == 1 || this.emoticonDisplay[i] == 2) && (this.emoticonDisplay[i]!= 3)){
            emoticonDisplayPopUpCount++;
            if(this.dom['emoticonsContainerPopUp']) {
                    this.updateDOM(
                        'emoticonsContainerPopUp',
                        '
                        + this.scriptLinkEncode(this.emoticonCodes[i])
                        + '\');">
                        + this.dirs['emoticons']
                        + this.emoticonFiles[i]
                        + '" alt="'
                        + this.emoticonCodes[i]
                        + '" title="'
                        + this.emoticonCodes[i]
                       
                         + '" height="'
                        + 25
                        + '" width="'
                        + 25
                       
                        + '" style="padding: 10px"/>'
                    );
            }
        }

^^ What you can see being done here is that it's determining from the array that we set up, where the emoticons should be placed. Either in the container we're going to create, or the page, or nowhere. You can change the display size of the emotes from within here as well. 

Now that everything is declared, we need a place to put all of it, and a button to activate the box we put the emoticons in. 

Open Global.css

Find:

#content #colorCodesContainer {

  position:absolute; left:20px;
  bottom:55px; padding:3px;
  z-index:1;
}

Add After:

#content #emoticonsContainerPopUp {

  position:absolute; left:450px;
 bottom:125px;
 padding:3px;
 z-index:1;
}

Find:

#content #colorCodesContainer a {

  display:block; float:left;
 width:20px;
 height:20px;
}

Add After:

#content #emoticonsContainerPopUp a {

  display:block; float:left;  width:60px; height:30px;
}

That creates the box for which we'll be adding the emoticons to in Chat.js. Now let's make that button!

Open LoggedIn.html

Find:

 id="bbCodeContainer">

Add *At the last spot in before the "/div"*:

 type="button" value="More Smilies" onclick="ajaxChat.showHide('emoticonsContainerPopUp', null);" />

Find:

 id="colorCodesContainer" style="display:none;" dir="ltr">

Add After:

 id="emoticonsContainerPopUp" style="display:none;" dir="ltr">