The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

New chat box, a brief analysis!

Page 1 of 4 1, 2, 3, 4  Next

View previous topic View next topic Go down

New chat box, a brief analysis!

Post by JScript on February 5th 2015, 2:17 pm

Hello everybody!

I've been checking how is the current structure of response of this new version of the chatbox and I was surprised with the content that is now in JSON format !!!

That's right, now more professional and with that we have to make sure that the avatar in posts is closer than we think ...

Look beneath the format returned by the function initListening():
Code:

{
    "url": "http:\/\/f36.dnspro.org\/sub\/cb.366bc21",
    "lastModified": "Thu, 05 Feb 2015 12:23:56 GMT",
    "tag": "0"
}

Now see the return of the url http://f36.dnspro.org/sub/cb.366bc21 <- this end I think it's on my forum...
Code:

{
    "channel": "cb.366bc21",
    "text": "init",
    "tag": "0",
    "time": "Thu, 05 Feb 2015 12:23:56 GMT"
}

And finally, the return of the posts through prototype get():
Code:

{
    "connected": true,
    "messages": [{
        "userId": "-10",
        "msg": "Messages cleared by JScript",
        "time": "1423140436",
        "username": "JScript",
        "action": "clear",
        "chat_level": null,
        "user_level": null,
        "date": "05 Feb 2015",
        "datetime": "05:47:16 05\/02\/2015"
    }, {
        "userId": "1",
        "msg": "<span style="color: #222222">Test 01<\/span>",
        "time": "1423140440",
        "username": "JScript",
        "action": "msg",
        "chat_level": "2",
        "user_level": "1",
        "date": "05 Feb 2015",
        "datetime": "05:47:20 05\/02\/2015",
        "user": {
            "color": "#000099",
            "admin": true
        }
    }],
    "users": {
        "1": {
            "online": true,
            "id": "1",
            "username": "JScript",
            "admin": true,
            "userLebel": "1",
            "chatLevel": "2",
            "color": "#000099"
        }
    }
}

Realize that is well structured and that soon we will have the avatar in the messages!
Done: http://help.forumotion.com/t139068-add-your-avatar-into-the-chatbox

Anyone want to comment something?

JS


Last edited by JScript on February 17th 2015, 9:09 am; edited 1 time in total

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on February 5th 2015, 5:18 pm

Done: http://help.forumotion.com/t139068-add-your-avatar-into-the-chatbox

Well, although the new version is still under development by technicians Forumotion, add the member's avatar was much easier than before!

Who want to check, just add the code below with placement only "In the home page":
Code:

/**************************************************************************
 * Module: cb_avatar
 * Description: Add avatar on msg chat!
 * Author: Made and Optimizations by JScript - 2015/02/05
 * Version: RC1 (Release candidate 1!)
 ***************************************************************************/
function insertChatBox(chatbox_id, chatbox_url) {
    return insertChatBoxNew(chatbox_id, chatbox_url);
}

// Redefine function in frm_lang_xx.js, by JScript Brasil at live dot com!
function insertChatBoxNew(chatbox_id, chatbox_url) {

    document.getElementById(chatbox_id).innerHTML = '<iframe src="/chatbox/index.forum?archives=1" id="frame_chatbox" scrolling="no" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>';
    // $('#' + chatbox_id).parent().detach().prependTo('#wrapper');

    frames["frame_chatbox"].onload = function() {
        cb_avatar = _userdata.avatar.replace('<img src="', "[img]").replace('" alt="" />', "[/img]");
        var cb_contents = $("#frame_chatbox").contents();

        cb_contents.find("#submit_button").click(function() {
            var message = cb_contents.find("#message");
            if (message.val().trim().indexOf('/') !== 0) {
                message.val("&Alpha;" + cb_avatar + "&Alpha;" + message.val());
            } else {
                $('#message').focus()
            }
        });

        var oIframe = (document.getElementById("frame_chatbox").contentWindow || document.getElementById("frame_chatbox").contentDocument),
            script = oIframe.document.createElement("script");
        script.type = "text/javascript";
        script.innerHTML =
            'Chatbox.prototype.refresh = function(data) {\n' +
            '   if (data.error) {\n' +
            '      $("body").html(data.error)\n' +
            '   } else {\n' +
            '      if (this.connected) {\n' +
            '         $("#chatbox_option_co").hide();\n' +
            '         $("#chatbox_option_disco, #chatbox_messenger_form, #chatbox_footer").show();\n' +
            '         $(".format-message").each(function() {\n' +
            '            var name = $(this).attr("name");\n' +
            '            var value = my_getcookie("CB_" + name);\n' +
            '            $(this).prop("checked", parseInt(value) ? true : false)\n' +
            '         });\n' +
            '         this.format();\n' +
            '         if (data.lastModified) {\n' +
            '            this.listenParams.lastModified = data.lastModified\n' +
            '         }\n' +
            '         if (data.users) {\n' +
            '            this.users = data.users;\n' +
            '            $(".online-users, .away-users").empty();\n' +
            '            $(".member-title").hide();\n' +
            '            for (var i in this.users) {\n' +
            '               var user = this.users[i];\n' +
            '               var username = "<span style=\'color:" + user.color + "\'>" + (user.admin ? "@ " : "") + "<span class=\'chatbox-username chatbox-user-username\' data-user=\'" + user.id + "\' >" + user.username + "</span></span>";\n' +
            '               var list = user.online ? ".online-users" : ".away-users";\n' +
            '               $(list).append("<li>" + username + "</li>")\n' +
            '            }\n' +
            '            if (!$(".online-users").is(":empty")) {\n' +
            '               $(".member-title.online").show()\n' +
            '            }\n' +
            '            if (!$(".away-users").is(":empty")) {\n' +
            '               $(".member-title.away").show()\n' +
            '            }\n' +
            '         }\n' +
            '      } else {\n' +
            '         $("#chatbox_option_co").show();\n' +
            '         $("#chatbox_option_disco, #chatbox_messenger_form, #chatbox_footer, .member-title").hide();\n' +
            '         $(".online-users, .away-users").empty()\n' +
            '      }\n' +
            '      if (data.messages) {\n' +
            '         var scroll = !this.messages || this.messages.length != data.messages.length;\n' +
            '         this.messages = data.messages;\n' +
            '         $("#chatbox").empty();\n' +
            '         if (this.messages) {\n' +
            '            for (var j = 0; j < this.messages.length; j++) {\n' +
            '               var message = this.messages[j];\n' +
            '               var html = "<p class=\'chatbox_row_" + (j % 2 == 1 ? 2 : 1) + " clearfix\'><span class=\'date-and-time\' title=\'" + message.date + "\'>(" + message.datetime + ")</span>";\n' +
            '               if (message.userId == -10) {\n' +
            '                  html += "<span class=\'msg\'><span style=\'color:" + message.msgColor + "\'><strong> " + message.msg + "</strong></span></span>"\n' +
            '               } else {\n' +
            '                  html += "<span class=\'user-msg\' style=\'display: block;\'><span class=\'cb-avatar\'>" + message.msg.split("&Alpha;")[1] + "</span><span class=\'msg-content\' style=\'display: block; padding: 2px;\'><span class=\'user\' style=\'color:" + message.user.color + "\'><strong> " + (message.user.admin ? "@ " : "") + "<span class=\'chatbox-username chatbox-message-username\' data-user=\'" + message.userId + "\' >" + message.username + "</span>&nbsp;:&nbsp;</strong></span><span class=\'msg\'>" + message.msg.split("&Alpha;")[0] + message.msg.split("&Alpha;")[2] + "</span></span></span>"\n' +
            '               }\n' +
            '               html += "</p>";\n' +
            '               $("#chatbox").append(html)\n' +
            '            }\n' +
            '            if (scroll) {\n' +
            '               $("#chatbox")[0].scrollTop = $("#chatbox").prop("scrollHeight") * 2\n' +
            '            }\n' +
            '         }\n' +
            '      }\n' +
            '   }\n' +
            '};';
        oIframe.document.getElementsByTagName("head")[0].appendChild(script);

        var style = oIframe.document.createElement("style");
        style.type = "text/css";
        style.innerHTML =
            '.date-and-time {\n' +
            '   float: right;\n' +
            '}\n' +
            '.cb-avatar {\n' +
            '   float: left;\n' +
            '   margin-right: 4px;\n' +
            '   background: none repeat scroll 0 0 #fff;\n' +
            '   border: 1px solid #d5d5d5 !important;\n' +
            '   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);\n' +
            '   height: 30px;\n' +
            '   padding: 1px;\n' +
            '   vertical-align: middle;\n' +
            '   width: 30px;\n' +
            '}\n' +
            '.cb-avatar > img {\n' +
            '   height: 30px;\n' +
            '   width: 30px;\n' +
            '}\n' +
            '#chatbox .msg {\n' +
            '   display: block;\n' +
            '   line-height: 1.5em;\n' +
            '   margin-top: 4px;\n' +
            '}\n';
        oIframe.document.getElementsByTagName("head")[0].appendChild(style);
    };
}

Note: The above code only works in the new version of the chat box and if you do not have any other JavaScript code to customize the chat!
Use only for testing since the final code of the chat box may be very different from the current and thus may have problems!


Result:


JS


Last edited by JScript on February 17th 2015, 9:08 am; edited 1 time in total

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by Eugeo Igvalt on February 5th 2015, 5:37 pm

Just tried your code. Seems to work really nice http://prntscr.com/61ej3u

Eugeo Igvalt
Forumember

Male Posts : 287
Reputation : 17
Language : EN, SPA
Location : Puerto Rico

http://www.NewbForums.com

Back to top Go down

Re: New chat box, a brief analysis!

Post by Tonight on February 5th 2015, 5:42 pm

Will you update your chatbox with avatars and message editing tutorial too? Smile

Tonight
Forumember

Male Posts : 241
Reputation : 63
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on February 5th 2015, 5:43 pm

Thanks for your feedback!

Soon I will update this code: http://help.forumotion.com/t137064-shoutbox-bug-not-showing-chat#926210
So we can edit the messages individually, like this:


JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on February 11th 2015, 6:49 pm

Done: http://help.forumotion.com/t139068-add-your-avatar-into-the-chatbox

The errors have been corrected and it seems we can already use the chat box as usual, however, I realized that depending on the amount of messages and computer speed, it takes some time to show all messages on the screen!

This is due to the non-optimization of some functions, the most important is:
Chatbox.prototype.refresh

Where manipulates the DOM within a "for loop" with the function $('#chatbox').append(html)

A brief explanation to avoid this:
Keep DOM access to a minimum

Accessing the DOM in browsers is an expensive thing to do. The DOM is a very complex API and rendering in browsers can take up a lot of time. You can see this when running complex web applications when your computer is already maxed out with other work — changes take longer or get shown half way through and so on.

To make sure that your code is fast and doesn’t slow down the browser to a halt try to keep DOM access to a bare minimum. Instead of constantly creating and applying elements, have a tool function that turns a string into DOM elements and call this function at the end of your generation process to disturb the browser rendering once rather than continually.
Reference: http://www.w3.org/wiki/JavaScript_best_practices#Keep_DOM_access_to_a_minimum

Finally, below is part of the code in Chatbox.prototype.refresh function where it should not manipulate the DOM inside a loop:
Code:

      if (data.messages) {
         var scroll = !this.messages || this.messages.length != data.messages.length;
         this.messages = data.messages;
         $('#chatbox').empty();
         if (this.messages) {
            for (var j = 0; j < this.messages.length; j++) {
               var message = this.messages[j];
               var html = '<p class=\'chatbox_row_' + (j % 2 == 1 ? 2 : 1) + ' clearfix\'>' + '<span class=\'date-and-time\' title=\'' + message.date + '\'>[' + message.datetime + ']</span>';
               if (message.userId == -10) {
                  html += '<span class=\'msg\'>' + '<span style=\'color:' + message.msgColor + '\'>' + '<strong> ' + message.msg + '</strong>' + '</span>' + '</span>'
               } else {
                  html += '<span class=\'user-msg\'>' + '<span class=\'user\' style=\'color:' + message.user.color + '\'>' + '<strong> ' + (message.user.admin ? '@ ' : '') + '<span class=\'chatbox-username chatbox-message-username\'  data-user=\'' + message.userId + '\' >' + message.username + '</span>&nbsp;:&nbsp;' + '</strong>' + '</span>' + '<span class=\'msg\'>' + message.msg + '</span>' + '</span>'
               }
               html += '</p>';
               $('#chatbox').append(html)
            }
            if (scroll) {
               $('#chatbox')[0].scrollTop = $('#chatbox').prop('scrollHeight') * 2
            }
         }
      }

The correct way would be:
Code:

      if (data.messages) {
         var scroll = !this.messages || this.messages.length != data.messages.length;
         this.messages = data.messages;
         $('#chatbox').empty();
         var cb_content = "";
         if (this.messages) {
            for (var j = 0; j < this.messages.length; j++) {
               var message = this.messages[j];
               var html = '<p class=\'chatbox_row_' + (j % 2 == 1 ? 2 : 1) + ' clearfix\'>' + '<span class=\'date-and-time\' title=\'' + message.date + '\'>[' + message.datetime + ']</span>';
               if (message.userId == -10) {
                  html += '<span class=\'msg\'>' + '<span style=\'color:' + message.msgColor + '\'>' + '<strong> ' + message.msg + '</strong>' + '</span>' + '</span>'
               } else {
                  html += '<span class=\'user-msg\'>' + '<span class=\'user\' style=\'color:' + message.user.color + '\'>' + '<strong> ' + (message.user.admin ? '@ ' : '') + '<span class=\'chatbox-username chatbox-message-username\'  data-user=\'' + message.userId + '\' >' + message.username + '</span>&nbsp;:&nbsp;' + '</strong>' + '</span>' + '<span class=\'msg\'>' + message.msg + '</span>' + '</span>'
               }
               html += '</p>';
               cb_content += html;
            }
            $("#chatbox").append(cb_content);
            if (scroll) {
               $('#chatbox')[0].scrollTop = $('#chatbox').prop('scrollHeight') * 2
            }
         }
      }
Thus the speed with which messages are processed locally increases to 80%.


JS


Last edited by JScript on February 21st 2015, 5:20 pm; edited 1 time in total

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on February 21st 2015, 5:17 pm

*New code*

1- How about having the avatar of members in the "Online / Away" user list?
2- And the auto-refresh in the "archive" mode?


Just add the code below with placement "In the home page" only:

Link: http://help.forumotion.com/t138790-new-chat-box-a-brief-analysis#944591

So long,

JS


Last edited by JScript on February 22nd 2015, 2:47 pm; edited 2 times in total

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by Guest on February 21st 2015, 8:40 pm

The only change I'm really wanting for chatboxes is the delay in time that someone is disconnected. It really does happen too soon to those that are trying to multi-task.

Still, I like how the avatars look in the online/away list.

Guest
Guest


Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on February 22nd 2015, 2:46 pm

@Leah7 wrote:The only change I'm really wanting for chatboxes is the delay in time that someone is disconnected. It really does happen too soon to those that are trying to multi-task. (...)
I already have a code that is being tested!


*New code*

1- Avatar of members in the "Online / Away" user list;
2- And the auto-refresh in the "archive" mode.


Code:

/**************************************************************************
 * Module: cb_avatar
 * Description: Add avatar of members in the "Online / Away" user list
 * Author: Made and Optimizations by JScript - 2015/02/17
 * Version: RC1 (Release candidate 1!)
 ***************************************************************************/

