How to restrict message display

[Mario Ene]

Hi!

Can anyone help me to restrict message displayed in chat window with a 'more' and 'less' button at the end of the message?

When I click 'more' button to expand the all message content in chat window.

When I click 'less' button to collapse the message content in chat window at a few rows.

Thank you in advance for any solution!

[Mario Ene]

Solution:

1. Open file CHAT_ROOT\js\chat.js:

CHANGE addMessageToChatList function:

    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;
        }
     
        if  (messageText.substr(0, 5) === '[img]')
        {
            messageText = '<div style="text-align: center">' + messageText + '</div>';           
        }       
        else
        {       
            if  (messageText.charAt(0) !== '/')
                {
                    if (messageText.length > 500)
                    {           
                        var c = messageText.indexOf(' ',500);
                        var finalText = messageText.substr(0,c)
                                        + '<div id="'+ messageID + '" style="display: none">'
                                        + messageText.substr(c,messageText.length)
                                        + '<input class="more-button" style="font-size: 80%;background-color: yellow;margin-left: 10px" type="button" id="less_'
                                        + messageID
                                        + '"  value="less" title="less" onclick="javascript:hide('+ messageID +');" />'
                                        + '</div>'
                                        + '<input class="more-button" style="font-size: 80%;background-color: yellow;margin-left: 10px" type="button" id="more_'
                                        + messageID
                                        + '" value="more" title="more" onclick="javascript:show('+ messageID +');" />';                                                       
                    }
                    else
                    {
                        var finalText = messageText;
                    }

                    messageText = '<div style="display: inline-block;margin-left;">'
                                  + finalText
                                  + '</div>';

                }
        }
       
        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 = "";
         }
    },

2. Open file CHAT_ROOT\lib\template\loggedIn.html:

INSERT at the end of file:

<script type="text/javascript">
    function show(id){
        document.getElementById(id).

style.display = "inline"
        document.getElementById('more_'+id).style.display = "none"
    }

    function hide(id){
        document.getElementById(id).style.display = "none"
        document.getElementById('more_'+id).style.display = "inline"
    }   


</script>

</html>