The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

New chat box, a brief analysis!

+11
Carmelo Taylor
smurfavr
FrOsTyXi
Van-Helsing
smejker
Daemon
CovalentBond
Niko
Tonight
Eugeo Igvalt
JScript
15 posters

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

Go down

New chat box, a brief analysis! Empty New chat box, a brief analysis!

Post by JScript 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: https://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
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

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

Done: https://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:
New chat box, a brief analysis! KKrffzk

JS


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

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

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

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

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

http://www.NewbForums.com

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

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

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

Male Posts : 312
Reputation : 80
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

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

Thanks for your feedback!

Soon I will update this code: https://help.forumotion.com/t137064-shoutbox-bug-not-showing-chat#926210
So we can edit the messages individually, like this:
New chat box, a brief analysis! J3VukaR

JS
JScript
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

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

Done: https://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
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript 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: https://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
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by Guest 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.
avatar
Guest
Guest


Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript 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:
New chat box, a brief analysis! GDRgTJu

So long,

JS
JScript
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by Niko 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
Niko
Helper
Helper

Male Posts : 3100
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript 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
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript 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:
New chat box, a brief analysis! T7u90Gr

So long,

JS


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

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by CovalentBond 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
avatar
CovalentBond
New Member

Posts : 10
Reputation : 2
Language : English

http://nostalgia.forumhe.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript 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:
New chat box, a brief analysis! LUdCPFY

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
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

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

JScript, the king of codes... Very good
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript May 8th 2015, 4: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:
New chat box, a brief analysis! Pe7zwrq
New chat box, a brief analysis! UyFSbhu
New chat box, a brief analysis! SsrzQ1N

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, 9:48 pm; edited 2 times in total (Reason for editing : New code!)
JScript
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by smejker May 8th 2015, 11:31 am

Work Perfectly!!!!! New chat box, a brief analysis! 894966748

New chat box, a brief analysis! 1863999599JScript
smejker
smejker
Forumember

Male Posts : 167
Reputation : 4
Language : serbo-croatian/english/macedonian/bulgarian

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript May 8th 2015, 4: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
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

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

@Jscript, I am still having problem with codes.
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript May 9th 2015, 4:19 am

@smejker and @Black-Shadow

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

JS
JScript
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by FrOsTyXi May 9th 2015, 4: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
New chat box, a brief analysis! Aj10

Regards
FrOsTyXi
FrOsTyXi
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

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

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript May 9th 2015, 10:19 am

@FrOsTyXi
First, you need to ask for support to resolve these two errors that are on your forum, see:
New chat box, a brief analysis! LCmfRkq

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
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by Van-Helsing May 9th 2015, 12: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

New chat box, a brief analysis! RVlAcLu

and the chatbox seems refreshing continuesly.


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

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript May 9th 2015, 12: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: https://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
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by Van-Helsing May 9th 2015, 12: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
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript May 9th 2015, 1: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
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by Van-Helsing May 9th 2015, 1: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
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

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

New update: The messages parse has been rewritten!

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

So long,

JS


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

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

http://jscript.forumeiros.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by Van-Helsing May 9th 2015, 11:34 pm

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

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

New chat box, a brief analysis! Empty Re: New chat box, a brief analysis!

Post by JScript May 9th 2015, 11:57 pm

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
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

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

Back to top

- Similar topics

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