// Redefine function!
function insertChatBox(chatbox_id, chatbox_url) {
   return insertChatBoxNew(chatbox_id, chatbox_url);
}
// Redefine function!
function insertChatBoxNew(chatbox_id, chatbox_url) {
   // Put the chat box on top of widgets!
   // $('#' + chatbox_id).parent().detach().prependTo('#wrapper');

   document.getElementById(chatbox_id).innerHTML = '<iframe src="/chatbox/index.forum?archives=1" id="frame_chatbox" scrolling="no" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>';

   $('#frame_chatbox').load(function(){
      var oIframe = (document.getElementById("frame_chatbox").contentWindow || document.getElementById("frame_chatbox").contentDocument),
         script = oIframe.document.createElement("script");

      script.type = "text/javascript";
      script.innerHTML =
         'chatbox.init();\n' +
         'var interval = setInterval(function() {\n' +
         '   chatbox.init();\n' +
         '}, 5000);\n' +
         'Chatbox.prototype.refresh = function(data) {\n' +
         '   if (data.error) {\n' +
         '      $("body").html(data.error)\n' +
         '   } else {\n' +
         /*
         '      if (this.connected) {\n' +// && !this.archives) {\n' +
         '         $("#chatbox_footer").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "visible")\n' +
         '      } else {\n' +
         '         $("#chatbox_footer").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "hidden")\n' +
         '      }\n' +
         */
         '      if (this.connected) {\n' +
         '         $("#chatbox_footer").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "visible")\n' +
         '         \n' +
         '         $("#chatbox_display_archives").show();\n' +
         '         $("#chatbox_option_co").hide();\n' +
         '         $("#chatbox_option_disco, #chatbox_footer").show();\n' +
         '         $(".format-message").each(function() {\n' +
         '            var name = $(this).attr("name");\n' +
         '            var value = my_getcookie("CB_" + name);\n' +
         '            $(this).prop("checked", parseInt(value) ? true : false)\n' +
         '         });\n' +
         '         this.format();\n' +
         '         if (data.lastModified) {\n' +
         '            this.listenParams.lastModified = data.lastModified\n' +
         '         }\n' +
         '      } else {\n' +
         '         $("#chatbox_footer").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "hidden")\n' +
         '         \n' +
         '         $("#chatbox_option_co").show();\n' +
         '         $("#chatbox_option_disco, #chatbox_footer").hide()\n' +
         '         $("#chatbox_display_archives").hide()\n' +
         '      }\n' +
         '      if (data.users) {\n' +
         '         this.users = [];\n' +
         '         $(".online-users, .away-users").empty();\n' +
         '         $(".member-title").hide();\n' +
         '         for (var i in data.users) {\n' +
         '            var user = data.users[i];\n' +
         '            this.users[user.id] = user;\n' +
         //'            var username = "<span style=\'color:" + user.color + "\'>" + (user.admin ? "@ " : "") + "<span class=\'chatbox-username chatbox-user-username\' data-user=\'" + user.id + "\' >" + user.username + "</span></span>";\n' +
         '            var username = "";\n' +
         '            for (var j in data.messages) {\n' +
         '               var message = data.messages[j];\n' +
         '               if (message.userId == user.id) {\n' +
         '                  if (message.user.avatar) {\n' +
         '                     username = "<span class=\'cb-avatar\'><img src=\'" + message.user.avatar + "\' style=\'height: 24px; width: 24px; margin-right: 4px;\'/></span>";\n' +
         '                  }\n' +
         '               }\n' +
         '            }\n' +
         '            username += "<span style=\'color:" + user.color + "\'>" + (user.admin ? "@ " : "") + "<span class=\'chatbox-username chatbox-user-username\' data-user=\'" + user.id + "\' >" + user.username + "</span></span>";\n' +
         '            var list = user.online ? ".online-users" : ".away-users";\n' +
         '            $(list).append("<li>" + username + "</li>")\n' +
         '         }\n' +
         '         if (!$(".online-users").is(":empty")) {\n' +
         '            $(".member-title.online").show()\n' +
         '         }\n' +
         '         if (!$(".away-users").is(":empty")) {\n' +
         '            $(".member-title.away").show()\n' +
         '         }\n' +
         '      }\n' +
         '      if (data.messages) {\n' +
         '         var scroll = !this.messages || this.messages.length != data.messages.length;\n' +
         '         this.messages = data.messages;\n' +
         '         $("#chatbox").empty();\n' +
         '         if (this.messages) {\n' +
         '            var cb_content = "",\n' +
         '               message = "",\n' +
         '               html = "",\n' +
         '               msg = "";\n' +
         '            for (var j = 0, len = this.messages.length; j < len; j++) {\n' +
         '               message = this.messages[j];\n' +
         '               html = "<p class=\'chatbox_row_" + (j % 2 == 1 ? 2 : 1) + " clearfix\'><span class=\'right desc\'><span class=\'date-and-time\' title=\'" + message.date + "\'>(" + message.datetime + ")</span></span>";\n' +
         '               if (message.userId == -10) {\n' +
         '                  html += "<span class=\'msg\'><span style=\'color:" + message.msgColor + "\'><strong> " + message.msg + "</strong></span></span>"\n' +
         '               } else {\n' +
         '                  html +=\n' +
         '                     "<span class=\'user-msg\'>";\n' +
         '                        if (this.avatar) {\n' +
         '                           html += "   <span class=\'cb-avatar\'><img src=\'" + message.user.avatar + "\' /></span>";\n' +
         '                        }\n' +
         '                     html +=\n' +
         '                        "<span class=\'user\' style=\'color:" + message.user.color + "\'>" +\n' +
         '                           "<strong> " + (message.user.admin ? "@ " : "") +\n' +
         '                              "<span class=\'chatbox-username chatbox-message-username\' data-user=\'" + message.userId + "\' >" + message.username + "</span>&nbsp;:&nbsp;" +\n' +
         '                           "</strong>" +\n' +
         '                        "</span>" +\n' +
         '                        "<span class=\'msg\'>" + message.msg + "</span>" +\n' +
         '                     "</span>";\n' +
         '               }\n' +
         '               html += "</p>";\n' +
         '               cb_content += html;\n' +
         '            }\n' +
         '            $("#chatbox").append(cb_content);\n' +
         '            if (scroll) {\n' +
         '               $("#chatbox")[0].scrollTop = $("#chatbox").prop("scrollHeight") * 2\n' +
         '            }\n' +
         '         }\n' +
         '      }\n' +
         '   }\n' +
         '};';
      oIframe.document.getElementsByTagName("head")[0].appendChild(script);
   });
}

The above code has a huge potential in which we can change the whole HTML structure of response messages from the chat box!

Result:


So long,

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by Niko on February 22nd 2015, 3:14 pm

Hello @JScript

Having a quick look at the source-code of the chatbox page, I think that the javascript codes added in Module > Javascript management will never be taken into account, as soon as the codes added there are not loaded/added in the chatbox page

