Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] Merge followed messages of a member in ChatBox!



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  JScript

avatar
Punbb Rookie
Punbb Rookie


Tutorial: Merge followed messages of a member in ChatBox!

Who ever got upset with a post after another in a ChatBox cast the first stone...

Well, I do not particularly like because it is a very polluted visual...
Thinking about this I developed a code that unifies the messages followed by a the same member, making a very pleasant reading, see the code below.


--> Tutorials, tips and tricks <--
Merge followed messages of a member in ChatBox!



- Javascript
In the [Javascript codes management], add as follows:
Title * : JS_ChatMSGJoin
Placement : [x] In the home page
Code:
[panda=js]/**************************************************************************
 * Module: JS_ChatMSGJoin
 * Description: Join duplicate messages in Chat Box!
 * Author: Made and Optimizations by JScript - 2014/11/02
 * Version: Beta tester only!
 ***************************************************************************/
jQuery(function() {
    try {
        if (jQuery('#frame_chatbox').length) {
            if (jQuery('object#frame_chatbox').length) {
                //  console.log('Replaced by JS_ChatMSGJoin');
                var sHtml = '<iframe src="/chatbox/index.forum?archives=1" id="frame_chatbox" scrolling="yes" width="100%" height="100%" type="text/html" style="border: 0px;" />';
                jQuery('#frame_chatbox').replaceWith(sHtml);
            }
            // jQuery(window).load(function() {
            var ChatIframeExist = setInterval(function() {
                if (document.getElementById("frame_chatbox").contentWindow.document.getElementById('chatbox') !== null) {
                    clearInterval(ChatIframeExist);

                    document.getElementById("frame_chatbox").contentWindow.document.getElementById('chatbox').style.display = 'none';

                    jQuery('#frame_chatbox').contents().find('#chatbox').after('<div id="js-chatbox" increment="10" pageincrement="0" maxpos="325" curpos="188"></div>');
                    // Copy entire CSS style from #chatbox to #js-chatbox id!
                    // Implemented by JScript...
                    var oStyleOrign = document.getElementById("frame_chatbox").contentWindow.document.getElementById('chatbox');
                    var oStyleCopy = document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox');

                    oTarget = document.getElementById("frame_chatbox").contentWindow.getComputedStyle(oStyleOrign, "");
                    for (index = 0; index < oTarget.length; index++) {
                        oStyleCopy.style.setProperty(oTarget[index], oTarget.getPropertyValue(oTarget[index]), null);
                    }

                    document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox').style.display = 'block';
                    document.getElementById("frame_chatbox").contentWindow.refresh_chatbox("?archives=1");

                    var chatbox_updated = 1,
                        chatbox_last_update = 0,
                        oTarget = jQuery('#frame_chatbox').contents().find('#chatbox > p'),
                        iLen = oTarget.length,
                        index = 0;
                    forNext(oTarget, index, iLen);

                    setInterval(function() {
                        try {
                            if (document.getElementById("frame_chatbox").contentWindow.document.getElementById('chatbox_members').innerHTML !== '') {
                        if (!chatbox_last_update) {
                           document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox').style.display = 'block';
                        }
                                chatbox_updated = document.getElementById("frame_chatbox").contentWindow.chatbox_updated;
                                chatbox_last_update = document.getElementById("frame_chatbox").contentWindow.chatbox_last_update;
                                if (chatbox_updated !== chatbox_last_update) {
                                    try {
                                        oTarget = jQuery('#frame_chatbox').contents().find('#chatbox > p');
                                        iLen = oTarget.length;
                                        index = 0;

                                        forNext(oTarget, index, iLen);
                                        document.getElementById("frame_chatbox").contentWindow.chatbox_updated = document.getElementById("frame_chatbox").contentWindow.chatbox_last_update;
                                    } catch (e) {
                                        // console.log(e);
                                    }
                                    // console.log('Changes!');
                                }
                            } else if (chatbox_last_update) {
                        chatbox_last_update = 0;
                        document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox').style.display = 'none';
                     }
                        } catch (err) {
                            // console.log(err)
                        }
                    }, 150);
                }
            }, 80);
            // });
        }
    } catch (err) {
        // console.log(err)
    }
});

function forNext(oTarget, index, iLen) {
    for (; index < iLen;) {
        var oThis = jQuery(oTarget[index]),
            sHref = oThis.find('.user > a').attr('href'),
            oNext = oThis.next();

        if (sHref == undefined) break;

        if (oNext !== undefined) {
            var sHrefP = oNext.find('.user > a').attr('href');

            if (sHrefP == sHref) {
                oThis.find('.msg').append('<div style="border: 1px solid rgb(240, 240, 240);padding: 2px 0;"><span title="">' + oNext.find('span[title]').text() + '</span> * ' + oNext.find('.msg').html() + '</div>');
                oNext.remove();
            } else {
                index++;
            }
        } else {
            break;
        }
    }
    document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox').innerHTML =
        document.getElementById("frame_chatbox").contentWindow.document.getElementById('chatbox').innerHTML;
    document.getElementById("frame_chatbox").contentWindow.document.getElementById('js-chatbox').scrollTop = 999999;
}


- Preview
Without the code:


With the code:



  • Notice
    Works under all versions and the code checks if there is already an "iframe" for ChatBox, if there is not created one!





© PunBB Design


If you have any questions related to this topic create a topic with the following title:
Merge followed messages of a member in ChatBox!

Powered by PunBB
Currently 0 users have thanked JScript for this post:

2
Offline

  Tommy Lee

avatar
Punbb Senior
Punbb Senior
Nice one @Jscript well done! Lovely tutorial I really appreciate this tutorial and ao hope you keep up the good work and post more cool tutorials! Which are very useful in my eyes Very Happy

Powered by PunBB
Currently 0 users have thanked Tommy Lee for this post:

3
Offline

  JScript

avatar
Punbb Rookie
Punbb Rookie
Thank you!

I significantly changed the code, he gained weight a bit because some things are written in pure JavaScript to accelerate the execution of code, jQuery can be smooth and easy, but unfortunately it is somewhat slow...

JS

Powered by PunBB
Currently 0 users have thanked JScript for this post:

4
Offline

  nanako

avatar
Punbb Guru
Punbb Guru
Great script, JScript. Gotta say this, You are such geek. Thank you very much for this, such useful.

Powered by PunBB
Currently 0 users have thanked nanako for this post:

5
Offline

  Shadow

avatar
Administrator
Administrator
[sucesso="Tutorial Accepted"]This tutorial has been reviewed and points are added to the user accordingly[/sucesso]

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum