[Tutorial] Avatar e edição de mensagens no ChatBox!

Nome do Arquivo: [Tutorial] Avatar e edição de mensagens no ChatBox!
Autor: JScript
Funcionalidade: Todas as versões
Categoria: Recursos de Outros Autores

Olá pessoal!

Este tutorial é bem simples, basta adicionar o código com investimento apenas no índice e... pronto!

Com isso nós poderemos ter o avatar nas postagens de forma suave como se fosse nativo, assim como também poderemos editar completamente as mensagens incluindo apagá-las!!!

Legenda:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] -> Edita as mensagens;
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] -> Apaga as mensagens.

Nota: Se você for um usuário com direitos de admin ou moderador, poderá editar todas as mensagens do chat, mas se for um membro comum só poderá editar a própria mensagem.

Código:

Código:


/**************************************************************************
 * Module: AVATARChat + JS_EditMsgChat
 * Description: Need?!
 * Author: Made and Optimizations by JScript - 2014/11/23
 * Version: RC2 (Release candidate 2!)
 ***************************************************************************/
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>';

    frames["frame_chatbox"].onload = function() {
        // Redefine function in chatbox7.js, by JScript Brasil at live dot com!
        var JS_search = {
                //inVar: /">\[(?:(?:2[0-3]|[0-1][0-9]|[0-9]):[0-5][0-9]:[0-5][0-9])\]<\/span> <span class=\\"user-msg\\">(.+)Ιid=(.*?)Α<(.*?)>Ε<img (.*?)Χ<img (.*?)>Τ(.+)Μ(.*?)<\/span>/g,
                //inHtml: /">\[(?:(?:2[0-3]|[0-1][0-9]|[0-9]):[0-5][0-9]:[0-5][0-9])\]<\/span>&nbsp;<span class=\\"user-msg\\">(.+)[\u0399]id=(.*?)[\u0391]<(.*?)>[\u0395]<img (.*?)[\u03a7]<img (.*?)>[\u039c](.*?)<\/span>/g
                inVar: /Ιid=(.*?)Α<(.*?)>Ε<img (.*?)Χ<img (.*?)>Μ(.*?)<\/span>/g,
                inHtml: /[\u0399]id=(.*?)[\u0391]<(.*?)>[\u0395]<img (.*?)[\u03a7]<img (.*?)>[\u039c](.*?)<\/span>/g
            },
            // JS_replace = '">[$6]$1<span class=\"id\" id=$2><span class=\"js-avatar\"><$3></span><span class=\"editor\"><img onclick=\"editor(this, 1)\" $4<img onclick=\"editor(this, 2)\" $5></span><span class=\"text\">$7</span>',
            JS_replace = '<span class=\"id\" id=$1><span class=\"js-avatar\"><$2></span><span class=\"editor\"><img onclick=\"editor(this, 1)\" $3<img onclick=\"editor(this, 2)\" $4></span><span class=\"text\">$5</span>',
            oIframe = (document.getElementById("frame_chatbox").contentWindow || document.getElementById("frame_chatbox").contentDocument),
            script = oIframe.document.createElement("script"),
            memDiv = oIframe.document.createElement('div');

        script.type = "text/javascript";
        script.innerHTML =
            'USERNAME = parent._userdata.username;' +
            'SUPERMOD = parent._userdata.user_level;' +
            'AVATAR = parent._userdata.avatar.replace(\'<img src="\', "[img]").replace(\'" alt="" />\', "[/img]");' +
            'JS_search = ' + JS_search.inVar + ';' +
            'JS_replace = \'' + JS_replace + '\';' +
            'function submitmsg(params) {' +
            '   if (document.post.message.value.length < 4 && SUPERMOD !== 1) return false;' +
            '   if (document.post.message.value.indexOf("/") !== 0) {' +
            '      var date = new Date();' +
            '       var UID = Math.ceil(date.getDate() + date.getHours() + Math.random() * Math.pow(10, 10) + date.getMinutes() + date.getSeconds() + date.getMilliseconds());' +
            '       if (UID.length < 10) {' +
            '         UID + "" + (10 - UID.length);' +
            '       }' +
            //'      var time = new Date().toLocaleTimeString();' +
            //'      document.post.message.value = \'Ιid="\' + UID + \'"Α\' + AVATAR + "Ε[img]http://goo.gl/brvCui[/img]Χ[img]http://goo.gl/k8FZx5[/img]Τ" + time + "Μ" + document.post.message.value;' +
            '      document.post.message.value = \'Ιid="\' + UID + \'"Α\' + AVATAR + "Ε[img]http://goo.gl/brvCui[/img]Χ[img]http://goo.gl/k8FZx5[/img]Μ" + document.post.message.value;' +
            '    }' +
            '   document.post.sent.value = document.post.message.value;' +
            '   document.post.message.value = "";' +
            '   document.post.message.focus();' +
            '   ajax_submit_chatbox(params);' +
            '   return false' +
            '}' +
            'function copy_user_name(user_name) {' +
            '   if (document.post.message) {' +
            '      document.post.message.focus();' +
            '      document.post.message.value += ((user_name.indexOf("@") == 0) ? "" : "@") + user_name + " -> ";' +
            '   }' +
            '    return false' +
            '}' +
            'function ajax_submit_chatbox(params, editor) {' +
            '   number_of_refresh = 0;' +
            '   if (params == "" || params == undefined) {' +
            '      params = "?achives=0"' +
            '   }' +
            '   if (editor == "" || editor == undefined) {' +
            '      var msg_sent = document.post.sent.value;' +
            '   } else {' +
            '      var msg_sent = editor;' +
            '   }' +
            '   var data = "&mode=send";' +
            '   data += "&sent=" + encodeURIComponent(msg_sent);' +
            '   data += "&sbold=" + document.post.sbold.value;' +
            '   data += "&sitalic=" + document.post.sitalic.value;' +
            '   data += "&sunderline=" + document.post.sunderline.value;' +
            '   data += "&sstrike=" + document.post.sstrike.value;' +
            '   data += "&scolor=" + document.post.scolor.value;' +
            '   if ((msg_sent.indexOf("/away") == 0) || (msg_sent.indexOf("/abs") == 0)) {' +
            '      document.getElementById("refresh_auto").checked = false' +
            '   }' +
            '   if (document.post.sent.value == "/banlist") {' +
            '      window.open("/chatbox/chatbox_banlist.forum" + params, "banlist", "toolbar=no,menubar=no,personalbar=no,width=450,height=300,scrollbars=yes,resizable=yes");' +
            '      return false' +
            '   }' +
            '   $.ajax({' +
            '      url: "/chatbox/chatbox_actions.forum" + params,' +
            '      type: "post",' +
            '      data: data,' +
            '      dataType: "script",' +
            '      success: function(response, status, xhr) {' +
            '         if (xhr.status == 200) {' +
            //'            if (typeof (chatbox_messages) !== "undefined") {' +
            '               chatbox_messages = chatbox_messages.replace(JS_search, JS_replace);' +
            '                document.getElementById("memdiv").innerHTML = chatbox_messages;' +
            '                  hackMsg();' +
            '               document.getElementById("chatbox").innerHTML = document.getElementById("memdiv").innerHTML;' +
            '               /*$("#chatbox").html(chatbox_messages) [0].scrollTop = $("#chatbox").prop("scrollHeight");*/' +
            '               document.getElementById("chatbox").scrollTop = 999999;' +
            //'            }' +
            '            if (typeof (chatbox_memberlist) !== "undefined") {' +
            '               document.getElementById("chatbox_members").innerHTML = chatbox_memberlist;' +
            '               /*$("#chatbox_members").html(chatbox_memberlist);*/' +
            '            }' +
            '         }' +
            '      },' +
            '   })' +
            '}' +
            'function ajax_refresh_chatbox(params, force) {' +
            '   if (params == "" || params == undefined) {' +
            '      params = "?achives=0"' +
            '   }' +
            '   $.ajax({' +
            '      url: "/chatbox/chatbox_actions.forum" + params + "&mode=refresh",' +
            '      type: "get",' +
            '      dataType: "script",' +
            '      success: function(response, status, xhr) {' +
            '         if (xhr.status == 200) {' + // || force) {' + <- Fail!
            //'               if ($("#chatbox").length) {' +
            '            if (typeof (chatbox_messages) !== "undefined") {' +
            '               chatbox_messages = chatbox_messages.replace(JS_search, JS_replace);' +
            '                document.getElementById("memdiv").innerHTML = chatbox_messages;' +
            '                  hackMsg();' +
            '               document.getElementById("chatbox").innerHTML = document.getElementById("memdiv").innerHTML;' +
            '               document.getElementById("chatbox").scrollTop = document.getElementById("chatbox").scrollHeight + document.getElementById("chatbox").offsetHeight;' +
            '               document.getElementById("chatbox").scrollTop = 999999;' +
            '               }' +
            //'               if (document.getElementById("chatbox_members").innerHTML != null) document.getElementById("chatbox_members").innerHTML = chatbox_memberlist;' +
            '            if (typeof (chatbox_memberlist) !== "undefined") {' +
            '               document.getElementById("chatbox_members").innerHTML = chatbox_memberlist;' +
            '               /*$("#chatbox_members").html(chatbox_memberlist);*/' +
            '            }' +
            '         }' +
            '      },' +
            '   })' +
            '}' +
            'function hackMsg() {' +
            '   var oTarget = jQuery("#memdiv > p"),' +
            '      iLen = oTarget.length,' +
            '      index = 0;' +
            '   for (; index < iLen; index++) {' +
            '      var oThis = jQuery(oTarget[index]),' +
            '         sUserName = oThis.find(".user > a").text(),' +
            '         ID = oThis.find("span.id");' +
            '      if (ID.length == 0) {' +
            '         ID = oThis.find(".msg:last").text();' +
            // XORcipher -> '         ID = XORcipher(oThis.find(".msg").text());' +
            '         var del = ID.match(/^\\/remove[\\u0399](.*?)$/);' +
            // XORcipher -> '         var del = ID.match(/^\\/removeΙ(.*?)$/);' +
            '         if (del !== null) {' +
            '            var oMsg = oThis.parent().find("#" + del[1]).closest("p");' +
            '            if (oMsg.length) {' +
            //'               if (oMsg.find(".user > a").text() == sUserName || SUPERMOD > 0) {' +
            '                  oMsg.remove();' +
            //'               }' +
            '            }' +
            '         }' +
            '           var edit = ID.match(/^\\/edit[\\u0399]([0-9]+)[\\u039c](.*?)$/);' +
            // XORcipher -> '              var edit = ID.match(/^\\/editΙ([0-9]+)Μ(.*?)$/);' +
            '           if (edit !== null) {' +
            '            var oMsg = oThis.parent().find("#" + edit[1]);' +
            '            if (oMsg.length) {' +
            //'               if (oMsg.closest("p").find(".user > a").text() == sUserName || SUPERMOD > 0) {' +
            '                  oMsg.find("span.text").text(edit[2]);' +
            //'               }' +
            '            }' +
            '              }' +
            '              /*var nudge = ID.match(/^\\/nudge[\\u0399]([0-9]+)[\\u039d](.*?)$/);' +
            '              if (nudge !== null) {' +
            '            var oMsg = oThis.parent().find("#" + nudge[1]);' +
            '            if (oMsg.length) {' +
            '               if (nudge[2] == USERNAME) {' +
            '                  // Developing!;' +
            '               }' +
            '            }' +
            '           }*/' +
            '         oThis.remove();' +
            '      } else {' +
            '         if (sUserName !== USERNAME && SUPERMOD == 0) {' +
            '            ID.find(".editor").remove();' +
            '         }' +
            '      }' +
            '   }' +
            '}' +
            'function editor(oThis, num) {' +
            '   if (num == 1 && iConfirm("Tem certeza de que deseja remover esta mensagem?\\n\\n" + jQuery(oThis).closest(".id").text() ) == 1) {' +
            '      ajax_submit_chatbox("?achives=1", "/removeΙ" + jQuery(oThis).closest(".id").attr("id"));' +
            '      jQuery(oThis).closest("p").remove();' +
            '   } else if (num == 2) {' +
            '      var result = prompt("Editando a frase:", jQuery(oThis).closest(".id").text());' +
            '      if (result != null) {' +
            '         ajax_submit_chatbox("?achives=1", "/editΙ" + jQuery(oThis).closest(".id").attr("id") + "Μ" + result);' +
            '         jQuery(oThis).closest(".id span.text").text(result);' +
            '      }' +
            '   /*} else if (num == 3) {' +
            '      ajax_submit_chatbox("?achives=1", XORcipher("/nudgeΙ" + jQuery(oThis).closest(".id").attr("id") + "Ν" + jQuery(oThis).closest("p").find(".user > a").text()));*/' +
            '   }' +
            '}' +
            /*'function XORcipher(sText) {' +
         '   var key = 2,' +
         '      result = "",' +
         '      len = sText.length,' +
         '      i = 0;' +
         '   for (; i < len; i++) {' +
         '      result += String.fromCharCode(key ^ sText.charCodeAt(i));' +
         '   }' +
         '   return result;' +
         '}' +*/
            'function iConfirm(text) {' +
            '   var iChoice = -1;' +
            '   if (confirm(text) == true) {' +
            '      iChoice = 1;' +
            '   } else {' +
            '      iChoice = 0;' +
            '   }' +
            '   return iChoice;' +
            '}';
        oIframe.document.getElementsByTagName("head")[0].appendChild(script);

        var style = oIframe.document.createElement("style");
      style.type = "text/css";
        style.innerHTML =
            '#chatbox p {' +
            '   background: none repeat scroll 0 0 #fff;' +
            '   border-bottom: 1px solid #e3e3e3;' +
            '   line-height: 1.3em;' +
            '   padding: 5px;' +
            '}' +
            '#chatbox span[title] {' +
            '   color: #8f8f8f !important;' +
            '   float: right !important;' +
            '}' +
            '#chatbox .user:not(:empty) {' +
            '   font-weight: 700;' +
            '   margin-left: 36px !important;' +
            '}' +
            '#chatbox .id {' +
            '   display: block;' +
            '   margin-top: 3px;' +
            '}' +
            '#chatbox .js-avatar img {' +
            '   background: none repeat scroll 0 0 #fff;' +
            '   border: 1px solid #ddd;' +
            '   float: left;' +
            '   height: 30px;' +
            '   margin-right: 5px;' +
            '   margin-top: -19px;' +
            '   max-width: 30px;' +
            '   padding: 1px;' +
            '   vertical-align: middle;' +
            '   width: 30px;' +
            '}' +
            '#chatbox .editor img {' +
            '   cursor: pointer;' +
            '   float: right;' +
            '   padding-left: 4px;' +
            '}' +
            '#chatbox {' +
            '   display: none;' +
            '}';
        oIframe.document.getElementsByTagName("head")[0].appendChild(style);

        var forceConnect = setInterval(function() {
            if (oIframe.document.getElementById("chatbox") !== null) {
                clearInterval(forceConnect);
                memDiv.id = 'memdiv';
                oIframe.document.getElementsByTagName('body')[0].appendChild(memDiv);
                oIframe.document.getElementById("memdiv").style.display = 'none';
                oIframe.document.getElementById("memdiv").innerHTML = oIframe.document.getElementById("chatbox").innerHTML.replace(JS_search.inHtml, JS_replace);

                oIframe.hackMsg();

                oIframe.document.getElementById("chatbox").innerHTML = oIframe.document.getElementById("memdiv").innerHTML;
                if (oIframe.document.getElementById('chatbox_option_disco').style.display == 'none') {
                    oIframe.CB_disconnect();
                }
                oIframe.document.getElementById("chatbox_option_with_archives").style.display = 'none';
                oIframe.document.getElementById("chatbox_option_without_archives").style.display = 'none';
                oIframe.document.getElementById("chatbox").style.display = 'block';
            }
        }, 250);
    };
}


CSS:

Código:


#chatbox {
  display: none;
}


Resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

E claro, funciona em todas as versões!!!

---

Isso é só uma prévia do que virá no código que será postado na área VIP aqui da BestSkins...

JS

Bem legal JS, curtia muito isto no seu Shoutbox....

Há um tempo atrás tinha visto o seu código de avatar no chat, creio que isso seja um up ne, vou testar aqui.

Obrigado amigo.

Mas esse código não é uma atualização do antigo "Avatar no Chatbox" e sim uma substituição com direito a edição das mensagens!!!

Só não se anime muito com esse código ai pois o que será postado em nossa área VIP dará de 10 x 0 neste, você nem imagina...

Torne-se um membro VIP e terás muito mais do que esse simples código.

JS

JScript escreveu:Obrigado amigo.

Mas esse código não é uma atualização do antigo "Avatar no Chatbox" e sim uma substituição com direito a edição das mensagens!!!

Só não se anime muito com esse código ai pois o que será postado em nossa área VIP dará de 10 x 0 neste, você nem imagina...

Torne-se um membro VIP e terás muito mais do que esse simples código.

JS

Este já esta bem legal, só imagino então o do membro VIP....

Parabéns ae, que sabe mim torno VIP..

JScript sendo JScript.

Perfeito Código.

