[TUTORIAL] ChatBox: Avatar e edição de mensagens!

Este tutorial trás para a visão dos administradores, a capacidade de editar mensagens e excluí-las do chatbox. Se tiver direitos administrativos, poderá controlar todas as mensagens, caso contrário poderá mudar somente a sua.





1º - Aplicação do código javascript:
   As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

   Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
   
               

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

               

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos No índice.

               

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

               

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

2º - Código a ser utilizado:
Em seguida, cole o seguinte código em sua página Javascript:

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>&nbsp;<span class=\"user-msg\">(.+)&Iota;id=(.*?)&Alpha;<(.*?)>&Epsilon;<img (.*?)&Chi;<img (.*?)>&Tau;(.+)&Mu;(.*?)<\/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: /&Iota;id=(.*?)&Alpha;<(.*?)>&Epsilon;<img (.*?)&Chi;<img (.*?)>&Mu;(.*?)<\/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 = \'&Iota;id="\' + UID + \'"&Alpha;\' + AVATAR + "&Epsilon;[img]http://goo.gl/brvCui[/img]&Chi;[img]http://goo.gl/k8FZx5[/img]&Tau;" + time + "&Mu;" + document.post.message.value;' +
                ' document.post.message.value = \'&Iota;id="\' + UID + \'"&Alpha;\' + AVATAR + "&Epsilon;[img]http://goo.gl/brvCui[/img]&Chi;[img]http://goo.gl/k8FZx5[/img]&Mu;" + 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&Iota;(.*?)$/);' +
                ' 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&Iota;([0-9]+)&Mu;(.*?)$/);' +
                '        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&Iota;" + 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&Iota;" + jQuery(oThis).closest(".id").attr("id") + "&Mu;" + result);' +
                ' jQuery(oThis).closest(".id span.text").text(result);' +
                ' }' +
                ' /*} else if (num == 3) {' +
                ' ajax_submit_chatbox("?achives=1", XORcipher("/nudge&Iota;" + jQuery(oThis).closest(".id").attr("id") + "&Nu;" + 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);
        };
    }

Feito isso, basta manter seu chatbox ativado de acordo com as instruções passadas no FAQ: https://ajuda.forumeiros.com/-t9192.htm

• O Javascript funciona no Chatbox?
  O Javascript do fórum não afeta a página /chatbox da maneira que afeta o seu fórum no geral. Queira compreender que para seja funcional, é necessário que o mesmo esteja aplicado exatamente como explicado no tutorial.
  
  
• Resultado:
  
  
  
  

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Avatar e edição de mensagens!