and actually there's no template for the chatbox page Embarassed

Can you confirm this dear @Buttercup?

Niko
Hyperactive

Male Posts : 2298
Reputation : 97
Language : English, French, Italian, Spanish, Latin

https://www.translationscloud.com/?utm_source=forumotion&utm

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on February 22nd 2015, 3:54 pm

Niko! wrote:(...)I think that the javascript codes added in Module > Javascript management will never be taken into account
-> Yes, you are correct!

, as soon as the codes added there are not loaded/added in the chatbox page
-> That is a fact and reflects the first statement!

and actually there's no template for the chatbox page Embarassed
-> True, but what bothers most is the fact that no placement in the chatbox, although there is the "In all the pages" option.

But we will endeavor to make it a reality because every passing day new changes will be made and this option should rather be included!!!

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on February 24th 2015, 2:10 am

-> What do you think if the chat box could be visible to guests?
With the code below this is possible now!


Note: This is not a tutorial and should be only for testing purposes!

Introduction:

Well, the code is very simple and I'll explain below the magic of functioning:
1 - Everything is based on a small change in the founder's profile preferences - visitor messages on profile and notifications - which makes it possible to transform the "Visitor messages" in a true database to store the messages of the chat box!;
2 - For this to be possible, a native function  of the chatbox is supplanted by a modification that will allow "post" in the profile's founder;
3 - Another function is activated when guests access the forum and can thus observe the chat postings in real time;
4 - The update of messages is done every 5 seconds and the last 10 posts are shown!

Initial Configuration:

You need to configure only two items in your profile, see below:
1- Go in the tab [Preferences] and find the option Allow visitor messages on my profile : and select (*) All members
Save this setting!
2- Then go on the tab [Notifications] and find the item The incoming of a profile message and uncheck both options
Save this setting!

Note: The profile of the members must be configured to be visible to guests and should be in advanced mode.
If you have messages on your profile /u1, you must remove them all.

Code:

Below is the code that should be added with placement "In all the pages":
Link: https://www.dropbox.com/s/qaqzcmy1omb77zx/chatbox_edit_8.js?dl=1

Result:


So long,

JS


Last edited by JScript on May 29th 2015, 2:38 am; edited 1 time in total

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by CovalentBond on March 11th 2015, 4:19 pm

I think this is the best chat plugin I've seen so far for PHPBB forums.
Thanks for posting Smile

CovalentBond
New Member

Posts : 10
Reputation : 2
Language : English

http://nostalgia.forumhe.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on March 24th 2015, 5:07 pm

Hello, for those who want to use the chat box with the messages of the "Archives", simply add the code below with placement only "In the home page":
Code:

// Redefine function!
function insertChatBox(chatbox_id, chatbox_url) {
   return insertChatBoxNew(chatbox_id, chatbox_url);
}
// Redefine function!
function insertChatBoxNew(chatbox_id, chatbox_url) {
   document.getElementById(chatbox_id).innerHTML = '<iframe src="/chatbox/index.forum?archives=1" id="frame_chatbox" scrolling="no" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>';
}

$(function() {
   if (_userdata.session_logged_in) {
      $('#frame_chatbox').load(function () {
         chat_archives();
      });
   }
});