Obrigado pelos comentários!
Me conforta saber que ainda tem gente com consciência e posta mesmo sabendo que a tag code não está oculta!


Nota: Eu verifiquei uma pequena falha na versão PHPBB3, já fiz a correção e editei a primeira mensagem do tópico com o novo código.


JS

O código é ótimo, perfeito pra moderar o Chat, Obrigado pelo Code.

No entanto aqui não funcionou, deve ser a formatação do Chat, vou criar um tópico sobre. hehehe, Valeu

JScript sendo JScript.

Perfeito Código

Perfeito Código, obrigado por compartilhar

Olá [Tens de ter uma conta e sessão iniciada para poderes visualizar este link],
Forumeiros foi atualizar seus chatbox assim que este código precisa ser atualizado.

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Leia: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

JS

JScript escreveu:[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Leia: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

JS

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] o que devo fazer esse código?

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

O link que postei foi apenas para lhe mostrar que eu já tinha postado sobre a atualização que a Forumeiros fez para o chat box, não é para adicionar nada!
O código que eu postei lá no tópico foi apenas para explicar que agora temos mais facilidade em modificar a estrutura HTMl, só isso.

JS

Olá [Tens de ter uma conta e sessão iniciada para poderes visualizar este link],
É possível adaptar este código para o novo chat?

Dark-Avenger escreveu:Olá [Tens de ter uma conta e sessão iniciada para poderes visualizar este link],
É possível adaptar este código para o novo chat?

Será possivel adaptar o código para o novo ChatBox ? Aguardo resposta
UP

Olá!

Com certeza que sim, só faltam uns ajustes finais para que eu poste o novo código!

JS

[poll]Obrigado, Fico Aguardando![/poll]

Jscript tem mais ou menos uma ideia quando ira lançar esse codigo ?
Tou esperando muito por isso
Obrigado

Ainda não pois o código do chatbox (chatbox8.js) ainda está sofrendo alterações e tenho que esperar estabilizar para dar continuidade, apesar de que já tenho uma versão que funciona...

Em breve,

JS

vejo que o chatbox da bs tem esse codigo, sera que podia passar para nos tambem o codigo ?

Olá,
Eu acho que foi estabilizado o novo chatbox então a única coisa que resta é adaptar o código antigo para o novo código.

Cumprimentos,
Dark-Avenger

Jscript a gente tem esperado mas tão a precisar mesmo desse código vai ser muito útil ...

Test