RCHAT

Salut tuturor,

De cateva zile am inceput sa lucrez la un proiect:cel mai bun chatbox custom de pe forumGratuit . I-am pus numele RChat(R de la username-ul meu ). Codul se afla in versiunea beta, astfel ca este posibil sa aiba bug-uri.

Previzualizare

---

Daca doriti sa vedeti chat-ul in actiune, intrati pe forumul meu(link-ul se afla la profil).

Instalare

---

Pentru a folosi chat-ul va trebui ca mai intai sa creati un topic cu orice nume si care sa contina acest cod ca mesaj:

Cod:

<div id='chat_sis'><div id='chat_bl'><div id='chat_group'><div id='chat_avatar'><img src='http://i.imgur.com/vwHtfNb.png'/></div><div id='chat_name'>ChatBot</div></div><div id='chat_message'>Bine ati venit in chat. Sunteti rugati sa respectati regulile precizate in regulamentul forumului.</div></div></div>


Puteti modifica "ChatBot", "Bine ati venit in chat. Sunteti rugati sa respectati regulile precizate in regulamentul forumului.", precum si link-ul avatarului.

Dupa aceasta va trebui sa adaugati urmatorul cod CSS:

Cod:

#chat_btn{
position:fixed;
bottom:5px;
right:5px;
background:#055;
opacity:0.8;cursor:pointer;
padding:5px;
border-bottom:2px solid #088;
color:#f2f2f2;
}
#chat_btn:hover{
opacity:1.0;
}
#chat_inner{
opacity:0.0;
display:none;
position:fixed;
right:5px;
bottom:40px;
width:70%;
height:400px;
background:#f2f2f2;
border:2px solid #055;
}
#chat_inner.s{
opacity:0.97;
display:block;
}
#chat_head{
background:#055;
padding:5px;
color:#f2f2f2;
}
#chat_content{
height:340px;
overflow-y:scroll;
}
#chat_form{
width:100%;
position:absolute;
border-top:2px solid #055;
bottom:0px;
}
#chat_form>*{
display:inline-table;
}
#chat_form_input{
color:#055;
background:#f2f2f2;
border:0px;
border-right:2px solid #055;
}
#chat_form_send{
padding:6px;
border-right:2px solid #055;
color:#055;
cursor:pointer;
}
#chat_form_send:hover{
background:#055;
color:#f2f2f2;
}
#chat_content{
width:100%;
}
#chat_content>#chat_bl{
padding:3px;
display:inline-table;
}
#chat_content>#chat_bl>*{
display:inline-table;
}
#chat_content>#chat_bl>#chat_group>#chat_avatar>img{
border-radius:100%;
width:30px;
height:30px;
}
#chat_content>#chat_bl>#chat_group>#chat_avatar{
padding-top:3px;
}
#chat_content>#chat_bl>#chat_group{
background:#098;
color:#f2f2f2;
width:100%;
}
#chat_content>#chat_bl>#chat_message{
background:#055
color:#f2f2f2
position:relative;
padding:9.5px;
display:inline-table;
word-break:break-all;
}
#chat_content>#chat_bl>#chat_group>#chat_name{
position:relative;
top:-9px;
}
#chat_content>#chat_bl>#chat_group>*{
display:inline-table;
}
#chat_smilies>img{
vertical-align:-7px;
}
#chat_smilies{
cursor:pointer;
}
#chat_smi_pop{
position:absolute;
bottom:50px;
left:165px;
background:#f2f2f2;
opacity:0.9;
border:1px solid #098;
width:200px;
text-align:center;
}
#chat_smi_pop_head{
padding:3px;
background:#098;
color:#f2f2f2;
border-bottom:2px solid #055;
}

Si in final, codul javaScript cu plasamentul pe paginile pe care doriti sa apara chat-ul:

Cod:

window.Rchat = {};
Rchat.config = {
    html: "<div id='chat'><div id='chat_btn'>Chatbox</div><div id='chat_inner'><div id='chat_head'>Chatbox</div><div id='chat_content'><center><span>Se incarca...</span></center></div><div id='chat_form'><input type='text' id='chat_form_input' placeholder='Scrie ceva...'></input><div id='chat_form_send'>Trimite</div><div id='chat_btts'><div id='chat_smilies'><img src='https://2img.net/u/3614/12/33/96/smiles/251363279.png'/></div></div></div></div></div>",
    add_html: function() {
        $("body").append(Rchat.config.html);
    },
    sel: "#chat_sis",
    chatting: 1,
    topic: "22",
    delay: 2000,
    sending: 0,
    ct: [],
    form_auth: ""
};
Rchat.init = function() {
    Rchat.config.add_html();
    Rchat.config.toggleSH($("#chat_btn"));
};
Rchat.config.toggleSH = function(elem) {
    elem.click(function(e) {
        $("#chat_inner").toggle().toggleClass("s");
        if ($("#chat_inner").css("display") == "none") {
            localStorage.activc = "0";
        } else {
            localStorage.activc = "1";
        };
        e.preventDefault();
    });
};
Rchat.config.start_chat = function() {
    Rchat.config.chatting = 1;
    Rchat.config.receive();
};
Rchat.config.stop_chat = function() {
    Rchat.config.chatting = 0;
};
Rchat.config.receive = function() {
    if (Rchat.config.chatting) {
        if (localStorage.activc == "1") {
            $.get("/t" + Rchat.config.topic + "-?view=newest", function(data) {
                if ($("#chat_content>center").length) $("#chat_content>center").remove();
                Rchat.config.form_auth = [$(data).find("[name='auth[]']").eq(0).val(), $(data).find("[name='auth[]']").eq(1).val()];
                var m = $(data).find(Rchat.config.sel),
                    len = m.length,
                    i = 0;
                if (len < Rchat.config.ct.length) {
                    Rchat.config.ct = [];
                    $("#chat_content").html("");
                    for (i; i < len; i++) {
                        Rchat.config.ct.push(m.eq(i).html());
                        $("#chat_content").append(m.eq(i).html());
                        $('#chat_content').scrollTop($('#chat_content')[0].scrollHeight);
                    };
                } else {
                    for (i; i < len; i++) {
                        if (m.eq(i).html() != Rchat.config.ct[i] && i < Rchat.config.ct.length) {
                            Rchat.config.ct[i] = m.eq(i).html();
                            $("#chat_content>div").eq(i).html(m.eq(i).html());
                        } else {
                            if (m.eq(i).html() != Rchat.config.ct[i]) {
                                $("#chat_content").append(m.eq(i).html());
                                Rchat.config.ct[i] = m.eq(i).html();
                            }
                        };
                    };
                };
                setTimeout(function() {
                    Rchat.config.receive();
                }, Rchat.config.delay);
            })
        } else {

            setTimeout(function() {
                Rchat.config.receive();
            }, Rchat.config.delay);
        };
    };
};
Rchat.config.comp = function(name, avatar, mess) {
    return "<div id='chat_sis'><div id='chat_bl'><div id='chat_group'><div id='chat_avatar'><img src='" + avatar + "'/></div><div id='chat_name'>" + name + "</div></div><div id='chat_message'>" + mess + "</div></div></div>";
};
Rchat.config.send = function(m) {
    if (!Rchat.config.sending) {
        Rchat.config.sending = 1;
        $.post("/post", {
            t: Rchat.config.topic,
            mode: 'reply',
            post: 'OK',
            message: m,
            auth: Rchat.config.form_auth
        }).always(function() {
            Rchat.config.sending = 0;
        });
    };
};
Rchat.config.init_send = function() {
    $("#chat_form_send").click(function() {
        Rchat.config.send(Rchat.config.comp(_userdata.username, _userdata.avatar.split("src=")[1].split("   ")[0].split(""")[1], $("#chat_form_input").val()));
        $("#chat_form_input").val("");
    });
};

$(function() {
    if (localStorage.activc == undefined) localStorage.activc = "0";
    Rchat.init();
    if (localStorage.activc == "1") $("#chat_btn").click();
    Rchat.config.start_chat();
    Rchat.config.init_send();
});

Va trebui sa cautati urmatoarea linie:

Cod:

topic: "22",

si sa modificati 22 in id-ul topicului creat.

Bug-uri+Idei

---

Codul este in versiunea beta(adica nu a fost optimizat complet si este posibil sa contina si bug-uri). Daca gasiti un bug sau aveti idei despre ce as putea adauga la chat, lasati un mesaj in acest  topic.

Păi, chat-ul nu l-am testat pe forum am întrat pe forumul tău am văzut că seend-ul este vizibil pentru vizitatori ce nu ar trebuii să fie sau să ai o obțiune chat guests, chat members. Chat-ul nu execută și pagina a doua deci nu ai posibilitatea să vezi toate mesajele pe chat, nu apar diferite erori de avertizarea userilor pentru un aspect mai plăcut, după părerea mea! Se poate face un chat și fără să adaugi un text în mesaj .Oricum multă baftă cu această variantă

Ionut, chat-ul e in versiunea beta, deci nu este terminat. Legat de vizitatori, voi adauga o opțiune pentru ascunderea chat-ului sau poate o camera speciala.

părerea mea, e dacă vrei un chat numai pentru administratori, și moderatori recomand acest chat: https://help.forumgratuit.ro/t51780-cum-putem-adauga-un-chat-pentru-staff-ul-forumului

chat-ul nu este vizibil pentru vizitatori, membri, decât atunci când ei obțin un grad prin cerere.