function chat_archives() {
   var oIframe = (document.getElementById("frame_chatbox").contentWindow.document || document.getElementById("frame_chatbox").contentDocument),
      script = oIframe.createElement("script"),
      chatbox_script = function () {

      // "For" asynchronous loop, faster and does not lock the browser interface when you have many messages!
      (function ($) {
         $.assyncFor = function (arr, callback) {
            for (var i = 0, len = arr.length; i < len; ++i) {
               var boundCallback = callback.bind(null, i, arr[i]);
               setTimeout(boundCallback, i);
            }
            return this;
         };
      }(jQuery));

      var interval = 0;

      $("#chatbox_option_co, #chatbox_option_disco").bind("click", function () {
         $("#chatbox").empty();
      });

      Chatbox.prototype.refresh = function (data) {
         if (data.error) {
            $("body").html(data.error)
         } else {
            if (this.connected) {
               $("#chatbox_display_archives").show();
               $("#chatbox_option_co").hide();
               $("#chatbox_option_disco, #chatbox_footer").show();
               $("#chatbox_messenger_form").css('display', 'block');
               $("#chatbox_messenger_form").css('visibility', 'visible');
               $(".format-message").each(function () {
                  var name = $(this).attr('name');
                  var value = my_getcookie('CB_' + name);
                  $(this).prop('checked', parseInt(value) ? true : false)
               });
               this.format();
               if (data.lastModified) {
                  this.listenParams.lastModified = data.lastModified
               }
               if (!interval) {
                  interval = setInterval(function () {
                     chatbox.init();
                  }, 5000);
               }
            } else {
               clearInterval(interval);
               interval = 0;
               $("#chatbox_option_co").show();
               $("#chatbox_option_disco, #chatbox_footer").hide();
               $("#chatbox_display_archives").hide();
               $("#chatbox_messenger_form").css('display', 'none');
               $("#chatbox_messenger_form").css('visibility', 'hidden');
            }
            if (data.users) {
               this.users = [];
               $(".online-users, .away-users").empty();
               $(".member-title").hide();
               for (var i in data.users) {
                  var user = data.users[i];
                  this.users[user.id] = user;
                  var username = "<span style='color:" + user.color + "'>" + (user.admin ? "@ " : "") + "<span class='chatbox-username chatbox-user-username' data-user='" + user.id + "' >" + user.username + "</span>" + "</span>";
                  var list = user.online ? '.online-users' : '.away-users';
                  $(list).append('<li>' + username + '</li>')
               }
               if (!$(".online-users").is(':empty')) {
                  $(".member-title.online").show()
               }
               if (!$(".away-users").is(':empty')) {
                  $(".member-title.away").show()
               }
            }
            if (data.messages) {
               var scroll = !this.messages || this.messages.length != data.messages.length;
               this.messages = data.messages;

               if (this.messages) {
                  var oThis = this; // Here we save the current "this" for use inside "For" asynchronous loop!

                  $.assyncFor(oThis.messages, function (index, content) { // The "For" asynchronous loop...
                     // Here checks if there is already a message in the DOM, if already, not need to process the same message!
                     if ($(".shout-" + index).length) {
                        return oThis;
                     }

                     var message = content, //                                       |ClassName index|
                        html = "<p class='chatbox_row_" + (index % 2 == 1 ? 2 : 1) + " clearfix shout-" + index + "'>" + "<span class='date-and-time' title='" + message.date + "'>[" + message.datetime + "]</span>";

                     if (message.userId == -10) {
                        html += "<span class='msg'>" + "<span style='color:" + message.msgColor + "'>" + "<strong> " + message.msg + "</strong>" + "</span>" + "</span>"
                     } else {
                        html += "<span class='user-msg'>";
                        if (oThis.avatar) {
                           html += "   <span class='cb-avatar'><img src='" + message.user.avatar + "' /></span>"
                        }
                        html += "   <span class='user' style='color:" + message.user.color + "'>" + "<strong> " + (message.user.admin ? "@ " : "") + "<span class='chatbox-username chatbox-message-username'  data-user='" + message.userId + "' >" + message.username + "</span>&nbsp;:&nbsp;" + "</strong>" + "</span>" + "<span class='msg'>" + message.msg + "</span>" + "</span>"
                     }
                     html += "</p>";

                     /**
                      * Here the "append" will not make slow the code execution since it is not within a synchronous loop,
                      * but instead in an asynchronous loop that schedules the execution later!
                      */
                     $("#chatbox").append(html);

                     if ((index + 1) == oThis.messages.length) {
                        if (scroll) {
                           $("#chatbox")[0].scrollTop = $("#chatbox").prop("scrollHeight") * 2
                        }
                     }
                  });
               }
            }
         }
      };
      $("#chatbox").empty();
      chatbox.init();
      interval = setInterval(function () {
         chatbox.init();
      }, 5000);
   };

   script.type = "text/javascript";
   script.innerHTML = "(" + chatbox_script.toString() + ")();";
   oIframe.getElementsByTagName("head")[0].appendChild(script);
}

Result:


So long,

JS


Last edited by JScript on March 25th 2015, 10:44 pm; edited 1 time in total (Reason for editing : Fixes in the code!)

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by Daemon on March 27th 2015, 3:00 pm

JScript, the king of codes... Very good

Daemon
New Member

Posts : 15
Reputation : 9
Language : Português

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on May 8th 2015, 5:00 am

Finally support for editing messages on the chat box reached the stage of initial tests by the members!

Follow the steps below:

In your ACP: Modules -> HTML&JAVASCRIPT -> JavaScript codes management -> [Create a new JavaScript]
Title *: <- Whatever you want
Placement : <- In the home page
Javascript Code * : <- Download, open, select, copy and paste the code in this field:

Download: https://www.dropbox.com/s/qaqzcmy1omb77zx/chatbox_edit_8.js?dl=1

Result:




The values of the following variables can be modified:

Translations:
Remove: "Tem certeza de que deseja remover esta mensagem?",
Save: "Salvar",
Cancel: "Cancelar",

Configurations:
Title: "", // Change your chatbox title, default is "" = (locale title!)
Notice: 0, // ligns "joined" and "logged off": 1 = Remove
Prefix: "@", // Change the moderator prefix
autoLogin: 1 // Automatic login: 0 = Disable
Important: Keep all that is bold and change only what is underlined!

Note: If you have other custom code into the chat box, you must remove it or try to reconcile both codes!

JS


Last edited by JScript on May 14th 2015, 10:48 pm; edited 2 times in total (Reason for editing : New code!)

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by smejker on May 8th 2015, 12:31 pm

Work Perfectly!!!!!

JScript

smejker
Forumember

Male Posts : 158
Reputation : 3
Language : serbo-croatian/english/macedonian/bulgarian

http://smejker@yahoo.com

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on May 8th 2015, 5:47 pm

The values of the following variables can be modified:

Translations:
Remove: "Tem certeza de que deseja remover esta mensagem?",
Save: "Salvar",
Cancel: "Cancelar",

Configurations:
Title: "", // Change your chatbox title, default is "" = (locale title!)
Notice: 0, // ligns "joined" and "logged off": 1 = Remove
Prefix: "@", // Change the moderator prefix
autoLogin: 1 // Automatic login: 0 = Disable
Important: Keep all that is bold and change only what is underlined!

So long,

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by Van-Helsing on May 8th 2015, 9:56 pm

@Jscript, I am still having problem with codes.

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on May 9th 2015, 5:19 am

@smejker and @Black-Shadow

Please, download the code again cause I made a small change in it!
Link: http://help.forumotion.com/t138790-new-chat-box-a-brief-analysis#956061

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by FrOsTyXi on May 9th 2015, 5:34 am

@JScript seems to be working great, only one small issue i see. When i goto edit a message in the chatbox there is nothing in the line to edit like here in this image


Regards
FrOsTyXi

FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on May 9th 2015, 11:19 am

@FrOsTyXi
First, you need to ask for support to resolve these two errors that are on your forum, see:


If after solve this error, the problem with my code still exists, then I will check, but I already tell you that in my tests my code is working perfectly!

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by Van-Helsing on May 9th 2015, 1:15 pm

Hello dear all,
@JScript Is there a new update from our previous discussion? Where can I download it?

I am getting again strange messages like the following image and the buttons edit/clear are missing



and the chatbox seems refreshing continuesly.


Last edited by Black-Shadow on May 9th 2015, 2:30 pm; edited 1 time in total

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on May 9th 2015, 1:46 pm

Black-Shadow wrote:Hello dear all,
@JScript Is there a new update from our previous discussion? Where can I download it?
You have to read the whole topic to understand!
It is an update and I posted the link here: http://help.forumotion.com/t138790-new-chat-box-a-brief-analysis#956152

Black-Shadow wrote:I am getting again strange messages like the following image and the buttons edit/clear are missing
and the chatbox seems refreshing continuesly.
You have not updated the code...

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by Van-Helsing on May 9th 2015, 1:49 pm

@JScript I just updated the code but now I have found the following bugs:

-the red/green messages(User connected/Disconnected) appeared again
-the buttons edit/clear are not visible
-the logout link is visible again when the member is connected to the chatbox
-the symbol @ is visible again
-Auto-Login is not working as I have set it Enabled (Value 1)

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on May 9th 2015, 2:22 pm

@Black-Shadow
Do the following: Do not use the code now, wait a new update so that it suits your forum!
In all other forums that I see, the code is working perfectly!

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by Van-Helsing on May 9th 2015, 2:25 pm

Ok @JScript I replaced the code with yesterday's code and I am waiting for update. Do you want to pm you the yesterday's code?

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on May 9th 2015, 10:56 pm

New update: The messages parse has been rewritten!

Download: http://help.forumotion.com/t138790-new-chat-box-a-brief-analysis#956061

So long,

JS


Last edited by JScript on May 12th 2015, 12:40 pm; edited 1 time in total

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by Van-Helsing on May 10th 2015, 12:34 am

Hello dear all,
The new chatbox update is not displaying/keeping the chatbox archived messages all in one place?

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: New chat box, a brief analysis!

Post by JScript on May 10th 2015, 12:57 am

Black-Shadow wrote:Hello dear all,
The new chatbox update is not displaying/keeping the chatbox archived messages all in one place?
What do you mean?! You can post a print?

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Page 1 of 4 1, 2, 3, 4  Next

View previous topic View next topic Back to top


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